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
20
votes
2 answers

leaflet with R: add text labels

This code is taken from this page: library(leaflet) leaflet(data = quakes[1:20,]) %>% addTiles() %>% addMarkers(~long, ~lat, popup = ~as.character(mag)) Instead of markers, is there any way to plot mag as text labels?
luciano
  • 13,158
  • 36
  • 90
  • 130
20
votes
2 answers

How to precisely place a div element on a map using leaflet js?

I have tried this couple of ways but have not been able to get it working. I want to place clocks at the top of the map within multiple timezones. I have a the javascript to create the clock and I place the clock in a div element. Here is what I…
user3137607
  • 201
  • 1
  • 2
  • 4
20
votes
4 answers

How to put buttons on the leaflet map

I am using leaflet map in my application & using bootstrap for responsiveness. I have some buttons bellow that map. It looks something like this. But I want to overlap buttons on map like this Here is my HTML
vaibhav shah
  • 4,939
  • 19
  • 58
  • 96
20
votes
8 answers

Disable map zoom on CircleMarker double click in leaflet

I'm trying to disable the zoom on the map when I click in a CircleMarker object, but until now, no success. This is my code: var myCircle = new L.CircleMarker(new L.LatLng(50.924480, 10.758276), 10).addTo(map); myCircle.on("click", function () { …
vaibhav shah
  • 4,939
  • 19
  • 58
  • 96
20
votes
3 answers

How to trigger events on Leaflet map polygons?

I'm trying to figure out how to manually trigger events for Leaflet polygons (loaded via GeoJSON). In a nutshell, I have a Leaflet map with numerous polygons. I also have a regular hyperlink outside of the map that when clicked, should trigger a…
Critter
  • 998
  • 4
  • 11
  • 23
20
votes
1 answer

How do you use the .off() event method in leaflet.js?

I am trying to build a map application using leaflet.js and I can not figure out how to use the .off method. The documentation doesn't have any examples and I can't seem to find anything anywhere else online. I have distilled the problem into a more…
Spencer Cooley
  • 8,471
  • 16
  • 48
  • 63
19
votes
3 answers

Find Leaflet map object after initialisation

I'm trying to change some things on a map that is already initialised by another script, using the Leaflet library. This other script did not store the map-object in a global variable, or in any other location I can access with my script. So…
Joeytje50
  • 18,636
  • 15
  • 63
  • 95
19
votes
2 answers

HTML offline map with local tiles via Leaflet

Is there a way to display a map for a given area completely offline using HTML and JavaScript? I am looking for a mobile-friendly (read Cordova-enabled) solution.
Kozuch
  • 2,272
  • 3
  • 26
  • 38
19
votes
4 answers

How to use leaflet.js with react-native

I am having a difficult time setting up Leaflet.js with react-native. The documentation tells me to add the following script in my html... But I am not sure how I do this using…
buydadip
  • 8,890
  • 22
  • 79
  • 154
19
votes
3 answers

Leaflet map-event 'load' does not fire

I am trying to call a function after a leaflet map has successfully loaded, working with leaflet 1.0.1. Regarding to the docs there is a map event named load which states: Fired when the map is initialized (when its center and zoom are set for the…
Manuel
  • 2,334
  • 4
  • 20
  • 36
19
votes
3 answers

Leaflet drawing tiles disjointly

I am instantiating a leaflet map, but the tiles are basically being scattered all over the page - while the map is within a div, most of the tiles are not respecting that boundary:
…
Andy Wallace
  • 609
  • 8
  • 26
19
votes
1 answer

How to get the zoom level from the leaflet map in R/shiny?

I create a map using leaflet package in Shiny which have a selectInput to allow user to select from a site list. The site list also adds into leaflet as markers. When user selects a new site, I want to recenter map into the selected site without…
Bangyou
  • 9,462
  • 16
  • 62
  • 94
19
votes
2 answers

Use svg as map using leaflet.js

Is it possible to use SVG image as the base map for leaflet.js ? In my case I have huge svg file and I wish to allow my users to use all of leaflet's features such as zoom, markers, layers.
amitdar
  • 917
  • 3
  • 13
  • 35
19
votes
2 answers

Finding a specific layer in a Leaflet LayerGroup where layers are polygons

I'm trying to define a bunch of Leaflet polygons like this : var poly = new L.Polygon([ [10.1840229, 36.8906981], [10.1840393, 36.8906669], [10.1840989, 36.8906868], [10.1840826, 36.890718], [10.1840229, 36.8906981] ], { 'id':…
AAJ
  • 197
  • 1
  • 2
  • 10
19
votes
5 answers

How to remove all layers and features from map?

I am working on a map and I would like to remove all features from the map on a certain event. The features are in multiple layers which are plotted dynamically. Some of the code is: $.getJSON('distributor-companies', function (data) { …
Rohan
  • 13,308
  • 21
  • 81
  • 154
1 2 3
…
99 100