All Questions
Tagged with leaflet openstreetmap
559
questions
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
0
answers
369
views
How to solve problems with offline map display?
There is one problem: I made it using maperitive tiles with the required scale of 12-15 (so that the map is available offline), then the task was to connect the resulting offline map to this project: ...
0
votes
1
answer
582
views
WMSTileLayer event handler does not works in react leaflet
According to react leaflet documentation below code must work. Or am I doing any wrong? A suggestion would be appreciated. Thanks in advance
<WMSTileLayer
layers={ 'banbeis:division' }
...
- 8,899
0
votes
1
answer
667
views
Getting county from click on OSM
Is it possible to detect state and county based on coordinates from a click on OSM map (US only)?
I can get the coordinated using click event in Leaflet JS:
map.on('click', function(ev) {
console....
- 12.4k
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
0
votes
1
answer
1k
views
Leaflet not scaling correctly to mobile devices
I have a problem with scaling leaflet map to fit mobile devices. I'm building an application using React, Leaflet(+React-Leaflet) & OpenStreetMaps.
If I'm placing component like footer or zoom ...
- 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
1
answer
745
views
Marker position changes with higher zoom level on leaflet map with custom tiles
I transformed an image into maptiles with max zoomlevel of 6. There are several markers on this map. Until zoom level 4 everything is ok. With zoom level > 5 the marker position changes.
I use CRS....
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
0
votes
0
answers
317
views
Get all generated route points (of lines) to check if you hear route deviation - Leaflet Js [duplicate]
I create the route using Leaflet to plot the generated route on the map.
var route = L.Routing.Control({
waypoints: receivedWaypoints,
routeWhileDragging: true,
fitSelectedRoutes: true,
...
2
votes
1
answer
431
views
Leaflet markers aggregating when dezooming the map
I am new to Leaflet and I am trying to show a map with markers.
The problem I have is that the markers disappear when I zoom out, and are replaced with a number:
I used CircleMarkers to be able to ...
- 21
0
votes
0
answers
137
views
How to make a custom map & populate it like OSM
I want to make an OSM like map of GTA:San Andreas (already got a leaflet.js map set up) and draw roads, buildings, bridges, etc like on OSM but I have no idea where to start.
Is there a way to ...
- 1
0
votes
1
answer
2k
views
How to integrate offline maps in Ionic+Angular using leaflet maps?
this.map = leaflet.map("mapId", { zoomControl: false }).setView([17.385, 78.4867], 13);
leaflet.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
...
0
votes
1
answer
1k
views
How to add multiple icon for same position in React-leaflet version 3
I'm developing an app using React-leaflet version 3 with TypeScript. In my app, I have the requirement to add multiple icons for one position. EX: A particular [lat,long] position identified as ...
- 303
1
vote
0
answers
98
views
Trying to implement own function in an existing GitHub project
L.interpolatePosition = function(p1, p2, duration, t) {
var k = t/duration;
k = (k > 0) ? k : 0;
k = (k > 1) ? 1 : k;
return L.latLng(p1.lat + k * (p2.lat - p1.lat),
p1....
- 11
0
votes
0
answers
1k
views
Creating custom layer using React leaflet V3
I want to create a custom helper div layer on the map on a button click or mouse-over over the button. The button is also a custom control button on the map. Here is the example control button
My ...
- 303
3
votes
1
answer
8k
views
Custom button on the leaflet map with React-leaflet version3
I'm a new leaflet learner with React typescript. Want to create a custom button on the map. On clicking the button a popup will appear. I saw many example but they are all based on older version and I ...
- 303
5
votes
3
answers
628
views
Plotting OpenStreetMap relations does not generate continous lines
All,
I have been working on an index of all MTB trails worldwide. I'm a Python person so for all steps involved I try to use Python modules.
I was able to grab relations from the OSM overpass API like ...
- 1,187
2
votes
1
answer
1k
views
How to add custom leaflet error handler for open streat map timeouts?
For a few hours I got timeout errors and parts of the map were blue.
Also see
OpenStreetMap often sends Gateway Timeout error
https://forum.openstreetmap.org/viewtopic.php?id=68026
The issue seams ...
- 11.6k
0
votes
2
answers
784
views
Display relation (trail) in leaflet
All,
When I go to this url: OpenStreetMap, I see a map with a "relation" (I assume this is the term for the trail being displayed) on top.
I am trying to get this trail to also display on my ...
- 1,187
2
votes
0
answers
849
views
How to clean up *.osm.pbf files (Removing unwanted nodes, relationships, ways) with osmosis or osmium
I've recently began to dig deeper into manipulation raw osm data and later convert them to *.mbtiles to serve vector tiles to my web application. As the map only needs to be of low detail (is mainly ...
- 5,330
0
votes
1
answer
3k
views
Leaflet js working on localhost, but not working when opening from Harddisk
I have a JS which uses Leaflet to display a map. It works, when I open it on a remote server or using XAMPP on localhost.
But the Openstreetmap Tiles are NOT displayed / working when opening it just ...
- 10.1k
0
votes
0
answers
275
views
How to include the leaflet map in angular formly with custom component
I have to create the leaflet map where I have used the angular formly .
and I have created the custom component for leaflet map as
leaflet.component.ts
import { Component, OnInit } from '@angular/core'...
- 1
0
votes
1
answer
756
views
Leaflet Providing invalid Lng/Lat coordinates when location duplicates on display
Question
Is the lng/lat provided by leaflet not a GPS coordinate? Do I have a way to convert it into GPS coordinates or is this a bug in leaflet?
Steps to reproduce
Setup a map that repeats. Click on ...
- 1,487
0
votes
0
answers
292
views
How to integrate the leaflet map in angular
I want to show the leaflet map in angular application
As I have used the angular formly for application with tabs because In my application I have to create the dynamic forms
In third tab I have to ...
- 1
0
votes
2
answers
1k
views
How to connect the leaflet.js to the Vue.js
How to connect a vanilla library in a Vue.js and then connect plugins.
I know there is a library - https://vue2-leaflet.netlify.app/. But there is limited functionality and there are not all the ...
- 111
4
votes
1
answer
3k
views
Leaflet map marker dragging is not working properly on mobiles when disabling scrolling
I added an OpenStreetMap map on my project using Leaflet. I wanted to disable scrolling on mobiles and wheel scroll on desktops. I used the following options found here and managed to achieve this.
...
- 51
0
votes
0
answers
254
views
How align gpx track with leaflet map Javascript
I have a problem with my gpx track on leaflet map.
My track is displayed on the map but not aligned with road.
I use this library to display the track :
https://github.com/mpetazzoni/leaflet-gpx
I don'...
- 1