map

binds state

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.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the props

kind

legend

legendTitlehighlight

fit

cluster

interactive

controls

route

Props

kindmarkers · choropleth · bubblemarkers uses pin children; choropleth colors countries from dataset rows; bubble plots sized locations from dataset rows.markers

itemsexpressionData rows for kind=choropleth or kind=bubble, e.g. items=sales. Do not embed individual rows in map specs.—

regionnameCountry-name column for choropleth, e.g. region=country.—

valuenameNumeric column used for country shading or proportional bubble area.—

latnameLatitude column for bubble maps.—

lonnameLongitude column for bubble maps.—

labelnameLocation-name column for bubble maps.—

legendbooleanShow a Canvas legend; defaults on for choropleth and bubble, off for markers.—

legendTitlestringLegend title, e.g. Revenue ($) or Project value.—

highlightstringComma-separated country names to tint, e.g. Japan,Brazil.—

bindstateState name that receives the clicked country or marker label.—

fitworld · pinsInitial framing: whole world, or zoom to the current pin locations. Re-fits when the pins change.world

clusterbooleanGroup nearby pins into clickable counts. Zooming in separates them.false

interactivebooleanEnable mouse-wheel zoom and drag pan.true

controlsbooleanShow Canvas zoom in, zoom out and reset controls. Opt in to preserve the original minimal map appearance.false

routebooleanJoin the pins with a line in the order they are written, for a trip or a delivery run.false

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.—

Children: pin

For your model

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

  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

  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"

More data

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

All data elements on one page →