Extracting OpenStreetMap data for region highlights compatible with OpenMapTiles

Roman Karavia, 2020-06-17

GitHub / Twitter: @rkaravia

Neue Zürcher Zeitung (NZZ)

German-language daily newspaper
Online + print
Based in Zürich, Switzerland

NZZ Visuals + Editorial Tech

Visual and data-driven storytelling
News can be more than just text
Data! Charts! Maps!
Tailor-made
Reusable: Q Tools
(Open Source)

@NZZEditoTech

Q Tools: Locator Maps

Online

Print

Article: Wuhan steht wegen des Coronavirus unter Quarantäne

Published on 2020-01-23 (online) / 2020-01-24 (print, page 22)

Problem: It should be easy to make this map

Users are not GIS experts
OpenStreetMap + OpenMapTiles
already get you very far
Tiles contain boundaries but not
polygons of regions
How do we highlight regions?

Agenda

State requirements
Prior Art
Overview of choices and technologies used in implementation

⚡ Demo ⚡

Links, Questions

Requirements

Include enough regions to cover common use cases (countries and subdivisions)
Polygon or Multipolygon for each region
Highlight only land part
Compatible with base map
Stable identifier for every region

Prior Art

Geo-Maps
- Extract OSM countries and clip to land
- Does not have subdivisions
- No recent updates
Natural Earth
- Comprehensive datasets with countries, states, provinces
- Not matching everywhere with OpenStreetMap
Not Open Data: Mapbox Boundaries, GADM

Getting Data from OpenStreetMap

1 region

Go to openstreetmap.org
Zoom in to area of interest
Click

Click relation of interest

Getting Data from OpenStreetMap

All the regions

Which ones?
- ISO 3166 countries and subdivisions
Query them in bulk through Overpass API
- "Database over the web"
- Documentation on OSM Wiki
- Experiment on Overpass Turbo
Convert to GeoJSON by using query-overpass
which includes osmtogeojson

Overpass: Get 1 country + subdivisions

Query result on Overpass Turbo

[out:json];

(
  relation
    [boundary=administrative]
    ["ISO3166-1"="CH"]; // country equals CH

  relation
    [boundary=administrative]
    ["ISO3166-2"~"^CH"]; // subdivision starts with CH
);
    
out; >; out skel;

Overpass: List all countries

Query result on Overpass Turbo

[out:csv(::"id", "ISO3166-1")];

relation
  [boundary=administrative]
  [admin_level=2]
  ["ISO3166-1"];

out;

Batteries included!

Overpass API delivers whatever OpenStreetMap contains
Wikidata ID provides a stable identifier
- Stored in OpenStreetMap under wikidata key
Region name in different languages

Clip to land

Extract land areas from OpenStreetMap
- Already done by the Osmdata project
Use mapshaper CLI: -clip

Cut into tiles: Tippecanoe

Powerful tool with many options
But well documented and command fits on slide

tippecanoe \
  --minimum-zoom=0 \
  --maximum-zoom=10 \
  --named-layer="{
      \"file\": \"countries-clipped.json\",
      \"layer\": \"countries\"
    }" \
  --named-layer="{
      \"file\": \"subdivisions-clipped.json\",
      \"layer\": \"subdivisions\"
    }" \
  --include=wikidata \
  --simplification=4 \
  --simplify-only-low-zooms \
  --output regions.mbtiles

Summary

Dataset of countries and commonly used subdivisions
Available as GeoJSON + vector tiles
Built with lots of Open Source and Open Data

⚡ Demo ⚡

The End

Slides

bit.ly/osm-regions

Code

github.com/nzzdev/osm-regions

Demo

editor.q.tools

Twitter

@rkaravia / @NZZEditoTech