Openlayers Proximity Search – Drupal 7

Other references:

• Openlayers Proximity Search – D7 - the background
• Need a simple Google Maps solution; lost in the labyrinth of modules
• http://drupal.org/project/ol_locator (A feature that does what is described here).
• https://drupal.org/node/1944648 - Instruction on how to do a proximity search/filter, but without the map

Intro

These are steps to create a proximity map that will filter a list of items and display results on a map based upon their distance from a user entered address or zip code. The process also creates a table (as an attachment) that lists the results and their distance from the selected address.

Use cases:

• you wish to give users the ability to see local coffee shops based upon distance from a given address.
• give members of a site the ability to see other members that live near them
• a non-profit might create a map that allows users to see drop-off locations for used clothing that are close to their home or workplace.

1. Required Modules & Submodules:

Use the most current version of these modules (if working with older modules, you might to check an earlier version of this page. There have been some changes):

• OpenLayers
  • OpenLayers UI
  • OpenLayers Views
  • OpenLayers Proximity (for Proximity: Distance field) - (Geofield 2.0 is recommended alternative - steps)
• Proj4JS
• Address Field
• Geofield 2.x
• Geofield Map
• Libraries API
• Views
• Views UI
• Chaos tool suite (ctools)
• geoPHP
• Geocoder

2. Flush Caches

You may find that some of the new Content Types, changes to the Content Type and Views you just created are not showing up. If so, remember to flush all caches. You should flush caches along the way – admin/config/development/performance – and reload the pages in your browser.

3. Create/Update Content Type

This will be the content type you or your user will fill in to put themselves on the map. I called it "Organisation":

• Add all the fields you need – for ex.
• Label --> Machine name --> Field --Need a simple Google Maps solution; lost in the labyrinth of modules> Widget
• Address --> field_address --> Postal address --> Dynamic address
• Geofield --> field_geofield --> Geofield --> Geocode from another field – from Address

Under “Geofield” field settings:

• Geocode from field = "Address" (Geofield will take the information from the “Address” field – most likely it will come up as default if you add fields in this order.)
• Geocoder = “Google Geocoder” or your preference

4. Manage Display

Address --> no change
Geofield --> Label --> Format “Geofield Map” --> Widget settings as required – for ex.

• Width: 600px
• Height: 400px
• Zoom: 14
• Zoom Control Type: default
• Map Control Type: none
• Default Map Type: map
• Show Scale: Yes
• Overview Map: Yes
• Scrollwheel: Yes
• Draggable: Yes

You should now be able to enter “Organisations” by address and when saved see the address and a map below.

5. Add some test “Organisation” nodes.

Add some well known addresses (WKT) with or without post codes. Well known locations such as Tower Bridge, London or Capitol, Washington should turn up on the map without much problem. If not you will have to go over your settings.

It seems that if this field is set as "required" you may have to fill in the the "*" items for sure:

• Address line 1
• City and
• Postcode

The easy thing during testing is that you can just throw a few simple lines at the content type's “Address” field (or what ever you called it) – like a title and a WKT for a place – Tower Bridge in Address 1 with “United Kingdom” is enough, same for London Eye.

For example let's take London:

*) In most cases the well known “text” name (WKT) of important places will be sufficient to locate them and adding them to Adress 1 will be enough – no need to add the city. The last example shows that not all places are easily identified by the shortest form of their name - “White House” in “Title” and “Address 1” (United States) would be enough.

6. Create a new View (Part I)

…./admin/structure/views
This will be the layer you need in the following step when you create your map to show the location of the organisations or what you decide ...

1. “View name *” for ex. "Overlay Organisations"
2. Add a “Description” if you like
3. Under “Show” select (leave) “Content“ and select “of type” “Organisation” (in this example) and “sorted by” “Unsorted”
4. Do not create "Page" (tick off)
5. Click "Continue and Edit"
6. Click “+Add” in the top menu line and choose "OpenLayers Data Overlay"
7. Under “Fields” - add “Content: Geofield”:
   • deselect "Create a Label"
   • Formatter = "Well Known Text" (WKT)
   • Data Options = "Use Full Geometry"
   • Apply
8. Under "Format", you should see “Unformatted list” click it and the only choice you will see now is “OpenLayers Data Overlay” - you need to activate it.
   • Map Data Sources = "WKT"
   • WKT Field = "Content: Geofield"
   • Title Field = "Content: Title" – Note: If you leave this blank you will not be able to see Tooltips or Popups for the locations later on.
   • Change the “Display name” if you like
   • "Description Content" - this will show up as the second line in the tool tips. Leave blank now and later decide if and what you would to see there.
   • Under Preview you should now see a text dump that includes the locations you created and looks like this
     

     “You can use the following parameters in your styles as dynamic values
       ------------
       ${title_rendered}
       ${title}
       ${field_geofield_rendered}
       ${field_geofield}
       London
       ------------
       The following is a dump of the data that is rendered from this display. It is used for debugging purposes only.
               array (
         0 => 
         array (
           'projection' => '4326',
           'attributes' => 
           array (
             'title_rendered' => '<a href="/en/content/tower-bridge">Tower Bridge</a>',
             'title' => 'Tower Bridge',
             'field_geofield_rendered' => 'POINT (-0.0754548 51.5054888)',
             'field_geofield' => 'POINT (-0.0754548 51.5054888)',
           ),
           'wkt' => 'POINT (-0.0754548 51.5054888)',
         ),

9. “Save & exit” or “Continue & edit” - then make sure you save the View before you go to the next step.

7. Check the new layer

Go to …/admin/structure/openlayers/layers and you should see at the bottom of the list a new layer “overlay_organisations (Default) --- OpenLayers_Views --- OpenLayers Data Overlay”.
Seems it should read now(02/2013):

8. Clone a map

Go to “Maps” in …./admin/structure/openlayers/maps and make a clone of "Geofield formatter map (Default)" …/admin/structure/openlayers/maps/geofield_formatter_map/clone

1. Machine name "organisation_overlay" and title to "Organisation Overlay"
2. Add a “Map Description” if you like or leave the default – for ex. “Map used for Geofield Output - to locate Organisations ...”
3. Under “Width*” I will use “auto” - full width of the available space
4. “Height*” - as required
5. You can activate (tick) “Hide empty map for Views “
6. Top left, side tabs - "Layers & Styles" mark the check boxes "enabled" and "activated" for the "overlay_organisations" at the bottom of page in the box under the heading “Overlay layers”
7. Keep the settings for “Placeholder for Geofield Formatter” (on for check boxes"enabled" and "activated")
8. You may want to change the markers – the default ones are a pale orange – under the columns “Style” and “Select Style” you can change different markers – which you can see under ...admin/structure/openlayers/styles.
9. Save the Map
10. You may want to adjust the maps “Behaviors” (top left, side tabs)
11. For ex. if you check to on “Zoom to Layer” or “Pop Up for Features“ you need to make sure to click the correct layer – in this example “overlay_organisations_openlayers_1” - if you cannot see this layer – save and come back to “Behaviors”
12. Have some fun with the many options under “Behaviors” - and be aware some wont work together – so read the explanations carefully - ….”Do not use with Pan Zoom Bar Control or Pan Zoom Control.”

9. Part II of creating the View

Now, this is the part where we add the elements needed to the View to show where our Organisations are based.

Go back to the View we created earlier under 6 "Overlay Organisations" and add the following:

1. Open the existing View "Overlay Organisations" for editing …admin/structure/views ...admin/structure/views/view/overlay_organisations/edit
2. This time we need to create a "Page" – so press “+Add” and select “Page”
3. for this example - “Display name: Near Me”
4. “Page title” could also be "Near Me" – leave it or change it if you like now or later
5. set the “Path“ to something like “near_me” - change it if you like now or later – the path should show you only a forward slash “/” - so it is fiddly to hit to open the configuration menu.
6. “Apply” or better "Continue and Edit"
7. You should see the “Fields”:
8. “Content: Title” and
9. “Content: Geofield” as set in Part I
10. Under “Fields” - you may have already or want now to add other fields such as “Content: Address”, etc.
11. Now, the “Format” you should see as inherited from before should be “OpenLayers Data Overlay” open this and
12. first of all choose at the top under “For” - “This page (override)”
13. Change it to "OpenLayers Map" and
14. then on the following menu ….. (or under “Settings”) you should see at the top under “For” - “This page (override)” as well – if not cancel and start again with this step of adding the page. You may have to delete the page if you already saved the View and start fresh.
15. Lets continue …. with “Page: Style options” or “Settings” under “Map” choose the one you created earlier under step 8 - “Organisation Overlay”
16. You should see the following “Filter criteria” from before:
    • Content: Published (Yes)
    • Content: Type (= Organisation)
17. under Preview you should now see that map with the markers of the nodes you created.
18. This might be a good time to save your View and then continue
19. Keep flushing the caches
20. go to see the view now under …./near_me – as set in the path above.
21. To make life easier you could add the View to your menu:
22. under View editing - “Page Settings” click on “Menu” to activate “Normal menu entry” and add “Near Me”
    • under “Title” this would give a menu item under “Navigation” be default, scroll down and change for example to “Main menu”; press “Apply”.
23. Do not forget to also press “Save” now – otherwise you may not find your new view or the new Proximity: Distance menu item.
24. So, you should now be able to see a map with either light orange dots or your chosen marker under the path “…../near-me” “This page (override)”or by pressing the “Near Me”menu item in “Navigation” or “Main menu”. If this looks fine you are more than half way there, though, the really interesting part comes now in getting to the proximity search added in.

10. Creating the View - Part III - for the Proximity Search

The basis for this part can be found under – Need a simple Google Maps solution; lost in the labyrinth of modules - and by using this module - http://drupal.org/project/ol_locator.

We want to do 2 things now:

• Add the proximity search function
• Add a list of locations (i.e. here “organisations”) on top of the list showing the distance and other information if needed. You may not need this, but following the examples quoted earlier, I found the information relevant as it helped me to figure what the problems are – especially if you only have one location in reach.

1. Open the existing View "Overlay Organisations" for editing …admin/structure/views ...admin/structure/views/view/overlay_organisations/edit
2. Add a new filter under “Filter criteria” – ”Geofield (field_venue_geofield) - proximity“ - “For” – “All displays”
   • Tick (activate) “Expose this filter to visitors, to allow them to change it”
   • “Label” = something like “Search by location”
   • “Operator” = “Is less than“ (or your choice)
   • "Source of Origin Point" = Geocoded location
   • "Geocoding Service" = Google Geocoder (or other)
   • Note: Adding default values to “Value” and “Location” should make testing easier as you do not have to type in the two values time and again. Just remember – as you call the view your still need to press “apply” or what ever your called the form submit button.
   • Under preview you should now see the “Proximity” search form submit fields just above the map.
3. You may save the view now and have a look at it under …./near_me or via the Main Menu item you may have added. The map should now have the proximity search function on top and you should be able to enter a distance and a location to search from.
4. For testing the View you should enter the values suggested above 10 (miles or kilometres) and London if you also entered the test locations from the table above.
5. Press “Apply” and the map should now show you a part of London with all those London places you entered – the map will already show the part of London if entered in the defaults under “Filter criteria” – ”Proximity: Great-circle“.
6. If you now enter 5 miles or kms the map should not change – if you enter 2 it will. What you can not easily see is how far each location is away from the centre you chose.
7. Now, before we deal with this – let's get to the problems – play with the map and enter Toronto where we have no entry – you should not see a map – because we checked “Hide empty map for Views“ under the basic settings of our map. That is great. Later you can add some text advising your users of this.

11. Creating the View - Part IV – a little table or grid

1. Open the existing View "Overlay Organisations" for editing …admin/structure/views ...admin/structure/views/view/overlay_organisations/edit
2. Add an "Attachment" – so press “+Add” and select “Attachment”
3. This time we need to use override from the start & for most configuration chose – “This attachment (override)”
4. Under “Fields” - add “Proximity: Distance” and keep the defaults – you may (later) decided that the label is not needed.
   Note: In case you cannot see any distances printed out in your View (or preview) – make sure that you ticked “round” and set a “Precision” value of 1 or greater, without it would not show in my set-up for some reason.
5. Change “Format” to “Table” - remember the override and leave the “Settings” as they are by default.
6. I later decided to change the “Format” above the “Fields” to “Grid” - remember the override and leave the “Settings” as they are by default. Once applied - you will see the options of field settings below. Here you can add in settings additional formatting options.
7. Now add the following “Sort criteria --> Proximity: Distance (asc)”
8. You may also want to "Exclude from display" some other fields - again you probably want to check only in "This attachment (override)".
9. You should now see a table in the Preview and the Label of the Title might be missing as we probably deactivated it earlier. If you want it back reactivate it for this display only- override.
10. Before you go – you may want to set the pager to something less than 10 in order to reduce the list or choose another format for the list or put it in another location – sidebar, etc. For example I chose a grid layout with 10 columns and used the wrapping option from the options under “Format” - “Show: Fields | Settings” with a separator for the activated “Inline fields”.
11. Nothing will show up until you went to “Attachment settings” and set it to “Attach to: Page” - in this example you should select "Near Me".
12. Now you can save the View and have another look at the Proximity Search Page.