Load WFS into Leaflet with BBOX "strategy"
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<div id="titel">Load WFS into Leaflet with BBOX "strategy" <br />
Total Features loaded: <span id="total"></span>
</div>
<div id="map"></div>
<div id="dialogwrapper" title="neighbourhood information" style="display:none;">
<iframe id="thedialog" width="100%" height="100%"></iframe>
</div>
<!-- inspired by https://stackoverflow.com/questions/25187937/loading-geojson-layers-from-geoserver-to-leaflet-map-based-on-the-current-boundi
-->
CSS
html,body {
width:100%;
height:100%;
margin: 0px;
padding:0px;
}
#map {
width:100%;
height:85%;
border: 1px solid #2352F3;
}
#titel
{
padding:10px;
width:100%;
height:15%;
}
#total
{
font-weight:bold;
color: #2352F3;
}
#dialogwrapper
{
width:100%;
height:100%;
}
JavaScript
var map = new L.Map('map', {
center: new L.LatLng(56.67358, -4.04838),
zoom: 10
});
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(osmUrl, {
minZoom: 0,
maxZoom: 19,
attribution: osmAttrib
});
map.addLayer(osm);
var start_at_zoom = 8;
var currentlayer;
var defaultStyle = {color: '#03f',opacity: 0.5,fillOpacity: 0.2,fillcolor: '#f7f90e'};
var highlightStyle = {color: '#f7f90e',weight: 3,opacity: 1,fillOpacity: 0};
function onEachFeature(feature, layer) {
// does this feature have a property named dz?
if (feature.properties && feature.properties.dz) {
layer.bindPopup(feature.properties.dz);
}
layer.on({
//mouseover: highlightFeature,
//mouseout: resetHighlight,
click: clickfunction
});
}
var featureLayer = new L.GeoJSON(
null, {
onEachFeature: onEachFeature
}).addTo(map);
load_wfs();
function loadGeoJson(data) {
// console.log(data);
$("#total").html(data.features.length);
featureLayer.clearLayers();
featureLayer.addData(data);
}
map.on('moveend', load_wfs);
function load_wfs() {
if (map.getZoom() > start_at_zoom) {
var geoJsonUrl = 'http://map.kecoviewer.com/geoserver/wfs';
var defaultParameters = {
service: 'WFS',
version: '1.0.0',
request: 'getFeature',
typeName: 'cresh:datazones_popup_mini',
maxFeatures: 3000,
outputFormat: 'text/javascript',
format_options: 'callback: getJson',
srsName: 'EPSG:4326'
};
var customParams = {
bbox: map.getBounds().toBBoxString()
};
var parameters = L.Util.extend(defaultParameters, customParams);
console.log(geoJsonUrl + L.Util.getParamString(parameters));
$.ajax({
jsonp: false,
url: geoJsonUrl +...