[GIS] How to add remote GeoJSON data to a Leaflet map as a new layer

geojsonlayersleaflet

I seem to be having a problem parsing the GeoJson and adding the layer to a Leaflet map. 

var terrain = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', {
    id: 'terrain-layer',
    attribution: 'Tiles © Esri — National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC',
    maxZoom: 16
  });

var unitsurl = 'https://maps.huntscore.com/geoserver/wms?service=wfs&version=1.0.0&request=getfeature&typename=colorado:BigGameGMUBoundaries12092014&CQL_FILTER=GMUID=84&outputFormat=text/javascript&format_options=callback:getJson&SRSname=EPSG:4326';

var unitsGeoJson = new L.GeoJSON();

$.ajax({
    jsonp: false,
    url : unitsurl,
    type: 'GET',
    dataType : 'jsonp',
    jsonpCallback: 'getJson',
    success: function(data) {
        console.log(data);
        unitsGeoJson.addData(data);
        map.fitBounds(unitsGeoJson.getBounds());
    }
});

/* initialize the map */
var map = L.map('map', {
  center: [39.0646,-105.3272],
  zoom: 7,
  minZoom: 6,
  scrollWheelZoom: false,
  layers: [terrain, unitsGeoJson]
});

/* add layers control */
var baseMaps = {
  "Terrain": terrain
};

var overlayMaps = {
  "Unit": unitsGeoJson
};

/* load layers */
setTimeout(function () {
  L.control.layers(baseMaps, overlayMaps).addTo(map);
}, 3000);

Best Answer

Leaflet expects GeoJSON objects to be in EPSG:4326 (WGS 84) and the entire API uses 4326 so you should try to reproject your layer on the server side first before render them on the map.

Try to use this url below for unitsurl variable, I added the SRSname parameter at the end to specify that EPSG:4326 is the spatial reference system wanted for the output geojson layer.

https://maps.huntscore.com/geoserver/wms?service=wfs&version=1.0.0&request=getfeature&typename=colorado:BigGameGMUBoundaries12092014&CQL_FILTER=GMUID=84&outputFormat=text/javascript&format_options=callback:getJson&SRSname=EPSG:4326

Related Question