make a bounding box that are select an area in the leaflet map using leaflet-area-select

Question

I have an angular component and I want to use

leaflet-area-select

I import it and install it but when I call it in the code it's returning :

Property 'areaSelect' does not exist on type 'typeof import("c:/Users/DELL/Desktop/New folder (2)/IR-Project/frontend/node_modules/@types/leaflet/index")'

I do this :

import * as leaflet from 'leaflet';
import 'leaflet-area-select';


private initMap(): void {

    // Initialising map with center point by using the coordinates
    // Setting initial zoom to 3
    this.map = leaflet.map('map', {
      center: [ 39.8282, -98.5795 ],
      zoom: 3,

    });


    // Initialising tiles to the map by using openstreetmap
    // Setting zoom levels
    const tiles = leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 28,
      minZoom: 0,
    });

    // Adding tiles to the map
    tiles.addTo(this.map);
    
    // Initialize the area select plugin
    this.areaSelect = leaflet.areaSelect();

  // Add the area select layer to the map
    this.areaSelect.addTo(this.map);
    }

This part :

    this.areaSelect = leaflet.areaSelect();

not working and have a compiler error, red underline

what I should do and how can I solve it ?

score 0 · Accepted Answer · answered Dec 17 '22 at 21:14

Try the follow: You build your project. Then (inside the libs build directory) use npm link. Go inside your project and use npm link leaflet (if leaflet the correct name). Done. Now you can import the package in your angular project.

Or you can publish your lib to npm and install it the common way: npm install xxx -s

Here is only one good link. Search for angular npm link

make a bounding box that are select an area in the leaflet map using leaflet-area-select

1 Answers1