GIS Stack Exchange
GIS Stack Exchange

Questions tagged [leaflet]

An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps

According to its home page:

Leaflet is a modern open-source JavaScript library for mobile-friendly interactive maps.

Weighing just about 33 KB of JS, it has all the mapping features most developers ever need.

Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms, can be extended with lots of 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

Desktop

  • Chrome
  • Firefox
  • Safari 5+
  • Opera 12+
  • IE 9–11
  • Edge

Mobile

  • Safari for iOS 7+
  • Chrome for mobile
  • Firefox for mobile
  • IE10+ for Win8 devices

There are now two packages for using leaflet from within the language for data analysis and visualization. You can also use from within using the package at https://rstudio.github.io/leaflet/ . Additionally, You can read the documentation on another package at http://cran.r-project.org/web/packages/leafletR/leafletR.pdf

You can find more information on its:

4150 questions
34
votes
4 answers

Disable panning/dragging on leaflet map for div within map

Does anyone know how to suppress panning when you click and drag over top of a div box embedded within the map itself? For example here, when you click and drag over top of the legend, the map drags with you. I want to suppress that function. I am…
Mr. Concolato
  • 506
  • 1
  • 5
  • 10
32
votes
4 answers

Disable leaflet interaction temporary

How can I temporary disable zoming/draging the Mapview in Leaflet.js Tried so many ways but without any luck. It's important to make it temporary and I also need the option to enable again.
Bernhard
  • 503
  • 2
  • 5
  • 10
31
votes
4 answers

How to add text-only labels on Leaflet map with no icon

I'm looking for a way to show text on Leaflet map using markers or anything else without showing any icon. I want to show text only and be able to style and rotate it... Any suggestion?
Etienne Desgagné
  • 882
  • 1
  • 8
  • 15
30
votes
5 answers

Drawing polyline in Leaflet?

This is my coding I used in Leaflet: var pointA = new L.LatLng(28.635308, 77.22496); var pointB = new L.LatLng(28.984461, 77.70641); var pointList = [pointA, pointB]; var firstpolyline = new L.Polyline(pointList { color: 'red', …
againstflow
  • 5,034
  • 18
  • 56
  • 87
24
votes
4 answers

Triggering click event on Leaflet map?

Is it possible to make a click event occur at a particular lat/lon on a leaflet map? I would like to make a popup appear that is associated with a point at a particular location. I have tried several combinations of map.fireEvent('click', latLon)…
djq
  • 16,297
  • 31
  • 110
  • 182
22
votes
4 answers

Custom Leaflet Controls

I have gotton some help in creating a custom control for leaflet, but I am still having trouble upgrading to the CSS styles used by the latest versions of Leaflet. Basically, all I need is a icon in the white box, with the drop shadow around…
Dr.YSG
  • 1,367
  • 2
  • 17
  • 27
20
votes
1 answer

How to check if a leaflet layer is already added on the map?

I built a simple map app where I have a layer on top of a map. In Leaflet, how can I check if the layer is already present?
user1919
  • 2,654
  • 2
  • 30
  • 70
18
votes
1 answer

How do I get the bounds of a layerGroup in Leaflet?

I have added multiple geoJSON layers to my map by first adding them to a LayerGroup and then adding the layerGroup to the map. Now I want to call fitBounds on the map with the combined bounds of all the layers, the problem is that layerGroup does…
fccoelho
  • 1,237
  • 5
  • 13
  • 22
17
votes
5 answers

Dynamically set zoom level based on a bounding box

I have a leaflet map whose size depends on the size of the browser window. I would like the zoom level to be dynamically chosen so that it is as zoomed in as possible while showing the entirety of the bounding box. Right now, I just have the zoom…
Mike McKay
  • 451
  • 1
  • 3
  • 12
16
votes
3 answers

Color-code a Leaflet polyline based on additional values, e.g. altitude, speed,

I'd like to draw a GPX-track on a Leaflet map. The polyline shouldn't have only one color, but I'd like to show certain values like altitude, speed, heart-rate, temperature, cadence, slope color-coded. Of course only one value can be visualized at…
hgoebl
  • 338
  • 1
  • 3
  • 9
16
votes
2 answers

Placing controls outside map container with Leaflet?

Can someone tell me how I can place controls outside of the map content with Leaflet? In this case, I just want to place the layer switch control outside the map object.
mauricio santos
  • 409
  • 1
  • 4
  • 12
13
votes
4 answers

Leaflet draggable Marker

I have setup a draggable marker on my map with Leaflet API. Its working fine. But the problem is when I am trying to drag it to the border area the map is not moving. I want a panning map with Marker dragging. Please let me also know how can able to…
Devils Dream
  • 3,179
  • 9
  • 44
  • 78
13
votes
2 answers

Examples of leaflet interactive mapping applications

I would like to develop a simple mapping application. One where users can digitize lines, polygons and points and attribute the features. The attributes will then be stored in a database for later assessment. Has anyone seen such an app using the…
Robert Buckley
  • 10,175
  • 14
  • 76
  • 156
12
votes
2 answers

Leaflet: how to use a custom marker on a geojson layer?

I'm trying to put on a Leaflet map a geojson and all works fine until I use the default blu marker. Now I'd like to use a custom marker (a little .png icon) and I've changed my code in the follow var my_json; …
Cesare
  • 2,001
  • 8
  • 36
  • 60
11
votes
2 answers

Making leaflet control open by default

I'm using leaflet to display a map. I have a control section that I'd like to be open by default, but I can't find a way to do it through the API. Is there a way to do this?
Ethereal
  • 253
  • 1
  • 3
  • 7
1
2 3
…
25 26