Leaflet minimal map
HTML
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<div id="map"></div>
CSS
#map {
height: 400px;
}
JavaScript
// Create the map
var map = L.map('map').setView([0, 0], 5);
// Set up the OSM layer
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{maxZoom: 18}).addTo(map);
var owsrootUrl = 'http://130.239.57.16:8080/geoserver/ows';
var defaultParameters = {
service : 'WFS',
version : '1.0',
request : 'GetFeature',
typeName : 'beta:states',
outputFormat : 'text/javascript',
format_options : 'callback:getJson',
SrsName : 'EPSG:4326'
};
var parameters = L.Util.extend(defaultParameters);
var URL = owsrootUrl + L.Util.getParamString(parameters);
var WFSLayer = null;
var ajax = $.ajax({
url : URL,
dataType : 'jsonp',
jsonpCallback : 'getJson',
success : function (response) {
WFSLayer = L.geoJson(response, {
style: function (feature) {
return {
stroke: true,
fillColor: '#FF0000',
fillOpacity: 0
};
},
onEachFeature: function (feature, layer) {
popupOptions = {maxWidth: 200};
layer.bindPopup("Popup text, access attributes with feature.properties.ATTRIBUTE_NAME"+
"<br /> like <br/>"+feature.properties.STATE_NAME
,popupOptions);
}
}).addTo(map);
map.fitBounds(WFSLayer.getBounds());
}
});