I seem to be having a problem parsing the GeoJson and adding the layer to a Leaflet map.
For starters, fitBounds() is throwing an error. I'm guessing it is not parsing the data properly.
After I get that resolved, there may be additional issues. If you see an better way to do this, please let me know.
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 });/* get units/areas from json */var unitsGeoJson = L.geoJson(null, { style : {weight: 2, fill: true, fillColor: '#000000', color: '#000000', fillOpacity: 0}, onEachFeature : function (feature, layer) { layer.on({ mouseover : function () { layer.setStyle({weight: 2, fill: true, fillColor: '#ff9900', fillOpacity: .4}); }, mouseout : function () { unitsGeoJson.resetStyle(layer); }, }); //feature.properties.GMUID layer.bindPopup("Unit " + feature.properties.GMUID + "
County: " + feature.properties.COUNTY + "
Search Hunts
"); }});var unitsurl = 'https://maps.huntscore.com/geoserver/wms?service=wfs&version=1.0.0&request=getfeature&typename=colorado:BigGameGMUBoundaries12092014&CQL_FILTER=GMUID=84&outputFormat=application/json&format_options=callback:getJson';$.ajax({ jsonp: false, jsonpCallback: 'getJson', type: "GET", url: unitsurl, async: false, dataType: "jsonp", success: function(data) { unitsGeoJson.addData(data); }});/* initialize the map */var map = L.map('map', { center: [39.0646,-105.3272], zoom: 7, minZoom: 6, scrollWheelZoom: false, layers: [terrain, unitsGeoJson]});/* resize map to fit bounds */map.fitBounds(unitsGeoJson);/* add layers control */var baseMaps = { "Terrain": terrain};var overlayMaps = { "Units": unitsGeoJson};/* load layers */setTimeout(function () { L.control.layers(baseMaps, overlayMaps).addTo(map);}, 3000);
أكثر...
For starters, fitBounds() is throwing an error. I'm guessing it is not parsing the data properly.
After I get that resolved, there may be additional issues. If you see an better way to do this, please let me know.
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 });/* get units/areas from json */var unitsGeoJson = L.geoJson(null, { style : {weight: 2, fill: true, fillColor: '#000000', color: '#000000', fillOpacity: 0}, onEachFeature : function (feature, layer) { layer.on({ mouseover : function () { layer.setStyle({weight: 2, fill: true, fillColor: '#ff9900', fillOpacity: .4}); }, mouseout : function () { unitsGeoJson.resetStyle(layer); }, }); //feature.properties.GMUID layer.bindPopup("Unit " + feature.properties.GMUID + "
County: " + feature.properties.COUNTY + "
Search Hunts
"); }});var unitsurl = 'https://maps.huntscore.com/geoserver/wms?service=wfs&version=1.0.0&request=getfeature&typename=colorado:BigGameGMUBoundaries12092014&CQL_FILTER=GMUID=84&outputFormat=application/json&format_options=callback:getJson';$.ajax({ jsonp: false, jsonpCallback: 'getJson', type: "GET", url: unitsurl, async: false, dataType: "jsonp", success: function(data) { unitsGeoJson.addData(data); }});/* initialize the map */var map = L.map('map', { center: [39.0646,-105.3272], zoom: 7, minZoom: 6, scrollWheelZoom: false, layers: [terrain, unitsGeoJson]});/* resize map to fit bounds */map.fitBounds(unitsGeoJson);/* add layers control */var baseMaps = { "Terrain": terrain};var overlayMaps = { "Units": unitsGeoJson};/* load layers */setTimeout(function () { L.control.layers(baseMaps, overlayMaps).addTo(map);}, 3000);
أكثر...