Coding with python: Make geometries editable in Leaflet

Make geometries editable in Leaflet

Leaflet.Editable

Make geometries editable in Leaflet.

This is not a plug and play UI, and will not be. This is a minimal, lightweight, and fully extendable API to control editing of geometries. So you can easily build your own UI with your own needs and choices.

Design keys:

only the core needs
no UI, instead hooks everywhere needed
everything programmatically controllable
MultiPolygon/MultiPolyline support
Polygons' holes support
touch support
tests

Install

You need Leaflet >= 1.0.0, and then include src/Leaflet.Editable.js.

Code

<!DOCTYPE html>
<html>
<head>
    <title>Simple Leaflet Map</title>
    <meta charset="utf-8" />
    <link
            rel="stylesheet"
            href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
    />

    <script
            src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js">
    </script>
    <script
            src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.freedraw/2.0.1/leaflet-freedraw.web.js">
    </script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.js"></script>
</head>
<body>

<div id="mapid"></div>
<style>
    #mapid{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
</style>
<script>
    var map = L.map('mapid', { drawControl: true }).setView([50.100500, 14.395497], 18);

    L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}{r}.{ext}', {
        ext: 'png',
        maxZoom: 18,
        attribution: 'Wikimedia maps | Map data &copy; <a target="_blank" href="https://openstreetmap.org/copyright">OSM contributors</a>'
    }).addTo(this.map);

    var editableLayers = new L.FeatureGroup();
    map.addLayer(editableLayers);

    var MyCustomMarker = L.Icon.extend({
        options: {
            shadowUrl: null,
            iconAnchor: new L.Point(12, 12),
            iconSize: new L.Point(24, 24),
            iconUrl: 'link/to/image.png'
        }
    });

    var options = {
        position: 'topright',
        draw: {
            polyline: {
                shapeOptions: {
                    color: '#f357a1',
                    weight: 10
                }
            },
            polygon: {
                allowIntersection: false, // Restricts shapes to simple polygons
                drawError: {
                    color: '#e1e100', // Color the shape will turn when intersects
                    message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
                },
                shapeOptions: {
                    color: '#bada55'
                }
            },
            circle: false, // Turns off this drawing tool
            rectangle: {
                shapeOptions: {
                    clickable: false
                }
            },
            marker: {
                icon: new MyCustomMarker()
            }
        },
        edit: {
            featureGroup: editableLayers, //REQUIRED!!
            remove: false
        }
    };

    var drawControl = new L.Control.Draw(options);
    map.addControl(drawControl);

    map.on(L.Draw.Event.CREATED, function (e) {
        var type = e.layerType,
            layer = e.layer;

        if (type === 'marker') {
            layer.bindPopup('A popup!');
        }

        editableLayers.addLayer(layer);
    });
</script>
</body>
</html>

Welcome to our Coding with python Page!!! hier you find various code with PHP, Python, AI, Cyber, etc ... Electricity, Energy, Nuclear Power

Sunday, 16 June 2019

Make geometries editable in Leaflet

Make geometries editable in Leaflet

Install

Code

No comments:

Post a Comment

Rank