Openlayers’ flexibility makes it a very useful option. For example, an OSTraining member wanted to use Openlayers because he needed to build a site in China, where Google Maps is blocked.
A note of caution before we begin: in a previous tutorial, we covered Google Maps in Drupal. I mentioned that module was powerful, but also poorly documented and sometimes confusing to use. The same is true of Openlayer. I went on several wild goose chases before I found the right combination of modules, libraries and settings to make this work.
Step #1. Installing Openlayers
Openlayers requires a lot of modules to work successfully:
Also, you’ll need to download the geoPHP library and upload it to sites/all/libraries/geoPHP. The image below shows what your file structure should look like. Be careful to download the latest version of this library. Some tutorials and docmentation point to an older version of the library and I found several people commenting that the older version no longer works.
- Once you have installed and enabled all the modules, go to Structure > Open Layers.
- If you can’t see a map here, then you have more work to do before progressing further. The image below shows what this screen should look like:
Step #2. Adding Openlayers fields to nodes
Now let’s add a field to our content in order to collect locations.
- Find your content type and add a “Geofield” field and choose the “Openlayer Maps” widget:
- Openlayers Map: set this to “Openlayers Geofield Widget map”.
- Storage options: set this to “Store each simple feature as a separate field.
- Enable geocoding of location data: check this box.
- Geocode from field: you don’t have to choose anything.
- Save the “Map field”.
- Go to the Manage Display tab, and make sure the format for the map field is set to “Geofield Map”:
Step #3. Create content with Openlayers maps
- Go to Add Content and you’ll see a Title and map field.
- Use the tools at the bottom of the map to put markers on the map. In this case, I put a black marker on New York City:
- Save your content and you should see map successfully published:
Step #4. Use Views with Openlayers
Now let’s create a view to show multiple locations on one map.
- Go to Structure > Views > Add new view.
- Display format: choose “Geofield Map”.
- Add your Geofield map field to the view:
- Click “Settings” next to “Geofield Map”:
- Data Source: choose your Geofield field:
- Save your settings and save your view.
- Visit the view on the front of your site and you will see an Openlayers map with multiple results: