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

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


Q Tools: Locator Maps
Online

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
-
-
Extract OSM countries and clip to land
-
Does not have subdivisions
-
No recent updates
-
-
-
Comprehensive datasets with countries, states, provinces
-
Not matching everywhere with OpenStreetMap
-
- Not Open Data: Mapbox Boundaries, GADM
Getting Data from OpenStreetMap
1 region


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
[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
[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
Code
Demo
Extracting OpenStreetMap data for region highlights compatible with OpenMapTiles
By rkaravia
Extracting OpenStreetMap data for region highlights compatible with OpenMapTiles
- 780