Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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
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) {


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

    var rootUrl = '';

    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));

        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. – Alex Leith Mar 22 '13 at 21:16

Your Answer


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.