displaying .json files in leaflet

Question

I have 5 .shp files from http://websoilsurvey.sc.egov.usda.gov/App/WebSoilSurvey.aspx I would like to overlay these .shp files onto my existing tile photos in leaflet.

Answer 1

Leaflet has a L.GeoJSON layer which you can use to overlay GeoJSON collections on the map. You would need to load your JSON files using your favorite XHR/AJAX library of choice and instanciate the GeoJSON layer with the retrieved object:

// Fetch the geojson file
$.getJSON('data.geo.json', function (data) {
    // Define the geojson layer and add it to the map
    L.geoJson(data).addTo(map);
});

It's as simple as that. Here's a working example on Plunker: http://plnkr.co/edit/0eP6zm?p=info

There is a very nice tutorial on L.GeoJSON on the Leaflet site itself: http://leafletjs.com/examples/geojson.html and here is the API reference: http://leafletjs.com/reference.html#geojson