Friday, May 31, 2013

How to add a driving directions link to a marker popup in a Drupal Map

I was tasked at work today with finding a good, lightweight way to display multiple locations on a map, and somehow provide directions to each location. If it looked really cool, well, bonus! The solution that I came up with was just one of many many possible solutions.  For an excellent overview of Drupal Mapping in general, see https://drupal.org/node/1704948. That article was my starting point.  I had several important constraints, however.  Although it would have certainly been possible to replace the geolocation storage that we were already using, I wanted to first see if I could make it work with what we had.  Our initial setup was the following:

Content Type with the following fields:

Address - Provided by the addressfield module.
Map - Provided by the geofield module, requires latitude and longitude.*

* I am tempted to add the geocode module, as it will populate a geofield field based on an addressfield field, but for simplicity's sake, I left it out for now.

My second constraint was that I wanted it to be as simple as possible for the end user, i.e., they add a location with an address and lat/long and everything else is generated automatically. The solution that I came up with uses the leaflet module (see list for link)

Modules:

Addressfield - https://drupal.org/project/addressfield
Geofield - https://drupal.org/project/geofield (version 7x-1.1)
Leaflet - https://drupal.org/project/leaflet
Leaflet More Maps - https://drupal.org/project/leaflet_more_maps
Get Directions - https://drupal.org/project/getdirections
Views - https://drupal.org/project/views*

* Be sure you enable the views_ui module, or you won't be able to create your map view!

Setup is quite simple.  Download and enable all of the modules.  The only one that requires separate configuration is the getdirections module (admin/config/services/getdirections), and the defaults are fine to start with. That said, it is probably best to go into those settings and select 'Use Googlemaps version 3', as that will remove the need for a google api key. Create a content type, call it whatever you want, we'll go with Zingzang, for the purposes of this tutorial, and add an address field(address) and a geolocation field(map).  Now add several test Zingzang nodes, and be sure you fill in the lat/long, that is important.

Now for the view: create a new view, with content of type: Zingzang, and create a page.  Give it a path of /map, or location, or whatever you like. Set the pager to: Display all items. Format the view as Leaflet Map, with these settings:
Data Source = Content:Map
Title Field = Content:Title
Description Content (This one is important!) = Content:Nid

If you installed Leaflet more maps, you will have about 20 styles to choose from in the Map dropdown, I personally like Stamen Toner, fwiw.  Pick a style, and then click on Apply.

Now for the fields. Add these fields:
Content: Map
   Settings: Don't touch the settings, the view formatter takes care of this.
Content: Title
   Settings: Exclude from display, *and* Rewrite the output of this field as: Get Directions to [title]
Content: Nid
   Settings: Rewrite the output of this field as: [title]  *and* Output this field as a link, Link Path is: getdirections/location/to/[nid]

Save your view.  Now you can navigate to your sweet map!  It should look something like this:


The Get Directions to Another Location link will open another page, that should look something like this:



And that's it!  A (relatively) lightweight, super cool looking way to display locations on a map with a directions popup.

As always, please feel free to leave a comment if you have any questions.  I can't promise that I'll be able to answer them, but it's worth a shot... ;)

2 comments:

  1. Mine followed all the steps what ever you written but finally in leaflet map settings Im getting

    Page: Style options
    For
    Please add at least one geofield to the view
    nothing else....

    with geo location im doing pls help me......

    ReplyDelete