Questions tagged [angular-leaflet-directive]

AngularJS directive used to embed and interact with maps managed by the Leaflet library.

Filter by
Sorted by
Tagged with
0 votes
0 answers
50 views

Why map leaflet js crashed?

I used map leaflet in angular, before this i used map in other component dont have any problem. but at other component, i got problem, the map crashed/broken, every image from the map is not ...
natasha adams's user avatar
0 votes
0 answers
14 views

leaflet iimage map find center of random iamges

I use a method to create a leaflet map with images. I want these images to fit correct to the map. How can i do that? Images have different sizes getImageMap(backgroundUrl: string) { let map = ...
lebanta's user avatar
  • 13
0 votes
0 answers
30 views

Leaflet custom marker position on the map is changing

I'm using Leaflet with custom markers. It seems that when I add a marker the top left corner is the location saved, and the icon is presented with the top left corner as the anchor. The result is that ...
Doron Goldberg's user avatar
0 votes
0 answers
28 views

Getting SQL.Database is not a constructor (leaflet-tilelayer-mbtiles-ts || sql.js)

While importing any mbtiles file, i get this error : I had an error before that was about assigning a value to a readonly property named stack, so after searching a bit i figured that i had to update ...
Syler's user avatar
  • 23
0 votes
0 answers
135 views

how to show the selected route and alternate routes in leaflet

i have one requirement to show the user selected route first and user can able to switch the route by selecting other routes, currently i can able to show the route with showing alternate routes, is ...
Saee Kumar's user avatar
0 votes
1 answer
59 views

How to make a leaflet AwesomeMarkers blink

I am trying to make my marker blink on a certain occasion using the alarm-blink class. Currently, I am only able to make the icon blink and not the entire marker. Here is the relevant code I am using: ...
ojoaovitoraraujo's user avatar
0 votes
1 answer
673 views

How do I remove the border that appears when map area is selected in Leaflet map

I created a leaflet map that overlays map tiles using a GeoJson file. When I click on a area that I have overlaid a ugly black border appears as below. I also have used leaflet tooltip to bind a ...
Ovindu's user avatar
  • 11
0 votes
1 answer
365 views

make a bounding box that are select an area in the leaflet map using leaflet-area-select

I have an angular component and I want to use leaflet-area-select I import it and install it but when I call it in the code it's returning : Property 'areaSelect' does not exist on type 'typeof ...
Ghaid_SS's user avatar
0 votes
1 answer
346 views

Leaflet - Map container is already initialized on page change

I am developing an app with angular I have integrated a complement that uses Leaflet to show a map with marks on specific points. As I've said, I developed a component to reuse on different pages. But ...
Emili Bellot Pulido's user avatar
-1 votes
1 answer
337 views

Leaflet.js map fit bounds maxZoom not working as expected

I'am using leaflet.js map in an angular project. trying to make the map follow a marker which is getting live location data and using fitBounds() to follow the route. but I wanna allow the user to ...
Adam's user avatar
  • 39
0 votes
0 answers
650 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 ...
Mahendra pratap singh ahada's user avatar
1 vote
1 answer
407 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 { ...
user avatar
-2 votes
1 answer
543 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://...
Quang Hoang's user avatar
0 votes
0 answers
411 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 ...
beste's user avatar
  • 21
0 votes
2 answers
4k 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: ...
user avatar
0 votes
0 answers
245 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'...
user1's user avatar
  • 1
0 votes
0 answers
261 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 ...
user1's user avatar
  • 1
0 votes
1 answer
446 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() { ...
user's user avatar
  • 27
0 votes
1 answer
1k 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....
user's user avatar
  • 27
1 vote
0 answers
438 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]....
Haritha's user avatar
  • 77
0 votes
1 answer
421 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])....
Haritha's user avatar
  • 77
0 votes
1 answer
826 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', { ...
Haritha's user avatar
  • 77
1 vote
0 answers
187 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: ...
heliya rb's user avatar
  • 722
0 votes
1 answer
1k 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 ...
Haritha's user avatar
  • 77
0 votes
1 answer
2k 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.
vinita jain's user avatar
0 votes
1 answer
526 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": { "...
Bhargavi gottam's user avatar
0 votes
1 answer
1k 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": ...
Bhargavi gottam's user avatar
0 votes
0 answers
134 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[...
Angrya Manyu's user avatar
1 vote
1 answer
1k 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&...
Bhargavi gottam's user avatar
1 vote
1 answer
298 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 ...
Faabass's user avatar
  • 1,404
1 vote
1 answer
816 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?
vinita jain's user avatar
0 votes
1 answer
290 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 ...
Mawg says reinstate Monica's user avatar
0 votes
0 answers
303 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....
user9847788's user avatar
  • 2,181
1 vote
3 answers
18k 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 ...
user122222's user avatar
  • 2,219
0 votes
1 answer
396 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 ...
Cascara's user avatar
  • 93
0 votes
1 answer
3k 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 ...
Codehan25's user avatar
  • 2,774
8 votes
2 answers
9k 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 ...
Moa's user avatar
  • 125
0 votes
0 answers
1k 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 }, ...
max's user avatar
  • 34
2 votes
1 answer
2k 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 ...
Andrea Scarafoni's user avatar
1 vote
1 answer
2k 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)...
John's user avatar
  • 1,835
3 votes
0 answers
2k 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)...
Nouf's user avatar
  • 753
2 votes
1 answer
1k 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 ...
Sim_on's user avatar
  • 164
1 vote
1 answer
510 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....
rajmohan's user avatar
  • 1,618
1 vote
0 answers
444 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 ...
user9960718's user avatar
0 votes
1 answer
1k 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)...
YASSIR EL HOUSNI's user avatar
0 votes
0 answers
178 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 ...
YASSIR EL HOUSNI's user avatar
2 votes
0 answers
166 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 ...
Tobias Gruber's user avatar
0 votes
0 answers
1k 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 ...
rajmohan's user avatar
  • 1,618
0 votes
0 answers
51 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.
Pradyumna Ravuri's user avatar
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 ...
CptEric's user avatar
  • 907

1
2 3 4 5 6