pin · SayShape

SayShape

Elements / Data

inside map

A labelled point on a Canvas map. The optional detail is shown in a multiline hover tooltip.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the props"text"

lat

33.4484

lon

-112.074

detail

tone

size

Props

"text"textThe place name shown next to the pin.required

latnumberLatitude in degrees (-90 to 90).required

lonnumberLongitude in degrees (-180 to 180).required

detailstringTooltip details; separate lines with |. Supports interpolated dataset expressions.—

toneink · accent · good · warn · bad · mutedTheme color: ink, accent, good, warn, bad or muted.ink

sizenumberMarker radius in CSS pixels, clamped to 2..18. Supports expressions.5

ifconditionShow only when this expression is true, e.g. if=done or if={count>0}. Every element takes it.—

tipstringA short explanation shown on hover, keyboard focus or a tap, e.g. tip="Orders not yet shipped": for a term or a number some people won't know, instead of more words on screen. It makes the element a Tab stop if it isn't one. Every element takes it.—

Only inside: map

For your model

The exact guide entry a model gets for pin, generated from the same definition.

  pin "<text>"  — A labelled point on a Canvas map. The optional detail is shown in a multiline hover tooltip.
    "<text>" (required)  The place name shown next to the pin.
    lat=<number, required>  Latitude in degrees (-90 to 90).
    lon=<number, required>  Longitude in degrees (-180 to 180).
    detail=<string>  Tooltip details; separate lines with |. Supports interpolated dataset expressions.
    tone=<ink|accent|good|warn|bad|muted>  Theme color: ink, accent, good, warn, bad or muted.
    size=<number>  Marker radius in CSS pixels, clamped to 2..18. Supports expressions.
    only inside: map
    example:
      pin "Phoenix" lat=33.4484 lon=-112.074 tone=bad size=9 detail="Status: delayed | Value: 120000"

  map  — Canvas map with pin markers, data-driven country choropleths and proportional bubble maps. For data maps, give items plus geographic and numeric field names; Canvas handles colors, sizing and legends.
    kind=<markers|choropleth|bubble>  markers uses pin children; choropleth colors countries from dataset rows; bubble plots sized locations from dataset rows.
    items=<expression>  Data rows for kind=choropleth or kind=bubble, e.g. items=sales. Do not embed individual rows in map specs.
    region=<name>  Country-name column for choropleth, e.g. region=country.
    value=<name>  Numeric column used for country shading or proportional bubble area.
    lat=<name>  Latitude column for bubble maps.
    lon=<name>  Longitude column for bubble maps.
    label=<name>  Location-name column for bubble maps.
    legend=<boolean>  Show a Canvas legend; defaults on for choropleth and bubble, off for markers.
    legendTitle=<string>  Legend title, e.g. Revenue ($) or Project value.
    highlight=<string>  Comma-separated country names to tint, e.g. Japan,Brazil.
    bind=<state>  State name that receives the clicked country or marker label.
    fit=<world|pins>  Initial framing: whole world, or zoom to the current pin locations. Re-fits when the pins change.
    cluster=<boolean>  Group nearby pins into clickable counts. Zooming in separates them.
    interactive=<boolean>  Enable mouse-wheel zoom and drag pan.
    controls=<boolean>  Show Canvas zoom in, zoom out and reset controls. Opt in to preserve the original minimal map appearance.
    route=<boolean>  Join the pins with a line in the order they are written, for a trip or a delivery run.
    children: pin
    example:
      state selected=""
      map bind=selected fit=pins cluster=true controls=true
        pin "Phoenix" lat=33.4484 lon=-112.074 detail="Status: delayed | Contract: 120000" tone=bad size=8

More data

stat rating chart chart-line chart-rule chart-note meter table table-column compare compare-row details detail schedule board tree flow map

All data elements on one page →