'Property 'Draw' does not exist on type 'typeof Control'
I'm attempting to implement a map component with leaflet and other leaflet plugins. The issue is other plugins don't work from TypeScript for some reason.
For example I'm unable to compile code with leaflet-draw plugin and getting the error:
Property 'Draw' does not exist on type 'typeof Control'
mapbox.component.ts
import { DataService } from "../data-service.service";
import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
/// <reference types="leaflet" />
/// <reference types="leaflet-draw" />
declare var require: any
@Component({
selector: 'app-mapbox',
templateUrl: './mapbox.component.html',
styleUrls: ['./mapbox.component.css']
})
export class MapboxComponent implements OnInit {
constructor(private dataService: DataService) { }
// helper flags
map: L.Map = null;
aggreagte: boolean = false;
ngOnInit() {
// Prepare map
this.map = L.map('resultmap').setView([51.505, -0.09], 1);
//
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: '...'
}).addTo(this.map);
var drawnItems = L.featureGroup();
this.map.addLayer(drawnItems);
var control = new L.Control.Draw();
...
angular-cli.json
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"styles": [
"styles.css",
"../node_modules/leaflet/dist/leaflet.css",
"../node_modules/leaflet-markercluster/MarkerCluster.css",
"../node_modules/leaflet-draw/dist/leaflet.draw.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/leaflet/dist/leaflet.js",
"../node_modules/leaflet-markercluster/leaflet.markercluster.js",
"../node_modules/leaflet-draw/dist/leaflet.draw.js",
"../node_modules/chart.js/dist/Chart.bundle.min.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
]
...
tsconfig.json
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "commonjs",
"moduleResolution": "node",
"outDir": "../dist/out-tsc-e2e",
"sourceMap": true,
"target": "es5",
"files":[
"../node_modules/@types/leaflet-draw/index.d.ts"
],
"typeRoots": [
"../node_modules/@types"
],
"types":[
"jquery",
"leaflet",
"leaflet-draw",
"leaflet-markercluster"
]
}
Solution 1:[1]
I solved the issue by importing leaflet-draw
import 'leaflet-draw';
Not sure why it wasn't import by tsconfig, but yay it works!
Solution 2:[2]
Thanks @aclokay for the insight. I'd complete this answer by adding that you musn't forget to change the standard leaflet import as well. For example :
// import * as L from 'leaflet';
// --> Doesn't work : Property 'Draw' does not exist on type 'typeof Control'.
declare const L: any; // --> Works
import 'leaflet-draw';
export function drawPlugin(map: any) {
const drawnItems = L.featureGroup().addTo(map);
const drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems,
},
draw: {
polygon: false,
polyline: false,
marker: false,
circlemarker: false
}
});
map.addControl(drawControl);
map.on(L.Draw.Event.CREATED, function (event) {
const layer = event.layer;
drawnItems.addLayer(layer);
});
}
Solution 3:[3]
npm i --save-dev @types/leaflet-draw
import "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 | aclowkay |
Solution 2 | Alex Beugnet |
Solution 3 | Suraj Rao |