'TypeError: L.Control.Draw is not a constructor
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);
Solution 1:[1]
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);
Solution 2:[2]
You can get the latest version of leaflet.draw
from the following address
https://cdnjs.com/libraries/leaflet.draw
Version 1.0.4
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
Solution 3:[3]
Hi To add leaflet draw into the Ionic or Angular application need to follow a few steps. Hope you have already installed the leaflet.
Solution 4:[4]
For anyone who uses NPM and TypeScript
(Basically, the problem is that you are missing the Leaflet-Draw library)
Install packages and types
$ npm i -S leaflet
$ npm i -S leaflet-draw
$ npm i -D @types/leaflet
$ npm i -D @types/leaflet-draw
Update your tsconfig.json
{
"compilerOptions": {
...
types: [
"leaflet",
"leaflet-draw",
...
]
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Megapiharb |
Solution 2 | |
Solution 3 | Raj Hirani |
Solution 4 | Gil Epshtain |