Mapping in Drupal 7 sans Location/GMap modules

Events happening in the community are now at Drupal community events on www.drupal.org.
You are viewing a wiki page. You are welcome to join the group and then edit it. Be bold!

This is version 1.0 - 19/07/2012 at 10:45

Modules needed

drush en addressfield geofield geophp geocoder openlayers openlayers_ui openlayers_views

Setup Openlayers

  • Go to admin/structure/openlayers
  • Turn on Preview Map
  • If you'd prefer to host things locally, download the Openlayers 2.11 source to somewhere cosy and point OpenLayers Source to it
    > Note: OpenLayers-2.12 is now stable, available here. This solves the Google Maps copyright popup issue that 2.11 has. I haven't tested it further, but it seems ok so far.

Setup the maps

Go to admin/structure/openlayers/maps (or click the maps tab if you followed on from above).

Clone both the Geofield Widget Map (input) and Geofield Formatter Map (output), and do the following for each:

IMPORTANT: make sure you change the machine names for each map.

  1. Go to the Layers & Styles tab
  2. Change the Base Layer if you'd prefer a different map to MapQuest OSM.
    > Note: All Yahoo maps require an API key. All Google maps, in combination with Openlayers 2.11 source, will have an annoying copyright popup. 2.12 solves this. See http://drupal.org/node/1540534 for more info.
  3. Change the Style and Select Style for the Placeholder for Geofield Formatter Overlay Layer to one of the marker types, otherwise the markers are really, really hard to see.
  4. Go to the Behaviours tab
  5. Uncheck Keyboard Controls - it hijacks the cursor keys, pgup, pgdn, and others even when the map doesn't have focus.
  6. Check Zoom to Layer and select geofield_formatter - this is very useful.
    > Note: To use this option with your clone of the Geofield Widget Map (input), see the Views section below.
    > Note: If you find the map chops off markers at the extremeties (if you have multiple markers), change the second value to 2, which is how much (I think) the map should zoom out once it has loaded to its extent. Only whole numbers work. The first value is how far the map zooms in.
  7. Save the maps

Add fields to content types

Manage fields

  • Add a Postal Address to your content type, using the defaults.
  • Add a Geofield. Set it to the Openlayers Map widget and choose your clone of the Geofield Widget Map (input) for the OpenLayers map option.

Manage display

  • Change the Geofield formatter to OpenLayers. When the grey configure cog appears, click it and change the OpenLayers Preset to your clone of the Geofield Formatter Map (output)

And you're done!

Thankfully you don't really need to create Views for your maps unless you would like to pull in multiple fields of data or enable customised tooltips/popups when you click the map markers.

However, a view is needed if you would like your input map on your node/edit form to zoom in to map markers when loaded. For this, do the following:

  1. Add a new view without a page or block
  2. Add a new OpenLayers Data Overlay display
  3. Add your Geofield field:
    > Disable Create a label
    > Set Formatter to Well Known Text (WKT)
  4. Change the view format to OpenLayers Data Overlay
    > Set Map Data Sources to WKT
    > Set WKT Field to your Geofield field
  5. Add a contextual filter:
    > Select the Content: Nid filter
    >> Select Provide default value
    >> Select Content ID from URL
  6. Check the preview results:
    > Enter the ID of a node with some mapping data
    > Success is when the **'wkt'* key has coordinates

The view will appear in the Overlay Layers section under Layers & Styles at admin/structure/openlayers/maps. It will be called:

view_machine_name: View description - Display name

Then all you have to do is enable it for your input map. Don't activate it though. If you find map markers hanging around after deleting them and you can't do anything with them, but they're not persisting on node save - your openlayers data overlay is activated.

One final note

To delete markers, use the Delete key. (Cmd+Backspace on Mac maybe?)

Comments

This is great

johan.gant's picture

Hi Henry,

I missed your OxDUG session yesterday, but I'm really interested in mapping with D7. Could you tell me whether it's possible to remove the 'Map Data' box that typically appears on OpenLayer maps using the Google API?

Thanks!

Google Map Data box

henryblyth's picture

Hi Johan,

Kind of. There are two options:

  1. Point Openlayers to the dev a stable v2.12+ Openlayers.js library at admin/structure/openlayers
  2. Hide it with CSS. Unfortunately, this will break Google's terms and conditions.

So option 1 is your only choice really, but can introduce other errors.

Openlayers 2.12 might be out now, which could have a good fix for that popup. Openlayers 2.12 is now at a stable release, and the copyright popup does not appear so far.

But, this issue could resurface at any point on a production site even when using a stable Openlayers library, simply because it can't keep up with Google's API changes.

See http://drupal.org/node/1540534 for more info.

Regards,
Henry

Aha! A fix for the copyright popup!

henryblyth's picture

Johan, hi!

OpenLayers-2.12 is now released, and this fixes the copyright popup! You can download it from or point your OpenLayers Source to http://openlayers.org/api/2.12/OpenLayers.js

Best of luck!
Henry

Linking Postal Address to Map

jstriebel's picture

I'm following this tutorial step for step, but coming up short. I just can't seem to get the Postal Address to supply the data point on the map. Any idea what might be going on?

Thanks.

Set up geocoder options in geofield widget edit form

d34dman's picture

If you had enabled geocoder, you would find the adddress field mapping options in geofield widget edit form. ( link to which could be found in manage fields for corresponding content type.)

Oxford

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: