'Floating points (wfs) on map using geojson in leaflet
I am trying to get geojson from geoserver and put it on the map. It seems to import geojson, but it is not displayed on the map, and I do not know what the problem is.
// WFS
var defaultParameters = {
service: 'WFS',
version: '1.1.1',
request: 'GetFeature',
typeName: 'test:station',
maxFeature: 50,
outputFormat: 'application/json',
format_options: 'callback:getJson',
SrsName: 'EPSG:3857',
};
var baseballIcon = L.icon({
iconUrl: 'https://cdn-icons-png.flaticon.com/512/82/82169.png',
iconSize: [32, 37],
iconAnchor: [16, 37],
popupAnchor: [0, -28]
});
var geojsonMarkerOptions = {
radius: 0,
fillColor: "#ff7800",
color: "#000",
weight: 0,
opacity: 0,
fillOpacity: 0.0
};
var parameters = L.Util.extend(defaultParameters);
var URL = 'http://localhost:8082/geoserver/test/ows/service=WFS'+ L.Util.getParamString(parameters);
var wfsLayer = null;
var ajax = $.ajax({
url: URL,
dataType: 'json',
jsonpCallback:'getJson',
success:function(data){
//console.log("data = "+data);
wfsLayer = L.geoJSON(data, {
style: function (feature) {
console.log("feature: "+feature)
return {icon: baseballIcon};
},
pointToLayer: function (feature, latlng) {
console.log("feature: "+feature+" and "+"/ latlng: "+latlng)
return L.circleMarker(latlng, {
radius: 8,
fillColor: '#ff7800',
color: '#000',
weight: 1,
opacity: 1,
fillOpacity: 0.8
});
}
}).addTo(map);
}
});
console.log("WFS CHECK");
// map and tilelayer are already defined
var map = L.map(divId, mapOption).setView(center, zoomLevel);
var baseMap = new L.tileLayer(GCRM.tmsInfos[mapType].tileUrl, {
... }
I can't see anything on the map What's wrong with the code above?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|