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

Rotate marker in Leaflet

How can I rotate a marker in leaflet? I will have a lot of markers, all with a rotation angle. I've tried this solution from runanet/coomsie at Leaflet on GitHub, but nothing happens with my marker: L.Marker.RotatedMarker= L.Marker.extend({ …
sindrejh
  • 193
  • 1
  • 1
  • 5
18
votes
2 answers

R: Add title to Leaflet map

I'd like to add a title to the whole map (different from the legend title: addLegend(..., title = "", ...): by "title", I mean an overlaid map component that stays in place while the map is moved (unlike an overlaid image). Is that an option in…
YGS
  • 623
  • 1
  • 6
  • 16
18
votes
1 answer

How to add multiple markers in Leaflet.js?

I want to add multiple markers to my map to pinpoint the following coordinate. 11.8166° N, 122.0942° E 11.9804° N, 121.9189° E 10.7202° N, 122.5621° E 11.3889° N, 122.6277° E 10.5929° N, 122.6325° E
Carl Angelo Nievarez
  • 573
  • 1
  • 11
  • 33
18
votes
4 answers

How to customize touch interaction on leaflet maps

How to customize leaflet maps to disable one-finger scroll on mobile devices and add two finger scroll like google maps (see https://developers.google.com/maps/documentation/javascript/interaction) I think something like a listener on finger down…
Patrick
  • 183
  • 1
  • 1
  • 6
18
votes
5 answers

change leaflet marker icon

I am using Leaflet Slider, of Dennis Wilhelm, to show changes in data on a Leaflet map. I am trying to change the change the marker icon but not getting it right. So,How can I change marker icon when use Leaflet Slider to show changes over time?…
sowmyaa guptaa
  • 541
  • 1
  • 5
  • 17
18
votes
4 answers

Clear Marker Layers (Leaflet )

I am using Leaflet library and stuck with following issue: To generate Map i am calling map function on button click. So on each generatemap function call, I want to clear pregenerated markers. function…
Sourabh
  • 203
  • 1
  • 2
  • 7
18
votes
2 answers

R: Maps with Time Slider?

Is there a way to implement a time slider for Leaflet or any other interactive map library in R? I have data arranged in a time series, and would like to integrate that into a "motion" map where the plot points change dynamically over time. I was…
Riley Hun
  • 2,541
  • 5
  • 31
  • 77
18
votes
1 answer

z-index not working as intended

I am currently working with Leaflet and Mapbox to create a custom map. All has been working fine until I started to work on the popups. My situation: I have a custom navigation/control panel that will be used but it needs to be behind any open…
kero
  • 10,647
  • 5
  • 41
  • 51
18
votes
5 answers

Use a custom created Mapbox style (from Mapbox Studio) along with Leaflet

I can't find any examples for how to use custom created Mapbox map-styles. On the Mapbox page I created a style for a map. How can I use this style with Leaflet? For example: var map = L.map('map', { center: [43.64701, -79.39425], zoom:…
F.H.
  • 1,456
  • 1
  • 20
  • 34
18
votes
2 answers

Best practice when using folium on django

I'm building an app with django ,which is going display a map of the top voted items. I'm not an experienced web developed and i wonder where and when and where should build them map. (this line for example -->…
Amit be
  • 469
  • 3
  • 13
18
votes
4 answers

Detect user-initiated pan/zoom operations on Leaflet

I have a Leaflet map which is used for location-sharing. When a user shares their location, a marker displaying their location is added to the map for all other users to see. It auto-fits the map to display all the markers whenever one is added,…
Robert J. Walker
  • 10,027
  • 5
  • 46
  • 65
18
votes
1 answer

leaflet Js custom control button add (text, hover)

I followed this control-button-leaflet tutorial and it worked for me. Now I want to: show some text when i hover over the button (like with the zoom buttons) Change the color of the button when i hover over it be able to write text inside the…
Jeremy Hunts
  • 353
  • 1
  • 5
  • 14
18
votes
1 answer

Is it possible to update polygon fill in leaflet for shiny without recreating the map object

In leaflet, I would normally create a map with: server.R shinyServer(function(input, output, session) { url <- "custommapboxurl" attrib <- "Maps by http://www.mapbox.com/Mapbox" ... map_out <- reactive({ map <- leaflet()%>% …
Chris
  • 6,302
  • 1
  • 27
  • 54
18
votes
4 answers

Draw a circle of constant size for all zoom levels leaflet.js

I am trying to implement something like this using leaflet.js, where the size of the circle remains the same on varying zoom levels. For example, if I want to depict the populations in different US counties, I would have circles of different radius…
aa8y
  • 3,854
  • 4
  • 37
  • 62
18
votes
3 answers

Leaflet Mouseout called on MouseOver event

I have a leaflet map where I'm dynamically adding markers. I want to call the popup for a marker when I hover over it in addition to when I click the marker. My code is: function makeMarker(){ var Marker = L.marker... Marker.on('mouseover',…
fifamaniac04
  • 2,343
  • 12
  • 49
  • 72