map-autocomplete

David Puckett

Autocomplete Map Search

Autocomplete multi-source search with ArcGIS REST services

Search First. Search is expected in modern web applications. And what better use of a map application than to start typing what you want, get a list of relevant suggestions, pick one, and be taken there with some useful context info.

In several posts on the geospatial blog MapBrief, Brian Timoney has discussed a “Search First” approach to web app building. Most recently:

Good Thing #1: A Big, Obvious Auto-Complete Text Entry Box

I couldn’t agree more. It’s core to nearly every application I build and is far more useful than novelty “standard” web-mapping tools (looking at you, measure tool).

Search is the number one request I get in web-mapping applications, so I thought I’d share how I put the pieces together to get an autocomplete search running with Esri ArcGIS REST services.

I’ll walk through the steps to build a fully functioning autocomplete map search feature.

Source on GitHub:
https://github.com/brightrain/arcgis-autocomplete

Sample application:
https://dev.brightrain.com/map-autocomplete

Let’s build an autocomplete search box for recreation sites in Okanogan–Wenatchee National Forest.

This autocomplete solution uses Twitter Typeahead.js, which includes the Bloodhound suggestion engine and the Typeahead jQuery plugin.

Once you set up Typeahead in your application, the only HTML you need is a simple input box:

<input id="search-box" type="text" placeholder="Search...">
Three Parts to the Setup

  1. Define and initialize suggestion engines

  2. Wire up Typeahead with jQuery, add engines, and define the UI

  3. Handle the event when a user selects a suggestion

Define the Engines

In this example we use four engines (Bloodhound instances), one for each source:

Sources (formerly a table with icons):

  • Campgrounds — ArcGIS Feature Service
  • Trailheads — ArcGIS Feature Service
  • Ski Areas — ArcGIS Feature Service
  • Esri World Geocoder service

 

Constructing the Remote Sources

This is the most critical part: each engine needs a URL that sends a request every time the user types characters. The choice of endpoint determines performance.

Option 1: find

Great if you have a MapServer and want to search across multiple layers in one request.

Option 2: query

For FeatureServer setups — you can query each layer individually or the entire feature server.

Option 3: suggest

Best for geocoding. ArcGIS supports suggest for locator services.
We’ll use the Esri World Geocoder with suggest.

Gist: Campground engine setup
https://gist.github.com/brightrain/9f7efde8f77a63ca5125

Gist: World Geocoder engine setup
https://gist.github.com/2036ceb58860266d5658

Both engines use an ajax handler to show/remove a loading spinner around requests.

Add the Engines & Style the Suggestions

Turn the input into a Typeahead control with jQuery:

Gist: Input → Typeahead setup
https://gist.github.com/25d3eed98a6d5c8defca

minLength controls how many characters the user must type before suggestions fire.

Define each Typeahead source (example: campground):

Gist: Campground source config
https://gist.github.com/a4ea462113062598749b

Chain all sources together:

Gist: Complete list of all sources
https://gist.github.com/23f4f68a0f3ed79c6fc8

Handling Selection Events

Image placeholder: suggestions dropdown screenshot

When a user selects a suggestion, a jQuery event handler fires. The callback receives:

  • The HTML element

  • The selected datum object

For Feature Service layers we stored the objectId inside the datum, so we can fetch the feature + geometry and zoom to it.

For the Geocoder, the datum includes a magicKey, which lets us fetch the result from the find REST endpoint.

Gist: Selection event handler
https://gist.github.com/brightrain/4b07b5f3fa4d9a2d85f2

Styling the Suggestions

You have full CSS control. Here’s what the sample used:

Gist: CSS
https://gist.github.com/brightrain/6a805e9eed1e09eb9362

More Options & Notes

If you’re using Esri-Leaflet, you can use their excellent geocoder plugin, which supports searching via:

  • Locator services

  • Map services

  • Feature layers

Esri-Leaflet Geocoder plugin:
https://github.com/Esri/esri-leaflet-geocoder

Example searches for services:
http://esri.github.io/esri-leaflet/examples/search-map-service.html

http://esri.github.io/esri-leaflet/examples/search-feature-layer.html

Special thanks to Bryan McBride for the bootleaf template used as the starter for this solution:
https://github.com/bmcbride/bootleaf

Full Project

Repo:
https://github.com/brightrain/arcgis-autocomplete

Demo:
https://dev.brightrain.com/map-autocomplete