Map configuration for Drupal

When you scroll down, you'll see the full Views configuration to reproduce the map of Melbourne coffee prices. The screens below appear in the Views UI after you have enabled the IP Geolocation Views & Maps (IPGV&M) and Leaflet modules and selected Map (Leaflet API, via IPGV&M) as the Views format.

The configuration assumes that a content type Cafe exists. It should have the following fields: title (name of cafe), coffee price (decimal), address (plain textfield or Address Field) and location (lat/lon auto-geocoded from address upon save).

If you wish to use the address as the field that also defines your region-hierarchy (country -> state -> city -> postcode), then you do not need an extra region field and associated taxonomy vocabulary. But if you like the idea of being able to create you own regions (such as wine or tourism regions) with the region selector above the map, then create a vocabulary that holds the region terms (just North, East, South, West in our example). Add this vocabulary as a Term Reference to the Cafe content type. Add a Geofield field to the vocabulary to define an anchor/centre for each region.

In addition, the following modules were enabled:
  • Geocoder (optional), to generate latitude and longitude values for Geofield from Addressfield (optional) or a just a textfield, using a free Google service
  • Leaflet, the lightweight, mobile-optimised javascript library to render a wide variety of maps from a great number of providers
  • Leaflet Label (optional), for alternative stylable tool tips that work over polygon areas too
  • Leaflet MarkerCluster, for basic clustering, enhanced through RegionBound and IPGV&M
  • Leaflet More Maps (optional), to add to your site a portfolio of over 20 maps to select from
  • Tips (optional), not related to the map, this module allows you to create text hovers, via the Smallipop jQuery plugin
A few font-icons were used on the map. These were available automatically via the Bootstrap subtheme used on RegionBound.com. Additional font icon libraries may be added via the IPGV&M global configuration page.

To create the Melbourne CBD polygon, we created a second content type, Area. We re-used the Geofield from the Cafe content type, as Geofield can hold points, polygons and linestrings. We took advantage of the Openlayers widget that comes with Geofield to draw the area border. We found the current version of Leaflet Widget a little glitchy.

For your convenience we've also appended the configuration of the Set my location block that comes with IPGV&M. It is responsible for the drop-downs and Find me button above the map.

View Page display

View Block display

View Page Format settings, part 1

View Page Format settings, part 2

View Page Format settings, part 3

View Page Format settings, part 4

View Page Format settings, part 5

View Page Format settings, part 6

View Page Format settings, part 7

"Set my location" block settings, part 1

"Set my location" block settings, part 2