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