0

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);
wittich
  • 2,356
  • 1
  • 16
  • 30
Sean Hudson
  • 97
  • 9
  • In the end, I was able to solve this issue using the answers from both vanni-zhang and ghybs. The problem was two specific mistakes I will not make again. 1) I didn't have JSONP enabled on the server yet I was trying to access it. 2) The source projection was not what Leaflet was expecting. So I added an SRS parameter to the request. I have updated my code above to show the working result. Thanks to all. – Sean Hudson Dec 23 '15 at 20:59

4 Answers4

1

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

Vanni Zhang
  • 1,073
  • 7
  • 17
0

The async: false option in your AJAX request does not make it actually synchronous, because you use dataType: "jsonp". See http://api.jquery.com/jquery.ajax/

Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation.

Therefore, your fitBounds still happens before unitsGeoJson has any data in it, and it cannot return valid bounds. Why not simply calling your fitBounds within your success function?

Your WMS server does not seem to return a valid JSONP response.

ghybs
  • 7,193
  • 20
  • 25
  • Thanks for the direction. I didn't have JSONP enabled on the server. Now I have enabled it and it's returning a response. I, also, moved the fitBounds into the success function. However, it is still not working. I'm obviously missing something. – Sean Hudson Dec 23 '15 at 06:57
  • Your coordinates look to be in UTM instead of long/lat decimal degrees. – ghybs Dec 23 '15 at 10:46
  • From what I read, it appears that I need to convert coordinates from UTM to LatLng format. However, I'm having trouble using coordsToLatLngs. How would that be used in this context? – Sean Hudson Dec 23 '15 at 15:10
0

A couple of things what may can help to you: enable jsonp in geoserver: Request JSONP from Geoserver using AJAX request in Openlayers 3

And a working sample: GeoServer Callback Function Undefinded

And one more thing. If you just replace the wms to ows in you code that may can help as well. You cannot use wms via jsonp.

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';
Community
  • 1
Tamas Kosa
  • 1,507
  • 3
  • 15
  • 30
0

You can define the coordinate reference system that you want the output to be in when making requests to Geoserver. Leaflet uses the EPSG:3857 Web Mercator coordinate reference system to handle spatial data. I think it also may handle EPSG:4326 (aka WGS "Lat Long")

Just add the parameter "SRS=EPSG:3857" or "srs=EPSG:4325" to your unitsURL in order for Geoserver to return GeoJSON data that is in the correct coordinate reference system.

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&SRS=EPSG:3857';

or 

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&SRS=EPSG:4326';
LiamBratley
  • 1
  • 2