Maps in Popups

It is now possible to include an OS map in a popup window. This has been tested with three different popup builders with differing results. The problem with all popup windows is that the map needs to be redrawn when the popup opens.

Popup Anything

Popup Anything has the most complete support in OS Datahub Maps and is the current recommended choice. It requires you to insert a shortcode on the page to create a button or link. This is less convenient than some of the others, but it does mean that your page contains only the maps you specifically insert.

To make the map work in this popup, you need to add popup=paoc to the OS map shortcode, which tells it to listen for a specific popup event to trigger the redraw.

If you have many maps on the same page then every map will attempt to redraw when any popup is opened. To work around this you can make the redraw more specific by appending the popup ID to the popup specifier. If your insert shortcode is [popup_anything id=123] then you can link the map redraw to that specific popup opening by adding popup=paoc-123 in the OS map shortcode.

Popup Maker

Popup Maker is supported in OS Datahub maps. This one works by looking for a CSS selector on elements within the page, so by adding a CSS selector to any button, image, text, etc. you can convert that item into something which will open a popup. The downside of this approach is that every popup definition has to be loaded on every page of your website. If you have one map that may be no hardship, but if you have hundreds then it will add a lot of bloat. It may also add to your tile consumption because even a popup which is not open will consume two or three tiles, and that happens for every single page open regardless of whether a map is displayed.

To ensure that Popup Maker maps are properly redrawn you need to add popup=pum to the OS maps shortcode.

Popup Builder

Popup Builder does not have any specific support in OS Datahub maps, but it appears to work for simple maps specified by a single location. It does not work for auto-fit maps based on GPX files.

It uses the same CSS selector method as Popup Maker, so suffers the same disadvantages.