Leaflet / Leaflet.draw

Vector drawing and editing plugin for Leaflet
https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html
MIT License
1.96k stars 992 forks source link

TypeError: Cannot read property 'Feature' of undefined #944

Open zerovirus123 opened 5 years ago

zerovirus123 commented 5 years ago

I created a draw control for the users to draw shapes (markers, line, polygons) with it. This is what the users should be able to draw.

image

However, I got this error instead.

image

This is the minimum code that produced teh error.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin="" />

<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet-src.js"></script>

<script src="https://unpkg.com/esri-leaflet@2.2.4/dist/esri-leaflet.js"
        integrity="sha512-tyPum7h2h36X52O2gz+Pe8z/3l+Y9S1yEUscbVs5r5aEY5dFmP1WWRY/WLLElnFHa+k1JBQZSCDGwEAnm2IxAQ=="
        crossorigin=""></script>

<link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw-src.css" />
<script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw-src.js"></script>

// some basic divs here

<script>
        let disableEditing = false;
        let map = L.map('map', { drawControl: true })
            .setView([42.35, -71.08], 13);

        let imageryLayer = L.esri.basemapLayer("Imagery").addTo(map);
        let imageryLabelLayer = L.esri.basemapLayer("ImageryLabels").addTo(map);

        // Initialise the FeatureGroup to store editable layers
        let editableLayers = new L.FeatureGroup();
        map.addLayer(editableLayers);

        let drawPluginOptions =
        {
            position: 'topright',
            draw: {
                polygon: {
                    allowIntersection: false, //only allow simple polygons
                    drawError: {
                        color: 'e1e100', //color the polygon will turn when it intersects with another
                        message: '<strong>Oh snap!<strong> you can\'t draw that!' 
                    }
                },
                shapeOptions: {
                    color: '#97009c'
                },

                polyline: false,
                circle: false,
                rectangle: false,
                marker: false,
            },
            edit: {
                featureGroup: editableLayers,
                remove: false
            }
        };

        // https://jsfiddle.net/user2314737/324h2d9q/
        // Initialise the draw control and pass it the FeatureGroup of editable layers
        let drawControl = new L.Control.Draw({ edit: {featureGroup: editableLayers}});
        map.addControl(drawControl);

        map.on('draw:created', function (e) {
            let type = e.layerType,
                layer = e.layer;

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

        //icon class
        let LeafIcon = L.Icon.extend({
            options:
            {
                shadowUrl: '/Content/images/leaf-shadow.png',
                iconSize: [38, 95], // size of the icon
                shadowSize: [50, 64], // size of the shadow
                iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
                shadowAnchor: [4, 62],  // the same for the shadow
                popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
            }
        });

        let greenIcon = new LeafIcon({ iconUrl: '/Content/images/leaf-green.png' }),
            redIcon = new LeafIcon({ iconUrl: '/Content/images/leaf-red.png' }),
            orangeIcon = new LeafIcon({ iconUrl: '/Content/images/leaf-orange.png' });

        L.marker([46, -70], { icon: greenIcon }).addTo(map).bindPopup("I am a green leaf.").openPopup();
        L.marker([42, -72], { icon: redIcon }).addTo(map).bindPopup("I am a red leaf.").openPopup();
        L.marker([44, -74], { icon: orangeIcon }).addTo(map).bindPopup("I am an orange leaf.").openPopup();

        let polygon = L.polygon([[46, -70], [42, -72], [44, -74]]).addTo(map);

    </script>

Is this an issue with the libraries? Or an issue with how I initialized and used the draw control?

Woongsik commented 4 years ago

Hi, did you solve the problem ? I am having same problem above !