Placing multiple locations on a map with Backdrop CMS

One of my favorite things to do with Backdrop CMS is create a dynamic map showing multiple addresses pulled from bits of content that are stored in the website database. The source of the map data could be posts, events, profiles, etc. This tutorial is to help in situations where you want a map that is dynamically updated as you add or edit the content on your site. 

The following instructions are written for use with the Simplo Starter Kit, but can be adapted to any Backdrop CMS site. The Simplo Starter Kit comes with all the modules you need available. If working with your own code base you may need to download and install these modules separately. 

For me, the most frustrating part of working with maps is dealing with the necessary API keys. More on that later...

Summary:

In summary, creating a dynamic map that pulls data from other content involves the following steps. 

1. Use the addressfield module to add structured address information to your content (pages, posts, events, locations, etc). The addressfield module verifies and stores your address data in a format that can be used to generate the geocode data necessary to build your map.
2. Use the geocoder module to convert the address information into geolocation data (latitude and longitude) for the geofield
3. Add a geofield field to your content to store the geolocation that you wish to display. This field is hidden from display and only used behind the scenes.
4. Use views to generate a map using the geolocation data stored in the geofield

Step 1:

Spin up your free Simplo site, it only takes a couple of minutes. Then enable the following modules:

• Addressfield (this may already be enabled on your simplo.site). 
• Geofield
  • and Geofield Map (submodule of Geofield)
• Geocoder (I am using the current dev branch, but anything after 1.x-1.0.0 should work.)

The (not yet stable) GeoPHP module used to be required, but has since been included in the Geocoder module, which is why you will need the most recent version of the GeoCoder module. 

(REMINDER: If you are not using the Simplo Starter Kit, you can download and install these modules as usual). 

Step 2:

Create a location content type with the following fields.

• Address
  • Field type = Address
  • Widget = Dynamic address form
     
• Geofield
  • Field type = Geofield
  • Widget = Geocode from another field
  • Geocode from field = address
  • Geocoder = Bing (There are other options, but Bing is pretty easy to use, I have been unsuccessful in getting this to work with Google GeoCoder - please comment in that issue if you have a solution).

Screenshot of the field settings for your geofield field:

OPTIONAL: Simplo users can use the Config Batch Import feature at admin/config/development/configuration/batch to upload the "Locations" recipe (be sure to upload the .tar file). This will build your location content type for you automatically, which includes the above fields. 

Step 3:

Unfortunately, to get this to work I have found that I need both a Bing and Google Maps API key.

Geocode: The Bing API key is much easier to set up and manage and works for geocoding your addresses. 

Map: The current version of the Geocode module relies on the Google Maps API and requires that you have a Google Maps API key. To get a Google Maps API key you must set up an account with Google and provide a credit card in case you exceed the amount of requests that they provide for free. Unless you are dealing with a fairly high traffic site I think that you are unlikely to be charged for your requests, however please read the terms of their contract and be sure to monitor your usage on your Google API dashboard.  

Once you have created an API key for Bing (or other alternative) and Google, you will need to enter them here: admin/config/content/geocoder

As you can see, there are other alternative API's available. I have only experimented with Google and Bing. Please, feel free to try the others and report back to us.

Step 4:

Create some sample content to display on the map. In my case, I have the "location" content type and tested it with the following 4 locations (addresses provided for your convenient testing). 

Mill City Museum
704 S 2nd St. 
Minneapolis, Minnesota 55401

Minnesota History Center
345 W Kellogg Blvd
St Paul, Minnesota 55102

Bell Museum 
2088 Larpenteur Ave. W.
St Paul, Minnesota 55113

American Swedish Institute
2600 Park Ave
Minneapolis, Minnesota 55407

Step 5:

Create a view:

• Format: Geofield Map
  • Settings
    • Data Source = field_geofield (machine name for the geofield attached to your location content type)
    • Everything else = defaults will work or you can customize these settings as desired

Here are the final results:

I am told that this problem can also be solved using the leaflet module, which does not yet have stable release. I have yet to try this myself.