Loading GeoJSON layers from Geoserver to Leaflet Map based on the current bounding box

Question

Currently, I have over 25000 points for my map. When I load all the points the map is extremely slow. Therefore, I want to load the data only at a certain zoom level and bounding box(users view). How can I accomplish that with my current code?

var map = new L.Map('map', {center: new L.LatLng(54.0000, -125.0000), zoom: 5});
  var googleLayer = new L.Google('ROADMAP');      
  map.addLayer(googleLayer);

function BoundingBox(){
var bounds = map.getBounds().getSouthWest().lng + "," +     map.getBounds().getSouthWest().lat + "," + map.getBounds().getNorthEast().lng + "," + map.getBounds().getNorthEast().lat;
return bounds;
}
var geoJsonUrl ="http://localhost:8080/geoserver/Wells/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=Wells:bc_well_data_wgs&maxFeatures=25&outputFormat=text/javascript&format_options=callback:loadGeoJson"; 

var geojsonLayerWells = new L.GeoJSON();

function loadGeoJson(data) {
console.log(data);
geojsonLayerWells.addData(data);
};

$.ajax({ 
    url: geoJsonUrl, 
    dataType : 'jsonp',
    success: loadGeoJson
    });


map.on('moveend', function(){

    if(map.getZoom() >= 18){

        map.removeLayer(geojsonLayerWells);

        }
    if(map.getZoom() < 18){
        map.addLayer(geojsonLayerWells);
        }
        console.log(map.getZoom());
        console.log(BoundingBox());
    });

score 10 · Accepted Answer · answered Aug 13 '14 at 22:04

Here is how I solved it, changed everything around.

var wellmaxzoom = 11;       
var geojsonLayerWells = new L.GeoJSON();

function loadGeoJson(data) {
    console.log(data);
    geojsonLayerWells.addData(data);
    map.addLayer(geojsonLayerWells);
};

map.on('moveend', function(){
 if(map.getZoom() > wellmaxzoom){
    var geoJsonUrl ='http://localhost:8080/geoserver/cite/ows'; 
    var defaultParameters = {
        service: 'WFS',
        version: '1.0.0',
        request: 'getFeature',
        typeName: 'cite:bc_well_data_wgs',
        maxFeatures: 3000,
        outputFormat: 'application/json'
        };

    var customParams = {
        bbox: map.getBounds().toBBoxString(),
        };
    var parameters = L.Util.extend(defaultParameters, customParams);
    console.log(geoJsonUrl + L.Util.getParamString(parameters));

    $.ajax({
        url: geoJsonUrl + L.Util.getParamString(parameters),
        datatype: 'json',
        jsonCallback: 'getJson',
        success: loadGeoJson
        });
    }else{
    map.removeLayer(geojsonLayerWells);
    };
});

score 2 · Answer 2 · answered Aug 07 '14 at 18:42

2

WFS does not have a notion of zoom levelor scale, that is WMS, while it support loading subset of the data based on a bbox (see the WFS examples).

That said GeoServer does not support JSon for WMS, see http://docs.geoserver.org/latest/en/user/services/wms/outputformats.html#wms-output-formats

That could be a good thing to contribute though.

Simone.

answered Aug 07 '14 at 18:42

simogeo

351
1
7

WMS also doesn't have a notion of zoom scale, that's WMTS – user27874 Sep 23 '19 at 16:17

score 1 · Answer 3 · answered Mar 14 '15 at 02:41

This works for GeoServer 2.6.2 with Leaflet 0.7.3. BTW the following bbox numbers of SF city was obtained by Leaflet's native function

var yourMap = L.map('map').setView([37.7749295, -122.4194155], 17);
yourMap.getBounds().toBBoxString();

Without limiting: (return many) http://localhost:8080/geoserver/topp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp:states&maxFeatures=50&outputFormat=application/json

With map boundary limiting (return currently covering) http://localhost:8080/geoserver/topp/ows?service=wfs&version=1.0.0&request=GetFeature&typeName=topp:states&bbox=-122.42553591728209,37.77453948196016,-122.4133050441742,37.775319671408&outputFormat=application/json

score 0 · Answer 4 · answered Aug 11 '14 at 14:13

0

Your code look ok. Just pass the bbox in url.

var bbox = BoundingBox();

var geoJsonUrl ="http://localhost:8080/geoserver/Wells/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=Wells:bc_well_data_wgs&maxFeatures=25&outputFormat=json&bbox="+bbox+"&format_options=callback:loadGeoJson";

answered Aug 11 '14 at 14:13

SSA

5,433
4
36
50

I added it to my url in the $.ajax function and it still runs slow when I add 5000 as max-feature and I zoom in really close. Is there a way to see how many objects are getting called at a specific zoom? – mblais29 Aug 12 '14 at 15:13
If your BoundingBox() function giving correct bbox then you should be getting the data in that range. I would say for test, url in geoserver admin tool layer preview, add bbox calculate from your function and see the result. – SSA Aug 12 '14 at 15:20

score 0 · Answer 5 · answered Aug 12 '14 at 15:24

This is what I have came up with, when I check how many objects loaded it says 4000, meaning its loading everything outside the bounding box too....

//loads the google map
var map = new L.Map('map', {center: new L.LatLng(54.0000, -125.0000), zoom: 5});
  var googleLayer = new L.Google('ROADMAP');      // Possible types: SATELLITE,        ROADMAP, HYBRID
  map.addLayer(googleLayer);


//Gets the current bounding box lat and long

function BoundingBox(){
var bounds = map.getBounds().getSouthWest().lng + "," + map.getBounds().getSouthWest().lat + "," + map.getBounds().getNorthEast().lng + "," + map.getBounds().getNorthEast().lat;
return bounds;
}

//loads the well markers
wellmaxzoom = 8;
var geoJsonUrl ="http://localhost:8080/geoserver/cite/ows? service=WFS&version=1.0.0&request=GetFeature&typeName=cite:bc_well_data_wgs&maxFeatures=4000&outputFormat=application/json";

var geojsonLayerWells = new L.GeoJSON();

function loadGeoJson(data) {
console.log(data);
geojsonLayerWells.clearLayers();
geojsonLayerWells.addData(data);
};

$.ajax({ 
    url: geoJsonUrl + "&bbox=" + BoundingBox(),
    dataType : 'json',
    jsonpCallback: 'loadGeoJson',
    success: loadGeoJson,
    });

map.on('moveend', function(){

    if(map.getZoom() > wellmaxzoom){
        map.addLayer(geojsonLayerWells);
        }
        console.log(map.getZoom());
        console.log(BoundingBox());
    });

Loading GeoJSON layers from Geoserver to Leaflet Map based on the current bounding box

5 Answers5