Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I have a web map, and I'm hoping to make it interactive.

The layer I have is reasonably large, at 15 mb in GeoJSON format 4 mb compressed, so I don't want to load the whole layer as one file. But, I do want to be able to interrogate each feature for around 6 attributes and the geometry.

What I have is:

  • Leaflet 0.5
  • GeoServer 2.2
  • Access to the server and data, happy to customise the data.

What I want is:

  • user can click on a map, and is returned a nice dialog box with feature information in a table
  • the map centers on the feature, possibly zooms, and highlights the feature.

I'm pretty sure this can be achieved using a GeoJSON request (like the example here), but I can't find examples of this anywhere and I'm struggling to implement it myself.

Does someone have a nice example of this?

share|improve this question
add comment

1 Answer 1

up vote 2 down vote accepted

With lots of help from a Leaflet contributor, I was able to retrieve limited data. It still has a glitch or two and I haven’t cleaned up the code. The app was more or less a kitchen sink for testing. So I apologize in advance.

I used the Leaflet GeoSearch plugin as a starting point for grabbing features with GeoServer filters: contains, and bbox. The maxFeatures parameter is key here which I set as 100. You'll want to set your own params in the var customParams as seen below.

Here is my sandbox app I used. Again, I apoligize in advance for the mess. Let me know if you have any questions

currentAddress = L.layerGroup().addTo(map);

function handleJson(data) {
    geojsonLayer.addData(data);
    geojsonLayer.setStyle(defaultStyle);
    currentAddress.addLayer(geojsonLayer)

}


map.on('geosearch_showlocation', function(result) {

    var rootUrl = 'http://geoserver.capecodgis.com/geoserver/capecodgis/ows';

    var defaultParameters = {
        service : 'WFS',
        version : '1.0.0',
        request : 'GetFeature',
        typeName : 'capecodgis:blocks_2010_4326',
        maxFeatures : 100,
        outputFormat : 'json',
        format_options : 'callback:getJson'

    };

    var customParams = {
        bbox : map.getBounds().toBBoxString(),
        //cql_filter:'CONTAINS(the_geom, POINT(' + thisLatLon + '))'
    };

    var parameters = L.Util.extend(defaultParameters, customParams);

    console.log(rootUrl + L.Util.getParamString(parameters));

    $.ajax({
        url : rootUrl + L.Util.getParamString(parameters),
        dataType : 'jsonp',
        jsonpCallback : 'getJson',
        success : handleJson
    });
});
share|improve this answer
    
Looking good! I'll have a go at using this when I get back to work. I suppose a similar thing can be done with 'onclick', right, capturing latlong and putting it in the cql_filter. –  alexgleith Mar 22 '13 at 21:16
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.