Stack Overflow
Stack Overflow

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
64
votes
4 answers

Is it ok to use ReactDOMServer.renderToString in the browser in areas where React isn't directly managing the DOM?

I'm working on an app using Leaflet (via react-leaflet). Leaflet directly manipulates the DOM. The react-leaflet library doesn't change that, it just gives you React components that you can use to control your Leaflet map in a React-friendly way. In…
Shane Cavaliere
  • 2,175
  • 1
  • 17
  • 18
63
votes
5 answers

How to secure the JavaScript API Access Token?

There are numerous online resources which provide JavaScript APIs to access their services. To be more clear, I will base my question on the example of MapBox, but this applies well to many other services in various domains. When someone wants to…
Tim
  • 12,318
  • 7
  • 50
  • 72
62
votes
6 answers

Leaflet Map API with Google Satellite Layer

I'm very interested in the Leaflet Map API. However, I need to be able to use the Google Satellite Layer. I have not been able to find an example on how to add a Google Satellite Layer to Leaflet. I understand that I will still need to load the…
fnllc
  • 3,047
  • 4
  • 25
  • 42
62
votes
6 answers

How to clear Leaflet map of all markers and layers before adding new ones?

I have the following code: map: function (events) { var arrayOfLatLngs = []; var _this = this; // setup a marker group var markers = L.markerClusterGroup(); events.forEach(function (event) { // setup the bounds …
Patrioticcow
  • 26,422
  • 75
  • 217
  • 337
58
votes
2 answers

Using custom map image tiles in LeafletJS?

Do my tiles need to adhere to any particular specs? I have a large image file which I'd like to turn into a map with LeafletJS. I am going to be using the Python Imaging Library to cut it up into all the various tiles I need. However, I can't find…
thisissami
  • 15,445
  • 16
  • 47
  • 74
57
votes
4 answers

Leaflet: How to add a text label to a custom marker icon?

Is it possible to add text to a custom icon marker? I want to avoid having to edit the icon in an image editor just to add the text. I've created my custom icon marker like so: var airfieldIcon = L.icon({ iconUrl: 'images/airfield.png', …
redshift
  • 4,815
  • 13
  • 75
  • 138
55
votes
8 answers

How to locate leaflet zoom control in a desired position

I want to place the zoom control in middle right of the the map i.e. in the middle of the right most side of the map. I have found solution to put the zoom control in different corners using the following code var map = new L.map("map-container",{…
Md Johirul Islam
  • 5,042
  • 4
  • 23
  • 56
54
votes
5 answers

Large dataset of markers or dots in Leaflet

I want to render about 10.000 markers or dots on a leaflet map. I already did it the regular way and I found it is way slower compared to Google Maps. I'm looking for a way to render multiple elements without getting the performance issues. Is there…
AFP_555
  • 2,392
  • 4
  • 25
  • 45
54
votes
6 answers

Leaflet: Map container not found

I have the below react class which fetches the geolocation through the browser. I am mapping a leaflet map. I want to geolocation to be an input to the setView, for such that the map "zooms" into the region of the client browser location. Here's…
cbll
  • 6,499
  • 26
  • 74
  • 117
54
votes
1 answer

Get address from co-ordinates using OpenStreetMap

I'm looking for a solution which gives an address based on co-ordinates (Latitude & Longitude) which I got from html5 geolocation api. I'm using OpenStreetMap.
vishal
  • 685
  • 2
  • 6
  • 9
53
votes
2 answers

Get the bounding box of the visible leaflet map?

I have a leaflet map that pans and zooms. How can I dynamically get the lat/long of the edges of the map (after zooming in/out + panning)?
bernie2436
  • 22,841
  • 49
  • 151
  • 244
53
votes
4 answers

Leaflet.js fitBounds with padding?

I'm trying to set the fitBounds option in a leaflet map like this: var bounds = new L.LatLngBounds([[Math.max(lat, borneLat), Math.max(lng, borneLng)], [Math.min(lat, borneLat), Math.min(lng, borneLng)]]); map.fitBounds(bounds, { padding: [20, 20]…
dan2k3k4
  • 1,388
  • 2
  • 23
  • 48
52
votes
1 answer

How to save Leaflet in R map as png or jpg file?

I'm using Leaflet package to create maps in R. It works perfectly. I can export maps in R with simply Export, but I need to export maps from script in R. My simple code is: png("test_png.png") (m <- leaflet() %>% addTiles()) dev.off() It works…
sms
  • 637
  • 1
  • 7
  • 11
52
votes
2 answers

Leaflet map not displayed properly inside tabbed panel

I'm trying to use Leaflet.js to display a map inside a tabbed panel from Twitter Bootstrap, but is behaving in a strange way: When I click on the tab containing the panel there is a gray layer on top of the map. If I drag and move the map I get to…
jasalguero
  • 4,142
  • 2
  • 31
  • 52
48
votes
6 answers

Saving leaflet output as html

I am using RStudio to create some some leaflet images. I would like to be able to save the output as an HTML so that it can be emailed and others can view it. Below is some sample R code which was taken from [here] to create a sample leaflet…
h.l.m
  • 13,015
  • 22
  • 82
  • 169
1
2
3
…
99 100