How to

MapTiler and OpenLayers in Drupal CMS

Map and OpenLayers for Drupal CMS

This is a quick how-to for making a tile overlay for maps displayed in a Drupal 7 website. You will need to set up a Drupal 7 site and load a number of modules.

If you dont know the Drupal CMS, take a look at their website to get started: www.drupal.org The basic principles are listed at www.drupal.org/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).

The modules you’ll need are:

  • Views -> enable Views and Views UI www.drupal.org/project/views

  • Chaos Tools -> enable ChaosTools www.drupal.org/project/ctools

  • Libraries -> enable Libraries (under ‘Other’) www.drupal.org/project/libraries

  • Proj4JS -> enable Proj4JS (under ‘Other’) www.drupal.org/project/proj4js

  • geoPHP -> enable geoPHP (under ‘Other’) www.drupal.org/project/geophp

  • OpenLayers -> enable OpenLayers, OpenLayers UI - and OpenLayers Views www.drupal.org/project/openlayers

For OpenLayers you’ll also need the geoPHP library. Download from https://github.com/phayes/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. (At time of writing the OpenLayers v3 module is still under development, so we’re using v2 which works fine for tile overlays.)

1. Prepare your map with MapTiler

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, how to [Georeference] (/how-to/georeferencing/) and save your map follow this tutorial:

Don’t forget to save your tiles into 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 ma- king 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.

2. Hosting

The next step is to upload the tileset to a server to provide a web address. I’m still tes- ting with a Drupal installation on Dropbox, and putting the tileset there works fine as well. On a webserver you can create a directory for your tilesets, much like the ‘images’ di- rectory 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 of accessing tilesets, after spen- ding a couple of days trying to make the others work. I’m no cartographer or program- mer, and I couldn’t figure out where to find the data (in the right format) required by various other overlay types. Since Klokan are experts in this field, I sent them an email to see if they could help. I was honoured 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:

drupal

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 screendump on 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.)

3. OpenLayers in Drupal 7

And now we’ll make the overlay with our tiles and put it on an OpenLayers map to dis- play 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’.

drupal

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

drupal

Give your layer a title and maybe a description.

Under ‘LayerType’, select ‘XYZ’ from the dropdown.

You’ll see there’s also a ‘MapTiler’ type in this list, but I read that the OpenLayers module developers will re- move 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.

drupal

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.

drupal

Next: setting up the map.

drupal

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.

drupal

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

drupal

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.

drupal

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

drupal

The first action specifies the map area to be shown on the page (you’ll see the coordi- nates and zoom level indicated on the page below the map). Doing this means your visi- tors will see your overlay straightaway instead of having to find it by zooming in them- selves from the world view.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

drupal

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

drupal

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.)

drupal

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!

drupal

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

drupal

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

drupal

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

drupal

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

drupal

drupal

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

drupal

And there you should have your map with your overlay sitting on a page! The little black control at 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‘.)

drupal

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.