Leaflet load WFS from Geoserver with jsonp
HTML
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<div id="map"></div>
<br />
<b>Datasource of the WFS-Layer: <a href="http://ccb.capecodgis.com/" target="_blank">http://ccb.capecodgis.com</a> </b>
CSS
html { height: 100% }
body { height: 100%; margin: 0; padding: 0;}
#map{ height: 85% }
JavaScript
var m= L.map('map').setView([38.2, 127], 8);
var mapQuestAttr = 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> — ';
var osmDataAttr = 'Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
var mopt = {
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
};
var osm = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{attribution:osmDataAttr});
var mq=L.tileLayer(mopt.url,mopt.options);
mq.addTo(m);
var rootUrl = 'http://api.vworld.kr/req/wfs';
var defaultParameters = {
key: 'BC11EA65-3722-3EFB-82A1-ED9CFA9D5AC9',
service: 'WFS',
version: '1.1.0',
request: 'GetFeature',
typeName: 'LT_C_ADEMD_INFO',
outputFormat: 'text/javascript',
format_options: 'callback: getJson',
srsName:'EPSG:4326'
};
var parameters = L.Util.extend(defaultParameters);
$.ajax({
url: rootUrl + L.Util.getParamString(parameters),
dataType: 'jsonp',
jsonpCallback: 'getJson',
success: handleJson
});
var group = new L.featureGroup().addTo(m);
function handleJson(data) {
L.geoJson(data, {
onEachFeature: function (feature, my_Layer) {
my_Layer.bindPopup("name: "+feature.properties.station_name+"<br />type: "+feature.properties.station_type);
},
pointToLayer: function (feature, latlng) {
//return L.circleMarker(latlng, geojsonMarkerOptions);
return L.circleMarker(latlng//, geojsonMarkerOptions
);
//return L.marker(latlng);
}
}).addTo(group);
m.fitBounds(group.getBounds());
}
function getJson(data) {
console.log("callback function fired");
}