Location and Maps in D7, Part Deux

So I am going to take another swing at location and maps in D7.

That being said, the first step is really to buy this book from O’Reilly >> http://shop. oreilly.com/product/0636920021230.do .  It will answer a ton of questions and is very useful.  But I’m not certain it has all the answers, so..


Case 1 - Node with a map.

Let’s say you have a content type with a location, like an event, and you want to display a small map of the location with a link to Google Maps.  This was pretty easy with the Location and GMap modules in D6, but was not immediately obvious for D7. Especially if you want something simple.

First, we’ll use the Address Field module - http://drupal.org/project/addressfield - for the Event Location.  Note that the module handles international locations which is why, on the node creation form, the country pulldown comes first.  You need to select the country first to setup the other fields.  There is an option to limit the number of countries available for addresses, but that multiselect option is a bit tricky.

Secondly, you will want to use the Address Field Static Map module - http://drupal.org/project/addressfield_staticmap - which will create the block to display the map.  For my case, the Google static map is sufficient, but there are two other choices, a Javascript Google map or a Mapquest statis map.  Setting up the block is simple, select the address field you want to map, set up the mapping API (Google Static), and options like the zoom, image size, etc.  There is also a checkbox for a link to a Google map page and a link to a ‘Get Directions’ map.  Select those and you are set.

See the attached ‘Address Field Static Map’ image to see what I set up on a test system…

I found this method on the OSTraining web site.


Case 2 - A map of all nodes

Now we want to display a map of all event nodes that have not occured yet.  This is where the Open Layers (OL) module comes in and the O’Reilly book mentioned above is very helpful.

However, the first item is getting the address translated into a format that OL can understand, thus you need the combination of the:

  • Open Layers - of course.
  • Geofield - to encode the latitude / longitude of the location, for example.
  • geoPHP - a required library.
  • Geocoder - takes an address and encodes it to a geofield.

 

So for our Event node example, in addition to the Address field, you will need to add a geofield field to the content type.  In the setup of the geofield, you set the widget to ‘Geocode from another field’ using the Address field as the source.  Sounds a little odd having two locations in a node, but that seems to work.  You probably don’t ever want to set the geofield to display on a node….

Now that you have that location encoded, you can use it in Open Layers.  Setting up OL is a three step process:

  • Create the Map you want to display.
  • Create a View of the data you want to display.
  • Create another View which layers the information from the first view on the Map you built.

 

You can also repeat Steps 2 & 3 to layer many sets of data on your map.

To create the map, Open Layers has its own UI which consists of:

  • Basics - setting up the size of the map and its theme
  • Centers & Bounds - initial location and zoom level.
  • Layers & Styles - type of map (Google, Mapquest), from what View to pull the data, and which marker style.
  • Behavior - various map control settings and actions, like popups, scrolling, etc.
  • Display - which quickly describes how to setup the Views display of your map.

 

The one caveat here is that for Layers & Styles (and potentially Behavior), you should set up your data View before you build the OL Map, but if you don’t you can go back in after and add the view info.

For the View, set one up for the content type (Event) with the fields and filters you need (see the ‘Event Data View” image) with the addition of the geofield field in the Field section and setting up a display of type ‘OpenLayers Data Overlay’.  Also make sure you give the display and title a unique name so you can select it correctly on the OL Map UI and elsewhere.

Finally, you need to create the view that places the data on the map.  For this you’ll need to create a view on the Event content with a Page display using the ‘OpenLayers Map’ format.  The only option on that page style is selecting the map you built in the OL Maps UI. Set up the rest of the view as you normally would with filters, paths, etc.  See the ‘Map Page View’ image.

There are also settings that can be changed to map markers, styles, etc. but that’s getting a bit more complicated.  As if things were not already…