Using Funnelback search results to populate a map
Background
This article shows how geo-coded Funnelback search results can be displayed on a popular map service such as Google Maps.
Implementation
At a high level the implementation works this way:
-
A Funnelback index is built containing geo-coded results.
-
A template is created within Funnelback that is configured to return results as GeoJSON.
-
LeafletJS is used to read in this GeoJSON data and populate the items onto a Map. The Javascript code can be added to a Freemarker template or to any existing web page.
The advantage of using LeafletJS is that the Funnelback component is very compact and clearly defined (only the GeoJSON template is required) and the map layer is very flexible (you can choose to use Google Maps, Bing Maps, OpenStreetMap etc). LeafletJS also contains many plugins to easily extend the functionality.
The basic implementation includes built-in support for:
-
Data feed from Funnelback search results via a GeoJSON template
-
Clustering of result pins
-
Customisation of pin icons, pin information popups
-
Configuration of the mapping service to use (e.g. Google/Bing/OSM)
-
Full screen mode
-
Easy extension of functionality
Code
A mapping plugin is available on GitHub allowing for easy setup of mapping. See: https://github.com/funnelback/funnelback-mapping
Working demonstration
A working demonstration of the mapping code is available at: http://showcase.funnelback.com/s/search.html?collection=showcase-mapping
This demo provides an interactive map based on a dataset of global airport locations.