Questions tagged [angular-leaflet-directive]
AngularJS directive used to embed and interact with maps managed by the Leaflet library.
249
questions
0
votes
0
answers
38
views
How to Spiderfy all the markerClusters in Leaflet markerClusters map library
I am using Leaflet masterCluster in angular for maps. I have added some markers in the map and i can see the marker clusters in the map. Currently i am able to spiderfy when i click on the marker ...
0
votes
1
answer
51
views
Markers not appearing on map using leaflet and angular
I am creating a map that displays a marker of coordinates that is stored in the database. However the marker does not appear on the map
the map is a part of the component.ts file:
ngOnInit(): void {
...
0
votes
0
answers
26
views
Leaflet map lagging when zooming in or zooming out when there multiple png image overlays of large size (upto 50 mb)
I'm working on a angular project in which I need to display multiple drone images on leaflet map. The drone images are of large size (upto 50mb), which causes a lot of lag while zooming in or zooming ...
0
votes
0
answers
37
views
The leaflet popup is not positioning on each polyline if multiple polyline is available in map
The leaflet popup is not positioning on respective polyline, if multiple polyline is available in the map. The pop up is opening only one position but the content is getting updated for each click. ...
0
votes
0
answers
64
views
How to add Leaflet.Snap to Angular(11) project
I work with Leaflet and would like to add snap function to markers etc.
I can easily get the leaflet to compile but Leaflet.snap I can not.
Leaflet.snap is a js file that has leaflet and leaflet.draw ...
-2
votes
1
answer
118
views
Is it possible to make Azure map be the base map in Leaflet
I want to create a map that uses Azure maps as the base map layer in Leaflet.
From what I understand, Leaflet will be the canvas/control and Azure maps will be the layer added by Leaflet. https://docs....
0
votes
0
answers
225
views
Leaflet - How can I remove the old moving markers from the map's background?
I have almost 500 markers, and these markers have another marker. These two markers are also in motion. It gets a location update every 10 seconds.
Black circle marker is main marker, blue one is ...
0
votes
2
answers
690
views
How to Calculate the distance between two markers in leaflet using distanceTo() method?
I need your help to calculate the distance between two markers using distanceTo() method.
I tried to implement that in Angular, but the following error has occurred in the console:
Here's the code:
...
0
votes
0
answers
90
views
How to include the leaflet map in angular formly with custom component
I have to create the leaflet map where I have used the angular formly .
and I have created the custom component for leaflet map as
leaflet.component.ts
import { Component, OnInit } from '@angular/core'...
0
votes
0
answers
108
views
How to integrate the leaflet map in angular
I want to show the leaflet map in angular application
As I have used the angular formly for application with tabs because In my application I have to create the dynamic forms
In third tab I have to ...
0
votes
1
answer
109
views
How to create the leaflet map in angular formly
My requirement is to create the leaflet map in angular formly,but I am new to this formly
and I know how to use integrate the map with normal html in angular as below
map.component.ts
ngOnInit() {
...
0
votes
1
answer
307
views
How to remove or empty the leaflet map based on the condition
I want to remove the map based on the selected condition.
.component.ts
dataChanged (selectsensor) {
console.log(selectsensor)
for( var j=0;j<selectsensor.length;j++){
for (var i =0; i< this....
1
vote
0
answers
178
views
How to add the text labels on the leaflet map
I want to show the text label to show the location name on the leaflet map(Not tool tip text, or popup text).
.component.ts
map[i] = L.map(v).setView([this.sensors[i].latitude,this.sensors[i]....
0
votes
1
answer
269
views
Getting the error of map container not found in leaflet map
My requirement is to show the multiple leaflet maps(based on the backend data) on the page.
map.component.ts
for (var i = 0; i < this.mapleaf.length; i++) {
map[i] = L.map(this.mapleaf[i])....
0
votes
1
answer
348
views
How to create the multiple leaflet maps on the page in angular
I have created the leaflet open street map given below.
.component.ts
map = L.map('map').setView([12.876, 80.599], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
...
1
vote
0
answers
70
views
Can't bind component in leaflet setContent function
I use a leaflet in my angular project and I need to open a custom modal on the map's pin click.
I find some code that works but I need to put my custom component instead of HTML code as you see below:
...
0
votes
1
answer
546
views
How to change the map center position to top place using Leaflet open street map in angular
In my angular application I have created the leaflet map and over the leaflet map I have created two more panels data in overlapping manner And I have created the circle of 5 km radius on the map. But ...
0
votes
1
answer
685
views
How can I add multiple button with events for Leaflet Marker tool
I wanted to add more button along with this Cancel button, When user click on marker from leaflet toolbar. Please suggest me the solution or any plugin which helps to achieve this requirement.
0
votes
1
answer
252
views
How to place the arc of angle 90 inside the circle of 5km radius using leaflet map in angular and how to change the color of circle
In my angualr project I have created the map with leaflet and created the circle of 5km radius with the coordinates coming from the backend.something like :
"drone1": {
"...
0
votes
1
answer
453
views
How to detect marker goes inside and outside of the circle using leaflet open street map in angular
I have used the Leaflet open street map. With the API I have fetched the latitude, longitude array and placed the locations - something like this:
{
"Drone": {
"Droneid": ...
0
votes
0
answers
66
views
How to convert Longitude and Latitude to (Address/physical) in Leaflet HTML
This is my html script code:
for (var i = 0; i < planes.length; i++) {
marker = new L.marker([planes[i][2],planes[i][3]], {icon: option}).addTo(map);
marker.bindPopup('Employee: ' + planes[...
1
vote
1
answer
560
views
How to move the marker icon from one latitude,longitude to another (fetched from the API) using leaflet open street map in angular
I my angular application I have used the Leaflet open street map for creation of map.And I have fetched the latitude and longitude array from the API.That is
{
"Drone": {
"Droneid&...
1
vote
0
answers
161
views
How to use tilt in ngx-leaflet?
I have a site in Angular10 where I'm showing a map using ngx-leaflet.
But I cannot make the tilt works.. I need to show the map as a "navigation" view, I mean show the map to the front and ...
1
vote
1
answer
296
views
How to disable drawing any polygon on Leaflet map
I am trying to disable drawing any polygon on map until user selects any radio option displayed in image below. So How can I cancel drawing or disable user to draw anything on map?
0
votes
1
answer
206
views
AngularJs - can't see a leaflet map in a ui-router view
I gave been using leaflet for a while now, with AngualrJs, to show maps.
Now, I want to add some complexity and use ui-router to display the map only in one state, which means in one view, which has ...
0
votes
0
answers
183
views
How to add zoomhome plugin to leaflet map in ionic app?
I am trying to add the zoomHome plugin to my leaflet map in my ionic app.
The map is displaying as expected before adding this code.
I added the below code inside the <head> section of index....
1
vote
3
answers
10k
views
Change color of leaflet map
I want to change color of the map in leafletjs but I just can't figure out which class it is.
I found
.leaflet-container {
background-color:rgba(255,0,0,0.0);
}
however it only ...
0
votes
1
answer
315
views
Leaflet map doesn't load with angular-leaflet-directive
I directly copied and pasted the source code, from this webpage, onto my compiler: http://tombatossals.github.io/angular-leaflet-directive/examples/0000-viewer.html#/basic/first-example
I included ...
0
votes
1
answer
2k
views
Add leaflet ImageOverlay to Layers Control
I use leaflet with the Angular package ngx-leaflet and just trying to get my layer for ImageOverlays in my LayersControl, so I can show or hide this layer in the map based on a checkbox. Somehow it ...
5
votes
2
answers
6k
views
Angular Leaflet - Map does does not render properly
No matter which way I try in Angular 7, my Leaflet Map does not load properly. I get a block puzzle with half the screen grey and the other half in random disjointed map blocks (see pic).
Map Block ...
0
votes
0
answers
895
views
Not able to add search control using leaflet search plugin and angular-leaflet-directive
I am trying to add leaflet-search control and below is the code:
angular.extend(_scope, { london: { lat: 28.7041,
lng: 77.1025,
zoom: 12
},
...
2
votes
1
answer
1k
views
How to add multiple set of marker?
I need to have multiple layer of icons drawed on my map. Each set of that icon must be rendered or not by clicking on the option panel.
I found all examples that shown how to add a single marker or a ...
0
votes
1
answer
1k
views
Typescript Leaflet marker Custom property
I want to add a custom property to every marker, when I try the solution below I get this error:
Property 'myCustomID' does not exist on type '(latlng: LatLngExpressio
n, options?: MarkerOptions)...
3
votes
0
answers
1k
views
Getting the Altitude in leaflet
I was wondering if there is a way to get the altitude for my current location in leaflet like getting the latitude and longitude
this.marker = leaflet.marker([e.latitude, e.longitude]).addTo(this.map)...
2
votes
1
answer
997
views
Add component to ngx-leaflet marker popup
How is it possible to bind a custom component to the ngx-leaflet popup? For example, I want to render a custom element <my-card></my-card> in a popup that when I click on it my component ...
1
vote
1
answer
328
views
leafletDirectiveMarker disable focus when user click outside the map
I have a click function on the marker which will enable the marker popup. But when the user clicks outside the map I want to disable this focus. How to do this?
$scope.$on('leafletDirectiveMarker....
1
vote
0
answers
325
views
Event contextmenu is not trigger on Safari with Leaflet and Leaflet.GridLayer.GoogleMutant
Right click don't work on Safari (desktop) with googleMutant layer for Leaflet. On the jsfiddle bellow, contextmenu event is trigger on Open street map but not on google map. However it work fine on ...
0
votes
1
answer
833
views
Update Leaflet Marker
it's about leaflet marker on angular 5 , the marker value is dynamic and I need to draw just the last result. How can I do it please?
var markers;
markers = new L.LayerGroup().addTo(myfrugalmap)...
0
votes
0
answers
138
views
Leaflet Marker update
Hi I have a question about leaflet marker on angular 5 ,
the marker value is dynamic and I need to draw just the last result.
How can I do it please?
is here someone who had the same problem?
var ...
2
votes
0
answers
150
views
Including external plugins
Is it possible to include extern plugins to my ngx-leaflet app?
Because I would have to implement Leaflet.LayerGroup.Collision and Leaflet.Arc, but I don't know how to do it. Please let me know if ...
0
votes
0
answers
773
views
Configure openseamap Tile Layer
I am using Leaflet with AngularJS through angular-leaflet-directive and I want to configure openseamap Tile Layer.
How can I do this?
I tried to replace openstreetmap URL with opensea map but it did ...
0
votes
0
answers
45
views
browser connectivity status using leafletjs
Currently I am using leafletjs for showing maps. Is there a way I can detect browser offline or online status.
2
votes
1
answer
1k
views
Transform X and Y coordinates inside a (rotated) ImageOverlay to latitude and longitude
after reading through Projection's documentation, and some fail-and-try testing, i have found myself unable to find a solution to this issue.
Al the solutions i find play with the fact that the x and ...
0
votes
1
answer
361
views
Leaflet showing error in developer tool "t.on is not a function"
I have problem when i am using leaflet library 1.0.3 and it works fine and show no error or warning when it is 0.7.7 i have using following libraries:
angular 1.5.8
angular material 1.1.3
angular-...
0
votes
1
answer
686
views
Leaflet routing machine usage limits
I am wanting to find out if there are any usage limits for the leaflet routing machine library. In particular what's the maximum number of waypoints that can be supplied as part of routing requests ...
1
vote
1
answer
258
views
Leaflet map keeps moving infinitely when using maxbounds
I created a crs leaflet map and I'm trying to set its maxbounds to the bounds of the crs image.
When I add the maxbounds attr there are three leaflet events that keep firing infinitely which cause the ...
0
votes
1
answer
417
views
panTo() duration not working?
I would simply like to pan to a coordinate on my map using:
earth.panTo([0,0], {animate: true, duration: 2.0});
But the duration option is being ignored -- it seems the default duration is 10 ...
2
votes
2
answers
101
views
Angular NgRoute and leaflet declaration directive
I'm pretty new to Angular, and I'm trying to make a little app for learning.
I use the leaflet directive and want to add the NgRoute directive too but I have some errors in the console.
Here is my ...
5
votes
0
answers
433
views
How to utilize Angular 4 components when creating Leaflet Extended Control?
I am working now a few weeks with Leaflet and Angular CLI on a project involving geo map and in-door maps (Leaflet custom maps).
The application is conceptually very simple. I have to provide the ...
1
vote
0
answers
528
views
Leaflet using inline svg as the base layer
Currently, I serve a map with an imageOverlay base layer.
Right now, I need to use an svg instead of the current png imageOverlay,
and to alter the svg css (like, changing opacity for the nearest ...