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"
]
}
The "Property does not exist on type ' {}'" error occurs when we try to access or set a property that is not contained in the object's type. To solve the error, type the object properties explicitly or use a type with variable key names. Copied!
The code worked fine, but the classic 'Property does not exist on type Window in TypeScript' error flagged up on the build command and TypeScript complained about it endlessly. The Window type is defined in the lib.dom TypeScript module (as per the following documentation on TSDoc.
We didn't explicitly type the obj variable and declared it to an empty object, so we aren't able to assign or access properties that don't exist on the object's type.
I solved the issue by importing leaflet-draw
import 'leaflet-draw';
Not sure why it wasn't import by tsconfig, but yay it works!
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