TypeError: L.Control.Draw is not a constructor

Question

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);

Rusell

Leaflet.draw is a plugin. It's not part of the Leaflet core. Have you followed the installation instructions and have you included the appropriate JavaScript file? – Palpitate

I did follow the installation instruction. But to be able to use it from my typescript code I installed the typings for leaflet-draw and included in my class via the reference path: /// <reference path="../../../typings/globals/leaflet/index.d.ts" />. Is there anything that I am missign here – Rusell

Also when I debugged it from my chrome browser, I saw that L.Control is a function defined in leaflet typescript file, while in leaflet-draw typescript file 'Control' is a name space, inside which Draw is defined, so I think that this piece of code is not referring to currect 'Control' – Rusell

The code you have posted looks fine. Could you show where/how you are importing Leaflet.draw? The error you mentioned looks like a runtime error - not a TypeScript error - right? – Palpitate

I would try to get the Leaflet bits working without TypeScript. Add TypeScript once you have the basics working. – Palpitate

Reference path that I mentioned earlier is where it is getting imported. This I have used in my class from where I pasted the code. Now the namespace 'L' is being used on both the file belonging to Leaflet and Leaflet-draw. This looks to me as a runtime issue and I think it might have to do with compile order. Not sure. – Rusell

@user1791252, Any solution? I'm facing the same issue. It appears the typings for leaflet-draw are not complete. – Reality

4 years later and I'm still running into this. Didn't have the issue until I began using the ts-loader, for some reason. I noticed that if I 'console.log' Leaflet (L) and/or and LD (leaflet-draw) after importing them, the problem is solved. This seems to imply a race condition. I'm wondering if there is asynchronous code run in leaflet-draw but haven't checked into it yet. If so, the problem might be solved by an 'await' – Kazbek

Answer 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);

Alost

Missed this myself! Thanks. I think the problem is that the documentation doesn't specify that you need to import the script, to me it seemed like it was already included in the leaflet.js – Kimmy

Answer 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

Thickhead

Answer 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.

1. npm install leaflet-draw
2. include leaflet.draw.css file in the angular.json file.
3. import leaflet-draw in your angular component.

Acord

Answer 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",
      ...
    ]
}

Espresso

Answer 5

I had this problem in Angular and i resolve importing the libraries in this way

import * as leaflet from 'leaflet';
import 'leaflet-draw';
import '@geoman-io/leaflet-geoman-free';

Cystocele