Leaflet + GeoJSON = Help

[ChrisHolmes]

Hello everyone,

I am investigating leaflet as a means of displaying point data from a GeoJSON file on a map. The coordinate system used in the GeoJSON file is not WGS84 geographic coordinates, so it is my understanding that leaflet should work for what I am trying to do.

The first thing I need to do is reach out to a server url which returns the GeoJSON file, then I guess loop through the data in that file to display all the points on the map.

Using the GeoJSON help page on the leaflet site (Using GeoJSON with Leaflet - Leaflet - a JavaScript library for mobile-friendly maps ) I think I can figure out how to plot points.

What I'm having problems wrapping my head around is the first step of reaching out to the server url, getting the file and looping through the records.

Thanks all, any and all help much appreciated.

Chris

[ReneRubalcava]

If you're dealing with GeoJSON in non-WGS84 coords, you'll need to run it through Proj4JS. Luckily, there is a Proj4Leaflet plugin you could use too.

How to use it with GeoJSON.

There's an example of using it with non-mercator tiles with esri-leaflet. - note, I've had mixed results with tiles.

Here's a post on using it with EsriJS.

You can find project definitions at these locations.

Home -- Spatial Reference

EPSG.io: Coordinate Systems Worldwide

Hope that helps.

[ChrisHolmes]

Hi Rene, Thanks for the info. I will check it out and get back.

Cheers,

Chris

[RobertScheitlin__GISP]

Chris,

   I think this sample is a good starting point for your needs

Feature Collection Parsing | Esri Leaflet

[ChrisHolmes]

Hi Robert, Thank you for the link. I'll look into it and get back to update thread.

Cheers,

Chris

[ChrisHolmes]

Hi Robert,

Looking at the feature collection example it appears (and I may very well be wrong) that there are some 'keywords' (?) in the GeoJSON file that the sample links to (i.e. operationalLayers). Does this help to provide some link so that the leaflet api can decipher what's in the GeoJSON file? The file I'm working with doesn't have anything that looks like that.

Here's a sample from my data file. There's around 2000 records in total but I've trimmed it down to 2 and have changed the attribute information, but you should get the gist of it. How does one proceed with a file that looks like this?

Thanks for looking,

Chris.

{"crs":

{"properties":

{"name":"urn:ogc:def:crs:EPSG::3776"},

"type":"name"},

"features":[

{"geometry":{"coordinates":[-1726.4576,5655159],"type":"Point"},

"id":1,

"properties":{

"Address":"ADDRESS ID 1",

"AddressLud":"ABC",

"Applicant":"APPLICANT 1",

"Community":"COMMUNITY 1",

"CreateDate":"2013-09-25",

"Description":"Revision: changes...",

"DpIsPermitted":"Discretionary",

"DpOverrideDesc":"changes...",

"DpOverrideDescInd":"Y",

"FeeCategory":"Category 1",

"JobId":"111111111",

"JobType":"A_BC",

"Lud":"ABC",

"ParcelId":"1111110",

"PermitNumber":"PERMIT1",

"ProposedUse":"New use 1",

"Status":"HOLD",

"StatusDescription":"Hold",

"TemplateType":"TEMPLATE"},

"type":"Feature"},

{"geometry":{"coordinates":[-5563.7950,5659257.8320],"type":"Point"},

"id":2,

"properties":{

"Address":"ADDRESS ID 2",

"AddressLud":"BCD",

"Applicant":"APPLICANT 2",

"Community":"COMMUNITY 2",

"CreateDate":"2013-12-17",

"Description":"New...",

"DpIsPermitted":"Discretionary",

"DpOverrideDesc":"Single...",

"DpOverrideDescInd":"Y",

"FeeCategory":"Category 2",

"JobId":"222222222",

"JobType":"B_CD",

"Lud":"BCD",

"ParcelId":"2222220",

"PermitNumber":"PERMIT2",

"ProposedUse":null,

"Status":"PENREL",

"StatusDescription":"Pending Release",

"TemplateType":"TEMPLATE"},

"type":"Feature"}],

"type":"FeatureCollection"}

[OwenEarley · Accepted solution]

Once you have your JSON data in the response object you can iterate over the list of features and use the geometry or properties (attributes) however you like:

// Change URL to get your JSON data
L.esri.get('http://.../data', {}, function (error, response) {

     // JSON data is in the response object - get features
     var features = response.features;

     // Loop through the response features
     for (var i = features.length - 1; i >= 0; i--) {

          // access feature properties
          console.log("Feature ID: " + features.id, features);

     }

}

[ChrisHolmes]

Thanks Owen, with your code I've been able to get to the data and figured out how to get at specific attributes in each of the objects. Next steps, display the points on a map and display attribute data in popups.

Cheers and thanks all for the help.

Chris

[OwenEarley]

As Rene has stated it looks like you may need to project your coordinates before adding them to a map. This can be done using a third-party library or an ESRI geometry service.

[OwenEarley]

Forgot to mention:

the GeoJSON file that the sample links to (i.e. operationalLayers).

The sample seems to be loading GeoJSON from an ESRI service that has a different JSON data structure than the data that you are loading. There are no special keywords - the sample just accesses features using a different object property:

Sample:

var features = response.operationalLayers[0].featureCollection.layers[0].featureSet.features;

Your data:

var features = response.features;