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
13,875
questions
4
votes
1
answer
1k
views
Angular 6 - Add Bing Maps to Leaflet Maps
I am using leaflet-bing-layer plugin, in order to add a Bing based map with Leaflet.
Since I am using also OSM, I import both leaflet and leaflet-bing-layer.
The import statements are as follows:
...
6
votes
1
answer
7k
views
Removing items from leaflet markercluster
I have two functions that load markers into my map. (Both functions are called on success of an AJAX call)
First Function is like this:
function loadEpsMarkers(data) {
for (var i = 0; i < data....
- 51.5k
0
votes
0
answers
24
views
Plugin Leaflet-Search and Fetch call to GeoJson in Geoserver
I am connecting to a wfs service from my geoserver through the Fetch method in my code and it works correctly.
But I want to add this plugin by Stefano Cudini https://github.com/stefanocudini/leaflet-...
- 31
0
votes
0
answers
36
views
How to make a Leaflet GridLayer interactive
So I make vector tiles with geojson-vt, using the Leaflet GridLayer. The vector tiles work just fine. But I want to make it interactive. In the Leaflet (1.9.4) docs mentioned that GridLayers have many ...
- 167
3
votes
1
answer
524
views
R Shiny leaflet stop zoom on scroll and use ctrl + scroll to zoom the map & move map with two fingers on mobile?
I am creating 100 + leaflet maps in my shiny app.
The maps are 100% of the width of the page, so when the user goes to scroll down the page it zooms the map but I would like it to continue scrolling ...
- 629
1
vote
1
answer
71
views
Leaflet in angular/typescript application
I'm going to use Leaflet (1.9.4) in Angular (15.1.6)/typescript application.
So in index.html I added
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css&...
- 42.2k
1
vote
0
answers
37
views
Django can't find leaflet admin widget.html
I want to use LeafletGeoAdmin in the Admin pages.
from leaflet.admin import LeafletGeoAdmin
@admin.register(Marker)
class MarkerAdmin(LeafletGeoAdmin):
list_display = ("name", "...
- 467
0
votes
0
answers
70
views
React-leaflet image overlay always as a background regardless of resolutions?
Im having problems with ImageOverlay inside react leaflet, I want to have an image with fixed aspect ratio always be background and not be able to be zoomed out of it, but using fitbounds or ...
- 1
0
votes
0
answers
52
views
How do I change the position of the zoom buttons in the TWebLeafletMaps component?
By default, the buttons are aligned top left as can be seen here:
Normally when using Leaflet in JavaScript, then when initializing the leaflet map, you're able to set a position like shown here:
//...
- 3,055
0
votes
0
answers
24
views
How to improve sharpness of leaflet map?
I'm working on my first mapping app. The map on my app is fuzzy compared to the sample online. It's painful to look at because the text isn't sharp. How do I get the sharpness of the online sample?
...
- 467
0
votes
0
answers
17
views
Deployment error for Importing/exporting DomUtil
Failed to compile
⨯ ./node_modules/@react-leaflet/core/lib/dom.js
Attempted import error: 'DomUtil' is not exported from 'leaflet' (imported as 'DomUtil').
This error occurred during the build process ...
- 18.9k
7
votes
2
answers
9k
views
Geojson/ turf : merge multiple polygons to one polygon keeping hole
So I want to merge adjacent polygons in javascript this is what I actually have with my code:
I want to remove inside stroke but keep border stroke.
So I want to go from this:
To this:
I want to ...
- 15.7k
1
vote
3
answers
2k
views
R leaflet package produces blank (grey) map [Ubuntu 14.04]
I tried out the examplecode from the leaflet package doc:
devtools::install_github("rstudio/leaflet");library(leaflet)
m <- leaflet() %>%
addTiles() %>% # Add default OpenStreetMap map ...
3
votes
2
answers
4k
views
Leaflet/Vue 3 Issue Uncaught TypeError: Cannot read properties of null / this._map is null
I am facing an error on Leaflet on Vue 3 whenever i try to zoom in or out when a popup is closed. The error on Mozilla:
Uncaught TypeError: this._map is null Popup.js
and the error on chrome
...
- 41
1
vote
0
answers
561
views
How to integrate leaflet into power BI
I want to make a custom visual of power bi with the exact same benefits of leaflet.
I know how to implement leaflet using angular and how to make a custom visual.
But I couldn’t find any good ...
- 1
6
votes
3
answers
9k
views
start a function when click on circle - leaflet
I make some circles in JS as follow:
L.circle(
[46.765735535841024, 23.58344078063965], 5, {
color: "blue"
}).addTo(map).bindPopup("Description: This is my description");
I want to replace ...
0
votes
0
answers
29
views
How to change mapCenterPosition in React Native Leaflet without reloading the map?
I'm working on a React Native app and using the Leaflet map for displaying geographic data. My current implementation involves updating the map's center position based on user interactions or incoming ...
- 354
5
votes
3
answers
2k
views
Integrate EasyButton, Geoman with ngx-leaflet
I am using raw leaflet.js in my Angular Application which depends on some leaflet plugins like EasyButton, Geoman, Distortable Image. ngx-leaflet looks cool and simple. So I've decided to migrate to ...
- 739
3
votes
2
answers
3k
views
Nuxt3 generate TypeError: Cannot read properties of null (reading 'isCE')
I'm using Nuxt3 + Vite + Leaflet + Bootstrap for my app. The app is working fine in development, but when I try to generate the static site using npm run generate, I get the following error:
...
0
votes
0
answers
27
views
Leaflet.js dragging is really slow in Firefox
I've made a Leaflet map for my clients using Django. The map is working great on Chromium based browsers (I've tried Google Chrome, Microsoft Edge and DuckDuckGo), but dragging around is insanely slow ...
- 11
1
vote
2
answers
196
views
React Leaflet markers not rendering with location data fetched from an API using useEffect
I am trying to render leaflet markers using React Leaflet with data fetched from an API using useEffect. The markers are not showing up despite the location data being non-null at the time of ...
- 126
0
votes
0
answers
46
views
Building tooltips in Svelte or NextUI or anything else?
I'm trying to do something relatively simple, but I'm in no way a designer--this would basically be a chunk of custom code in SquareSpace.
I'm trying to do an interactive series of annotations to ...
- 1
0
votes
1
answer
76
views
Hide rest of map around country with leaflet.js in next js
I need help please. I would like to hide the other maps and only show the one of Cameroon. I'm using Leaflet and I'm on Next.js to be able to display the map. I saw this page React-Leaflet 4 with ...
- 3,240
1
vote
2
answers
107
views
How can I get marker details after that is added to the map?
I'm using this library in a vue project that is implementing leaflet.
I need to get the added marker when an user will select an address after that the library have found the desired location. I've ...
- 56
0
votes
1
answer
32
views
Module not found: Error: Can't resolve 'leaflet.animatedmarker'
I ran the npm install -S leaflet.animatedmarker command.
My package.json file contains "leaflet.animatedmarker": "^1.0.0". However I couldn't run the project. I got Module not ...
- 535
0
votes
1
answer
190
views
Leaflet get all polylines added to map
Once you add one or more polylines to a map with clickable action and want to use measure tool PolylineMeasure, those polylines are in a way. How to get all created polylines in map to disable ...
0
votes
2
answers
543
views
Leaflet tile edges show
I have a Leaflet map with custom tiles. On my PC the map renders correctly. On our Intranet site the edges of the tiles show as light gray. There is a very small sliver of light gray around each ...
- 685
0
votes
1
answer
381
views
Handling Average of a lot of Values
I'm inserting Markers with a specific Value onto an Openstreetmap via leaflet. Futhermore I want those Markers to get Clusterd while zooming out of the map. The Clustericon should show the average ...
- 3,614
0
votes
2
answers
40
views
Leaflet not drawing polylines
I had several apps running under Chrome on a Windows 10 PC. It stopped working so I reinstalled leaflet but it still doesn't work. Using Chrome Developer Tools, it stops in leaflet.js at
return ...
- 67
53
votes
2
answers
47k
views
How to save Leaflet in R map as png or jpg file?
I'm using Leaflet package to create maps in R. It works perfectly. I can export maps in R with simply Export, but I need to export maps from script in R. My simple code is:
png("test_png.png")
(m <...
0
votes
2
answers
42
views
In chrome, The pin is placed somewhere other than where click on leaflet
I have a leaflet map in an html page (I put my code below). When I open it in chrome browser and click on the map, it puts the pin somewhere other than where I clicked. But it works fine in FF browser....
0
votes
1
answer
178
views
Leaflet with mapkitmutant and Apple mapkit domToImage generates an all-grey image
Leaflet with mapkitmutant and Apple mapkit domToImage generates an all-grey image.
This works as expected with OpenStreetMap, Google Maps and Bing Maps.
The onscreen display is okay; just the ...
- 31.4k
0
votes
1
answer
618
views
leaflet map - adding a custom control similar to to the layers control but would like a different icon - defined by CSS
I'm building a custom control on a leaflet map which I'd like to have work similarly to the leaflet layers control. I've copied the logic from the layers control to display the icon on the map and ...
- 61.2k
1
vote
1
answer
41
views
Leafletjs fitBounds not in center
I have five markers: one for the center (coordinates: 0,0), and four for each side with coordinates:
(1, 1) (1, -1) (-1, 1) (-1, -1)
I'm attempting to adjust the map to display all markers at the ...
- 9,299
1
vote
0
answers
400
views
React leaflet. map is not showing
I have been trying to create a map section in my website for at least an hour now, but the react-leaflet or leaflet just won't work at all. I do every step that the doc says, I have watched a lot of ...
0
votes
0
answers
36
views
Move cursor to marker position in leafletjs
I have an image which I rotate by dragging a marker. To continue dragging from same position where user has left dragging previously, I am setting the coordinates of marker to lastRotationPoint.
Here ...
- 1,023
0
votes
1
answer
75
views
Next.js React-Leaflet bouncing marker using Leaflet.SmoothMarkerBouncing
I am new to the front-end development, I am trying to get bouncing marker in React-leaflet using
https://www.npmjs.com/package/leaflet.smooth_marker_bouncing/v/1.3.0?activeTab=explore
But I don't have ...
0
votes
0
answers
37
views
Leaflet draw polyline on train tracks
im trying to creating polyline between points in leaflet.
Im trying use Routing but it work only for roads(i need on train tracks).
Did you have any ideas what i can try next?
Im trying to use Routing,...
- 1
10
votes
3
answers
29k
views
Leaflet Popup with additional information from GeoJSON
I want to bind the additional information from geojson to a leaflet marker popup. I looked up a few things from the leaflet documentation but it doesn't work.
var map = L.map('map').setView([51.9, 7....
- 27.1k
0
votes
1
answer
63
views
Leaflet does not work with a specific basemap layer in R
I am recently working on a project. Its one dimension is to make a leaflet map with different basemap layers. Here is the code so far;
library(leaflet)
library(leaflet.providers)
leaflet() %>%
...
- 500
0
votes
0
answers
76
views
How to use the Leaflet on React Native and also to have a marker and the routing mechanism
We were using the Google maps and API's for the mobile app, but considering the cost for API's in picture we would like to explore the Leaflet in react application. Can someone help to find some good ...
- 1
14
votes
4
answers
13k
views
Wrapping lines/polygons across the antimeridian in Leaflet.js
Is there a way to get a shape to wrap from one edge across the dateline meridian (180° longitude) to appear on the other side of the map in Leaflet.js?
I've looked at:
http://leafletjs.com/reference....
- 21
0
votes
1
answer
62
views
Not found custom icon in static files
I am using custom pin icon for map (based on leaflet), the custom icon file mixed.png is located in static/icons/.
Part of template index.html looks like:
<script>
// JavaScript code to ...
- 1,316
4
votes
3
answers
3k
views
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-...
1
vote
2
answers
1k
views
Cannot display mapview output after installing R 4.0.0
After I installed the R 4.0.0, I cannot display the mapview output in the viewer of RStudio. It would be great if someone can give me some hints to solve this.
Here is an example code.
library(...
- 91
0
votes
1
answer
94
views
Use boostrap-icons for leaflet map markers
I want to use Bootstrap Icons for the map markers in Leaflet. There are a number of plugins for this (e.g. [1], [2], [3]), but they're unmaintained or don't work with the latest Bootstrap Icons.
So I ...
- 4,063
1
vote
0
answers
39
views
Leaflet Map with file download in popup, onclick event on anchor tag not working
I cant get this anchor to work for a download, and after clicking it, it should be showing a DIV.. What am I doing wrong?
Please see this jsfiddle: https://jsfiddle.net/gimoya/b75haye4/15/
var cities =...
- 2,812
1
vote
0
answers
1k
views
Adding a static image overlay to leaflet map (stays with zoom)
I'm trying to add an image (a colorbar) to my map at a particular position. When the image zooms inward or outward (or to a separate location), I wish to have the image remain in the same position (...
- 3,055
0
votes
0
answers
61
views
How do I clear the OpenStreetMap tile layer in the TWebLeafletMaps component?
I have a TWebLeafletMaps component from TMS WEB Core that is placed on my form and it loads an OpenStreetMap by default.
I don't seem to have any control over this. It just loads OpenStreetMap by ...
- 3,055
0
votes
1
answer
52
views
How do I draw a line between two coordinates in the TWebLeafletMaps component?
In this blog post, they clearly show how to draw a line between coordinates:
procedure TForm2.WebFileUpload1GetFileAsText(Sender: TObject; AFileIndex: Integer; AText: string);
var
ja: TJSArray; ...
- 3,055