Skip to main content

How to add an interactive map block

Published on: 09/02/2023 Document

The map block allows Collection/Solution managers to add in Custom Pages interactive geographical maps. These maps also support info-boxes, which could be set up to appear when users click on location pins placed on the map. The map block can facilitate users’ navigation when seeking country-related information and resources or provide a visual representation of the regional topology for specific content.

Adding a map block in a Custom Page

Note: You must be signed in as a Collection/Solution manager, i.e. owner or facilitator, to add a map block.

Currently, block elements are supported only in Custom Pages. To add a map block either create a new Custom Page or edit an existing one. To create a new Custom Page please refer to our How to create a custom page article.

To edit an existing Custom Page, enter your Collection/Solution and click on the three dots at the top of the left-side navigation menu. From the menu select the option “Edit menu”.

Screenshot of the "Edit menu"

Locate your Custom Page in the list that appears and click on the right-side option “Edit”.

Screenshot of the "Edit" option

Locate the “ADD SIMPLE PARAGRAPH” drop-down field and click on the arrow to display the extra options. Click on the option “ADD MAP” to insert a map block in your Custom Page.

Screenshot of the “ADD MAP” feature location

The map can only be configured with JSON code that should be inserted in the available field. (Note: JSON -- JavaScript Object Notation -- is a lightweight data-interchange format, easy for humans to read and write)

Screenshot of the map block where the JSON code should be inserted

Creating JSON code via the Basic Map Wizard

The Basic Map Wizard is a Commission-based free online tool to help you create your JSON code. Through a step-by-step wizard you can set your map’s details and preferred features, such as geographical region, backgrounds, layers, zoom level, location pins etc. After setting your map’s options, you can click on the button “GET CODE”.

Screenshot of the "Basic Map Wizard"

A window will appear, showing the JSON code that corresponds to your map’s configuration. Click on the button “Copy without script” and then paste the contents of your clipboard in the “JSON” field of your Custom Page’s map block.

Screenshot of the "Copy without script" button location followed by an example of the extracted JSON code

To complete the process, go to the end of your Custom Page and click on the “SAVE” button to have the map appear on your updated Custom Page.

Note: Remember to fill all the required fields (marked with a red star) to be able to save your custom page!

Example of a interactive map in a custom page

Categorisation

Type of document
Document