0

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.

I have converted the 5 .shp files to .json using ogr2ogr, but I do not know how add all of these .json files as overlay to my existing tilings. Any help would be appreciated, thanks.

BFlint
  • 2,407
  • 2
  • 16
  • 20

1 Answers1

3

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

iH8
  • 27,722
  • 4
  • 67
  • 76