Technologie für eine ultrakleine Weltkarte (World Map)

Einführung in tinyworldmap

• tinyworldmap ist eine Weltkarte für Offline-First- und Low-Bandwidth-Web-Apps
• Sie wurde für die Verwendung mit Leaflet entwickelt und unterstützt alle Zoomstufen
• Die vollständigste Version ist gzip-komprimiert nur 300 kB groß
• Das clientseitige Rendering wurde auf leistungsschwachen, zehn Jahre alten Mobiltelefonen umfassend profiliert und getestet, ohne wahrnehmbare Verzögerungen
• Standardmäßig werden die 10.000 bevölkerungsreichsten Städte angezeigt, die zu OpenStreetMap hinzugefügt wurden
• Zum Zeitpunkt der Erstellung sind alle Städte und Ortschaften mit mehr als 48.000 Einwohnern enthalten

Verwendung von tinyworldmap

Als Basiskarte verwenden

• Um tinyworldmap als Leaflet-Basiskarte zu verwenden, füge Folgendes zum head-Tag hinzu:

• Dieses Skript enthält alle Daten, die zum Anzeigen der Karte benötigt werden
• Anstatt einen Tile-Layer zur Leaflet-Karte hinzuzufügen, verwende Folgendes:

new L.GridLayer.TinyWorld().addTo(map)

• Der TinyWorld-Konstruktor akzeptiert mehrere Optionen: backgroundColor, textFillColor, borderStrokeColor, borderFillColor, borderWidth, textStrokeColor (um Text vom Rest abzuheben), textStrokeWidth, cityFont (z. B. "12px Arial"), countryFont, dotColor
• Wenn dotColor angegeben wird, wird jede Stadt als Punkt dargestellt. Das verbessert die Nutzbarkeit, wenn eine verkleinerte Version von tinyworldmap ohne Grenzen verwendet wird

Als Fallback-Karte verwenden

• In Offline-First-Webanwendungen ist es unmöglich, bildbasierte Karten für alle Zoomstufen zwischenzuspeichern (die Anzahl der Tiles ist enorm und ihre Größe liegt im Terabyte-Bereich)
• Dieses Repository stellt einen Service Worker bereit, der Offline-Funktionen für Web-Apps ermöglicht
• Sobald der Service Worker installiert ist, wird die Fallback-Karte vorgeladen. Alle besuchten Seiten werden gecacht, die Basiskarte jedoch nicht
• Solange eine Verbindung zum Server möglich ist, werden die gecachten Daten nicht verwendet
• Wenn der Benutzer offline ist, wird die Website aus dem Cache ausgeliefert, und der Service Worker fängt Anfragen an den OSM-Tile-Server ab und erzeugt lokal Ersatz-Tiles mit tinyworldmap
• Bevor du den Service Worker registrierst, musst du zuerst alle im Service Worker als 'IMPORTANT' markierten Abschnitte anpassen
• Nach der Registrierung müssen OpenStreetMap und tinyworldmap im Tile-Layer wie folgt in der Attribution angegeben werden:

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '© [OpenStreetMap](https://www.openstreetmap.org/copyright), [tinyworldmap](https://www.tinyworldmap.com)'
}).addTo(map);

• Ein Beispiel für eine Produktivanwendung, die tinyworldmap als Fallback verwendet, ist Hitchmap. Lade die Website in einem Browser mit Service-Worker-Unterstützung, warte kurz, schalte dann das Internet aus und lade erneut. Die Web-App sollte mit der Fallback-Karte normal funktionieren. Die Installation des Service Workers kann etwas Zeit in Anspruch nehmen

Kleinere Weltkarten

• Die vollständige Karte ist gzip-komprimiert 300 K und unkomprimiert 694 K groß. Für bestimmte Anwendungsfälle kann selbst das noch zu groß sein

Ohne Grenzen

• tiny-world-noborders-10000.js(on) enthält alle Daten der Vollversion außer Landesgrenzen und Küstenlinien
• Die gzip-komprimierte Version ist 100 kB kleiner, die unkomprimierte Version 200 kB kleiner
• Die Version ohne Grenzen hat nicht nur den Vorteil einer geringeren Größe, sondern auch, dass alle enthaltenen Daten exakt sind
• Die Grenzen in der Vollversion sind bei hohen Zoomstufen nicht exakt und können seltsam aussehen, wenn Formen passend zu Grenzen und Küstenlinien darübergelegt werden. In solchen Fällen passt die Version ohne Grenzen besser
• Der Standardstil ist wie folgt

Ohne Städte

• Es gibt zwei Versionen ohne Stadtbeschriftungen: tiny-world-nocities.js(on) (mit Länderbeschriftungen) und tiny-world-borders.js(on) (ohne Länderbeschriftungen)
• Stadtbeschriftungen belegen 410 K unkomprimiert und 172 K komprimiert

Weniger Städte

• Schließlich gibt es für jede Datei mit Stadtbeschriftungen auch Versionen mit 2.000 und 4.000 Städten
• Ändere im Dateinamen einfach 10000 in 2000 oder 4000

Anzahl enthaltener Städte	Bevölkerung
10.000	> 48.000
4.000	> 137.000
2.000	> 287.000

tinyworldmap beauftragen

• Wenn du eine benutzerdefinierte Karte benötigst (z. B. detaillierter oder in einer anderen Sprache) oder Hilfe bei der Implementierung von Offline-Funktionen auf deiner Website brauchst, kontaktiere [e-mail]

Attribution

• Wie die OpenStreetMap-Daten stehen auch die tinyworldmap-Daten unter der ODBL-Lizenz und erfordern daher eine Attribution
• Wenn du die oben beschriebenen Schritte befolgt hast, sollte die Leaflet-Fußzeile bereits sowohl die Attribution für OpenStreetMap als auch für tinyworldmap enthalten. Falls nicht, füge Folgendes hinzu:

© [OpenStreetMap](https://www.openstreetmap.org/copyright), [tinyworldmap](https://www.tinyworldmap.com)

Meinung von GN⁺

• tinyworldmap bietet eine leichtgewichtige Weltkarte, die sich für Offline-Karten oder Geräte mit geringer Leistung eignet. Es scheint eine Lösung zu sein, die bestehende Angebote wie OpenStreetMap ergänzen oder ersetzen kann
• Ein Vorteil ist, dass durch das optionale Weglassen von Grenzen, Städten usw. noch leichtere Versionen bereitgestellt werden. Je nach Bedarf können benutzerdefinierte Karten verwendet werden, was vielseitige Einsatzmöglichkeiten bietet
• Allerdings ist für den Offline-Betrieb eine technische Implementierung erforderlich, etwa durch Anpassungen am Service Worker, sodass Entwickler ein gewisses Maß an Erfahrung benötigen. Mehr detaillierte Anleitungen zu diesem Teil wären wünschenswert
• In Korea werden häufig Karten-APIs von Portalen wie Naver und Kakao verwendet; wenn eine Anbindung an solche Dienste möglich wäre und diese offline funktionieren könnten, dürfte es noch mehr Einsatzfälle geben
• Da Informationen zu wichtigen Städten weltweit enthalten sind, könnte es in Bereichen wie Reisen und Logistik nützlich sein. Ob Mehrsprachenunterstützung vorhanden ist, dürfte ebenfalls ein wichtiger Punkt sein

[GN⁺]

Hacker-News-Kommentare

• Der Autor meint, es wäre besser, mehr Daten in Küstenlinien und die Unterscheidung großer Metropolregionen zu investieren als in Details von Vororten von Detroit.
• Es wird darauf hingewiesen, dass den Küstenlinien Details fehlen, einige Orte in Großbritannien im Meer versunken sind, während Grönland und Nordkanada zu viele Stützpunkte einnehmen. Die Mercator-Projektion scheint bereits berücksichtigt zu sein, aber es wird auch angeregt, unbewohnte Regionen niedriger zu priorisieren.
• Ein Nutzer hat eine ähnliche offline-first, ultrakleine, vektorbasierte Karte erstellt, die sich auf Internationalisierung (i18n) in den UN-Amtssprachen mit Ausnahme von Spanisch konzentriert. Für Länder- und Städtenamen werden die bei den Vereinten Nationen offiziell deklarierten Bezeichnungen verwendet.
• Jemand stellte fest, dass die Bevölkerung der weltweit 10.000 größten Siedlungen bis auf 48.000 Einwohner hinabreicht, ist sich aber noch nicht sicher, ob das ein überraschender Wert ist.
• Die Idee, Geodaten als Pfade zu komprimieren, wird als beeindruckend bezeichnet, und auf Mobilgeräten lädt die Karte sehr schnell. Es gibt jedoch auch den Vorschlag, statt OSM Natural Earth-Daten zu verwenden, um die ODbL-Lizenz zu vermeiden, und ein Tool zum Umwandeln von Geodaten in Pfade einzubeziehen.
• Es gibt die Meinung, dass Hauptstädte unabhängig von ihrer Bevölkerungsgröße aufgenommen und besonders markiert werden sollten, sowie den Hinweis, dass diese Karte gut dazu passen könnte, auf Artenseiten zu beantworten, wo auf der Welt eine Art ungefähr zu finden ist.
• Es wird angemerkt, dass die Nutzung eines Service Workers für eine Offline-Version ungewöhnlich sei und ein kürzeres Tutorial nötig wäre, damit Menschen die Karte schnell installieren und verwenden können. Eine HTML-Datei oder ZIP-Datei mit einfach base64-kodierten Tiles könnte besser sein.
• Interessant ist, dass jüngere Änderungen bevorzugter Namen wie bei Tschechien und Mazedonien berücksichtigt wurden, bei der Türkei und Osttimor jedoch noch nicht.
• Das progressive Laden wirkt etwas instabil, sodass beim schnellen Zoomen oder Verschieben manchmal Tiles nicht angezeigt werden.