Sam Tuke Open Source Entrepreneur

Open Layers are great, Drupal are great, and the OpenLayers and associated Drupal modules that combine the two are especially great. Unless, like most modern security-conscious websites, you’re using encrypted connections to your server with SSL. In that case, maps are unfortunately invisible wherever they’re used, both on public pages, and in administrative and content editing pages.

This is because web browsers try to protect users by ensyring that if a page is accessed securely over HTTPS, all parts of that page are also loaded securely, including scripts and images. By default, your maps on Drupal are loaded remotely via unsecure connections. So while we trust the maps will be safe and correct, we cannot (and should not) convince our web browser to do the same.

Here’s the solution.

Change the URL used for retrieving Open Streetmap tiles

Paste this on the end of your Drupal website URL:
/admin/structure/openlayers/layers/list/osm_mapnik/edit
e.g. http://documentfreedom.org/admin/structure/openlayers/layers/list/osm_mapnik/edit

Scroll to the ‘Base URL (template)’ textfield, which should state “https://tile.openstreetmap.org/${z}/${x}/${y}.png”, and swap “http” for “https” in the URL.

Change the URL used for retrieving the OpenLayers JavaScript library

Unlike the tiles URL that you just changed, the JavaScript library URL is only available via HTTP, not HTTPS, so we can’t just add that all important ‘s’ and expect it to work. Instead, you’ll need to download the Javascript library in question to a secure server, and then link to it. Either that or find somewhere it’s already hosted securely (if you do, please let me know).

I recommend putting it on your own webserver and linking to it there. You can do that like this:
cd /path/to/your/webserver/root/
wget http://openlayers.org/api/2.12/OpenLayers.js
mv OpenLayers.js sites/files/OpenLayers-2.12-manual-download.js

Next change the URL used by Drupal to retrieve the JS library; paste this on the end of your Drupal website URL:
/admin/structure/openlayers
Scroll to the ‘OpenLayers external source’ field, and replace ‘http://openlayers.org/api/2.12/OpenLayers.js’ with https://YOUR-WEBSITE.com/sites/files/OpenLayers-2.12-manual-download.js. e.g. https://documentfreedom.org/sites/files/OpenLayers-2.12-manual-download.js. Don’t forget the ‘s’ in HTTPS!

That’s it. Try viewing your maps, hopefully they’ll now appear!