1

I have GeoJSON files that contains altitude values. I have used these GeoJSON files to be shown on leaflet.js web map. I need to show values of highest and lowest point in two divs when I clicking on each line. Here is my code that to show GeoJSON lines on the map:

$.getJSON('data/routes/New/Lwn.geojson', function (collection) {
    Lwn = L.geoJson(collection, {
      'style': function () {
        return {
          'color': '#0000FF',
          'weight': 3,
          'opacity': 0
        }
      }, onEachFeature: function(feature, layer) {
        layer.on('click', function(e) {
          showElevation(e.target);
        })
        layer.on('mousedown', function() {
          layer.setStyle({color: '#FFFF00', opacity: 1});
        })
        layer.on('mouseup', function() {
          Lwn.resetStyle(layer);
        })
      }
    }).on('click', function (e) {
      $('#overlay').slideDown();
      $('#Name').html("Name: "+'<strong>'+e.layer.feature.properties.name+'</strong>');
      $('#Distance').html("Distance: "+'<strong>'+e.layer.feature.properties.Lwn_length+'</strong>'+" Meters");
      $('#Surface').html("Surface: "+'<strong>'+e.layer.feature.properties.surface+'</strong>');
      $('#Route-Symbol').show();
      document.getElementById('Route-Symbol').src = `https://hiking.waymarkedtrails.org/api/symbols?osmc:symbol=${e.layer.feature.properties.imgSource}` 
    });

});
1

If your function showElevation(e.target) has first to find points with min and max height, you first define two simple functions for finding points with min and max height in array of point coordinates (each point has structure [x, y, z]) (courtesy of https://stackoverflow.com/questions/1669190/find-the-min-max-element-of-an-array-in-javascript):

function minHPoint(arr, multi) {
  var min = Infinity, len, tmpArr, minPoint;
  if (multi) {
    multiLen = arr.length;
    }
  else {
    tmpArr = arr;
    multiLen = 0;
  };
  while (multiLen--) {
    if (multiLen >= 0) tmpArr = arr[multiLen];
    len = tmpArr.length;
    while (len--) {
      if (tmpArr[len][2] < min) {
        min = tmpArr[len][2];
        minPoint = tmpArr[len];
      }
    }
  }
  return minPoint;
};

function maxHPoint(arr, multi) {
  var max = -Infinity, len, tmpArr, maxPoint;
  if (multi) {
    multiLen = arr.length;
    }
  else {
    tmpArr = arr;
    multiLen = 0;
  };
  while (multiLen--) {
    if (multiLen >= 0) tmpArr = arr[multiLen];
    len = tmpArr.length;
    while (len--) {
      if (tmpArr[len][2] > max) {
        max = tmpArr[len][2];
        maxPoint = tmpArr[len];
      }
    }
  }
  return maxPoint;
};

Then use those functions in your showElevation(e.target) function:

function showElevation(layer) {
  var coords = layer.feature.geometry.coordinates;
  var minPoint = minHPoint(coords, (layer.feature.geometry.type == 'MultiLineString'));
  var maxPoint = maxHPoint(coords, (layer.feature.geometry.type == 'MultiLineString'));
  .... 
  (code for displaying min and max height)
  ....
}

}

  • Thanks a lot for you help and response. I just need to know which variable that i will use to show values $('#High-Point').html("Hight point: "+???); – Eslam Farag Feb 19 at 19:15
  • I assumed from your question that you need just min height (minH) and max height (maxH) values. Do you need also coordinates of those points? – TomazicM Feb 19 at 19:22
  • Yes, coordinates are in the GeoJSON file. but i have used variables of minH and maxH, but it shows (-Infinity, and -Infinity) – Eslam Farag Feb 19 at 19:24
  • Answer is modified to give point coordinates, not only heights. – TomazicM Feb 19 at 19:31
  • I have used the new function and i have used variable of maxPoint for showing the highest Z values on the div , but it returns strange result (many many coordinates). – Eslam Farag Feb 19 at 19:42
0

Since it sounds like your line already has the highest and lowest values as attributes. try something like this.

In one of the div's put a span tag the other put one with an id="lowest"

Next in the onEachFeature function

layer.on('click' function(e){
    $("#highest").val(e.target.feature.properties.high);
    $("#lowest").val(e.target.feature.properties.low);

That will read your lines attributes and place their values in the span tag, in your div.

  • I just have Z values, i need to create a function to get Max and Mix values from these values. this my GeoJSON look like: "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 12.913651374, 47.724617696, 535.607 ], [ 12.9146569, 47.7244117, 541.91 ], [ 12.9153843, 47.7239533, it is a MultiLineString GeoJSON file, i think it contains 3 arrays. – Eslam Farag Feb 19 at 18:36
  • The third value is Z. var z = e.target.feature.geometry.coordinates[2]; but you will need a function to determine the highest and lowest. – Bill Chappell Feb 19 at 19:08
  • @BillChappell Already answered before your comment. – TomazicM Feb 19 at 19:10

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.