Geographic Information Systems Asked on July 17, 2021
I would like to add a kind of label every x km along a track.
x would be a parameter depending on the total distance, zero meaning no marker.
This is an example of track fly 210420.
I get it using the following code.
I can easily give the posts parameters (max 10) as URL parameters to the HTML script, for instance
&D1=20 &Lat1=xx &Lon1=yy &D2=40 &Lat2=xx &Lon2=yy …
or if possible in a kind of array and put the labels (20, 40, …) on a layer at given Lats and Lons.
How can I do that?
<!DOCTYPE html>
<html>
<head>
<title>Open Street Map</title>
<meta charset="utf-8" >
<link rel="icon" type="image/png" href="OpenStreetMap.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" >
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="src/Leaflet.GraphicScale.min.css" >
<link rel="stylesheet" href="src/stylesheet.css" >
</head>
<body>
<div id="map"></div>
<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js"></script>
<script src="src/Leaflet.GraphicScale.min.js"></script>
<script>
function getUrlParameter(name) {
name = name.replace(/[[]/, '[').replace(/[]]/, ']');
var regex = new RegExp('[?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return (results === null)? '' : decodeURIComponent(results[1].replace(/+/g, ' '));
};
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 5,
color: '#666',
dashArray: '10 10',
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
}
function resetHighlight(e) {
customLayer.resetStyle(e.target);
}
var Marker = L.icon({
iconUrl: 'Point.png',
iconSize: [27, 32], // size of the icon
iconAnchor: [13, 32], // point of the icon which will correspond to marker's location
popupAnchor: [0, -30] // point from which the popup should open relative to the iconAnchor
});
var Lon = getUrlParameter('Lon')
var Lat = getUrlParameter('Lat')
var starts = new L.LayerGroup();
L.marker([Lat,Lon], {icon: Marker}).bindPopup(Lat+'<br>'+Lon).addTo(starts);
// ****************** change colors sequentially *****************
var colors = [
'#3388ff',
'#800000',
'#9a6324',
'#808000',
'#469990',
'#000075',
'#000000',
'#e6194b',
'#f58231',
'#ffe119',
'#bfef45',
'#3cb44b',
'#42d4f4',
'#4363d8',
'#911eb4',
'#f032e6',
'#a9a9a9',
//'#fabed4', Pink
//'#ffd8b1', Apricot
//'#fffac8', Beige
//'#aaffc3', Mint
'#dcbeff',
//'#ffffff' White
];
var n = 0;
var customLayer = L.geoJson(null, {
style: function(feature) {
if (!feature.properties.id) {
feature.properties.id = n++;
}
var iColor = feature.properties.id % colors.length;
return { color: colors[iColor] };
},
onEachFeature: function(feature, layer) {
if (feature.properties.desc) {
layer.bindPopup(feature.properties.desc);
}
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight
});
}
});
var map = new L.LayerGroup();
var runLayer = omnivore.gpx("../"+getUrlParameter('map'), null, customLayer)
.on('ready', function() {
map.fitBounds(runLayer.getBounds());
})
.addTo(map);
var osmLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>'
;
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© ' + osmLink + ' Contributors'
;
var mbAttr = 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://mapbox.com">Mapbox</a>',
mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiamFudXMwMDciLCJhIjoiY2l0azNvNjZlMDAzbTQ2bGk0dDFtaGhzcCJ9.8GAQYGpMFog62mRv17pGtA';
var osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib}),
satellite = L.tileLayer(mbUrl, {id: 'mapbox.satellite', attribution: mbAttr});
var Stamen_Terrain = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.{ext}', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: 'abcd',
ext: 'png'
});
var standard = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
attribution: 'Map data: © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
maxZoom: 18
});
var map = L.map('map', {
layers: [osmMap, starts, map],
})
.setView([49.21, 4.2], 8);
var baseLayers = {
"OpenStreetMap": osmMap,
"OpenTopoMap": standard,
"3D map" : Stamen_Terrain,
"satellite": satellite,
};
L.control.layers(baseLayers).addTo(map);
var graphicScale = L.control.graphicScale({
position: 'bottomright',
fill: 'hollow',
}).addTo(map);
</script>
</body>
</html>
Solved like this
var marker = new L.marker([getUrlParameter('Lat0'),getUrlParameter('Lon0')], { opacity: 0 });
marker.bindTooltip(getUrlParameter('D0')+"km", {permanent: true, offset: [0, 0] });
marker.addTo(map);
var marker = new L.marker([getUrlParameter('Lat1'),getUrlParameter('Lon1')], { opacity: 0 });
marker.bindTooltip(getUrlParameter('D1')+"km", {permanent: true, offset: [0, 0] });
marker.addTo(map);
...
var marker = new L.marker([getUrlParameter('Lat9'),getUrlParameter('Lon9')], { opacity: 0 });
marker.bindTooltip(getUrlParameter('D9')+"km", {permanent: true, offset: [0, 0] });
marker.addTo(map);
Still a small problem : the lablel is not close enough to the trace, I will open a new question.
Answered by Hervé on July 17, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP