0

I am trying to use the nearest function in TURF, so what I have is a JSON file with information about parkades:

{
  "type" : "FeatureCollection",
  "name" : "ubcv_parking_www",
  "features" : [
    {
      "type" : "Feature",
      "geometry" : {
        "type" : "Point",
        "coordinates" : [ -123.25556236036074, 49.26489978066352 ]
      },
      "properties" : {
        "FAC_ID" : 2220,
        "FAC_DESCRIPTION" : "Old Firehall Meters",
        "FAC_ADDRESS" : null,
        "FAC_HOURPM" : "10:00 PM - 7:00 AM",
        "FAC_HOURSDAY" : "7:00 AM - 10:00 PM",
        "FAC_RATE" : "$3.50/hr Max 4 hours",
        "FAC_RATEPM" : "No Charge",
        "FAC_RATEHOL" : "$3.50/hr Max $16",
        "FAC_VERRUS" : "5604",
        "FAC_DISABLED" : null,
        "FAC_MC" : null,
        "FAC_BIKE" : null,
        "FAC_ELEVATOR" : null,
        "FAC_EV" : null,
        "FAC_UNDERPERMIT" : null,
        "FAC_GRAD" : null,
        "FAC_REZPERMIT" : null,
        "FAC_FSPERMIT" : null,
        "FAC_BOUNDARY_DESCRIPTION" : null,
        "FAC_TIPS" : null,
        "FAC_HEIGHT" : null,
        "FAC_MAP_DISPLAY" : null,
        "FAC_MODIFY_DATE" : "20131215152336",
        "PAYMENT_LINK" : " https://www.honkmobile.com/hourly/zones/5604",
        "HIGHLIGHT_FACILITY" : "0"
      }
    },

{
      "type" : "Feature",
      "geometry" : {
        "type" : "Point",
        "coordinates" : [ -123.24379874539181, 49.257371848192236 ]
      },
      "properties" : {
        "FAC_ID" : 2234,
        "FAC_DESCRIPTION" : "East Mall Road North",
        "FAC_ADDRESS" : null,
        "FAC_HOURPM" : null,
        "FAC_HOURSDAY" : null,
        "FAC_RATE" : null,
        "FAC_RATEPM" : null,
        "FAC_RATEHOL" : null,
        "FAC_VERRUS" : null,
        "FAC_DISABLED" : null,
        "FAC_MC" : null,
        "FAC_BIKE" : null,
        "FAC_ELEVATOR" : null,
        "FAC_EV" : null,
        "FAC_UNDERPERMIT" : null,
        "FAC_GRAD" : null,
        "FAC_REZPERMIT" : null,
        "FAC_FSPERMIT" : null,
        "FAC_BOUNDARY_DESCRIPTION" : null,
        "FAC_TIPS" : null,
        "FAC_HEIGHT" : null,
        "FAC_MAP_DISPLAY" : null,
        "FAC_MODIFY_DATE" : "20130912133801",
        "PAYMENT_LINK" : " https://www.honkmobile.com/hourly/zones/",
        "HIGHLIGHT_FACILITY" : "0"
      }
    },

I am trying to use the nearest function in TURF, however, on their website tells me that I would create:

var points = turf.featureCollection([
    turf.point([28.973865, 41.011122]),
    turf.point([28.948459, 41.024204]),
    turf.point([28.938674, 41.013324])
]);

So my question is how do I instead of writing out all the coordinate points of the parkades, write a code so that this var points reads all the coordinates in the JSON file.

1

Your problem is not specific to GIS, it is a common programming problem.

You want a loop, that is loop through all the elements of your feature collection.

I assume you also want a map and assume you want to use leaflet for said map. This can be adapted, though.

The remote loading uses a javascript concept called "Promise", which is very useful whe dealing with asynchronus stuff (e.g. loading from remote servers that may take a while).

See my codepen at https://codepen.io/anon/pen/MxaMPm (old version, two hardcoded features) and https://codepen.io/anon/pen/yweKYy (remote loading) (usage hint: press F12 in brwoser to open the console, then click on "loop layer" right above the map), the relevant parts are:

//var myFC = <the features you have in the first code block>
// alternatively load from remote location
fetch("https://raw.githubusercontent.com/UBCGeodata/ubcv-parking/master/geojson/ubcv_parking_www.geojson")
.then(function(response) {
  // after the loading finishes, use the response text
  return response.text();
})
.then(function(res) {
  // after the response text is finished, parse to JSON
  return JSON.parse(res)
})
.then(function(res){
  //after the JSON parsing finishes, proceed
  myFC = res; // not strictly needed, but may be useful
  l = L.geoJSON(myFC).addTo(map);
});



// temporary store
var _points = Array();

// the turf feature collection will end up here
var featureCollection;

// on clicking the "loop layer" element
document.getElementById("looplayer").addEventListener("click",
  function() {
    // get all the keys from the leaflet layer
    Object.keys(l._layers).forEach(function(feat) {
      // for each key, that is the feature (one point)
      // add this points coordinates to the temporary array
      _points.push(turf.point(l._layers[feat].feature.geometry.coordinates));
    });
  // create the turf featureCollection from the temporary array we populated from each points coordinates
  featureCollection = turf.featureCollection(_points);
  // write to browser console (press F12 in browser) for debugging
  console.log(featureCollection);
});
  • sorry I want to clarify my question a bit, so I have the json link here: raw.githubusercontent.com/UBCGeodata/ubcv-parking/master/… and I want to instead of copying all the FC like your var myFC, am I able to just paste that link instead, because theres a lot more features. – Jason Feb 28 at 21:46
  • I updated the codepen and the answer. – til_b Mar 1 at 11:16
  • Just out of curiosity, what is your knowledge level of prorgramming and javascript specifically? Also, whats this project for, is it a school project? – til_b Mar 1 at 11:25

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.