Import for angular 7.2.0

[arthurguyader]

Hi,

I don't know if it's a good solution but that works.

In angular.json :

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

After install @type/node

npm install @types/node --save`

And add to tsconfig.app.json :

    "types": [
      "node"
    ]

In map.component.ts add :

var L = require("leaflet")
var L2 = require("leaflet-area-select")

If you have a best solution I'm interested. :)

[iron2414]

You can just

npm install --save leaflet-area-select

Then inside the component import like :

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

If you are using newer versions of Angular you need to call something on leaflet-area-select, else it will remove the import while building (since it's not used).

You can do somehting like:

constructor() {
LAS.toString();
}

Hope this helps

[beaverDamDemo]

I'll tell you what worked for me with a more recent Angular. Angular CLI: 11.1.2 Angular: 11.1.1 Old leaflet library wouldn't work. What worked, from package.json: "@asymmetrik/ngx-leaflet": "^8.1.0", "leaflet": "^1.7.1", "leaflet-area-select": "^1.0.5".

component.ts:

import * as L from 'leaflet'; 
import 'leaflet-area-select'; 
import { latLng, tileLayer, circle, polygon } from 'leaflet';
public map!: L.Map;
                options = {
                    layers: [
                    tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
                    ],
                        zoom: 5,
                    center: latLng(46.879966, -121.726909)
                };

                layersControl = {
                    baseLayers: {
                        'Open Street Map': tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' }),
                        'Open Cycle Map': tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
                    },
                    overlays: {
                        'Big Circle': circle([ 46.95, -122 ], { radius: 5000 }),
                        'Big Square': polygon([[ 46.8, -121.55 ], [ 46.9, -121.55 ], [ 46.9, -121.7 ], [ 46.8, -121.7 ]])
                    }
                }

--- some extra stuff ---
onMapReady(map: L.Map) {
                    this.map = map;
                    setTimeout(() => {
                        this.map.invalidateSize();
                        (this.map as any).selectArea.enable()

                        this.map.on('areaselected', (e:any) => {
                            console.log(`%c ${e.bounds.toBBoxString()}`, 'background: cyan; font-weight: semibold; color: black;'); // lon, lat, lon, lat
                            L.rectangle(e.bounds, { color: "blue", weight: 1 }).addTo(map);
                        });
                    }

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

naturally @asymmetrik/ngx-leaflet also will have to be imported somewhere