Für bikerouter.de habe ich vor kurzem eine neue Kartenebene bereitgestellt: Das Gitter für die VeloViewer-Kacheln lässt sich jetzt über die gewählte Karte legen um so die Planung zu erleichtern. Dabei sind alle Kacheln sichtbar, unabhängig davon ob sie bereits befahren wurden oder nicht. Wie man sich die noch abzufahrenden Kacheln in bikerouter.de laden lassen habe ich hier beschrieben: bikerouter.de und das Explorer Max Square.
→ bikerouter.de mit aktivem VeloViewer-Overlay öffnen
Der saubere Weg, die Kachelgrenzen darzustellen wäre sie direkt als Linien im Browser zu zeichnen, z. B. indem man ein Plugin für die verwendete Karten-Library leaflet baut. Der schmutzige und schnelle Weg ist im folgenden beschrieben:
Kartenkacheln werden üblicherweise über Webadressen der folgenden Form abgerufen: https://example.org/{z}/{x}/{y}.png. Hierbei werden die Parameter ersetzt; {z} ist die aktuelle Zoom-Stufe (üblicherweise im Bereich 1-19), {x} und {y} die Positionen auf der Karte. Wie man geografische Breite und Länge in x und y umrechnet, steht z. B. hier beschrieben: Slippy map tilenames. Ich habe dafür auch eine PHP-Library geschrieben: PHP OSM Tiles.
Da die Kacheln für die VeloViewer-Ebene überall gleich aussehen, reicht es für jede Zoomstufe nur jeweils eine Grafik bereitzustellen, welche unabhängig von den Parametern x und y ist. Egal, für welchen Ort der Welt die Anfrage ist: der Webserver liefert je Zoomstufe immer die selbe Grafik aus. In der nginx-Config sieht das für die Zoomstufen 11 bis 14 in etwa so aus:
rewrite ^/veloviewer-grid/m11nx/(1[1-4])/(\d+)/(\d+).png$ /veloviewer-grid/z$1-tile.png last;
Die VeloViewer-Kacheln basieren auf der Zoomstufe 14. Eine Kachel in Zoomstufe 14 sind vier Kacheln in Stufe 15. Um hier die Kachelkanten darzustellen werden vier verschiedene Grafiken benötigt (je eine mit Linien links und oben, rechts und oben, links und unten sowie rechts und unten, siehe auch Grafik unten). Je nachdem ob x- und y-Parameter gerade oder ungerade sind, kann man entscheiden welche der vier Grafiken ausgeliefert werden muss:
rewrite ^/veloviewer-grid/m11n/15/(\d+)[02468]/(\d+)[02468].png$ /veloviewer-grid/z15-ee-tile.png last;
rewrite ^/veloviewer-grid/m11n/15/(\d+)[02468]/(\d+)[13579].png$ /veloviewer-grid/z15-eo-tile.png last;
rewrite ^/veloviewer-grid/m11n/15/(\d+)[13579]/(\d+)[02468].png$ /veloviewer-grid/z15-oe-tile.png last;
rewrite ^/veloviewer-grid/m11n/15/(\d+)[13579]/(\d+)[13579].png$ /veloviewer-grid/z15-oo-tile.png last;
(Für die Zoomstufe 16 würde man schon 16 Einzelgrafiken benötigen)
Für die Zoomstufen, welche keine Kacheln anzeigen sollen (1 bis 10 und 16 bis 19), wird einfach eine transparente Grafik ausgeliefert um keine HTTP 404-Fehler („nicht gefunden“) zu bekommen:
rewrite ^/veloviewer-grid/m11n/([1-9]|1[056789])/(\d+)/(\d+).png$ /veloviewer-grid/transparent-tile.png last;
So sehen die Kacheln im Grafikprogramm aus:
Wer sich diese Ebene selbst in Software einbinden möchte (QGIS, QMapShack, eigene BRouter-Instanz usw.) einbinden möchte, kann diese URL nutzen: https://map-tiles.m11n.de/veloviewer-grid/m11n/{z}/{x}/{y}.png