Guides

Drawing features

Draw points, lines, areas and text with the toolbar at the bottom of the editor, then reshape them any time.

squidmaps is in beta. Features, the map spec and these docs may change without notice, and things may occasionally break. Export a copy of any map that matters to you, and tell us when something isn't right: use Beta feedback, or email [email protected].

On this page

The drawing tools
Points
Lines and areas
Rectangles and circles
Text
Editing shapes
Move vertices
Move and rotate
Delete
Mask the map outside an area
Lock a feature

In progress: This guide is being written. It outlines what it will cover.

The drawing tools

Tool	Key	Use it for
Select	`1`	Choosing, moving and reshaping features
Point	`2`	Single places
Line	`3`	Routes, paths and borders
Polygon	`4`	Areas such as parks or neighborhoods
Rectangle	`5`	Boxes, by dragging
Circle	`6`	Circles, by dragging from the center
Text	`7`	Words placed on the map
Route	`8`	Lines that follow streets, where available

Tip: Hold Shift as you choose a tool to keep drawing with it after each feature.

Points

Choose the point tool and click the map. The point is added and selected.

Lines and areas

Choose the line or polygon tool.
Click to place each vertex.
Double-click or press Enter to finish. Click an area’s first vertex to close it.

Rectangles and circles

Drag on the map. A rectangle starts upright and a circle is round on the map.

They keep their shape: drag a rectangle’s corners or sides, or the handles on a circle’s edge, to resize it, and drag the shape itself to move it. Drag the round handle above a rectangle to turn it (hold Shift to turn by 15°). A selected circle shows a crosshair at its center: drag it to line the circle up with something on the map. Type a circle’s radius in the right panel, in meters, kilometers, miles or feet (“1.5 km”), or fine-tune it with the slider below. To move corners one at a time or add more, choose Convert to area in the right panel or the right-click menu.

Text

Click where the words should go. Text is named after its words, and styled on its own. See Styling data.

Editing shapes

Move vertices

Select a line or area, then drag a vertex. Drag a midpoint to add a vertex.

Move and rotate

Hold the space bar and drag to move a whole feature. Hold Option and drag to rotate it.

Delete

Select a feature and press Delete.

Mask the map outside an area

To focus a map on one place, gray out everything around it. Select an area, then choose Add inverse mask from the right-click menu or the geometry operations menu. squidmaps adds a new area, named “Inverse of” the original, that covers the whole world except your area, and lists it just below it.

The mask starts as a dark fill at 60% opacity with no outline. Style it like any other area: a lighter or more opaque fill, or a white one to fade the map out instead. The original area is left as it was, so you can give it an outline of its own.

Show the properties

json

[
  {
    "type": "Feature",
    "id": "dc",
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [-77.039, 38.7916],
          [-76.9094, 38.8929],
          [-77.0415, 38.9955],
          [-77.1198, 38.9341],
          [-77.1013, 38.9187],
          [-77.0832, 38.905],
          [-77.07, 38.902],
          [-77.056, 38.88],
          [-77.045, 38.87],
          [-77.04, 38.858],
          [-77.038, 38.845],
          [-77.039, 38.82],
          [-77.039, 38.7916]
        ]
      ]
    },
    "properties": {
      "name": "Washington, DC",
      "@line-color": "#12312C",
      "@fill-opacity": 0
    }
  },
  {
    "type": "Feature",
    "id": "dc-inverse",
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [-180, -85.051129],
          [180, -85.051129],
          [180, 85.051129],
          [-180, 85.051129],
          [-180, -85.051129]
        ],
        [
          [-77.039, 38.7916],
          [-77.039, 38.82],
          [-77.038, 38.845],
          [-77.04, 38.858],
          [-77.045, 38.87],
          [-77.056, 38.88],
          [-77.07, 38.902],
          [-77.0832, 38.905],
          [-77.1013, 38.9187],
          [-77.1198, 38.9341],
          [-77.0415, 38.9955],
          [-76.9094, 38.8929],
          [-77.039, 38.7916]
        ]
      ]
    },
    "properties": {
      "name": "Inverse of Washington, DC",
      "@fill-color": "#1F2A2E",
      "@fill-opacity": 0.6,
      "@line-opacity": 0
    }
  }
]

The mask is made once from the area’s shape. If you reshape the area afterwards, delete the mask and add a new one. Holes in the area become areas of their own in the mask, since they’re outside it.

Lock a feature

Lock a feature you’ve finished so it can’t be changed by accident. Hover over it in the features list and click the lock beside its name, or select it and click the lock beside its name in the right panel. With features selected, the lock locks or unlocks all of them.

A locked feature can still be selected, and still highlights in the list and on the map as you hover over either. But it can’t be moved, its vertices don’t appear, and its name, details and style are shown in the right panel without being editable. Deleting skips locked features, and they’re left out when you move or rotate a group.

To edit it again, click its lock in the list, or the lock beside its name at the top of the right panel. Visitors never see whether a feature is locked.