CODEWITHSUNDEEP
angularleaflet
Gaetano
Gaetano

Reputation: 145

Area Select Leaflet Map Angular 9

I installed the leaflet-area-select (https://github.com/w8r/leaflet-area-select) plugin but when I define the select area I get the following error enter image description here

I launched npm install --save leaflet-area-select

In angular.json I added

"scripts": [
   "node_modules/leaflet/dist/leaflet.js",
   "node_modules/leaflet-area-select/dist/Map.SelectArea.min.js",
   "node_modules/jquery/dist/jquery.min.js"
],

And in the code the instructions that I added are these:

import SelectArea from 'leaflet-area-select';
public map: L.map;
this.map = L.map('map', {
   center: [37.606655, 15.1606003],
   selectArea: true,
   zoom: 10
});
    
this.map.on('areaselected', (e) => {
   console.log(e.bounds.toBBoxString()); // lon, lat, lon, lat
});
    
this.map.selectArea.setCtrlKey(true);

It seems that SelectArea is not recognized

enter image description here

If I move the mouse on the row, 'SelectArea' is declared but its value is never read appears

How can I resolve this problem?

Upvotes: 0

Views: 685

Answers (1)

Navoneel Talukdar
Navoneel Talukdar

Reputation: 4588

Looks like TS issue in recognizing types, alternatively you can use RequireJS. So install node type npm install @types/node --save and then in tsconfig file add node in types.

"types": [
      "node"
 ]

then use it like node require rather than commonjs style

var L = require("leaflet")

Otherwise if you want to stick to commonjs style, then you can create own .d.ts (definition file) file using module aigmentation

declare module leaflet 
{       
}

then import it like, that should work.

import * as L from 'leaflet'

and finally you also need to add this custom type path in tsconfig.json to make it work.

"typeRoots": [ "./your_custom_type_folder_here", "./node_modules/@types"]

Upvotes: 1

Related Questions