Questions tagged [leaflet]

Leaflet is an open-source JavaScript library for mobile-friendly, cross-browser, interactive maps. For the R leaflet package, please use the r-leaflet tag.

Leaflet is an open-source JavaScript library for displaying interactive maps. It can be extended with the use of plugins and has an extensive well-documented API.

Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms out of the box, taking advantage of HTML5 and CSS 3 on modern browsers while still being accessible on older ones. It can be extended with many plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.


Browser Support

On Desktop

  • Chrome
  • Firefox
  • Safari 5+
  • Opera 12+
  • Internet Explorer 7–11

On Mobile

There are now two packages for using Leaflet from within the R language for data analysis and visualization. You can also use Leaflet from within R using the Leaflet package at Leaflet for R. Additionally, you can read the documentation on another package r-leaflet at http://cran.r-project.org/web/packages/leafletR/leafletR.pdf.


Online resources

13879 questions
18
votes
1 answer

drawing circle with radius specified in meters on a map

Any pointers on how to draw a circle of radius, specified in meters, on top of a geographical map using D3 would be pretty helpful. I tried to use Leaflet and it's Circle(or CircleMarker) that accepts radius in meters, but I need more flexibility to…
Bala
  • 323
  • 1
  • 2
  • 6
17
votes
3 answers

Blank map tiles - Error 410 gone (Mapbox & Leaflet JS)

I am using Leaflet JS and MapBox to create a map. My browser displays as below: The map does not show at all, my map tile is blank. The errors that I get in the dev tools console is: GET…
myverdict
  • 622
  • 8
  • 24
17
votes
1 answer

How to preload Leaflet tiles of known bounds in browser cache for faster display?

I'm developing a web application which displays animated markers on a Leaflet map. The map is programmatically zoomed to the first animation bounds, then the animation is played, then the map is zoomed to the second animation bounds and the second…
Julien V
  • 875
  • 6
  • 12
17
votes
4 answers

React leaflet not rendering properly

The react-leaflet map does not get rendered properly. The map is rendered outside of its parent's boundaries Some tiles of the map are missing The problem occurs when using the map with standard react components. My site also uses react-bootstrap.…
Peter G.
  • 7,816
  • 20
  • 80
  • 154
17
votes
1 answer

how to add a html title (tooltip) to a leaflet.js polygon?

I have a leaflet map and I would like to add a html title (tooltip) to my polygon. If I use plain JQuery: $('my tooltip').appendTo() The title gets added to the DOM but is not visible. See here for more details but if I follow that…
JW-Munich
  • 791
  • 1
  • 7
  • 16
17
votes
2 answers

Getting map coordinates from Leaflet.js?

I'm trying to use Leaflet to get the map coordinates of somewhere a user has right clicked. I've been going through the Leaflet API and so far I've figured out that I need to listen to the contextmenu event and use mouseEventToLatLng method to get…
Pallas
  • 1,499
  • 5
  • 25
  • 57
17
votes
1 answer

Save leaflet map in Shiny

I have created a leaflet map in a Shiny application. Now I need a download button, so that the user can download the currently shown map including all markers, polygons etc. as a pdf file. I have found this solution how to save a leaflet map in R:…
needRhelp
  • 2,948
  • 2
  • 24
  • 48
17
votes
4 answers

Possible to remove leaflet link with image

I am use leaflet-directive to create map using leaflet. Is it possible to remove leaflet link and OSM copyright from the map. I wish to put in leaflet image instead.
Alvin
  • 8,219
  • 25
  • 96
  • 177
17
votes
1 answer

Add Polygons to R shiny leaflet map

How do I add polygons from Global Administrative areas, so they are clickable. The simple way describe in the docs that I tried is adm <- getData('GADM', country='UKR', level=1) leaflet() %>% addTiles() %>% addPolygons(data=adm, weight = 3,…
romants
  • 3,660
  • 1
  • 21
  • 33
17
votes
2 answers

How to display (advanced) customed popups for leaflet in Shiny?

I am using R shiny to build web applications, and some of them are leveraging the great leaflet features. I would like to create a customed and advanced popup, but I do not know how to proceed. You can see what I can do in the project I created for…
cho7tom
  • 1,030
  • 2
  • 13
  • 30
17
votes
1 answer

How can I get the map object for a Leaflet map from the ID of the div element?

A previous developer created a map using Leaflet on the page. The Javascript is very complex and I cannot find where the Leaflet map is instantiated. However, I know which DOM element is associated with the map. Is there any way to get the Leaflet…
jdelman
  • 683
  • 1
  • 6
  • 20
17
votes
3 answers

Removing all data/markers in Leaflet map before calling another JSON

I'm retrieving different data to mark leaflet map using different JSON files. Each radio button retrieves a different JSON file. However, I'm having trouble clearing the markers when I select different radio button. All the markers just adds up from…
wag0325
  • 1,008
  • 5
  • 18
  • 34
17
votes
3 answers

Removing leaflet layers and L.marker method

I was wondering if anyone knows how or if you can actually remove a layer of points after adding them using this convention: var pointsLayer, someFeatures = [{ //Hard coded for now "type": "Feature", "properties":…
Mr. Concolato
  • 2,224
  • 5
  • 24
  • 44
17
votes
6 answers

Stop propagation of 'click' event in Leaflet

In one of our projects we're using Leaflet along with Leaflet.markercluster plugin. Looking through the Leaflet's sources I found that it appends _collapse() function to the map's click event, so whenever I click on the map it contracts previously…
aga
  • 27,954
  • 13
  • 86
  • 121
17
votes
6 answers

How to use Angular directives ng-click and ng-class inside Leaflet marker popup

I'm using Angular.JS and Leaflet.JS for a map in my location that has map markers with popups binded to them. I need to use a span with two different icons (one shown in code below) that you can click to call different functions and with ng-class to…
Ashley
  • 211
  • 1
  • 3
  • 10