2. Painting & Customization

Now that you have your map loaded, it's time to bring it to life! This section covers the core painting and customization features that make PaintMyMap so powerful—and matches exactly what you see in the editor.

How Painting Works

Painting in PaintMyMap works by assigning map features (countries, regions, etc.) to legend groups. Each group has its own color, optional pattern, and label.

Paint, erase and change brush size

Basic Painting

1. Select a Legend Group: Click a group in the legend (its color becomes the active paint color)
2. Choose Your Brush: Pick Single or a circle size (S/M/L/XL)
3. Paint: Click or drag on map features to assign them to the selected group
4. Eraser: Switch to the eraser to remove paint from features

Shortcuts: B (Brush), E (Eraser), ⌘/Ctrl+Z (Undo), ⇧+⌘/Ctrl+Z (Redo)

Legend Management

The legend is the heart of your map's visual organization. Each color on the map that you want to paint with, needs to be assign to a group (legend item).

Select Legend items, reorder, hide/show, add Legend title, resize and move Legend

Creating Legend Groups

• Add Groups: Click + Add item to create a new group.
• Group Colors & Patterns: Click the color swatch to open the color/pattern menu
• Group Labels: Type directly in each group’s label field
• Show/Hide in Legend: Toggle visibility for any group
• Reorder: Drag using the handle or use up/down buttons
• Delete: Remove a group (this won’t delete painted areas; they revert to unpainted)
• Legend Title: Toggle “Show Legend Title” in Options, then edit the title text

Legend Positioning

• Drag to Move: Drag the legend anywhere on the map (easiest in Preview mode)
• Resize: Use the corner handle to scale the legend block
• Background: Set legend background color and transparency in Options

Choropleth Maps - Generate Color Gradient

With Choropleth generator you can create a perfect color gradient in just one click! Choose starting and ending color, number of steps and you are done!

Generate Color Gradient with Choropleth Generator

Brush Tool

To select the brush, click on the brush tool. To change the size, use the dropdown next to it. To change the color, create or select a new group from the legend.

Brush Types

• Single: Paint one feature per click (precise control)
• Circle: Paint all features under the brush radius
  • S/M/L/XL sizes for faster fills

Brush Controls

• Active Group: The currently selected legend group
• Brush Size: Pick S/M/L/XL; a preview circle shows the exact radius
• Color Preview: Shows the active group color/pattern
• Eraser: Removes paint from features (E)

Tip: Use Undo/Redo freely while experimenting with sizes.

Brush Colors

You can paint with a single color or select a pattern from two or three colors.

Select solid color for brush or one of two or tri-color patterns

Shapes Tool

Use the Shapes tool to annotate, highlight, or layer additional meaning on top of your painted regions.

Draw shapes, change color, add text, rotate and edit

Available Shape Types

Shape	Purpose
Line	Simple pointer / underline; click‑drag to draw.
Arrow	Directional callout (auto arrow head).
Rectangle	Standard box highlight.
Rounded Rectangle	Softer highlight / label container (rounded corners).
Circle	Emphasis ring or marker.
Comment	Rounded speech‑bubble style annotation (oval body + tail).
Comment Box	Rectangular speech bubble (boxy variant) with movable tail.
Callout	Box + arrow tail (arrow tail is a triangle/arrow pointing to target).

Drawing Shapes

1. Select the Shapes tool (shortcut: S).
2. Pick a shape type from the mini palette.
3. Click and drag on the map to draw.
4. Hold Shift while dragging to constrain: perfect circle, square, or 45° increments for lines/arrows.
5. Hold Option/Alt to draw outward from the initial click (center‑out for circles/rects).

Shape Styling & Options

• Stroke Width & Color: Adjust outline thickness and color.
• Scale with Zoom: Toggle whether stroke/text scales as you zoom (enable for relative sizing, disable for constant visual weight).
• Fill: Enable fill; pick solid color or pattern; adjust transparency via slider.
• Patterns: Same pattern library as legend groups (lines, dots, stripes, tri‑color patterns).
• Text: Enable text overlay; set font family, size, color, and optional shadow + shadow color.
• Drop Shadow: (Per shape) Enable a shadow, tweak blur, opacity, offsets, and color for depth/contrast.

Editing Shapes

• Use the Select tool (V) to pick a shape.
• Drag to move; handles appear for resize (corners) and rotate (rotation control / R key while selected).
• Double‑click shape text to edit.
• Press Delete / Backspace (or the Delete icon) to remove.
• Comment / Comment Box / Callout Tail: Drag the circular tail handle to reposition the pointer independently of the bubble/box body.

SVG Tool (Import / Place)

The SVG tool opens the SVG Library dialog for importing reusable vector graphics.

Load and place SVGs, change color, size, rotate and edit

Workflow

1. Click SVG (Import / Place) to open the dialog.
2. Paste raw SVG markup or choose one or more .svg files. You can also explore some of the built-in SVGs under the Theme dropdown.
3. Press Add to List to cache a parsed version under “Your SVGs” (persisted in local storage until cleared).
4. Select an entry and press Place, then click‑drag on the map to position & scale in one gesture.
5. Use Select (V) afterwards to refine: move, rotate, resize, delete.

Behavior & Notes

• Dialog toggles: clicking the SVG tool again while open closes it & returns to Select.
• Sanitization: scripts, event handlers, and foreignObject nodes are stripped for safety.
• Aspect ratio preserved automatically during placement.
• Library Persistence: Clear all with the “Clear All” button; individual items can be removed.
• Performance: Extremely complex SVGs (thousands of paths) may impact interactivity & export time.

Use Cases

Logos, badges, pictograms (population, climate icons), inset markers, compass roses, decorative frames.

Select Tool

The Select tool (V) lets you manipulate drawn shapes and placed SVGs.

Selecting & Multi‑Select

• Click a shape/SVG to select; drag to move.

Transformation Handles

• Corner handles: resize (hold Shift to constrain square/circle where relevant).
• Rotation handle or press R while selected to rotate.
• Comment/Comment Box tail handle: reposition the speech bubble tail anchor.

Text Editing

• Double‑click shape text (Comment/Comment Box/any text‑enabled shape) to edit inline.
• Use the style controls (font, size, color, shadow) for refinements.

Deleting

• Backspace / Delete or Delete icon in UI removes selected shape(s).

Advanced Customization

Take your maps to the next level with these features. Open Options to access:

Legend settings

• Legend: Show/Hide legend on the map
• Legend Background: set legend background color and transparency setting
• Set Legend title: set legend title or hide it completely

Map

• Only Painted Areas: Hide unpainted areas for clean exports
• Show graticule lines
• show geographic lines
• Show timezone lines with or without labels

Labels & Title

• Map Title: Toggle the title, edit text, drag to position, and resize via the corner handle
• Country labels: Show country labels, choose abbreviations, change font, color, and optional shadow. Select to show only on painted countries or swap country name with the value from legend group

Visual Enhancements

• Map Background Color: Set the canvas background

• Border Color: Set the country borders color

• Map Theme: Need inspiration? Choose a map theme from built-in color palettes

• Graticule Lines: Show latitude/longitude grid

• Geographic Lines: Show equator, tropics, polar circles, prime meridian

• Timezones: Optional timezone polygons and labels (for supported maps)

Color Strategies

• Categorical: Use distinct colors for different categories
• Sequential: Use color gradients for data ranges
• Diverging: Use color schemes that highlight extremes

Pattern Painting

Add subtle texture with built‑in SVG patterns:

• Lines/Stripes: Horizontal, vertical, diagonal; tri‑line variants
• Dots/Crosshatch: Dots grid and crosshatch styles
• Tri‑Stripes: Combine primary/secondary/tertiary colors

How: Click a group’s color swatch, enable Pattern, and pick a type. Customize primary, secondary, and (when available) tertiary colors. Uploading custom pattern images isn’t supported at this time.

Undo & Redo

Never lose your work with comprehensive history controls:

History Controls

• Undo/Redo: Step through changes (⌘/Ctrl+Z, ⇧+⌘/Ctrl+Z)
• Clear All: Remove all painting (with confirmation)

Copy & Paste

Speed up your work with Copy/Paste feature that works with SVGs and shapes (⌘/Ctrl+C, ⌘/Ctrl+V)

Auto-save

Your work is saved to your browser’s local storage and you’ll be prompted to restore it when you come back.

Interactive Features

Zoom & Pan

• Mouse Wheel: Zoom in/out at cursor position
• Zoom Buttons: Precise zoom control (+/−)
• Pan: Drag to move the map view

Rotation & Orientation

• Globe Roll: Spin the globe (drag the roll control)
• 2D Rotation: Rotate a flat map (drag the rotate control)
• Flip: Horizontal and vertical mirror effects

Shapes & Annotations

Use the Shapes tool to add visual callouts:

• Types: Line, Arrow, Rectangle, Rounded Rectangle, Circle, Comment, Comment Box, Callout
• Style: Set stroke width/color and fill color/transparency
• Text: Add text to shapes (font, size, color, optional shadow)
• Scale with Zoom: Choose whether shapes scale as you zoom

Save & Load Projects

Export State (Save Project)

• Save Progress: Export your entire project as a JSON file
• Includes: All painting, colors, settings, and customizations
• File Format: .json file that can be reopened anytime
• Usage: Backup your work or continue later

Import State (Load Project)

• Restore Work: Import a previously saved JSON file
• Preserves: All your painting and customization settings
• Cross-device: Works across different browsers and devices

Auto-save

• Automatic: Your work is saved to browser local storage
• Recovery: Automatically restores your last session
• No Action Required: Happens in the background

Preview Mode

Before exporting, use Preview mode to see your final map:

• Hides all editing controls and UI
• Shows only the map, legend, and custom elements
• Allows dragging legend and title for fine positioning
• Perfect for final composition checks

Next Steps

Once your map looks perfect, it's time to export! Continue to the final section to learn about saving and sharing your creations.