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 Django website, where I am using django-leaflet.
At the moment my code looks like this:
<script>
function map_init_basic (map, options) {
map.setZoom(16);
map.setView([51.6020, 4.8514]);
}
</script>
{% leaflet_map "trailmap" callback="window.map_init_basic" %}
This sets the map to the correct area, but how do I add the actual trail?
Highest regards.
Using OSMPythonTools you can use the Overpass API to fetch the trail relation from the OSM database, and extract its geometry as an array of coordinates:
from OSMPythonTools.overpass import Overpass
overpass = Overpass()
def fetch_relation_coords(relation):
rel = overpass.query('rel(%s); (._;>;); out;' % relation)
coords = [el.geometry().coordinates for el in rel.elements() if el.type() == 'node']
# Convert (lng, lat) to (lat, lng)
latlngs = [[x[1], x[0]] for x in coords]
return latlngs
latlngs = fetch_relation_coords("6754945")
# [[51.602685, 4.861282], [51.60629, 4.851437], [51.599504, 4.838481], [51.599561, 4.839231], ...]
I'm not familiar enough with Django to understand how to get the resulting coordinate array onto your web page, but once you have it in Javascript, you can add it onto your Leaflet map as a polyline with:
L.polyline(latlngs).addTo(map);