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.
However, I got this error instead.
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?
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.
However, I got this error instead.
This is the minimum code that produced teh error.
Is this an issue with the libraries? Or an issue with how I initialized and used the draw control?