Maps

The map has the world built in, with every country's name and codes, so a figure per country is all it needs: give it { GBR: 67, FRA: 68 } and the countries are coloured, with a legend that picks out a class when you press it. Values can be split into equal steps, into groups of the same size, at breaks of your own, either side of zero, or by category.

Put markers on it, sized by their value and grouped when they crowd together, and draw routes along the great circles a flight takes. Pan, zoom and pinch; choose countries; read the whole map as a table. It loads no tiles and calls no map service, so nothing about your data leaves the page. Your own regions come in as GeoJSON or TopoJSON.

Where the customers are

Customers by country, the offices that serve them, and the routes from head office. Hover or tab to a country for its figure; click countries to choose them; click a group of offices to zoom in until they separate. Press a legend entry to pick out its class.

Equal Earth

Natural Earth

Mercator

Equirectangular

Zoom to Europe

Zoom to the chosen

Download as SVG

Keyboard: Tab to the map, then the arrow keys move to the nearest country or marker in that direction and Enter chooses it. + and - zoom, 0 shows the whole map again. The table button beside the zoom buttons shows every figure as a table.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-select id="mp-projection" label="Projection" value="equal-earth" style="inline-size: 12rem">
  <bmx-option value="equal-earth">Equal Earth</bmx-option>
  <bmx-option value="natural-earth">Natural Earth</bmx-option>
  <bmx-option value="mercator">Mercator</bmx-option>
  <bmx-option value="equirectangular">Equirectangular</bmx-option>
</bmx-select>
<bmx-map id="mp-customers" scale="quantile" steps="5" legend-title="Customers" label="Customers by country" cluster selectable="multiple" locale="en-GB" style="inline-size: 100%"></bmx-map>

<script>
  const map = document.getElementById('mp-customers');
  map.data = [ /* your data */ ];
</script>

Growth and decline, with names

Population change across Europe over ten years. A diverging scale colours growth and decline differently either side of zero, and the map names every country there is room for. It opens on the countries it is fitted to.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-map id="mp-change" scale="diverging" steps="6" format="decimal:1" unit="%" fit-to="DEU,FRA,ESP,POL,SWE,ITA,GBR,UKR" labels="auto" legend-title="Population change, 2013 to 2023 (approximate)" label="Population change in Europe" locale="en-GB" style="inline-size: 100%; --bmx-map-height: min(28rem, 95vw)"></bmx-map>

<script>
  const map = document.getElementById('mp-change');
  map.data = [ /* your data */ ];
</script>

Regions of your own

Any GeoJSON or TopoJSON works in place of the world: sales territories, delivery zones, floors of a building. These made-up territories are coloured by the channel they sell through and named on the map; choose one to see who looks after it.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-map id="mp-own" projection="equirectangular" scale="category" labels="all" selectable="single" label="Sales territories" locale="en-GB" style="inline-size: 100%; --bmx-map-height: min(22rem, 66vw)"></bmx-map>

<script>
  const map = document.getElementById('mp-own');
  map.data = [ /* your data */ ];
</script>