Introducing OpenLayers Geocoder

Drag-and-zoom free location spotting

The OpenLayers suite represents a breakthrough in the Drupal mapping solutions. The module allows to combine maps coming from different providers (Google Maps, Yahoo, and many others...) and, by using services like CloudMade or MapBox, it is finally possible to have maps perfectly integrated into the website look and feel. In order to input geospatial information using OpenLayers we have to enable the OpenLayers CCK module: the input widget provides a map where users can easily mark the desired location.

Unfortunately, this approach does not scale to deal with more complex scenarios. Imagine a website where users need to geo-locate restaurants in different cities: the input process will result in a series of very tedious drag-and-zoom operations. Ideally, the only information the user would need to provide is the address or the name of the location he or she is looking for.

Google Geocoding Web Service

The Google Geocoding Web Service V3 is a very powerful service that accepts full street addresses, location names and even known places (i.e. airports, train stations etc.), returning a complete set of information about the location we are looking for. For instance, Let's have a closer look to the web service response for Pizzeria da Vittorio, Rome:

http://maps.google.com/maps/api/geocode/json?address=Pizzeria+Da+Vittorio,+Rome&sensor=false

results in:

{   "status": "OK",   "results": [ {     "types": [ "point_of_interest", "establishment" ],     "formatted_address": "Pizzeria da Vittorio di Martino Enzo, Via Benedetto Croce, 123, 00142 Rome, Italy",     "address_components": [ {       "long_name": "Pizzeria da Vittorio di Martino Enzo",       "short_name": "Pizzeria da Vittorio di Martino Enzo",       "types": [ "point_of_interest", "establishment" ]     }, {       "long_name": "123",       "short_name": "123",       "types": [ "street_number" ]     }, {       "long_name": "Via Benedetto Croce",       "short_name": "Via Benedetto Croce",       "types": [ "route" ]     }, {       "long_name": "Rome",       "short_name": "Rome",       "types": [ "locality", "political" ]     }, {       "long_name": "Rome",       "short_name": "RM",       "types": [ "administrative_area_level_2", "political" ]     }, {       "long_name": "Lazio",       "short_name": "Lazio",       "types": [ "administrative_area_level_1", "political" ]     }, {       "long_name": "Italy",       "short_name": "IT",       "types": [ "country", "political" ]     }, {       "long_name": "00142",       "short_name": "00142",       "types": [ "postal_code" ]     } ],     "geometry": {       "location": {         "lat": 41.8428020,         "lng": 12.4858480       },       "location_type": "APPROXIMATE",       "viewport": {         "southwest": {           "lat": 41.8344890,           "lng": 12.4698406         },         "northeast": {           "lat": 41.8511139,           "lng": 12.5018554         }       }     },     "partial_match": true   } ] }

As you can see the web service tells us pretty much everything we want to know about the location. It's time to use all this awesomeness to make the user's life shining again!

Meet OpenLayers Geocoder

OpenLayers Geocoder provides a new input widget for OpenLayers CCK fields that makes location spotting a fast and painless experience. All we need to do is to select the OpenLayers Geocoder input widget from within the CCK field setting page.

After enabling the OpenLayers Geocoder widget, adding a restaurant is all about providing its name or address: OpenLayers Geocoder will provide the user with a list of possible locations.

Get the most out of the web service response

We have only used the geospatial information from the web service response so far: latitude and longitude to center the map and the boundary box to nicely fit the desired location. Besides that, the response contains really valuable information about the location we were looking for, like postal code, administrative area, city, country, etc.

OpenLayers Geocoder gives the possibility to fill CCK text fields automatically on the node submission form with data coming from the response object. This is possible thanks to the integration with the Token module: all address parts are exposed and ready to be used as replacement patterns. To enable the autofilling we have to visit the OpenLayers CCK field setting page in order to map which token is going to fill which text field.

When we will be looking for a place, information like city, country, etc. will be automatically fetched into the selected text fields.

This gives us a great flexibility: we can display our nodes by city using Views or search through them using Faceted Search.

Future development: Reverse geocoding

Another very interesting feature of the Google Geocoding Web Service is the possibility to perform reverse geocoding. As the name suggests, this time the user will spot a location on the map and the web service will return the closest address to the given point. OpenLayers Geocoder will have support for reverse geocoding in one its next releases.

Tags: Drupal PlanetMapping tools

Original Article:

Introducing OpenLayers Geocoder