Comments (2)
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
from leaflet-area-select.
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
from leaflet-area-select.
Related Issues (11)
- import for angular 4.0.0
- Dragend still fires popups for features
- Mac Cmd key support
- Documentation For Changing Trigger Key Is Wrong
- not working in react 18.2.0
- Cannot read property '_simulated' of undefined using leaflet master version HOT 1
- Question.
- when map/window lost focus, unable to select area
- does not work with touch devices
- Cannot read property '_simulated' of undefined from _onKeyPress
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from leaflet-area-select.