Plusieurs tracks de couleur différente ans XML

Par Hervé, il y a 5 ans

Divers

Bonjour,
J'utilise Leaflet pour afficher un itinéraire sur fond de carte Open Street Map via fichier XML.
Certains fichiers XML contiennent plusieurs tracks, exemple https://www.rudyv.be/OSM/Map.html?map=VTT/Itineraires/LastYear.xml
J'aurais voulu afficher chaque track dans une couleur différente via un attribut dans le fochier XML : est-ce possible ?
Merci d'avance pour votre aide

5 réponses

BernardNgandu, il y a 5 ans

salut c'est au niveau de Leaflet que tu défini les couleur pour chaque tracks, quand tu crées des marker sur leaflet il y a une propriétés color que tu peux definir
ton exemple le voici en code :

<!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/leaflet@1.3.4/dist/leaflet.css" > <script src="https://unpkg.com/leaflet@1.3.4/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>
Hervé, il y a 5 ans

Bonjour,
Ce qui est amusant est que tu reprends la version actuelle de mon code dans lequel j'ai implémenté la solution ici

// ** 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] };
},
});

BernardNgandu, il y a 5 ans

Dans ce cas rajoute une propriété color dans ton XML et puis dans le javascript :

style: function(feature) { return { color: feature.properties.color }; },
BernardNgandu, il y a 5 ans

Ton problème est résolu dans ce cas ?