Visitor map widget

A flat world map shaded by visitor location. Two modes: country shading (heatmap) or city dots. Fits anywhere a <div> fits.

Flat world map with country shading

When to use it

Marketing / landing pages: visual proof of reach
Office TVs / dashboards: looks good at any size
Conference talks: quick "look how global this is" visual
Product status pages: pair with system-status indicators

Quick install

<script
  defer
  src="https://statable.com/js/mw.js"
  data-hash="YOUR_PUBLIC_HASH">
</script>

Don't copy the snippet from this page. The real one lives in Site settings → Widget → Map, with data-hash already filled in and a one-click copy button.

Options

Attribute	Values	Default	Notes
`data-hash`	your public hash	(required)
`data-theme`	`light` / `dark` / `auto`	`auto`
`data-period`	`1d` / `7d` / `30d` / `90d`	`7d`	Time window
`data-display-mode`	`heatmap` / `cities`	`heatmap`	Country shading vs city dots
`data-primary-color`	hex	Statable blue	Country fill (heatmap) or dot colour (cities)
`data-ocean-color`	hex	light blue / dark navy	Background colour for water
`data-outer-radius`	`0` / `8` / `16` / `32`	`0`	Border radius (px) of the widget container
`data-width`	`auto` or pixels	`auto`
`data-height`	`auto` or pixels	`auto`	Defaults to a 2:1 aspect ratio if width is set

The widget refreshes every 10 seconds.

Two modes

Heatmap mode (default)

Countries are filled with data-primary-color, with opacity proportional to visitor share. The country with the most visitors is fully saturated; everything else fades.

<script defer
  src="https://statable.com/js/mw.js"
  data-hash="03D3Cfb9eA"
  data-display-mode="heatmap">
</script>

Cities mode

Individual cities are rendered as dots, sized by visitor count. Best on a wider canvas (≥600 px) so the dots don't crowd.

<script defer
  src="https://statable.com/js/mw.js"
  data-hash="03D3Cfb9eA"
  data-display-mode="cities"
  data-width="800"
  data-height="400">
</script>

More examples

Dark theme, rounded corners, custom ocean colour:

<script defer
  src="https://statable.com/js/mw.js"
  data-hash="03D3Cfb9eA"
  data-theme="dark"
  data-outer-radius="16"
  data-primary-color="#10B981"
  data-ocean-color="#0F172A">
</script>

Compact card layout, fixed 480 × 240 px:

<div class="map-card">
  <script defer
    src="https://statable.com/js/mw.js"
    data-hash="03D3Cfb9eA"
    data-width="480"
    data-height="240"
    data-outer-radius="8">
  </script>
</div>

30-day window with city dots, brand-aligned colours:

<script defer
  src="https://statable.com/js/mw.js"
  data-hash="03D3Cfb9eA"
  data-period="30d"
  data-display-mode="cities"
  data-primary-color="#FF5722">
</script>

What the visitor sees

Hover any country (heatmap mode): tooltip with country name and visitor count
Hover any city dot: tooltip with city, country, visitor count
Smooth transitions when data refreshes. Countries and dots fade in/out instead of jumping

Notes

Map projection: Natural Earth. Balanced for global data, doesn't exaggerate Greenland or Antarctica.
City data: up to 100 most-active cities in cities mode. Smaller cities aggregate into their country's heatmap.
Bundle size: ~12 KB gzipped, plus a small map-data file (~30 KB once, cached forever).
Offline: map data is bundled, works once cached.