0

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 = '&copy; ' + osmLink + ' Contributors'
            ;
        var mbAttr = 'Map data &copy; <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> &mdash; Map data &copy; <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: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <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>

1 Answer 1

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.