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
0 answers

Crosstalk - Filtering two different shared data environments in one Leaflet map

I have two separate dataframes that include a common key that I'm attempting to map with leaflet and provide filtering through crosstalk. For this application, shiny is not an option since these will be standalone webpages that are upload to…
Brad
  • 41
  • 3
3
votes
2 answers

How to set the map to a geolocation on map load with React-leaflet v3

Hello I would like to load the map with the geolocation coordinates. Right now I have my map loaded on a defined center and when the event onClick happens, the view is set to the geolocate location. I just would like that this happens when I load…
3
votes
2 answers

How to clear previous leaflet layer after click on new one

I try to remove selection of the layer when using a mouse click on new area. So there is on lick functionality on the layer layer.on({ click: (event) => { event.target.setStyle({ color: "black", weight: 1.5, }); …
Roman
  • 83
  • 7
3
votes
1 answer

How to add onClick to the map `leaflet`

I'm using Leaflet i want to show an alert that shows latlng of the clicked location I followed document steps in here https://leafletjs.com/examples/quick-start/ I've tried this var mymap = L.map('mapid').setView([51.505, -0.09], 13); …
joseph smith
  • 143
  • 1
  • 10
3
votes
1 answer

Leaflet.markercluster - how to count all markers in a markerClusterGroup?

I am using Leaflet.markercluster. This is my code, basd upon the various related questions: // Takes an L.markerClusterGroup as input parameter Self.GetNumMarkersInClusterGroup = function(clusterGroup) { …
Mawg says reinstate Monica
  • 38,334
  • 103
  • 306
  • 551
3
votes
1 answer

React-leaflet: Default marker moves on zoom

I am creating a Ionic React project that uses react-leaflet to display markers on a map. I followed the instructions from the docs to get started and while everything renders perfectly, the default example marker keeps on moving when zooming in/out.…
3
votes
3 answers

Adding data from URL to a leaflet map

I am trying to add covid Data from a URL to a leaflet map. The issue is that my map is loading and drawing before the data has fully loaded. I have a file of JSON data which I call statesData. Then, I use the p5.js loadJSON() function to grab covid…
3
votes
2 answers

Circle getBounds() method fails in Leaflet

I have: const map = L.map("mapid", {preferCanvas: true}); //.... const circle = L.circle([47.6652642, -122.3161248], { color: '#ea647f', fillOpacity: 0.4, radius: 30 }).addTo(map); but calling getBounds() on circle fails: const…
Danielle
  • 3,324
  • 2
  • 18
  • 31
3
votes
0 answers

How to delete polygons created with addDrawToolbar with actionButton

I am creating a map app with shiny. I'm looking for a way to delete a polygon created with addDrawToolbar using the actionButton placed on the sidebar. The sample code is as follows. library(shiny) library(leaflet) library(leaflet.extras) ui <-…
ken iwa
  • 171
  • 8
3
votes
1 answer

How can I line up a GeoJSON world map with Leaflet so that coordinates line up?

Lets say I want to use Leaflet offline by rendering a GeoJSON world map generated with a tool like the one found here: https://geojson-maps.ash.ms/. In Leaflet's documentation on GeoJSON it looks like I'd use the option coordsToLatLng to do this,…
J.Todd
  • 707
  • 1
  • 12
  • 34
3
votes
2 answers

React leaflet and react-leaflet-draw

I'm trying to implement the draw functions on leaflet map. I've created a new app with only react-leaflet installed, using npx create-react-app and the following packages installed: npm install react react-dom leaflet npm install react-leaflet At…
Giox
  • 4,785
  • 8
  • 38
  • 81
3
votes
1 answer

Error when trying to map a choropleth using react-leaflet-choropleth: Cannot read property 'map' of undefined

I am attempting to make a choropleth in react using react-leaflet-choropleth. I have leaflet working fine.Now when I try to load a geojson (crimes_by_district) using the library I am getting an error when mapping through the features,…
LoF10
  • 1,907
  • 1
  • 23
  • 64
3
votes
0 answers

Blazor - Keep the rendering after routing

I have a Blazor(web-assembly) page that has a map(Leaflet) which is heavily loaded items on it. When user moves to another page then returns to the map page(with routing not reloading) the map div element cleared and I have to fill the map again…
nAviD
  • 2,784
  • 1
  • 33
  • 54
3
votes
1 answer

Vue2-leaflet use ES modules to decrease bundle size

I'm using Vue-cli 2 and import Vue2-leaflet modules LMap, LTileLayer in my main.js with import { LMap, LTileLayer } from 'vue2-leaflet' By using webpack-bundle-analyzer I can see the bundle size is still 421kb (leaflet-src.js only). Why is this not…
nonNumericalFloat
  • 1,348
  • 2
  • 15
  • 32
3
votes
0 answers

Leafletjs heatmap

Leaflet has a nice heatmap layer, but which I am finding difficulties to handle when zooming into the map. I can set the data to have a radius of 0.1 and they look very nice when I have a zoom level of 8. If a user zooms in to a level of, say 10,…
1 2 3
99
100