All Questions
272
questions
0
votes
0
answers
25
views
Leaflet : how to force using a specific tile server when zooming on known locations?
I'm using leaflet for displaying some maps.
I know that my users will zoom in for some location.
As you know, tiles are realtime calculated if zoom is high.
I want to store pre calculated zoomed tiles ...
- 11
0
votes
0
answers
23
views
How to properly zoom and update OpenStreetMap tiles on my JS Maps
When I launch the file everything works fine and the mouse movements are correct however the zoom is catastrophic and it does not zoom/refresh the next tiles of OpenStreetMap
class CustomMap {
...
0
votes
0
answers
22
views
setZoom not working in Chrome but is working in other browsers
I am unable to get setZoom or any of the zoom features to work on my leaflet map in Chrome.
It works fine in Firefox and Edge but I need it to work in Chrome also and cannot find anything on this.
Any ...
- 1
0
votes
0
answers
24
views
Polyline starts from main world map instead of nearest point [duplicate]
I am using Leaflet map to draw polylines and connect waypoints by clicking on the map.
I also cloned the route and waypoints to the left and right world map.
Sometimes, the route is drawn incorrectly. ...
- 394
0
votes
0
answers
24
views
Can I load basemap without center or set view in map initialization
I have the center coming from a different layer, however, that layer is loading slowly so initially you see a blank map container.so, I want the basemap to be visible.
view.map = L.map('map_' + mapId, ...
- 1
1
vote
1
answer
98
views
custom zoom-in zoom-out buttons in leaflet using pico.css
Coming from this answer to customization of marker in leafleat: remove blue background from markers, now i have the following problem:
.html file:
<!DOCTYPE html>
<html lang="it">...
- 59
3
votes
1
answer
108
views
remove blue background from markers
how to remove the blue background from the markers?
this happen using default icon and a custom one (png with transparent background)
am I doing something wrong?
<!DOCTYPE html>
<html lang=&...
- 59
0
votes
0
answers
31
views
Cannot achieve live navigation using js,openstreetmap and leaflet
I'm currently working on implementing live navigation functionality in a web application using JavaScript. The goal is to update a tracker marker on a map according to the user's position on a ...
- 55
1
vote
0
answers
35
views
Leaflet OpenStreetMap Changes View based on window size
I am using Leaflet and OpenStreetMap to generate an interactive map. The map generates fine and you are able to interact with the map. The issue I am encountering is if the user has a large screen ...
- 11
0
votes
1
answer
84
views
How can I get geoJSON file read correctly in JavaScript?
I am using Leaflet and OpenStreetMap's to display a map on my page. I followed the steps to create a simple map on the page. Once I was able to generate a map, I follow the steps on creating a geojson ...
- 777
0
votes
1
answer
81
views
How to add arrow-marked lines in Leaflet map to indicate direction from one location to another?
I'm working on a project involving Leaflet maps, and I'm trying to find a way to add arrow-marked lines to indicate direction from one location to another. Can someone please provide guidance or code ...
0
votes
2
answers
56
views
Adding Map of tunisia at the open street map with polygon
i need help i am trying to show the map of tunisia at the map there is nothing shown , this my code of javascript :
`
<script>
$(function () {
var polygon = null;
var ...
0
votes
0
answers
58
views
How to use Leaflet Terminator together with the Heatmap
I have a code where, upon running the Leaflet terminator, the heatmap disappears, but the terminator runs successfully. However, when I remove the terminator, the heatmap appears. Below is my code ...
0
votes
0
answers
37
views
Leaflet Marker Cluster - click button in table to open popup inside cluster spiderfy
i will click button in table to open popup inside cluster spiderfy, but it not open the popup
but if not cluster spiderfy disable popup is work
var tiles = L.tileLayer('https://{s}.tile.openstreetmap....
1
vote
1
answer
67
views
How to put png image over openstreemap map in wix site that the png image will be integral part of the map?
first in general:
I want to put a weather radar image with clouds over openstreetmap map of my country.
this is the png image the radar image:
and this is how it looks like in the Israeli official ...
- 11.2k
0
votes
1
answer
112
views
In openstreemap/leaflet how to display in real time the coordinates in a small tooltip when the mouse moves over the map
I want that when i move the mouse over the map it will display like in a small tool tip balloon the coordinates in real time on the mouse cursor for example like: 35.56, 56.765
I tried this code in ...
- 11.2k
0
votes
0
answers
113
views
How to use OpenLayer ZoomSlider with Leaflet
I tried to display a map with Leaflet and OSM. The project uses C# Blazor and .NET 8 but the map parts are just javascript. I added a slider to zoom using ZoomSlider from OpenLayers.
The slider does ...
- 394
0
votes
0
answers
144
views
Leaflet/Openstreetmap, giving me blank white screen in the map route
Heads up, brand new coder, and even newer to ruby on rails. Creating a project and I need an interactive map.
Here is what I did following the leaflet tutorial and some youtube videos
First I added ...
0
votes
1
answer
58
views
Multiple circles overlap on the map
I use Leaflet for showing coverage map.
I create many circles in nearby location by radius and opacity.
Circles are overlap and filled color is very bold.
How can prevent overlap and all color should ...
0
votes
0
answers
23
views
Make a marker unable to use for a time
I have a map with markers. Every marker is a charging station. I want that the user that want to use the charging station, can book the place for an hour for example and set a time that is shown. When ...
- 1
0
votes
0
answers
81
views
change marker color based on properties
This is my first time here on stackoverflow. I have a doubt. I marked some markers on my map (I used OpenStreetMap). On each marker I put a drop-down menu with choices. Based on these choices, the ...
- 1
1
vote
1
answer
157
views
Set Leaflet marker to always stay in the middle of the map
I'm working on a SvelteKit project where we're moving from Google Maps to Open Street Maps using Leaflet.js. With Google Maps we have a marker that always stays in the center of the map even when ...
0
votes
2
answers
145
views
How to implement Javascript Leaflet demo code to show a simple map and point? (blank page returned)
I try to just imitate the simplest example code of Leaflet (https://leafletjs.com/index.html) as follows. But somehow I only got the blank page. Can somebody spot what is wrong? Many thanks!
<html&...
- 197
0
votes
0
answers
177
views
Why doesn't this add markers to my Leaflet map?
I have this leaflet map inside a HTML file that I can easily return with my Flask app.py, but I've been trying to add a marker for a while now to no avail.
var marker = L.marker([latitud, longitud]);
...
- 11
-1
votes
1
answer
118
views
I'm using breezometer api and leaflet and openstreetmap to show heatmap of world but the api require key and I don't want to show the key to end user
I'm creating a project in laravel to show heatmap of a country by using breezometer heatmap layer api and leaflet with openstreet map to achieve the same. But Idk how can I hide the api key from end ...
- 7
0
votes
0
answers
97
views
Image manipulation on the map in Leaflet
I would like to be able to resize the image displayed on the map. E.g. using sliders (other solution is also welcome).
The image is in png format, the background is transparent.
I would like to be ...
- 13
0
votes
1
answer
124
views
Unable to see polyline in OSM map
I'm working to plot ways using OSM and leaflet using node as a back end. On the front end I have leaflet2.html which has the following in the script tag:
const mymap = L.map("map");
...
- 35.5k
1
vote
1
answer
568
views
Getting Linestring coordinates for roads using OSM
I'm trying to get the road network in an area focusing on the smaller (1-2 lane ) roads using osm and node. Using the OSM overpass api, I used the following query:
const roadsOverpassQuery = `
[out:...
- 35.5k
1
vote
1
answer
889
views
Search bar for open street map
I need help to add an functional search bar for this project. Like you search 'London' and get redirect to London, I'm having problems.
Here is my code for you guys:
var mymap = L.map("mapid"...
0
votes
1
answer
405
views
Leaflet - Layer-type object spawned by method 'L.marker' it contains information, which wasn't passed to that method
I'm attempting to implement a mapping functionality into my Laravel app, using Leaflet.
For doing that, I've been analyzing, line by line, how it works the code of an existing example project, with ...
- 121
0
votes
0
answers
626
views
Leaflet / Alpinejs / all markers (layer) position change on zoom after using categories filters
You will find my code below.
I have a map with category filters. The map initialize and display correctly but when I use the filter (and the filterMarkers function), the markers change but when I zoom ...
2
votes
1
answer
98
views
Leaflet - Define maxNativeZoom based on specific regions
I'm trying to figure out how I can specify the maxNativeZoom multiple times for different regions/bounds.
Our tile server has more detailed tiles available for some parts of Europe. I would like to ...
- 659
1
vote
1
answer
232
views
How to visualize multiple lanes (bus, cycle etc.) from single polyline (OSM data) in Leaflet?
My use case:
Single polyline is tagged with multiple lanes containing also a cycle lane.
How would I go about visualizing them side by side using Leaflet? Polyline is a set of GPS coordinates and I ...
- 11.4k
0
votes
0
answers
185
views
Leaflet openpopup doesn't show up
Hello I'm trying to open popup in Leaflet by clicking on elements:
let markersS = L.markerClusterGroup();
const markers = places.map(function (place) {
return markersS.addLayer(
L.marker([place....
- 120
1
vote
0
answers
836
views
Overlay a tile layer on top of another tile layer using leaflet
I aim to overlay a tile layer on top of another. The first tile layer is created using L.tileLayer() using the url: baseUrl='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' and the second tile ...
- 11
0
votes
1
answer
369
views
Showing more details ons leaflet map
Currently i'm implementing a leaflet map that serves map data from our own OSM server.
During the implementation I noticed that the details on the maps are not clearly visible. Street names are ...
- 659
-2
votes
2
answers
281
views
Show Result routing path with Leaflet
I get route between 2 Point :
{
"routes": [
{
"overview_polyline": {
"points": "m{f~D}_ygHp@wAJs@Is@eAsBGk@Hg@"
},
"legs&...
- 313
0
votes
1
answer
3k
views
Find user's current location with Leaflet
In my project I am using leaflet to display points. I want to get the current lat and long after clicked on button Show Your Location, I tried the below code:
https://jsfiddle.net/a1p26e7v/
What do i ...
- 53
0
votes
1
answer
2k
views
How can I update a Marker custom option? Javascript and Leaflet
I have a leaflet map with some Markers and I need to update custom option inside Marker option when I make doble click on each Marker.
extendedMarker = L.Marker.extend({
options: {
...
0
votes
0
answers
152
views
Spanning a squareGrid with turf over the whole map
I am using turf to create a squareGrid:
var Karte = L.map('Karte').setView([34.724126, -92.4079673], 15);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
'...
- 5,175
1
vote
0
answers
135
views
How to detect if point is inside a natural area (or other type) polygon with overpass?
I am trying to figure out how to detect if latitude/longitude pair (-25.70078,-54.44522) is inside a natural area polygon.
Is there a better solution ?
So far I have something like this:
https://...
- 11
0
votes
1
answer
448
views
Leaflet control disapperars while dragging map on mobile(React)
Currently doing a map with React-Leaflet. On desktop everthing works fine, but on mobile(iPhone X) the layercontrol and zoom control flicker/disappear while moving the map.
function Osm() {
...
- 695
1
vote
0
answers
230
views
React-leaflet, GeoJson: problem with coloring layers after choosing a option from cascader
I have an issue with my interactive map, I have a react-leaflet map with GeoJSON layers. Also, I have added some state components like cascader with some name of countries options, like Austria, ...
- 31
0
votes
0
answers
1k
views
Leaflet: Uncaught TypeError: Cannot read properties of null (reading '0')
I am trying to display a polygon on the map that can be flexibly updated by a reload.
To do this, I call the data as follows:
$.get('./load-polygon.php', function(csvString) {
map....
1
vote
4
answers
1k
views
Color certain grid tiles based on coordinates
I would like to color certain grid tiles based on their coordinates.
I created the following grid:
<!DOCTYPE html>
<html>
<head>
<title>Color Tiles</title>
&...
- 5,175
0
votes
1
answer
1k
views
Trouble figuring out how to use GeometryUtil with React-Leaflet
I'm building an application with JavaScript, React & Leaflet(+React-Leaflet plugin).
I want to get coordinates of closest marker to my location, but I'm having trouble figuring out how to use ...
- 191
3
votes
0
answers
1k
views
Display ECharts map using OpenStreetMap without Leaflet
I would like to render a geographical map inside my web page using the ECharts library.
ECharts needs a third party service to retrieve the images of the geographical region that it must display and I ...
- 917
0
votes
1
answer
409
views
Show map markers on hover
I have a list of links to several locations. I would like to add map marker to my OSM map and remove it when I hover out, while adding new one I hover over etc. I've been been able to add marker to ...
- 12.4k
0
votes
1
answer
851
views
Get Leaflet map tile image for polygon
For a project I need to generate previews of polygons that we store in the backend. A polygon typically has this format: [lat,long]
const polygon = [
[
4.329064,
51.276626
],
...
- 678
1
vote
2
answers
1k
views
OpenStreetMap tile opacity
is there a way to set the opacity of just the tiles using leaflet and OpenStreetMap?
I want the map to have 50% opacity, but keep 100% opacity on the markers.
Setting opacity like this, does not work:
...
- 15