Store Map

Watch it in Grid

See this model in motion.

Watch the model respond in the product, then inspect the exact source and checkpoints on this page.

What this model gives you

Three store records rendered as a labeled Bay Area map while revenue remains an ordinary model calculation.

10 min to study · Source reviewed 2026-08-25

Continue with guided practice

What to notice

Row bindings
Latitude/longitude mapping
Map presentation versus model logic

Requirements

Map surface
No connector
No network

Expected checkpoint

A known state for this walkthrough.

After loading the authored San Francisco, Oakland, and San Jose rows.

Stores: 3 rowsStores
Revenue: 328,000TotalRevenue
Map layer: 3 labeled pointsStore_Map

01 · Model

Locations stay ordinary records

Every store carries identity, coordinates, label, and revenue in one row source.

02 · Bind

The map config names presentation fields

The layer maps latitude, longitude, and name without moving calculations into the renderer.

03 · React

One source change feeds value and view

Changing a row updates model totals and the same bound layer.

11-surface-store-map.grid

Get Grid

MODEL "Store Map"
DESCRIPTION "Show store locations on a map."
VERSION "1.0.0"
AUTHOR "AI Agent"
TAGS "surface-template", "map", "locations", "surfaces"

Stores = [
  { id: "SFO", name: "San Francisco", latitude: 37.7749, longitude: -122.4194, revenue: 125000 },
  { id: "OAK", name: "Oakland", latitude: 37.8044, longitude: -122.2712, revenue: 92000 },
  { id: "SJC", name: "San Jose", latitude: 37.3382, longitude: -121.8863, revenue: 111000 }
]

TotalRevenue IS currency = SUM(MAP(Stores, store => store.revenue))

Store_Map!type = "map"
Store_Map!config = """
version = 1
kind = "map"
title = "Store Map"

[layout]
basemap = "streets"
center = [37.7749, -122.4194]
zoom = 9

[[layers]]
name = "Stores"
bind = "Stores"
lat = "latitude"
lng = "longitude"
label = "name"
color = "#2563eb"
"""
Store_Map!data = ""

END MODEL