Whenever we get a project that requires creating some sort of visual map I raise my hand and yell “Pick me, pick me!”. There is something about a map that makes me feel all warm and cozy. Some maps remind us of how big the world is. Some maps are just fun to pan and zoom. Other maps represent our data far better than plain text could do alone.

Regardless of how maps make you feel there are a lot of uses for them and chances are a client of yours has wanted or will want one. Luckily, there are a lot of great resources out there for creating amazing maps with Drupal. A recent manufacturing client of ours wanted to create a map to show their current distributors. The rest of the article will walk through the basics on how that was accomplished.

Modules

• views
• geophp
• geocoder
• geofield
• addressfield
• libraries
• leaflet
• ip_geoloc

Drush it up:

Leaflet library

The first thing you will want to do is install the Leaflet library. Download the latest version of the library here. Extract this into sites/all/libraries/leaflet/dist. Create the libraries, leaflet, and dist directories if they don’t exist. Verify that the leaflet.js file is located @ sites/all/libraries/leaflet/dist/leaflet.js.

Content type

Let’s create a map that displays our favorite restaurants for this example.

Create a content type called Favorite restaurants. For mapping we need to add a couple of special fields.

• Add a new field named Location.
• Select Postal address as the field type.
• Dynamic address form is the only choice for widget.
• The default settings should be fine for this example.
• Add another field called Geofield.
• Select Geofield as the field type.
• Select Geocode from another field as the widget.
• Set storage backend to default.
• Make sure to set this field required or the module will throw an error.
• Set geocode from field as the Location field created in the last step.
• Select Google Geocoder in the geocoder list.
• The rest of the options should be fine as default.

Now we have a content type that will take an address and geocode it into coordinates that can be mapped. Now we need to use leaflet and views to display this. Add a few restaurants in your newly created Favorite restaurants content type before proceeding.

View

Time for the fun part. Create a new view.

• Name it Favorite restaurants map.
• Show content of type Favorite restaurants.
• Check Create a page.
• Display format: Map (Leaflet API, via IPGV&M)
• Remove whatever is in the item to display text field.
• Uncheck Use a pager.
• Click Continue and edit.
• Add the Geofield field you created in your Favorite restaurants content type.
• Formatter: Well Known Text (WKT).
• Data options: Use full geometry.
• Edit the settings for the format: Map (Leaflet API, via IPGV&M).
• Map: Only one option out of the box, download and enable the leafletmoremaps module to have more options here.
• Set your map height if you want it to be a different size.
• Name of the latitude field in views query: Content: Geofield.
• Name of longitude field in views query:
• Map centering options: I prefer this to be set as auto-box to fit all markers.
• Defaults should be good the rest of the way. Feel free to mess with them.
• Save your view.

Navigate to your newly created page which should be located at /favorite-restaurants-map. With any luck you should see the content you created earlier displayed. When you click on the pins you will see whatever fields you have set up in the view. If you want the address to show you just need to add the field in the view.

Conclusion

There are many more options to explore with your new map. The ipgeoloc module is pretty great and has a lot of options to play with. In this tutorial we used it to display our map but it can be used for grabbing the users location and even reverse geocoding! I chose ipgeoloc because to me it is a good balance of options compared openlayers and leaflet_views. Leaflet by itself feels too light and openlayers feels too heavy. Good luck!