21 January 2015

A year or so ago, I wrote a book called “Drupal Mobile Web Development: A Beginner’s Guide”. In the book I detail how to make a store locator with Drupal and a few mapping modules.

I just did another one for my current employer Anki and the process was a bit different than the book example for a couple of reasons. First and foremost, we wanted the store locator data to eventually be available to our Android and iOS mobile apps. Second, there are some new front-end modules that will give you more options on the front end now than there were when I wrote the book… most notably “Leaflet”, a javascript library for interacting with map data in browsers. I also wanted to create a solution that was easy enough to upgrade once I decided to take the site to Drupal 8. This is the first in a series of articles detailing how I did what I did and why.

First, let’s discuss the data store we will be using to hold the map data. The data I was given to place points on the map was a series of stores in which our flagship product, Anki Drive is sold. For those points, I was given addresses in the US, Canada and the UK. I need a way to store that address information and more importantly, the Longitude and Latitude of each of those addresses because we can’t map their location without long/lat coordinates.

There are a couple of modules that do this. The Location module series stores all data about a single location in a table separate from standard field data. It doesn’t work with the standard Field API and it doesn’t work with the Entity API, which are two pretty big strikes against it. But it does its job really well. There’s an alternative path using the field API: Geolocation and Address field. This is two unrelated modules that use the field API where Location is designed as an inter-operative suite. I tried the geolocation/address field solution (which is in keeping with best practices for Drupal 8), but there geare currently some outstanding issues with each module. The most significant issue being google Geocoding is broken in the geolocation module (or at least the issue was unresolved when I created the Anki map.

Geocoding is the process of taking an address and turning it into a long/lat pair. More about that process in a bit.

Location is the more mature solution and it works with several geocoding providers. We have a google geocoding API account we use for other purposes so this presented itself as the best solution for the moment.

I created a content object that has a location attached to it as well as a title and description. With the location module, the locations are “attached” to nodes and exists as non-entity data. There’s a secondary module that will auto-load location data when entities are loaded (location_entity).

</a>

Expect parts 2 nd 3 within a week or so.