Skip to content

Instantly share code, notes, and snippets.

@pka

pka/mvt-workshop-fossgis2019.md Secret

Last active March 13, 2019 13:55
Show Gist options
  • Save pka/54520a1ffc80fc07a0b5ef23258261c4 to your computer and use it in GitHub Desktop.
Save pka/54520a1ffc80fc07a0b5ef23258261c4 to your computer and use it in GitHub Desktop.
Download ZIP
Workhop "Vektortiles erstellen und publizieren" FOSSGIS 2019
Raw
mvt-workshop-fossgis2019.md

Vektor-Tiles Workshop Notes

FOSSGIS 2019, Dresden

Pirmin Kalberer, Sourcepole AG, pka@sourcepole.ch

Online: https://git.io/fhhjl

Workshop data: https://pkg.sourcepole.ch/fossgis2019/mvt-workshop-fossgis2019.zip

Slides: https://pkg.sourcepole.ch/fossgis2019/mvt-workshop-slides.pdf

Vorbereitung

  • OSGeoLive starten

  • Desktop Icon "Workshop Installation"

  • Workshop Daten herunterladen und installieren:

    • Link "Workshop Material" anklicken
    • Open with "Archive Manager" - OK
    • Button "Extract" (oben links)
    • Button "Extract" (unten rechts)
    • Button "Show the files"
    • In Verzeichnis "mvt-workshop" wechseln
    • Doppelklick "setup-db.sh"
    • "Execute in Terminal"
    • Tools -> Open Current Folder in Terminal (F4)

Start Server und t-rex Backend

Tile Server starten:

t_rex serve --config countries.toml

Vektor Tiles in verschiedenen Viewern anschauen: "OpenLayers", "X-Ray", "Inspector"

Anmerkung: Viewer "Mapbox GL" benötigt WebGL-Unterstützung, welche in einer virtuellen Maschine eventuell nicht verfügbar ist.

Mapbox GL JS Viewer erstellen

In Backend auf Info Tab wechseln.

Code Snippet für Mapbox GL JS Viewer kopieren.

In neue Datei static/countries.html speichern:

  • Datei Manager öffnen und in Verzeichs static wechseln
  • Leere Datei countries.html erstellen
  • Datei mit Text Editor "Leafpad" öffnen
  • Kopiertes Template einfügen und Datei speichern

In Browser in neuem Tab öffnen unter: http://127.0.0.1:6767/static/countries.html

Bei fehlendem WebGL Support kann alternativ das OpenLayers Snippet verwendet werden.

Mapbox GL Style erstellen

In Backend auf Info Tab wechseln.

Link "Maputnik" öffnen.

(Bei fehlendem WebGL Support muss der Stil im Texteditor erstellt werden. Dazu Link "Style JSON" speichern und Stil erweitern)

Zuerst weitere Style-Layer vorbereiten. Layer country zweimal duplizieren:

  1. ID: land-border-country, Type: Line
  2. ID: country-name, Type Circle, Source Layer: country-name

Country als Polygone darstellen:

Layer country:

  • Type: Fill

Datengesteuerte Farbe für Layer country:

  • fill-color property: mapcolor7 (Workaround s.u.)
  • value-color: 1 -> #fdaf6b, 2 -> #fdc663, 3 -> #fae364, 4 -> #d3e46f, 5 -> #aadb78, 6 -> #a3cec5, 7 -> #ceb5cf

Workaround für Maputnik-Bug:

  • Funktionssymbol für Color (Paint properties) anklicken
  • Im JSON-Editor nach "fill-color": { die Zeile "property": "mapcolor7", einfügen.

Farbe der Grenzen in Layer land-border-country:

  • Paint color: #fff

Stil speichern mit Export -> Download

Speichern unter /home/user/mvt-workshop/static/style.json

Style in Viewer einbinden

In Datei countries.html die Zeile

style: 'http://127.0.0.1:6767/ne_countries.style.json',

ersetzen durch:

style: '/static/countries.json',

In Browser öffnen unter: http://127.0.0.1:6767/static/countries.html

Punkt-Layer für Labels erstellen

In t-rex Konfiguration /home/user/mvt-workshop/countries.toml einen weitern Layer hinzufügen:

[[tileset.layer]]
name = "country-name"
geometry_field = "wkb_geometry"
geometry_type = "POINT"
srid = 3857
buffer_size = 0
[[tileset.layer.query]]
sql = """SELECT ST_PointOnSurface(wkb_geometry) AS wkb_geometry, abbrev, name FROM ne_10m_admin_0_countries WHERE wkb_geometry && !bbox!"""

In Konsole t-rex stoppen (Ctrl-C) und neu starten (Pfeil hoch, Return).

Label-Style erstellen

style.json mit Maputnik öffnen (URL, falls nicht mehr offen):

http://127.0.0.1:6767/maputnik.html?style=http://127.0.0.1:6767/static/style.json

Länder-Labels in Layer country-name:

  • Type: Symbol
  • Text layout field: {name}
  • text-halo-color (Text paint properties): rgba(255, 255, 255, 1),
  • text-halo-width: 1.5
  • Min Zoom (Layer properties): 3

Layer duplizieren -> country-abbrev

  • Min Zoom: 1.8
  • Max Zoom: 3
  • Text layout field: {abbrev}

OpenLayers Viewer

In static/countries-ol.html den Style natural-earth-countries.json durch style.json und den Source Name countries durch ne_countries ersetzen.

In Browser öffnen unter: http://127.0.0.1:6767/static/countries-ol.html

Tile-Seeding

In Konfiguration /home/user/mvt-workshop/countries.toml Cache auskommentieren:

[cache.file]
base = "./mvtcache"
baseurl = "http://example.com/tiles"

In Konsole t-rex stoppen (Ctrl-C).

Cache seeding starten:

t_rex generate --config countries.toml --maxzoom 4

Tiles werden in Verzeichnis mvtcache gespeichert:

find mvtcache

Tile Server wieder starten:

t_rex serve --config countries.toml

Analyse Tileset (optional)

Tileset analysieren:

t_rex drilldown --config countries.toml --points 8.16,46.84,-95.92,39.0 | tee drilldown.csv

drilldown.csv in Tabllenkalkulation öffnen.

Verzeichnis mvtcache untersuchen. Hat es auch Tiles in Zoom Stufen >5?

maxzoom in countries.toml entsprechend setzen.

Offline-Applikation (optional)

Welche Resourcen werden noch aus dem Internet geladen?

Ergänzen aus https://github.com/pka/mapbox-gl-js-offline-example/archive/exercise.zip

Mouseover in Mapbox GL Viewer

In static/countries.html Mouseover-Event hinzufügen (nach var map = new mapboxgl.Map(..);):

map.on('mousemove', 'country', (e) => {
  const feat = e.features[0];
  console.log(feat.properties);
});

Popup initialisieren (vor map.on('mousemove', ...):

var popup = new mapboxgl.Popup({
    closeButton: false,
    closeOnClick: false
});

In Event Popup zu Karte hinzufügen (nach console.log(feat.properties);):

const content = feat.properties.name;
this.popup.setLngLat(e.lngLat)
  .setHTML(content)
  .addTo(map);

Popup entfernen, wenn ausserhalb (nach map.on('mousemove', ...);):

map.on('mouseleave', 'country', function() {
  popup.remove();
});

Weitere Funktionen:

  • Controls hinzufügen (Zoom, etc.)
  • Layer Switcher

Siehe https://www.mapbox.com/mapbox-gl-js/ -> Examples

Links

Mapbox Vector Tiles

Mapbox GL JS

OpenLayers

Vektor-Tiles creation

Tilesets

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment