You are here

How to create a map in Drupal: Openlayers simple map setup

Modules needed

Install the following modules on your Drupal 7 site

  • Views
  • Openlayers
  • Geofield
    1. This is just one way you can get the latitude and longitude information for your locations.  There are many other ways, such as just having lat/long textfields directly (if you know or can get the lat/long of your locations easily).  In this tutorial, however, I'll show you how to use Geofield to get that information for your locations
    2. As of May 31, 2013, I have to get the dev version because they’re still fixing the projection issue that made this incompatible with Openlayers

Create the content type we will map

  • Create a new content type called 'Places visited'
  • Save and add the following field, which will be in addition to the 'Body' field that exists by default
    • Geofield field called 'Location'
      • For the 'Widget' type choose 'Openlayers Map'
      • In the field settings, for 'Available Features',  choose 'Point'
    • Feel free to add any other relevant fields to your new content type.

Create content

Go ahead and create several new 'Places visited' content types.  All the fields should be familiar to you, except for the new 'Location' field.  To set the location, just use the controls that come with the map to focus in on the exact location you want for that content type and then use the marker icon to place the dot right on target!

 

Creating a map to display all the locations

Create a view that pulls all the correct content types and relevant fields together

Set up the view

  • Name: Visited places map
  • Content of type: Visited places
  • Display format: Unformatted list
  • Items to display: Remove number, we want it to display all
  • Use a pager: Uncheck, since that doesn’t make as much sense with a map

Other than the default Page display, also add an 'OpenLayers Data Overlay'

  • Click on the ‘+ Add’ tab and add an ‘OpenLayers Data Overlay’
  • Add the fields: Title, Body, Location
  • For the location field settings: format using WKT
  • For the Format (OpenLayers Data Overlay) settings: tell it which fields stand for what
    • Map Data Sources: WKT
    • WKT Field: Content: Location
    • Title Field: Content: Title
    • Description Content: Content: Body
    • If your fields are called something different than mine, adjust accordingly!

Create a map to display the view

  1. Basic settings
    • Structure ⇒ OpenLayers ⇒ Maps ⇒ Add
    • Map Title: Places visited
    • Width: auto
    • Height: 600px
  2. Center & Bounds tab
    • Drag and zoom into the location you want to display in your map
  3. Layers & Styles tab
    • In the ‘Overlay Layers’ section, Enable the overlay we’ve just created.
  4. Behaviors
    1. In the ‘Pop up for Features’, check the 'Pop up for Features' checkbox
  5. Click 'Save' or 'Save and edit' at the bottom

 

Last step: Setting up the display

Now that the map and the view have been created, go back to your view one last time.  Click on the 'Page' display.  That display is the one that has a URL associated with it, so it's the display we'll use to show the map.

  • Set up the Format to be 'OpenLayers Map'
  • In the settings for that format, choose the Map name that corresponds to the map we just created
  • You're done!

 

Save your view, go to the specified view URL and check out your brand new map:

Share

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.