Drawing Lines and Shapes on Maps: Step-by-Step Guide

Mapme provides versatile tools to enhance your interactive maps with shapes and lines. You can draw or import the following elements:

• Lines (e.g., straight line, curves)
• Shapes (e.g., squares, rectangles, circles)

These are added as layers, allowing you to fully control their visibility and interactivity.

Key Features

• Drawing Visibility: Set rules to control when drawings are visible. For instance, they can always be displayed or appear only when viewing a specific location.
• Drawing Interactivity: Customize actions when a user clicks, taps, or hovers over a drawing. Options include opening location details, redirecting to an external URL, and more.
• Drawing Name Display: Show the drawing name in a popup label either on mouseover or have it always visible.
• 3D Shapes: Convert 2D drawings into 3D objects for an immersive map experience, such as building outlines.

Examples of Maps with Drawings

• Shapes: Highlight specific areas such as borders
• Lines: Mark routes or paths.
• 3D Shapes: Extrude buildings or structures into 3D

Use this guide to learn how to:

• Add new drawings to your map
• Manage your drawings
• Customize your drawing style
• Control drawing visibility
• Set drawing interactivity
• Work with 3D shapes
• Add connecting lines between markers

1. Add New Drawings to Your Map

Mapme provides multiple ways to add drawings to your maps:

1. Built-in drawing tools – manually create lines and shapes
2. Geo Library  – add predefined regions (countries, states, counties…). Learn more.
3. GPX and KML import – import data not available in the Geo Library. Learn more.

Manual Drawing

To manually add drawings:

1. Select Drawings in the left menu
2. Click on Create Drawing Layer and give it a name.
3. Click on the Map Preview
4. Select the relevant drawing tool (line, polygon, or circle)
5. Start drawing by clicking on the map, and double-click to complete the shape.

With the line tool, you can draw straight or curved lines.

You can add multiple drawings (such as a circle and a line) within the same layer. All shapes within a layer share the same color, visibility, and interactivity settings.

Duplicate drawings

To duplicate drawings within a drawing layer, select one or more drawings and click Duplicate. Hold Shift while selecting to choose multiple drawings.

2. Manage your Drawing Layers

All drawing layers are listed in the Drawing Tab. For each layer, you can:

• Delete: Remove the drawing layer.
• Duplicate: Create a copy of the drawing layer.
• View: Preview the drawing.
• Sort: Adjust the display order.

Display Order

The order of drawing layers determines which shapes appear on top. Layers higher in the list appear above those below.

3. Customize Your Drawing Style

Color and Opacity

You can modify the color and opacity of your drawings using the color selector. Each layer can only have one color. If you need different colors, create separate layers.

When managing many drawing layers or frequently updating them, we recommend using  “Auto-Match Drawing Color to Marker”

Advanced Styling

Further customize your drawings by:

• Adjusting line thickness
• Adding borders to shapes
• Using line style pattern, and shape fill pattern
• Highlight active drawings

Learn more about Customizing Map Drawing Styles.

4. Drawing Visibility

You can control drawing visibility based on user interactions or zoom levels.

Visibility Rules

You can set conditions for when drawings are visible on your map:

• Always: The default setting; the drawing is always visible.
• Map Home Only: The drawing is visible only when viewing the map home.
• Location Selected: The drawing is visible when specific locations are selected.
• Category Selected: The drawing is visible when one or more categories are selected.
• Any Location in Category Selected: The drawing is visible when any location in the category is selected.

You can combine these conditions to create more complex visibility rules.

If your map contains many drawings, managing them individually can be time-consuming and prone to error. Check the Advanced Drawings Settings to automate drawing behavior to save time, and ensure consistency.

Zoom Level Visibility

Use zoom-level visibility to display drawings dynamically. For example, show an entire building at a high zoom level and switch to floor plans at closer zoom levels.

To set zoom visibility:

1. Click Zoom Range for the drawing.
2. Use the slider to set the minimum and maximum zoom levels.

Zoom levels range from:

• 0 (world view) to
• 22 (most detailed view)

5. Drawing Interactivity

You can control what happens when users click, tap, or hover on drawings. Configure these settings in the Manage Interactivity section.

Click/Tap Actions

You can select one of the following actions when a user interacts with a drawing:

1. Open a Map View (default)
2. Open an External Link
3. Do Nothing

Open a Map View

Options include:

• Opening the map home
• Showing specific location details
• Displaying a list of locations from a specific category

Open an External Link

Provide the URL to open when the drawing is clicked. Choose how the link opens:

• In a new tab
• In the same tab
• In a modal

Drawing Name Display

By default, drawing names are hidden. However, you can choose to display them in a popup label in the following ways:

• On hover: The label appears when you hover over the drawing.
• Always: The label remains visible at all times.

For touch devices, pressing and holding simulate the hover effect.

You can also customize the popup label’s position and style using custom CSS.

Explore this interactive map example. Hover over any state to see the popup label in action.

Highlight Drawings when Selected

When a user clicks on a drawing, Mapme automatically centers the map on the selected view. However, when multiple drawing layers are present, it can sometimes be difficult to identify which drawing has been selected.

To make it easier for users to identify their selection, you can enable the Highlight Drawing When Selected feature. This adds a customizable outline around the selected shape, making it stand out clearly on the map. You can adjust the outline’s color, width, dash pattern, and gap size to fit your style. Learn more.

6. 3D Shapes

Convert 2D drawings into 3D objects with extrusion. This adds depth and volume to your map, allowing you to represent buildings or other structures in 3D.

For each drawing, set:

• Height: The height of the 3D shape.
• Base Height: The elevation above ground (default is zero).

 Check out the guide: How to Create 3D Shapes on Your Map?

7. Connecting Lines Between Markers

Mapme allows automatic generation of connecting lines between markers. Learn more.

Useful resources

Here are some blog posts that you might find useful for adding drawings to your maps:

• How to color USA states on your map?
• How to create routes from Google My Maps