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 lines and curves)
• Shapes (e.g., squares, rectangles, and circles)

Drawings are managed as Overlay Layers and can be found under Layers > Overlay in the map editor. This allows you to organize, reorder, show, hide, and manage drawings alongside other overlays on your map. To learn more about how layers work in Mapme, see our Understanding Layers guide.

Because drawings are added as layers, you have full control over their visibility, display order, and interactivity.

Key Features

• Drawing Visibility: Set rules to control when drawings are visible. For example, they can always be displayed or appear only when viewing a specific location.
• Drawing Interactivity: Customize what happens 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 on hover or keep it always visible.
• 3D Shapes: Convert 2D drawings into immersive 3D objects, 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. In the left menu, go to Layers > Overlay.
2. Click Add Overlay and select Drawings from the dropdown menu.
3. Enter a name for the drawings layer.
4. Click anywhere on the Map Preview to begin editing.
5. Select the desired drawing tool (Line, Polygon, or Circle).
6. Draw directly on the map by clicking to add points. Double-click to finish a line or polygon.

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

Tip: A single drawings layer can contain multiple lines, polygons, and circles, making it easy to organize related map elements together.

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 Drawings tab. Click on a layer name to open it for editing.For each layer, you can:

• Zoom to layer: Center and fit the map to the selected layer
• Duplicate: Create a copy of the layer
• Show/Hide: Toggle the visibility of the layer without deleting it
• Delete: Permanently remove the layer

Hidden layers appear greyed out in the list.

Display Order

You can reorder layers in the list to control how they appear on the map. Layers at the top of the list are displayed above those below.

Expand Layer Settings

Click the chevron next to a layer name to expand its settings. This allows you to control visibility and interactivity options for that layer.

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 when drawings are displayed based on user interactions or the current zoom level.

Visibility Rules

Visibility rules determine when a drawing layer appears on the map. A drawing layer can be displayed:

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

You can combine multiple visibility rules to create dynamic map experiences.

If your map contains many drawings, managing them individually can be time-consuming. See the Advanced Drawing Settings guide to automate drawing behavior, save time, and ensure consistency across your map.

Zoom-Level Visibility

Use Zoom-Level Visibility to display drawing layers only within a specific zoom range.

For example, you can display a site boundary when users are zoomed out, then automatically switch to detailed floorplans or room layouts as they zoom in. This helps present the right level of detail at every zoom level.

>

5. Drawing Interactivity

You can control how users interact with drawings by configuring the Manage Interactivity settings.

Click and Tap Actions

Choose what happens when users click or tap a drawing.

Available actions include:

1. Open Map Home
2. Open a Location to display its details
3. Open a Category to display its locations
4. Open an External Link
5. Do Nothing

When opening an external link, you can choose whether it opens:

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

Drawing Name Display

By default, layer names are hidden. You can display the drawing layer name as a label in one of the following ways:

• On Hover: Display the label when users hover over any building in the layer.
• Always: Keep the label visible at all times.
• Zoom-Level Visibility: Display the label only within a specific zoom range.

On touch devices, press and hold a building to display the label.

Label Location

Use the Position Label Location button to choose where the label appears. Drag the map to position the label in the ideal location for the selected drawings.

Label Color

By default, the label background uses the same color as the drawing layer. The text color is automatically set to either black or white to maximize readability.

When labels are configured to Always Show or displayed within a specific Zoom-Level Visibility range, all labels use a white background with black text. This provides a consistent appearance when multiple labels are visible at the same time.

You can also fully customize the label’s appearance using custom CSS, including the font, text size, background color, and text color.

Explore this interactive example to see drawing labels in action.

Highlight Drawings on Hover and Selection

To make interactive drawings easier to identify, you can highlight their outlines when users hover over or select them.

You can customize the highlight outline:

• Color
• Width
• Dash pattern
• Gap size

Learn more about customizing drawing styles.

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