Styling data
Style points, lines, areas and text so your map reads at a glance.
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
In progress: This guide is being written. It outlines what it will cover.
Points
Points are circles, marker pins or emoji. Each type has presets to start from, and keeps its own style, so you can switch types and back.
Show the propertiesHide the properties
[
{
"type": "Feature",
"id": "point-1",
"geometry": {
"type": "Point",
"coordinates": [-73.9579, 40.7745]
},
"properties": {
"name": "A circle"
}
},
{
"type": "Feature",
"id": "point-2",
"geometry": {
"type": "Point",
"coordinates": [-73.9555, 40.7745]
},
"properties": {
"name": "A marker pin",
"@point-type": "marker"
}
},
{
"type": "Feature",
"id": "point-3",
"geometry": {
"type": "Point",
"coordinates": [-73.9531, 40.7745]
},
"properties": {
"name": "An emoji",
"@point-type": "emoji",
"@emoji": "🌳"
}
}
]Circles
A fill, a size, a stroke, and an optional icon. Leave the stroke off, or make it thick and bright to make a small circle stand out.
Show the propertiesHide the properties
[
{
"type": "Feature",
"id": "circle-1",
"geometry": {
"type": "Point",
"coordinates": [-73.9591, 40.7745]
},
"properties": {}
},
{
"type": "Feature",
"id": "circle-2",
"geometry": {
"type": "Point",
"coordinates": [-73.9567, 40.7745]
},
"properties": {
"@fill": "#D9664E",
"@radius": 13,
"@icon": "solid/mug-hot"
}
},
{
"type": "Feature",
"id": "circle-3",
"geometry": {
"type": "Point",
"coordinates": [-73.9543, 40.7745]
},
"properties": {
"@fill": "#12312C",
"@radius": 5,
"@stroke": "#F2C14E",
"@stroke-width": 4
}
},
{
"type": "Feature",
"id": "circle-4",
"geometry": {
"type": "Point",
"coordinates": [-73.9519, 40.7745]
},
"properties": {
"@fill": "#F2C14E",
"@radius": 18,
"@stroke-width": 0,
"@icon": "solid/star",
"@icon-color": "#8A3B12"
}
}
]Marker pins
A pin with a colored disc and an optional icon.
Show the propertiesHide the properties
[
{
"type": "Feature",
"id": "marker-1",
"geometry": {
"type": "Point",
"coordinates": [-73.9579, 40.7745]
},
"properties": {
"@point-type": "marker"
}
},
{
"type": "Feature",
"id": "marker-2",
"geometry": {
"type": "Point",
"coordinates": [-73.9555, 40.7745]
},
"properties": {
"@point-type": "marker",
"@marker-shell": "#C2473A",
"@marker-disc": "#FFFFFF",
"@marker-icon": "solid/utensils"
}
},
{
"type": "Feature",
"id": "marker-3",
"geometry": {
"type": "Point",
"coordinates": [-73.9531, 40.7745]
},
"properties": {
"@point-type": "marker",
"@marker-shell": "#12312C",
"@marker-disc": "#F2C14E",
"@marker-icon": "solid/star",
"@marker-icon-color": "#12312C"
}
}
]Emoji
Any emoji, at the size you choose.
Show the propertiesHide the properties
[
{
"type": "Feature",
"id": "emoji-1",
"geometry": {
"type": "Point",
"coordinates": [-73.9579, 40.7745]
},
"properties": {
"@point-type": "emoji",
"@emoji": "🍕",
"@size": 20
}
},
{
"type": "Feature",
"id": "emoji-2",
"geometry": {
"type": "Point",
"coordinates": [-73.9555, 40.7745]
},
"properties": {
"@point-type": "emoji",
"@emoji": "🚲",
"@size": 32
}
},
{
"type": "Feature",
"id": "emoji-3",
"geometry": {
"type": "Point",
"coordinates": [-73.9531, 40.7745]
},
"properties": {
"@point-type": "emoji",
"@emoji": "🏛️",
"@size": 48
}
}
]Labels
Show a point’s name beside it, above or to the right. Labels move out of each other’s way.
Show the propertiesHide the properties
[
{
"type": "Feature",
"id": "label-1",
"geometry": {
"type": "Point",
"coordinates": [-73.9579, 40.7745]
},
"properties": {
"name": "Above",
"@show-label": true
}
},
{
"type": "Feature",
"id": "label-2",
"geometry": {
"type": "Point",
"coordinates": [-73.9555, 40.7745]
},
"properties": {
"name": "To the right",
"@show-label": true,
"@label-placement": "right"
}
},
{
"type": "Feature",
"id": "label-3",
"geometry": {
"type": "Point",
"coordinates": [-73.9531, 40.7745]
},
"properties": {
"name": "Bigger, in color",
"@show-label": true,
"@label-size": 17,
"@label-color": "#C2473A",
"@fill": "#C2473A"
}
}
]Lines
A color, a width, an opacity, a dash pattern and how the ends are drawn. Dots are dashes of length 0 with round ends.
Show the propertiesHide the properties
[
{
"type": "Feature",
"id": "line-1",
"geometry": {
"type": "LineString",
"coordinates": [
[-73.96, 40.77565],
[-73.957, 40.77605],
[-73.954, 40.77565],
[-73.951, 40.77605]
]
},
"properties": {
"@line-color": "#3F80C4",
"@line-width": 6
}
},
{
"type": "Feature",
"id": "line-2",
"geometry": {
"type": "LineString",
"coordinates": [
[-73.96, 40.77475],
[-73.957, 40.77515],
[-73.954, 40.77475],
[-73.951, 40.77515]
]
},
"properties": {
"@line-color": "#C2473A",
"@line-width": 3,
"@line-dasharray": [4, 2],
"@line-cap": "butt"
}
},
{
"type": "Feature",
"id": "line-3",
"geometry": {
"type": "LineString",
"coordinates": [
[-73.96, 40.77385],
[-73.957, 40.77425],
[-73.954, 40.77385],
[-73.951, 40.77425]
]
},
"properties": {
"@line-color": "#12312C",
"@line-width": 4,
"@line-dasharray": [0, 2]
}
},
{
"type": "Feature",
"id": "line-4",
"geometry": {
"type": "LineString",
"coordinates": [
[-73.96, 40.77295],
[-73.957, 40.77335],
[-73.954, 40.77295],
[-73.951, 40.77335]
]
},
"properties": {
"@line-color": "#2F8A4E",
"@line-width": 10,
"@line-opacity": 0.5
}
}
]Areas
An outline, drawn like a line, and a fill with its own color and opacity.
Show the propertiesHide the properties
[
{
"type": "Feature",
"id": "area-1",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-73.9592, 40.773816],
[-73.9574, 40.773816],
[-73.9574, 40.775184],
[-73.9592, 40.775184],
[-73.9592, 40.773816]
]
]
},
"properties": {}
},
{
"type": "Feature",
"id": "area-2",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-73.9564, 40.773816],
[-73.9546, 40.773816],
[-73.9546, 40.775184],
[-73.9564, 40.775184],
[-73.9564, 40.773816]
]
]
},
"properties": {
"@line-color": "#2F8A4E",
"@line-width": 1,
"@fill-color": "#2F8A4E",
"@fill-opacity": 0.6
}
},
{
"type": "Feature",
"id": "area-3",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-73.9536, 40.773816],
[-73.9518, 40.773816],
[-73.9518, 40.775184],
[-73.9536, 40.775184],
[-73.9536, 40.773816]
]
]
},
"properties": {
"@line-color": "#C2473A",
"@line-width": 3,
"@line-dasharray": [2, 2],
"@fill-opacity": 0
}
}
]Circles and rectangles are areas too, styled the same way.
Show the propertiesHide the properties
{
"type": "Feature",
"id": "circle-area",
"geometry": null,
"properties": {
"name": "A 150 m walk",
"@feature-type": "circle",
"@circle": {
"center": [-73.9555, 40.7745],
"radius": 150
},
"@fill-color": "#F2C14E"
}
}Tip: A fill around 20% keeps the streets and labels underneath readable.
Text
Size, color and a halo, an optional rounded background, and whether the text stays the same size or grows with the map. Text can be turned, too.
Show the propertiesHide the properties
[
{
"type": "Feature",
"id": "text-1",
"geometry": {
"type": "Point",
"coordinates": [-73.9589, 40.7745]
},
"properties": {
"@feature-type": "text",
"name": "Plain"
}
},
{
"type": "Feature",
"id": "text-2",
"geometry": {
"type": "Point",
"coordinates": [-73.9555, 40.7745]
},
"properties": {
"@feature-type": "text",
"name": "With a\nbackground",
"@text-size": 16,
"@text-color": "#FFFFFF",
"@text-halo-width": 0,
"@text-background": "#1E7A6C"
}
},
{
"type": "Feature",
"id": "text-3",
"geometry": {
"type": "Point",
"coordinates": [-73.9521, 40.7745]
},
"properties": {
"@feature-type": "text",
"name": "Turned",
"@text-size": 20,
"@text-color": "#C2473A",
"@text-rotate": -20,
"@text-scale": "map",
"@text-scale-zoom": 16
}
}
]Copy a style
Use the eyedropper at the top of the Style section to copy another feature’s style onto the selected ones.
Style before you draw
When you pick a point, line or area tool, the right panel (below the map, on a phone) shows the style of what you’re about to draw. Change it there, or use its eyedropper to copy the style of a feature already on the map, and the features you draw next use it. New features also start with the style you last gave a feature of the same kind: after you make one point a 🍕, the next point you add is a 🍕 too.
Basemaps
The basemap under your features sets the mood: Streets, Light, Gray or Dark, or one in your own colors.
Need a hand? Email [email protected]. Attribution. Privacy. . © 2026 squidmaps