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
48
votes
3 answers

Can I prevent panning Leaflet map out of the world's edge?

Is there a way to limit panning out of the world's edge? On this picture, brown is the world, grey is emptiness. I want to make it impossible to pan like this.
Terion
  • 2,396
  • 3
  • 28
  • 42
47
votes
4 answers

Leaflet.draw mapping: How to initiate the draw function without toolbar?

For anyone experienced with leaflet or leaflet.draw plugin: I want to initiate drawing a polygon without using the toolbar from leaflet.draw. I've managed to find the property that allows editing without using the toolbar (layer.editing.enable();)…
Sam
  • 900
  • 3
  • 10
  • 16
46
votes
2 answers

update marker location with leaflet API

I want to build web app with the Leaflet API. First my user is geolocated with IP then if he accepts I try to update his position with HTML5 geolocation (accuracy is better). My problem is that the marker position is not updated on the map and the…
floflo
  • 485
  • 1
  • 4
  • 9
42
votes
9 answers

Assign ID to marker in leaflet

So i try to achieve a result as on foursquare: https://foursquare.com/explore?cat=drinks&mode=url&near=Paris which is when you clik on a marker on the map, it scrolls through the listed of restaurants on the right -hand side of the screen to the…
lauWM
  • 659
  • 3
  • 10
  • 18
42
votes
3 answers

Leaflet.js: detecting when map finishes zooming

So I'm making this application with leafet.js. This application requires that I have to manually draw grids onto the screen, that I've taken care in a draw_grid() function that draws a bunch of polygons to the screen. I have this function that I'm…
Wingston Sharon
  • 1,030
  • 2
  • 11
  • 21
42
votes
3 answers

Setting map language to English in Openstreetmap with LeafletJS

I'm using LeafletJS to add a map component to my app. Everything is fine and dandy except for the localization of the map. Some country names are shown in the local language (I'm assuming). Is there a way to show the country names in English? This…
JohnP
  • 49,507
  • 13
  • 108
  • 140
42
votes
7 answers

Click link inside Leaflet Popup and do Javascript

I have a leaflet map up and running. It overlays a series of polygons (via GeoJSON) on the map and attaches popups to each polygon. Each of the popups display information about that polygon. I'd like to have inside the popup a link that, when…
Josh
  • 3,385
  • 5
  • 23
  • 45
41
votes
8 answers

leaflet map shows up grey

I'm starting leaflet.js with the quickstart but my map shows as grey... is there something I'm missing? script.js: var leafletMap = L.map('leafletMap').setView([51.505, -0.09], 13); L.tileLayer('http://{s}.title.cloudmade.com/' + API_KEY +…
Connor Leech
  • 18,052
  • 30
  • 105
  • 150
41
votes
4 answers

how to make leaflet map height variable

In my Application I was making div of map as
but to make my map responsive I want to make height also 100%, if I make height: 100% then it is not working. How can I make height also variable…
vaibhav shah
  • 4,939
  • 19
  • 58
  • 96
41
votes
6 answers

Is Leaflet a good tool for non-map images?

I am writing a web app that involves navigating technical illustrations (pan, zoom, click). I assume that Cloudmade Leaflet a good tool for this, only because someone used it to make XKCD 1110 pan/zoomable and I really like how it turned…
Jacob Marble
  • 28,555
  • 22
  • 67
  • 78
40
votes
4 answers

Why push shows argument of type 'any[]' is not assignable to parameter of type 'never' error?

In this code i get the fallowing error: Argument of type 'any[]' is not assignable to parameter of type 'never' var markers: []; this.Getlapoints(this.map.getCenter(), 500000).then(data => { for (var key in data) { …
Parsaria
  • 1,049
  • 3
  • 12
  • 18
40
votes
7 answers

custom marker icon with react-leaflet

I tried everything I found on the web, Stackoverflow and Github, and I still can't make it. I want to make a custom marker with a custom icon, but with my code below I always got an error : 'TypeError: options.icon.createIcon is not a function' Here…
arnaudambro
  • 2,403
  • 3
  • 25
  • 51
40
votes
3 answers

How would I customise the look and feel of the leaflet popup?

I am looking at customising a map built using leaflet and I would like to customise the Popup (L.popup). The only method I can think of is to build a custom popup layer with my new dialog in and reposition this every time the user interacts with a…
ArthurGuy
  • 1,459
  • 4
  • 13
  • 25
39
votes
3 answers

Customize Zoom in/out button in leaflet.js

I am trying to customize zoom control (+/-), so it should appear in the right side like Google maps (https://www.google.com/maps/) I tried to add float:right; but it didn't work. From the CSS file : /* zoom control…
user3378649
  • 5,154
  • 14
  • 52
  • 76
39
votes
8 answers

how to pass data with marker in leaflet js

I am using leaflet js with openstreetmap in my project. I have multiple circlemarkers at same place in my map. I want to store some Id in that circlemarkers so that I can Identify that which data should be refereed when circlemarker is clicked. My…
vaibhav shah
  • 4,939
  • 19
  • 58
  • 96
1 2
3
…
99 100