Module 6 - Adding search functionality

In this module you’re going to add a search functionality to the user interface. This search functionality will rely on the countries web service that you created in the previous module.

With this search functionality users will be able to click on the map and get a popup giving information about the clicked country.

The MapFish Client library provides the mapfish.Searcher.Map class for enabling that. See the mapfish.Searcher.Map doc [1]. A mapfish.Searcher.Map object is an OpenLayers control so it can be wrapped in a GeoExt.Action just like the Zoom + and Zoom - controls that we saw earlier in the workshop.

Progamming task

Edit the mapfishapp_layout.js file and add a new GeoExt.Action to the actions array returned by the addTbarItems function. This GeoExt.Action will be configured with a mapfish.Searcher.Map as its control. The mapfish.Searcher.Map object must be configured so it

  • relies on the countries MapFish web service (url option)
  • triggers search requests on clicks (mode option)
  • displays a popup with the country name and the population (displayDefaultPopup option)

When clicking on a country you should get a popup looking like this:

_images/popup.png

[Add Search Correction]

Bonus tasks

1. Change the mapfish.Searcher.Map configuration so it sends requests as the user pauses on the map.

2. Make the search results be displayed in a GeoExt.Popup. For that you’ll need to create a searchcomplete listener on the searcher and have this listener create the GeoExt.Popup. Look at the GeoExt.Popup documentation [2] to know how to use it.

[1]http://www.mapfish.org/apidoc/trunk/files/mapfish/core/Searcher/Map-js.html
[2]http://geoext.org/lib/GeoExt/widgets/Popup.html

Previous topic

Module 5 - Creating Web Services

Next topic

Module 7 - Customizing the web service

This Page