0

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.

0

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/leaflet@1.4.0/dist/leaflet.css"/>
    <script src="https://unpkg.com/leaflet@1.4.0/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: '&copy; <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>
  • This won't work if geometry is MultiLineString, as it was in the previous Eslam Farags's question. – TomazicM Feb 22 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 – Eslam Farag Feb 23 at 9:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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