I wanted to draw a polygon in the leaflet map in my ionic2 app, for that I found leaflet-draw pluggin, but I am getting this error TypeError: L.Control.Draw is not a constructor
My code looks this
this.map = L
.map("map")
.setView(this.latLng, 13)
.on("click", this.onMapClicked.bind(this))
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
.addTo(this.map);
this.marker = L
.marker(this.latLng, { draggable: true })
.on("dragend", this.onMarkerPositionChanged.bind(this))
.addTo(this.map);
var drawnItems = new L.FeatureGroup();
this.map.addLayer(drawnItems);
console.log(drawnItems);
var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
});
this.map.addControl(drawControl);
You need add to head html CDN's
<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>
and add to map { drawControl: true }
var map = L.map('mapid', { drawControl: true }).setView([25, 25], 2);
You can get the latest version of leaflet.draw
from the following address
https://cdnjs.com/libraries/leaflet.draw
https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css
https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With