I need to calculate gained elevation on Multilines GeoJSON files in a Leaflet.js map.
Is there is any plug-in to do that? My GeoJSON files contains Z/elevation data in geometry.
Add a comment
|
1 Answer
Here is my crack at it. Your last post wanted min and max for each feature. With these two number you can calculate the difference in elevation.
I created an array for the data, called it height, now in the onEachFeature function for your line layer, feature.geometry.coordinates returns an array of X,Y,Z values for the vertices. So I loop through them and pull out the Z's. and with the Feature name (Basically ID) I push them in to the height array. So when the features load and draw on the map, they populate my array.
Next I put a layer on.click function in there, it gets the name and filters my height array for all Z's for that name. Next I put all the elevations into a simple array just for that feature and call a function getZ that finds the min/max values in the array and places them in the text box. In that function you could calculate that difference.
My "lines.json" file, copy this data and place it in the same folder as the HTML file below.
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"name":"Line 1"},"geometry":{"type":"LineString","coordinates":[[-74.2346,41.68932,100],[-74.5971,42.455887,200],[-75.94848,42.334184,300],[-76.3220,43.21318,400]]}},{"type":"Feature","properties":{"name":"Line 2"},"geometry":{"type":"LineString","coordinates":[[-80.2661,42.204107,500],[-79.13452,42.098222,600],[-78.5085,42.4801,700],[-78.39843,43.0202,800]]}},{"type":"Feature","properties":{"name":"Line 3"},"geometry":{"type":"LineString","coordinates":[[-72.83935,43.149097,50],[-73.2675,43.889977,200],[-74.08081,44.11125,350]]}}]}
My HTML file w/ JavaScript:
<html>
<head>
<title>lines</title>
<!-- Load Leaflet from CDN -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style>
body { margin:0; padding:0; }
#map { position: absolute; top:30; bottom:0; right:0; left:0; }
</style>
</head>
<body>
<div id="txtboxes">
<label>Lowest</label> <input type="text" id="txtbx1" />
<label>Highest</label> <input type="text" id="txtbx2" />
</div>
<div id="map"></div>
<script type='text/javascript'>
var url = 'lines.json'; //My Line file, in same folder as this HTML file.
var map = L.map('map').setView([42.682435, -75.290039], 7);
var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
var height = [];
//accepts array and plots largest + smallest
function getZ(elevdata){
var lowest = Math.min(...elevdata);
var heighest = Math.max(...elevdata);
// put values in textbox
$('#txtbx1').val(lowest);
$('#txtbx2').val(heighest);
}
//Define line Layer
var road = L.geoJson(null, {
onEachFeature: forEachFeature,
color:'black'
});
function forEachFeature(feature, layer) {
var k = feature.properties.name; // get line name
var val = feature.geometry.coordinates; //gets feature coords
for (var i = 0; i < val.length; i++) { //loop thru coords to get Z's
var arr1 = [];
var z= val[i][2];
arr1.push(k);
arr1.push(z);
height.push(arr1)
}
layer.on('click', function (e) {
var myzs =[];
//Get name to filter array list
var k2 = e.target.feature.properties.name;
var filtered = height.filter(arr => arr[0] == k2);
//Get elevations from array put is seperate list
for (var a = 0; a < filtered.length; a++) {
myzs.push(filtered[a][1]);
}
console.log(myzs);
getZ(myzs); // call function and pass list of elevations
});
var popupContent = "<p> <b>Name: </b>" + feature.properties.name + "</p>";
layer.bindPopup(popupContent);
}
// Add GeoJSON to road layer
$.getJSON(url, function(data) {
road.addData(data);
});
//Add road layer to map
road.addTo(map);
</script>
</body>
</html>
answered Feb 22, 2019 at 19:24
-
This won't work if geometry is
MultiLineString, as it was in the previous Eslam Farags's question.– TomazicMCommented Feb 22, 2019 at 19:37 -
This will get min/max Z's values, but i need to calculate gained elevation on each trail. I have found this (get_elevation_gain(): returns the cumulative elevation gain, in meters) but works only on GPX while i need it to be done on GeoJSON Commented Feb 23, 2019 at 9:36