Running in Sart Tilman

From GHER

(Difference between revisions)
Jump to: navigation, search
Line 5: Line 5:
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
<title>
-
Running B5a
+
Running Sart-Tilman B5a and friends
</title>
</title>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet.js"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet.js"></script>
Line 19: Line 19:
<div id="map"></div>
<div id="map"></div>
-
<script src="http://modb.oce.ulg.ac.be/mediawiki/upload/ctroupin/GPX/moves2013.js"></script>
 
-
<script src="http://modb.oce.ulg.ac.be/mediawiki/upload/ctroupin/GPX/moves2014.js"></script>
 
-
<script src="http://modb.oce.ulg.ac.be/mediawiki/upload/ctroupin/GPX/moves2015.js"></script>
 
-
<script src="http://modb.oce.ulg.ac.be/mediawiki/upload/ctroupin/GPX/moves2016.js"></script>
 
-
<script src="http://modb.oce.ulg.ac.be/mediawiki/upload/ctroupin/GPX/moves2017.js"></script>
 
<script src ='https://cdnjs.cloudflare.com/ajax/libs/leaflet-omnivore/0.3.4/leaflet-omnivore.min.js'></script>
<script src ='https://cdnjs.cloudflare.com/ajax/libs/leaflet-omnivore/0.3.4/leaflet-omnivore.min.js'></script>
                 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/1.4.2/Control.FullScreen.min.js"></script>
                 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/1.4.2/Control.FullScreen.min.js"></script>
<script>
<script>
-
+
-
// Adapt the center and the zoom level here
+
var map = L.map('map', {
var map = L.map('map', {
fullscreenControl: true,
fullscreenControl: true,
-
}).setView([50.582,5.565], 12);
+
}).setView([50.57,5.57], 13);
-
+
-
// Add layers (see https://leaflet-extras.github.io/leaflet-providers/preview/)
+
var OpenStreetMap_Mapnik = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
var OpenStreetMap_Mapnik = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
Line 41: Line 33:
});
});
-
var CartoDB_PositronNoLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
+
var CartoDB = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
-
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
+
maxZoom: 18,
-
subdomains: 'abcd',
+
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>'
-
maxZoom: 19
+
  });
-
});
+
var CartoDB_DarkMatter = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
var CartoDB_DarkMatter = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
Line 62: Line 53:
var baseMaps = {
var baseMaps = {
-
"CartoDB No Labels": CartoDB_PositronNoLabels,
+
"CartoDB": CartoDB,
"CartoDB Dark": CartoDB_DarkMatter,
"CartoDB Dark": CartoDB_DarkMatter,
"OpenStreetMap": OpenStreetMap_Mapnik,
"OpenStreetMap": OpenStreetMap_Mapnik,
Line 68: Line 59:
};
};
-
map.addLayer(Stamen_Terrain)
+
map.addLayer(CartoDB)
-
// We create different properties for each year
+
L.control.coordinates({
-
// (should be done differently but not time)
+
position:"bottomleft",
 +
decimals:3,
 +
decimalSeperator:".",
 +
labelTemplateLat:"Lat: {y}",
 +
labelTemplateLng:"Lon: {x}"
 +
}).addTo(map);
-
var Layer2013 = L.geoJson(null, {
+
var heatStyle = {
-
style: function(feature) {
+
gradient : {.65: "white", .75:"#FFFF36", .85:"#FF9D00", .9:"#FF1700", .95:"#900000", 1:"black"},
-
return { color: '#FF001D' , weight: 3};
+
minOpacity: 0.75,
-
}
+
                radius: 4,
-
});
+
                blur: 4,
 +
};
-
var Layer2014 = L.geoJson(null, {
+
latlon = [];
-
style: function(feature) {
+
-
return { color: '#2AD319' , weight: 3};
+
-
}
+
-
});
+
-
var Layer2015 = L.geoJson(null, {
+
function getTrackColor(y) {
-
style: function(feature) {
+
return y == '2013' ? '#7fc97f' :
-
return { color: '#6622BA' , weight: 3};
+
  y == '2014' ? '#beaed4' :
 +
  y == '2015' ? '#fdc086' :
 +
  y == '2016' ? '#ffff99' :
 +
  y == '2017' ? '#386cb0' :
 +
'grey';
 +
}
 +
 +
var legend = L.control({position: 'bottomright'});
 +
 
 +
legend.onAdd = function (map) {
 +
var div = L.DomUtil.create('div', 'info legend'),
 +
grades = [2013, 2014, 2015, 2016, 2017],
 +
labels = [];
 +
div.innerHTML += '<b>Year</b><br>' 
 +
for (var i = 0; i < grades.length; i++) {
 +
div.innerHTML +=
 +
'<i style="background:' + getTrackColor(grades[i]) + '"></i> ' +
 +
grades[i] + '<br>';
}
}
-
});
+
 
 +
return div;
 +
};
-
var Layer2016 = L.geoJson(null, {
+
legend.addTo(map);
 +
 +
var customLayer = L.geoJson(null, {
style: function(feature) {
style: function(feature) {
-
return { color: '#FFC91F' , weight: 3};
+
return {  
-
}
+
color: getTrackColor(feature.properties.time.substring(0, 4)),
 +
weight: 2,
 +
opacity: 1
 +
};
 +
},
 +
onEachFeature: function(feature) {
 +
coords = feature.geometry.coordinates;
 +
for ( var i=0; i < coords.length; ++i ){
 +
latlon.push([coords[i][1], coords[i][0]]);
 +
}
 +
}
});
});
-
var Layer2017 = L.geoJson(null, {
+
 +
var customLayerLast = L.geoJson(null, {
style: function(feature) {
style: function(feature) {
-
return { color: '#00F4B1' , weight: 3};
+
return {  
-
}
+
color: getTrackColor(feature.properties.time.substring(0, 4)),
 +
weight: 5,
 +
opacity: 1
 +
};
 +
}  
});
});
-
 
+
-
                        var LayerLast = L.geoJson(null, {
+
var nMoves = moves.length;
-
style: function(feature) {
+
var OldTracks = [];
-
return { color: '#1F4C8E' , weight: 5};
+
for (var i = 0; i < nMoves; i++) {
 +
console.log(i + '/' + nMoves)
 +
//console.log('Working on ' + moves[i])
 +
var moveGps = omnivore.gpx('data/' + moves[i], null, customLayer);
 +
if (i < nMoves - 1){
 +
moveGps.addTo(map);
 +
OldTracks.push(moveGps);
}
}
-
});
 
-
               
 
-
 
-
// We loop on the files for every year for which we have GPX
 
-
 
-
   
 
-
var nMoves = moves2013.length;
 
-
var List2013 = [];
 
-
for (var i = 0; i < nMoves; i++) {
 
-
var moveGps = omnivore.gpx(moves2013[i], null, Layer2013);
 
-
//moveGps.addTo(map);
 
-
List2013.push(moveGps);
 
}
}
-
var nMoves = moves2014.length;
+
var moveGps = omnivore.gpx('data/' + moves[nMoves-1], null, customLayerLast);
-
var List2014 = [];
+
-
for (var i = 0; i < nMoves; i++) {
+
-
var moveGps = omnivore.gpx(moves2014[i], null, Layer2014);
+
-
//moveGps.addTo(map);
+
-
List2014.push(moveGps);
+
-
}
+
-
+
-
var nMoves = moves2015.length;
+
-
var List2015 = [];
+
-
for (var i = 0; i < nMoves; i++) {
+
-
var moveGps = omnivore.gpx(moves2015[i], null, Layer2015);
+
-
//moveGps.addTo(map);
+
-
List2015.push(moveGps);
+
-
}
+
-
+
-
var nMoves = moves2016.length;
+
-
var List2016 = [];
+
-
for (var i = 0; i < nMoves; i++) {
+
-
var moveGps = omnivore.gpx(moves2016[i], null, Layer2016);
+
-
//moveGps.addTo(map);
+
-
List2016.push(moveGps);
+
-
}
+
-
+
-
+
-
var nMoves = moves2017.length;
+
-
var List2017 = [];
+
-
for (var i = 0; i < nMoves; i++) {
+
-
var moveGps = omnivore.gpx(moves2017[i], null, Layer2017);
+
moveGps.addTo(map);
moveGps.addTo(map);
-
List2017.push(moveGps);
+
-
}
+
var heatmap = L.heatLayer(latlon, heatStyle);
-
+
//heatmap.addTo(map);
-
                        omnivore.gpx(moves2017[nMoves-1], null, LayerLast).addTo(map);
+
-
 
+
var overlayers = {
var overlayers = {
-
"2013": L.layerGroup(List2013),
+
"Old tracks": L.layerGroup(OldTracks),
-
"2014": L.layerGroup(List2014),
+
"Last run": L.layerGroup([moveGps]),
-
"2015": L.layerGroup(List2015),
+
"Heat map": L.layerGroup([heatmap]),
-
"2016": L.layerGroup(List2016),
+
-
"2017": L.layerGroup(List2017),
+
};
};
-
 
-
L.control.layers(baseMaps, overlayers).addTo(map);
 
-
 
+
L.control.layers(baseMaps, overlayers).addTo(map);
 +
 +
</script>
</script>
</body>
</body>
</html>
</html>

Revision as of 09:41, 9 March 2017

Running Sart-Tilman B5a and friends

Personal tools