Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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);
like image 367
Nishant Avatar asked Aug 13 '16 06:08

Nishant


2 Answers

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);
like image 199
Megapiharb Avatar answered Sep 18 '22 02:09

Megapiharb


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
like image 38
Mahdi Bashirpour Avatar answered Sep 18 '22 02:09

Mahdi Bashirpour