Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

GeoServer_TypeAhead

This is a demonstration site showing how to use GeoServer as the source of a type-ahead, based on Twitter TypeAhead.

The modifications to the above Twitter demos, in order to use GeoServer as a data source, are found in the prepare and transform functions:

// Initialize the Bloodhound engine
var bloodhoundEngine = new Bloodhound({
  datumTokenizer: function(datum) {
      return Bloodhound.tokenizers.whitespace(datum.value);
    },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  limit: 15,
  remote: {
    url: typeaheadBase + '%QUERY',
    wildcard: '%QUERY',
    prepare: function(query, settings) {
      // Build the query string in a GeoServer-ready format
      settings.url = typeaheadBase + jQuery.param(typeaheadParams);
      settings.url += "&CQL_FILTER=strToUpperCase(" + nameField + ")%20like%20%27QUERY%25%27";
      settings.url = settings.url.replace('QUERY', query.toUpperCase());
      return settings;
    },
    transform: function(response) {
      // temporarily persist the geometries of the returned states
      geometries = {};
      return $.map(response.features, function(feature) {
        geometries[feature.properties[nameField]] = feature.geometry;

        // Return the state name to the TypeAhead suggestion dropdown
        return (feature.properties[nameField]);
      });
    }
  },
});
bloodhoundEngine.initialize();

This approach works best when the GeoServer layer contains unique values (eg city or state names), so that multiple identical responses are not received while typing.

See the demo at https://slead.github.io/GeoServer_TypeAhead/ which also shows how Leaflet.js and Tokenfield can be integrated.

screenshot

About

A demonstration site using GeoServer with a TypeAhead

Topics

Resources

Releases

No releases published

Packages

No packages published