Leaflet components for Angular.io published to npm under @asymmetrik/ngx-leaflet
Questions tagged [ngx-leaflet]
149 questions
16
votes
2 answers
'L' refer to a UMD global - compilation error
I am using in my project the plugin ngx-leaflet, and angular-cli.
I am trying to use leaflet as described in the doc, for example :
The problem is when I'm trying to compile I got the following error :
Compiled with :
ng serve --aot
Context here…

Orelsanpls
- 22,456
- 6
- 42
- 69
15
votes
3 answers
Angular Universal: navigator is not defined
I followed official angular-cli tutorial to integrate angular-universal to my existing angular-cli app.
I am able to do SSR for my angular-cli app. But when I try to integrate ngx-leaflet, I am getting following error:
ReferenceError: navigator is…

Saurabh Palatkar
- 3,242
- 9
- 48
- 107
11
votes
2 answers
Abstract away leaflet directive in custom directive
I'm currently working on an Angular 6 application that uses ngx-leaflet for using leaflet. We want to be able to create a base component that can be customized by adding directives to it. Basically the same pattern that is used when using draw…

Saab
- 981
- 3
- 11
- 34
10
votes
1 answer
Material Dialog gets stuck when called onClick of leaflet Marker
I have a project where i have a map (using ngx-leaflet ).
On click on a marker i want to show a Dialog from Angular Material.
The Dialog opens but when i click on the close button, it reopens again and then closes.
What i tried:
Delaying the dialog…

Joniras
- 1,258
- 10
- 32
8
votes
3 answers
Coordinates on clickevent
I'm new to @asymmetrik/ngx-leaflet and Angular in general, so this is maybe just a newbie-issue...
I have an Angular.io (v5) project using the @asymmetrik/ngx-leaflet-tutorial-ngcli
Now I would like to get the coordinates of the point I clicked on…

CaptainInler
- 157
- 1
- 9
7
votes
1 answer
Leaflet - import Geojson - Angular 6
i try to import GeoJson file to leaflet in angular's app 6.
With this solution my geojson is drawn in leafletmap but i have this error and i can't build my app. Someone know one solution ?
ERROR TS2345 Argument of type '{"type":…

al NTM
- 247
- 5
- 15
5
votes
1 answer
ngx-leaflet-draw: Importing module which does not have a ɵmod property
Importing LeafletDrawModule which does not have a ɵmod property
I am seeing this error during my unit testing(jest).
The code works fine when I run the ng application. Leaflet draw function works perfectly.
Angular: 11
@asymmetrik/ngx-leaflet:…

Vaisakh Rajagopal
- 1,189
- 1
- 14
- 23
5
votes
5 answers
Can't bind to 'leafletOptions' since it isn't a known property of 'div'
I know this is an issue that comes up here often and is fixed by fixing import statements. I currently have
import { LeafletModule } from 'node_modules/@asymmetrik/ngx-leaflet';
import * as L from 'leaflet';
import { } from '@types/leaflet';
I am…

wvarner
- 116
- 2
- 7
4
votes
1 answer
Adjust Leaflet popup to table size in angular leaflet
I have a popup for a layer on the Leaflet map and a popup appears when you click on a point on the map. The popup should display a table with the data for that specific layer. However, the popup does not adjust to the table size:
But when I do get…

fairlyMinty
- 413
- 8
- 22
4
votes
3 answers
Integrate EasyButton, Geoman with ngx-leaflet
I am using raw leaflet.js in my Angular Application which depends on some leaflet plugins like EasyButton, Geoman, Distortable Image. ngx-leaflet looks cool and simple. So I've decided to migrate to ngx-leaflet. But I am sure if it is possible to…

Arul Rozario
- 679
- 1
- 9
- 20
4
votes
1 answer
ngx-bootstrap tabs don't work in modal opened through leaflet
Relevant code : https://stackblitz.com/edit/angular-ngx-leaflet-tests-kz7kc7
When you click on a marker, modal opens but tabs inside don't work. There is some problem with angular change detection. It works if I manually detect changes. How can I…

Krk Črn
- 134
- 2
- 8
4
votes
3 answers
Leaflet Draw on rectangle draw it throws error
I'm using leaflet + leaflet-draw + @ngx-leaflet + @ngx-leaflet-draw in an Angular application.
I've tried everything, versions change, importing the modules .forRoot() and not, adding the js files in my angular.json file, remove node_modules,…

Caius
- 2,084
- 6
- 31
- 47
4
votes
1 answer
ngx-leaflet: How to add a custom control?
I have tried for a while now to implement this leaflet tutorial using the ngx-leaflet.
There is absolutely no clear documentation on how to implement a custom control or legend while following along with the tutorial.
var info =…

Dylan
- 1,919
- 3
- 27
- 51
4
votes
1 answer
Leaflet marker icon url compiled wrong while running ng build --prod
For some reason the Leaflet marker icon url compiled wrong while running ng build --prod instead when running ng build the Leaflet marker icon url is fine.
My environment:
Angular CLI: 7.0.5
Node: 11.2.0
OS: linux x64
Angular: 7.0.3
... animations,…

b00r00x0
- 853
- 1
- 15
- 21
4
votes
1 answer
Add BeautifyMarker plugin to ngx-leaflet project
I am currently unable to integrate the BeautifyMarker plugin with the ngx-leaflet Angular 2 package.
I have followed the install instructions for BeautifyMarker alongside the ngx-leaflet plugin instructions with no luck.
I used npm install to grab…

Lauren
- 1,035
- 1
- 14
- 32