Interactive Maps: Using the Shape Library and Polygons

Have you ever enjoyed looking at shapes and diagrams rather than listed data? Many users engage more deeply with interactive maps than static text because visual/spatial processing activates differently than linear reading. Using shapes such as polylines, polygons and heatmaps can add a huge amount of value to your interactive maps, helping users understand geographic data instantly.

Using the Shape Library for Interactive Maps

When building advanced interactive maps, the Shape Library (released in Version 10) is one of the most powerful tools available. It allows you to search for a location/boundary and automatically import it to your map accurately – quick, easy and simple!

If you have access to it, it is free to use and does not require an additional paid API as it is imports entities via Nominatim.

To use the Shape Library, please do the following:

1. Navigate to your Map Editor (Maps -> Edit)
2. Click on the “Shapes and Overlay” tab.
3. Click on “Shape Library”.
4. Enter your country, region, state, county or city that you want to add to the map.
5. Click “Import” on your preferred option.

Once done, the shape will be imported to your map automatically.

Drawing Custom Polygons for Interactive Maps

Using the shape library is great when you need to add large shapes which have thousands of points in them or when you need to quickly add shapes to your map and can’t plot each point individually. However, when building custom interactive maps, you may need to draw smaller or highly specific shapes manually using the shape drawing tools.

1. Navigate to your Map Editor (Maps -> Edit).
2. ‘Right Click’ on the map and select “Polygon”.
3. ‘Left Click’ on the map to start plotting the outline of your shape.
4. ‘Double Left Click’ or click on the first point to finish your shape.
5. In the editor panel on the left:
   1. Add information about your route such as title, description, link.
   2. Adjust the route colour, thickness and line style.
6. Click “Save Polygon”.

Making your Shapes Stand Out

On complex interactive maps, multiple shapes can become overwhelming without proper styling. Adding some color and line styling can make your shapes stand out and make it easier for your viewer to understand and differentiate between all your different shapes.

To style your shape, do the following:

1. Navigate to Map Editor (Maps -> Edit).
2. Navigate to your Polygons (Shapes and Overlays -> Polygons).
3. Find your polygon and click “Edit”.
4. Scroll down to the styling section below “Link”.
5. Click on the colour palette blocks and choose your preferred colour
   • Don’t forget to the do the same for the “Hover” state tab
6. Adjust the opacity, thickness and line style.
7. Click “Save Polygon”.

Be creative and add different styles to each of your shapes to really make your map stand out and easier to read!

Adding Value to your Shapes

Aside from the styling of each shape, you can also add some real value to each of your shapes by adding some information to each of them. Let your viewer know what each shape represents and what they mean to better understand your map.

To add information to your shape, do the following:

1. Navigate to Map Editor (Maps -> Edit).
2. Navigate to your Polygons (Shapes and Overlays -> Polygons).
3. Find your polygon and click “Edit”.
4. Enter information about the polygon such as:
   • Title / Name
   • Description
   • Link
   • Category
5. Click “Save Polygon”.

Once done, your viewers can then view each of your polygons and read the information you have added to each of them.

Bonus: Want to add labels that appear on your shapes? You can do this by enabling the “Enable Shape Labels” setting in your map editor (Maps -> Edit -> Settings -> Behaviour -> Shapes).

Start creating and add your beautiful map with shapes that stand out to add some value to your user’s experience!

Interactive maps are far more powerful than static visuals. By combining the Shape Library, custom polygons, styling, and informative labels, you can create interactive maps that engage users, improve comprehension, and turn geographic data into meaningful experiences.