Custom map with OpenLayers for Drupal CMS

This article shows how to make a tile overlay for maps displayed on the Drupal 7 website. To make the process work, you need to set up a Drupal 7 site and load several modules.

If you don’t know the Drupal CMS, take a look at the website to get started: Drupal. The basic principles are listed at Drupal - start and there are tutorials online and on YouTube as well. Drupal is free to use and good for powerful websites without necessarily needing any programming (though you can if you can).

Prerequisites

The modules you’ll need are:

For OpenLayers, you’ll also need the geoPHP library. Download from GitHub geoPHP, unpack the archive file, rename the unpacked folder to ‘geophp’ and place it in the sites/all/libraries folder of your Drupal installation - you may have to create the ‘libraries’ folder if it’s not there.

Prepare your map with MapTiler Engine

You will, of course, need a map image of some sort, but again, if you’re reading this then I’ll take it you’ll have that part of the work sorted out already. In my case, I’ve used an A0 scanner to scan paper maps, which I’ve straightened and sharpened a bit in Photoshop before removing the borders and saving them as web-ready (but still 300dpi) png files.

To get a quick idea here is a short how-to Georeference and save your map follow this tutorial:

Don’t forget to save your tiles into a Folder. Use one word for its name, no spaces or special characters.

Also included is a JSON file used by certain mapping applications, and four HTML files showing what your overlay looks like in four different mapping engines. If you were making a website in simple HTML you could just copy the code from one of these files into a page, add the tile folder in the same directory as your page and it would all work.

Hosting your map

The next step is to upload the tileset to a server to provide a web address. I’m still testing with a Drupal installation on Dropbox, and putting the tileset there works fine as well. On a web server, you can create a directory for your tilesets, much like the ‘images’ directory where you store your website’s pictures. All that matters is that you can supply a URL path to the directory that houses your tilesets to use in OpenLayers in Drupal.

The reason for this is the brilliantly simple way I found accessing tilesets after spending a couple of days trying to make the others work. I’m no cartographer or programmer, and I couldn’t figure out where to find the data (in the right format) required by various other overlay types. Since Klokan is an expert in this field, I sent them an email to see if they could help. I was honored to receive a reply from company founder Petr Pridal himself, who suggested using an XYZ address as a possibility, together with a code sample. My next piece of luck was misclicking on a link in OpenLayers to discover that the tiles for the OSM Mapnik base map are handled by an XYZ overlay type as well. Which then turned out to be simplicity itself. Here’s how an XYZ address works:

To test in Dropbox it works much the same, except the first part. I have everything sit- ting in my “local” folder (same level as “private“, “public” etc), which is addressed by “dropbox.local” before the rest of the folder path (see screen dump on the previous page).

http://dropbox.local/maptest_tiles/chateauneuf_tiles/${z}/${x}/${y}.png (this is why there shouldn’t be any spaces in the folder names.)

OpenLayers in Drupal 7

And now we’ll make the overlay with our tiles and put it on an OpenLayers map to display in a view. For testing purposes, I’ve used an out-of-the-box Drupal 7 setup with just the modules I’ve listed before (I’ll turn it into something nice when I know it’ll all work!).

In your ‘Administration’ menu, you’ll find ‘Open- Layers’ under ‘Structure’.

Click the ‘Layers tab’ and then ‘+ Add’.

Give your layer a title and maybe a description.

Under ‘LayerType’, select ‘XYZ’ from the drop-down.

You’ll see there’s also a ‘MapTiler’ type in this list, but I read that the OpenLayers module developers will remove the ‘MapTiler’ type and have already included it with the ‘WMS’ type (apparently they’re similar). MapTiler tilesets work with WMS and WMTS but these are pretty complicated to set up (just take a look!). XYZ is far simpler.

After selecting ‘XYZ’, more options appear. The important one is the ‘base URL’.This is where we tell OpenLayers where to find the tileset. Everything else we can leave for now, just scroll down and click ‘save’. And that’s all it takes to make the overlay. You’ll find it included in the list of overlays after saving.

Next: setting up the map.

Go back to ‘Administration > Structure > OpenLayers’, click the ‘Maps’ tab and ‘+ Add’. Under ‘Infos’, provide a title and maybe a description for your map. Leave ‘Width’ set to ‘auto’, adjust ‘Height’ to 500px (f ex) to have a bit more display space.

Under ‘Center & Bounds’, you’ll see a map

Zoom and pan to show the area your overlay will fit over. You’ll have to use the controls on the map to do this, dragging with a mouse doesn’t seem to work.

Hold down your shift key, and drag a rectangle over the map that’s a bit larger than where your overlay map will be.

The first action specifies the map area to be shown on the page (you’ll see the coordinates and zoom level indicated on the page below the map). Doing this means your visitors will see your overlay straightaway instead of having to find it by zooming in themselves from the worldview. The orange area is the area beyond which you can prevent viewers to scroll the map away if that’s what you want. Lower down the settings on this page there’s a ‘Restrict Extent’ checkbox (already checked) that does this. Up to you.

Next, under ‘Layers & Styles’, your Map Projection should already be set to EPSG:3857

Further down, the Display Projection should already be set to EPSG:4326

Further down again, enable the ‘OSM Mapnik’ base map and make it the default map. (You can always enable more of the others later to try them out on your page view.)

And finally, further down again, enable and activate your overview layer. In fact, you can enable more than one layer (just like you could enable more than one base map in the previous step). If you also check ‘in switcher’, you will allow your visitors to choose which overview they want to see. The choice of base maps you enable is always in the switcher.

(The ‘weight’ setting controls the layer order - the higher the number, the lower down a layer will be in the stack.) And that’s the basic map set up. There are more options you could try out, though quite a few of those will only work for vector layers. For now, be sure to scroll down and save!

Next, the final part: setting up a view page to display the map. Go to ‘Administration > Structure > Views’ and click on ‘+ Add new view’

Give your new view a title (this will be shown on the page). ‘Create a page’ is already checked. Under ‘Display format’ choose ‘Open- Layers Map’ from the drop-down menu. Uncheck ‘Use a pager’. Click ‘Continue & edit’ at the bottom of this page.

On the next screen, you only need to do two things:

Under ‘Format’, click ‘Settings’. In the pop-up, select your map from the dropdown menu and click ‘Apply (all displays)’.

Under ‘Page settings’, click ‘No menu’. In the pop-up, select ‘Normal menu entry’, type in a title, select ‘main menu’ from the drop-down and click ‘Apply’. After that, click ‘Save’ at the top right. And then ‘View Page’ a bit lower at right.

And there you should have your map with your overlay sitting on a page! The little black control at the top right is the switcher mentioned before.

If at this point you don’t see your overlay, try zooming in more to where it’s supposed to be, and/or clear Drupal’s caches under Administration > Development > Performance.

That’s the principle of the thing, so now we can start fiddling with the settings to experiment and fine-tune. Everything we’ve seen in Drupal is editable. Have fun!

This how-to was made by Paul Vreede as a small contribution and thank you in return for all the help and information he’s benefited from to get this far. Hope you like it and find it useful. Feel free to distribute. All trademarks are the property of their respective owners, used for illustrative purposes only.

Drupal CMS website
Georeferencing with MapTiler Engine
Folder vs. MBTiles vs. GeoPackage