1

I am attempting to use a JavaScript library to generate contours in a leaflet map from a point layer on the map. I have tried this approach with d3 and turf and am getting the same issue where the output contours (either polygons or polylines) have the appropriate Z value, however the coordinates are not populated:

enter image description here

This is my code for using the d3 library:

m.eachLayer(function(layer){
    if (typeof (layer.options.name) != "undefined") {
        if (layer.options.name == $('#ContourLayer').val()) {
            arr = layer.toGeoJSON().features

            console.log(collection)                             
            bounds = L.geoJson(layer.toGeoJSON()).getBounds()        
        }
    }
});

console.log(bounds)

var width = m.latLngToLayerPoint(bounds.getNorthEast()).x- 
m.latLngToLayerPoint(bounds.getSouthWest()).x  //Math.abs(Math.abs(bbox[0])- 
Math.abs(bbox[2]))
var height = m.latLngToLayerPoint(bounds.getNorthEast()).y- 
m.latLngToLayerPoint(bounds.getSouthWest()).y //Math.abs(Math.abs(bbox[1])- 
Math.abs(bbox[3]))
console.log([Math.abs(width), Math.abs(height)])

var contour = d3.contours()
.size([Math.abs(width), Math.abs(height)]);
var contoursGeoData;


contour.thresholds(breaks);

contoursGeoData = contour(arr);  

console.log(contoursGeoData)

I did the same process with the isolines function in the TurfJS library and got the same output (just polylines instead of polygons). What am I doing wrong?

Also, my data (and map) are all in WGS84 (EPSG:4326). Does the data and map have to be projected for the contours to draw?

  • 1
    Hard to tell what's going on without knowing how your data (specifically arr) looks like. It's possible that d3.contour is splitting the breaks properly but the data points are an empty set. – IvanSanchez Dec 20 '19 at 8:47
  • I will update the question with an example of redacted JSON data. Thank you – GIS87 Dec 20 '19 at 18:06
  • [{"type": "Feature","id": "GWElevationReport.fid-27ef535b_16f163bf716_-4332","geometry": {"type": "Point","coordinates": [-000000,000000]},"geometry_name": "geometry","properties": {"facility_code": "000000","facility_name": "000000","well_id": "000000","top_casing_elev": 9999999,"measurement_date": "0000-00-00T00:00:00Z","water_level_depth": 0,"lnapl_depth": null,"lnapl_cas_rn": null,"reportable_yn": "Y","specific_gravity": null,"x_coord": "-0000000","y_coord": "00000000","elev": "0000","ProdThickness": null,"GWElevation": 0,"group_code": "0000000"}}, ... ] – GIS87 Dec 20 '19 at 18:25
  • I couldn't update the questions so I posted the redacted JSON example as a comment. Thanks for your input! – GIS87 Dec 20 '19 at 18:26

Your Answer

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

Browse other questions tagged or ask your own question.