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
3
votes
1 answer

How do I reduce the bundle size of React Leaflet?

I have a Gatsby.js project where the parsed size of my bundle is 3.92 MB. 1.1 MB of that is leaflet-src.js. Leaflet also seems to supply leaflet.js which is only 508 KB. After reading this issue, whenever I import Leaflet, I always import this…
ceiphr
  • 33
  • 8
3
votes
2 answers

React-leaflet doesn't display the map with leaflet.css loaded nor resizing

I'm working on a react project using leaflet, but it doesn't display de map, here is the Map component: import React from "react"; import { MapContainer, TileLayer, useMap } from "react-leaflet"; import "./map.css"; function Map({center, zoom…
Erick Morris
  • 31
  • 3
3
votes
1 answer

Folium markers with numbers inside

I would like to make some markers on the map using Folium with some numbers inside the markers. The markers I want to look like the standard inverted drop shapes that Google Maps is using. I saw that for folium.Marker you can use the parameter…
Steven
  • 83
  • 3
  • 9
3
votes
1 answer

How to show/hide legend with control layer panel with leaflet?

I am trying to plot a map with multiple layers. However, when selecting the group I want to show in the controlLayer panel, it changes the map but not the legend. In fact, the 2 legends are always displayed together on the map, but I only want one…
hitaton
  • 103
  • 2
  • 15
3
votes
1 answer

How to use bounds with dynamic markers in react-leaflet

I have the following functional react component which correctly displays two static markers within a 'bounds' box which fits both markers inside. I would like to be able to pass in an array of latitude and longitude values for the map to display but…
Ray Purchase
  • 681
  • 1
  • 11
  • 37
3
votes
4 answers

How to resolve "React Hook useEffect has a missing dependency: 'currentPosition'"

When I include currentPosition in the useEffect dependency array or when I delete it, the code turns into an infinite loop. Why? I have the same problem with map but when I place map in the dependency array it's ok. import { useState, useEffect }…
gcbox999
  • 147
  • 8
3
votes
1 answer

How to render HTML styled leaflet label?

I need to add labels (not poups) to each existing marker on the map. I created labelText variable which stores HTML for a label. And now, when I'm using it with then strange thing happen - each label shows data from the whole dataset, not data…
mustafa00
  • 751
  • 1
  • 7
  • 28
3
votes
1 answer

How to change color/borderColor of concrete country in react-leaflet

I have a map with marker on London. How can i change Great Britain color/borders? …
ADV
  • 179
  • 9
3
votes
0 answers

Is there a way to center text inside a polygon in Leaflet?

I have GeoJSON that has names and polygons for every country in the world. I have successfully rendered polygons (which is basically world map) but I don't know how to show names of countries inside each polygon. It would be also nice if I could…
Nemanja Gakovic
  • 45
  • 6
3
votes
1 answer

Custom markerCluster for two groups in leaflet

Assume a data.frame has column "group" with unique values "group1" and "group2". In leaflet, we can assign these groups a color with ColorFactor(). We can also change markerCluster colors with minimal CSS. How can we assign distinct colors to the…
Rich Pauloo
  • 7,734
  • 4
  • 37
  • 69
3
votes
2 answers

Using an iterator within L.marker

I'm trying to tie an onClick for each marker to call a function that populates data associated with that marker into an element on the page, but the iterator(i) seems to be overwriting itself (every marker acts as if it's the last one iterated…
Ashlander
  • 33
  • 4
3
votes
1 answer

React Leaflet: Get objects from MongoDB to Leaflet map as markers (using node.js and express)

I am trying to fetch data from MongoDB (using node.js and express) and show them as markers on a Leaflet map, using react leaflet. However, I always get an error: Unhandled rejection (TypeError): this.state.images.map is not a function. I am not…
Helene
  • 33
  • 3
3
votes
1 answer

Nuxt Leaflet, change tile layer requests incorrect tiles

I am using Nuxt Leaflet, and I have not figured out how to change the tile layer. I have tried multiple different approaches, and they all result with not requesting the proper tiles for the changed layer. Here is an example:
user1666858
  • 321
  • 2
  • 13
3
votes
0 answers

LEAFLETJS Fetch all points along route between waypoints

[Duplicate] I am asking this question again as my original question was incorrectly closed by linking the question below to mine, but the provided solution doesn't answer my question. Previously provided "solution": (Getting waypoints from leaflet…
JustSomeGuy
  • 315
  • 2
  • 17
3
votes
1 answer

Geopackage not rendering polygons to map

The code to create the map: