OpenLayers Proximity Tutorial

This tutorial demonstrates how to use the Drupal 6 OpenLayers Proximity module. This example is a simple listing of geo-coded nodes that can be filtered and sorted by distance. For this to work, you need the following modules enabled:

  • Chaos Tools
  • Content
  • Views and Views UI
  • OpenLayers
  • OpenLayers CCK
  • OpenLayers Geocoder
  • OpenLayers Proximity
  • OpenLayers UI

Create Geo-Coded Nodes

The first thing that we need is some nodes that contain geographic information. For this we'll create a new Content Type with a Location field using the OpenLayers Geocoder CCK widget. This tutorial assumes you are already familiar with adding new content types and CCK fields.

  1. Add a new content type with an appropriate name. You can use the default settings or change them to your liking. You do not need the Body field for this example.
  2. Add a new field with label Location and name it field_location. Choose 'OpenLayers WKT' for field type and 'OpenLayers Geocoder' for widget type. You can use most of the default settings. Since we want our node to display a map, we need to leave the Input Map Preset at 'Default Map'. Enable the 'Zoom to Layer' behavior and set it to level 15. For this example we'll only be inputting a single point for each node.
  3. Test the new content type.
    • Create a new node using your new content type and give it an appropriate title.
    • Below the map in the Search Address field, begin typing in an address. You should see auto-complete suggestions as you type. It's best to enter the address with auto-complete, then save the node. The node should display a map with a point that represents your address.
  4. Now that you know that your new type works, you can use the Devel module to generate some test nodes, or manually generate a few nodes.

Update The Proximity Index

In order for geo-coded nodes to show up in search results, you must first build the Proximity Search index. Go to Administer >> Site building >> OpenLayers >> Proximity Search (admin/build/openlayers/proximity), check the "Rebuild index" box, and click "Save configuration".

Create The View

Now we need to create a view to display a list of the nodes we just created. This tutorial assumes that you are already familiar with views.

  1. Add a new view of type Node.
  2. Create a new Page display. You may want to set up a menu item for the page.
  3. Add the 'Node Title' field and link it to its node.
  4. Change the display style to 'Table'.
  5. Add a 'Node Type' filter so that the view only uses the node type we created.

Add The Proximity Filter

  1. Click the 'Add Filter' button
  2. Click the 'Groups' button and choose 'Proximity'.
  3. Select 'Proximity:Great Circle' and click add.
  4. Next click the 'Expose' button.
  5. Choose your unit of measurement
  6. Select the 'Unlock Location' option.
  7. Unset the 'Force Single' option. The filter will not work if this option is set.
  8. Unset the 'Optional' option. The distance will not display is this option is set.
  9. All other settings should be left at their default values.
  10. Save the filter.

Now it's time to test the filter. You can use the Views Live Preview or save the view and navigate to the page you created. The page will contain an exposed filter where you need to enter the radius for your search and the starting point. The starting point can be entered either by name, e.g.. Chicago (no quotes) or by postal code. At this point the proximity filter should be working, but you will probably want to know the distance of each result from your starting point,

Add the Proximity:Distance field

Do not confuse this with the Location field that we added to our content type.

  1. Click the 'Add Field' button,
  2. Click on the 'Groups' button and choose 'Proximity'.
  3. Select 'Proximity:Distance' and click add.
  4. Unset 'Hide if Empty', choose the remaining settings to your liking and save.

The distance field will display zeros until you apply the proximity filter. Then you will have distance information but the results will not be in any particular order. Fortunately OpenLayers Proximity also provides a way to sort your results by distance.

Sort By Distance

  1. Click on the Add Sort button,
  2. Select Groups=>Proximity=>Proximity:Distance,
  3. Save and you're done.

You can now filter your test data by distance from any geographical point and the results will be sorted by distance.