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
169
votes
12 answers

Zoom to fit all markers in Mapbox or Leaflet

How do I set view to see all markers on map in Mapbox or Leaflet? Like Google Maps API does with bounds? E.g: var latlngbounds = new google.maps.LatLngBounds(); for (var i = 0; i < latlng.length; i++) { …
AHOYAHOY
  • 1,856
  • 4
  • 24
  • 34
167
votes
14 answers

How to reference static assets within vue javascript

I'm looking for the right url to reference static assets, like images within Vue javascript. For example, I'm creating a leaflet marker using a custom icon image, and I've tried several urls, but they all return a 404 (Not Found): Main.vue: var icon…
JBaczuk
  • 13,886
  • 10
  • 58
  • 86
150
votes
6 answers

How to change the map center in Leaflet.js

The following code initializes a leaflet map. The initialize function centers the map based on user location. How do I change the center of the map to a new position after calling the initialize function? function initialize() { map =…
Joel James
  • 3,870
  • 9
  • 32
  • 47
123
votes
11 answers

Leaflet - How to find existing markers, and delete markers?

I have started using leaflet as an open source map, http://leaflet.cloudmade.com/ The following jQuery code will enable the creation of markers on the map on map click: map.on('click', onMapClick); function onMapClick(e) { var marker = new…
jay
  • 12,066
  • 16
  • 64
  • 103
114
votes
19 answers

Leaflet changing Marker color

Is there a way to randomly change marker-colors in native Leaflet? I'm using svg elements which could be styled. I know that it is possible with mapbox.js EDIT: To clarify what I intend to do: If you add markers to the map via a doubleclick or…
Chromos
  • 1,801
  • 6
  • 20
  • 26
112
votes
4 answers

Storing Image Data for offline web application (client-side storage database)

I have an offline web application using appcaching. I need to provide it about 10MB - 20MB of data that it will save (client-side) consisting mainly of PNG image files. The operation is as follows: Web application downloads and installs in appcache…
Dr.YSG
  • 7,171
  • 22
  • 81
  • 139
103
votes
5 answers

What are Leaflet and Mapbox, and what are their differences?

What are Leaflet and Mapbox, and what are the differences or usages of both? What are the main differences in their APIs?
vetri02
  • 3,199
  • 8
  • 32
  • 43
98
votes
26 answers

refresh leaflet map: map container is already initialized

I have a page where given a select to the user he can switch the leaflet map I show. After a initial leaflet map load, my problem is when i want to refresh the map. I always get "Map container is already initialized": The problem line is: var map =…
leandro713
  • 1,268
  • 1
  • 10
  • 17
87
votes
18 answers

How to fix error "Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)"

I am trying to create a react-typescript app along with leaflet. I used the command, npm install leaflet react-leaflet @types/react @types/leaflet --save to install the dependencies. But when I start the application it says, …
Gimhan Wijayawardana
  • 1,978
  • 2
  • 6
  • 10
84
votes
5 answers

Marker in leaflet, click event

var map = L.map('map'); var marker = L.marker([10.496093,-66.881935]).on('click', onClick); function onClick(e) {alert(e.latlng);} marker.addTo(map) When I do click in the marker, the alert message is: undefined But if I put it in the variable map,…
Jonathan García
  • 1,313
  • 1
  • 13
  • 19
84
votes
7 answers

LeafletJS: How to remove the zoom control

I'm trying to remove the zoom controls (+/-) on a LeafletJS map. I'm using the MapBox.js version of Leaflet but most of the operations are the same as Leaflet. I implement my map like this: var map = L.mapbox.map('map'); var layer =…
Brett DeWoody
  • 59,771
  • 29
  • 135
  • 184
83
votes
7 answers

Resizing a leaflet map on container resize

I have a
containing a leaflet map. Upon certain events the height of the
will be altered. I'd like for the map to resize to the new dimensions of its surrounding
so that the old center is centered in the resized smaller or larger…
Sandra
  • 3,560
  • 5
  • 24
  • 31
82
votes
18 answers

react-leaflet map not correctly displayed

I'm trying to use react-leaflet to display a map. I use the code from this fiddle which is working, but on my computer I have this output Here is my code : DeviceMap.js import React from 'react' import { Map, Marker, Popup, TileLayer } from…
ThomasThiebaud
  • 11,331
  • 6
  • 54
  • 77
67
votes
8 answers

How to get Leaflet for R use 100% of Shiny dashboard height

I am in the process of creating a Shiny dashboard application, where the dashboard body is supposed to show some maps. So far no problem to get the map expand over the entire width of the body, but it's somehow not willing to adjust to the full…
TomGeo
  • 1,213
  • 2
  • 12
  • 24
65
votes
1 answer

Leaflet.js center the map on a group of markers

I'm using Leaflet.js and would like some way to centre the map on the markers I have so that all are within the user's view when the page launches. If all the markers are clustered in a small area, I would like the map to zoom down to a level that…
lorless
  • 4,126
  • 8
  • 30
  • 41
1
2 3
…
99 100