🧩
Echte Web Component
<map0-viewer> ist ein Standard-Custom-Element mit eigenem Shadow DOM. Es lässt sich in ein CMS, Next.js, Vue oder eine einfache HTML-Seite einbinden. Seine Styles sind von der umgebenden Seite getrennt.
~34 KB
gzip beim Seitenaufruf, bevor die Karte sichtbar wird
118
Konfigurationseinträge in einem JSON-Dokument, anhand eines Schemas geprüft
10
Quelltypen, von WMS, WFS und OGC API Features bis PMTiles, COG und GeoParquet
24
Demos mit öffentlichen Live-Daten und -Diensten
Warum map0
Kartenfunktionen zum direkten Einbetten.
map0 ergänzt MapLibre um einen Layerbaum, Legenden, Popups und Druckwerkzeuge. Eine JSON-Konfiguration definiert die Karte, eine Web Component zeigt sie innerhalb der bestehenden Website an.
⌨️
Alles ist Konfiguration
Hintergrundkarten, Overlays, Popups, Legenden, Drucklayout, Gestaltung und Sprachen werden in einem JSON-Dokument konfiguriert. Es kann als Datei oder in einem CMS-Feld gespeichert werden.
🪶
Schlank auf der Seite
Eine eingebettete Karte lädt zunächst rund 34 KB gzip. Karten-Engine und MapLibre werden geladen, sobald die Karte in die Nähe des sichtbaren Bereichs kommt. Mess-, Druck- und Koordinatenwerkzeuge folgen bei der ersten Nutzung.
📱
Für jeden Bildschirm
Die Oberfläche passt sich dem Kartencontainer an, vom schmalen Smartphone-Bildschirm bis zur breiten Desktop-Ansicht. Bedienelemente unterstützen Touch und Maus. Das Farbschema kann der Einstellung des Betriebssystems folgen.
Schnellstart
Eine Hintergrundkarte und ein WMS-Overlay in einer Datei.
Ein Script-Tag registriert das Custom Element. Anschließend wird das Element mit seiner Konfiguration eingefügt. Das Beispiel unten wird aus der Karte daneben erzeugt.
die komplette Seite
Dieses Beispiel kann in eine HTML-Seite übernommen werden. Es lädt eine festgelegte Version vom CDN, da sich das Konfigurationsformat vor Version 1.0 noch ändern kann. Der optionale Eintrag $schema ermöglicht Autovervollständigung und Validierung im Editor, wenn die Konfiguration in einer eigenen JSON-Datei liegt.
<script type="module" src="https://cdn.jsdelivr.net/npm/map0-viewer@0.3.0/dist/map0.js"> </script> <map0-viewer style="height:520px"> <script type="application/json"> { "$schema": "https://map0.net/schema/v1.json", "version": 1, "map": { "center": [16.3689, 48.2015], "zoom": 15.2 }, "basemaps": [ { "type": "style", "url": "https://mapsneu.wien.gv.at/basemapv/bmapv/3857/resources/styles/root.json" } ], "layers": [ { "type": "wms", "title": "Tree register", "url": "https://data.wien.gv.at/daten/geo", "layers": "BAUMKATOGD", "minZoom": 15, "info": { "format": "application/json" } } ] } </script> </map0-viewer>
das Ergebnis
Eine interaktive Karte mit der Konfiguration aus dem Beispiel.
Was in diesen paar Zeilen steckt
Der Viewer bietet Zoom, Kompass, Maßstab, Vollbild, Standortbestimmung, Globusansicht, Quellenangaben, einen Layerbaum mit Deckkraftreglern, Legenden, Objektinformationen, Koordinaten, Messen, Druck und Export. Das Farbschema folgt standardmäßig dem Betriebssystem.
Drei Wege, die Config zu übergeben
Die Konfigurationsquellen werden in dieser Reihenfolge geprüft: die JavaScript-Property config, das Attribut config-src mit Verweis auf eine JSON-Datei und ein <script type="application/json">-Element innerhalb des Viewers, wie im Beispiel oben.
Oder selbst hosten
Mit npm install map0-viewer installieren, node_modules/map0-viewer/dist auf den Webserver kopieren und das src des Scripts darauf setzen. Die Dateien müssen im selben Ordner bleiben, da Module und MapLibre-Worker über relative Pfade geladen werden. Details stehen im README.
Alles inklusive
Kartenwerkzeuge über JSON konfigurieren.
Diese Werkzeuge sind im Viewer enthalten und werden über JSON aktiviert und eingestellt. Jede Kachel verlinkt auf eine Demo mit ihrer Konfiguration.
🗺️ Kartendienste und Datendateien
WMS mit Objektabfragen, WMTS aus Capabilities, WFS und OGC API Features mit seitenweisem Laden, Vektorkacheln und PMTiles, GeoJSON mit Clustering sowie GeoParquet, das im Browser dekodiert wird.
Demos: Datenquellen →🌳 Layerbaum
Layer gruppieren, Sichtbarkeit und Deckkraft einstellen, Status und Zoomgrenzen anzeigen, auf einen Layer zoomen und Metadaten öffnen. Nutzer können WMS-, WMTS- und GeoJSON-URLs hinzufügen oder lokale GeoJSON-, KML- und GPX-Dateien importieren.
Demo: Layer hinzufügen →💬 Objektinformationen
Attribute in Vorlagen mit {{placeholders}} oder in Tabellen anzeigen. Hover-Tooltips ergänzen, Treffer mehrerer Layer in einem Popup zusammenfassen und ausgewählte Objekte hervorheben. Das Popup-HTML wird vor der Anzeige bereinigt.
📊 Legenden am Bildschirm und auf Papier
Dienst-Legenden per GetLegendGraphic, Farbfelder direkt aus dem Style abgeleitet, oder von Hand gepflegte Einträge, wenn der Dienst keine brauchbare Legende liefert.
Demo: Legenden →🖨️ Drucken & Export
Hochauflösende PNG-Bilder oder PDF-Seiten in A4 und A3 exportieren. Titel, Legende, Maßstab, Quellenangaben und Datum lassen sich konfigurieren. Die Ausgabe wird im Browser erstellt.
Demo: Drucken & Export →🔍 Orts- und Adresssuche
Suche mit Vorschlägen über Photon oder Nominatim, öffentlich oder selbst gehostet. Eigene Geocoder lassen sich über eine URL-Vorlage konfigurieren. Auch Koordinaten werden als Eingabe unterstützt.
Demo: Suche →📏 Messen und Koordinaten
Strecken und Flächen mit verschiebbaren Stützpunkten messen. Per Rechtsklick Koordinaten in WGS84, Gauß-Krüger und UTM anzeigen und kopieren.
Demo: Messen →🔗 Teilen und Globusansicht
Kartenausschnitt, Hintergrundkarte, Layer-Einstellungen und per URL hinzugefügte Dienste über einen Link teilen. Die Globusansicht lässt sich als weitere Kartenprojektion in der Konfiguration aktivieren.
Demo: Teilen & Permalink →Performance
Geladen wird erst, wenn die Karte ins Bild kommt.
map0 lädt in drei Stufen: die Seitenkomponente, die Karten-Engine und die bei Bedarf genutzten Werkzeuge. Automatische Prüfungen überwachen das Größenlimit für den ersten Download.
- Seitenaufruf
- ~34 KB gz
- Karte erreicht den Viewport
- + ~317 KB gz
- Erste Nutzung eines Features
- je 0,2–136 KB gz
Was das praktisch bedeutet
Zunächst lädt die Seite das Custom Element und Lit. Das Laden der Karte beginnt 300 px vor dem sichtbaren Bereich. Mehrere Karten nutzen dieselben Engine-Dateien. Eine Karte in einem ausgeblendeten Reiter wartet, bis dieser angezeigt wird.
Jedes Feature ist ein eigener Chunk
Capabilities-Parsing, proj4, PMTiles, der Druck-Renderer und der Dialog zum Hinzufügen von Layern sind eigene Dateien. Eine Karte ohne Messwerkzeug lädt auch keinen Mess-Code.
Und gezeichnet wird auf der GPU.
MapLibre stellt die Karte mit WebGL 2 auf dem Grafikprozessor dar. Vektorgeometrien und Beschriftungen werden im Browser gezeichnet; Rasterdienste liefern ihre eigenen Bilder.
🎞️
Stufenlos statt in Sprüngen
Stufenlos zoomen, die Karte verschieben oder die Ansicht drehen und neigen. MapLibre aktualisiert die Darstellung mit jeder Kamerabewegung.
🏷️
Kartografie zur Laufzeit
MapLibre platziert Beschriftungen und prüft beim Zeichnen auf Überschneidungen. Style-Ausdrücke steuern Farben, Strichbreiten und Filter für Vektorobjekte. Änderungen können bereits geladene Vektordaten weiterverwenden.
🌍
Globusprojektion
Die Globusansicht wird mit einem Konfigurationseintrag aktiviert. MapLibre stellt dieselben Daten und Styles mit der Globusprojektion dar.
Config-first
Ein Dokument. Schema-validiert. Vererbbar.
Dies ist die Konfiguration der Karte oben auf der Seite. Sie wird aus derselben Datei gelesen, die auch der Viewer verwendet.
{
"$schema": "https://map0.net/schema/v1.json",
"version": 1,
"meta": { "title": "Vienna, three sources, one document" },
"map": { "center": [16.3725, 48.2083], "zoom": 12.2, "cooperativeGestures": true },
"basemaps": [
{
"id": "grau",
"title": "Grey",
"type": "raster",
"url": "https://mapsneu.wien.gv.at/basemap/bmapgrau/normal/google3857/{z}/{y}/{x}.png",
"attribution": "© basemap.at",
"default": true
},
{
"id": "bmapv",
"title": "basemap.at",
"type": "style",
"url": "https://mapsneu.wien.gv.at/basemapv/bmapv/3857/resources/styles/root.json"
},
{
"id": "ortho",
"title": "Aerial",
"type": "raster",
"url": "https://mapsneu.wien.gv.at/basemap/bmaporthofoto30cm/normal/google3857/{z}/{y}/{x}.jpeg",
"maxZoom": 19,
"attribution": "© basemap.at"
}
],
"layers": [
{
"id": "widmung",
"type": "wms",
"title": "Zoning plan (WMS)",
"url": "https://data.wien.gv.at/daten/geo",
"layers": "GENFLWIDMUNGOGD",
"visible": false,
"opacity": 0.55,
"info": { "format": "application/json" },
"legend": "auto",
"metadata": {
"url": "https://www.data.gv.at/katalog/dataset?q=Fl%C3%A4chenwidmung+Wien",
"title": "Dataset on data.gv.at"
},
"attribution": "Stadt Wien, data.wien.gv.at"
},
{
"id": "gewaesser",
"type": "vector",
"title": "Water bodies (vector tiles)",
"url": "https://mapsneu.wien.gv.at/basemapv/bmapv/3857/",
"sourceLayer": "GEWAESSER_F_GEWF",
"style": [
{
"type": "fill",
"paint": { "fill-color": "#0ea5e9", "fill-opacity": 0.6 }
}
],
"legend": [{ "label": "Water body", "color": "#0ea5e9" }],
"attribution": "© basemap.at"
},
{
"id": "brunnen",
"type": "geojson",
"title": "Drinking fountains (GeoJSON)",
"data": "https://data.wien.gv.at/daten/geo?service=WFS&request=GetFeature&version=1.1.0&typeName=ogdwien:TRINKBRUNNENOGD&srsName=EPSG:4326&outputFormat=json",
"style": {
"circle-color": "#0e7490",
"circle-radius": 4,
"circle-stroke-color": "#ffffff",
"circle-stroke-width": 1.2
},
"popup": {
"title": "{{BASIS_TYP_TXT}}",
"fields": [{ "key": "BEZIRK", "label": "District" }]
},
"legend": [
{
"label": "Drinking fountain",
"color": "#0e7490",
"shape": "circle"
}
],
"attribution": "Stadt Wien, data.wien.gv.at"
}
],
"search": {
"provider": "photon",
"country": "AT",
"coordinates": true
},
"theme": { "primary": "#0e7490", "radius": "md" }
}Eine Basiskonfiguration wiederverwenden
Die Einstellungen jeder Karte stehen in einem JSON-Dokument. Über extends lassen sich gemeinsame Vorgaben aus einer Basiskonfiguration übernehmen und gezielt überschreiben.
Konfigurationsfehler finden
Der Viewer prüft die Konfiguration vor der Darstellung. Fehler erscheinen direkt im Viewer mit dem JSON-Pfad der betroffenen Einstellung.
$.basemaps at least one basemap is required, e.g. { "type": "style", "url": "…" }
$.layers[2].url a "wms" layer needs a "url"
$.layers[2].layers a "wms" layer needs "layers" (WMS LAYERS parameter)Im eigenen Look, in der eigenen Sprache
Primärfarbe, Eckenradius, Schrift und Hell/Dunkel kommen aus der Config oder aus den CSS-Variablen der umgebenden Seite. Die Oberfläche gibt es auf Deutsch und Englisch, und jeder einzelne Text lässt sich pro Sprache überschreiben.
Einordnung
map0 im Vergleich
Geoportale, Portal-Frameworks und Kartenbibliotheken erfüllen unterschiedliche Aufgaben. map0 bietet einen konfigurierbaren Viewer zum Einbetten in bestehende Websites. Die Tabelle vergleicht diese Ansätze.
| Aspekt | Geoportal-Plattform | Portal-Framework | Karten-Library | map0 |
|---|---|---|---|---|
| Was es ist | Eine Anwendung, die man hostet | Eine konfigurierbare App, die man aufsetzt | Eine Rendering-Engine | Eine Komponente auf der eigenen Seite |
| Einbettung | Ein iframe | Eigene Seite oder ein iframe | Was immer man baut | Script-Tag + ein Element |
| Konfiguration | Backend oder Datenbank | Mehrere Dateien und ein Register | Quellcode | Ein JSON-Dokument |
| Server nötig | Ja | Nein, aber Build-Setup | Nein | Statisches Hosting genügt |
| Layerbaum, Legenden, Druck | Inklusive | Inklusive | Selbst bauen | Inklusive |
| Wer die Karte ändert | Jemand mit Serverzugriff | Ein Entwickler | Ein Entwickler | Jeder mit Zugriff aufs Textfeld |
| Look & Feel | Das des Portals | Das des Frameworks | Selbst gebaut | Passt sich der Seite an |
Was als Nächstes kommt
Geplante Funktionen
map0 wird aktiv weiterentwickelt. Die folgenden Funktionen sind für künftige Versionen geplant.
Fragen und Antworten
Die Kurzfassung.
Die häufigsten Fragen vor der ersten eingebetteten Karte. Details stehen in den Demos und im README.
Was ist map0?
map0 ist ein Open-Source-Webkarten-Client unter MIT-Lizenz. Er ist eine Web Component auf Basis von MapLibre GL JS: Ein Script-Tag und ein JSON-Dokument ergeben auf jeder Webseite eine vollständige Karte mit Hintergrundkarten, Layerbaum, Legenden, Feature-Info, Suche, Messen und Druck. Ohne iframe, ohne Backend, ohne Build-Step.
Welche Dienste und Datenformate kann eine Karte anzeigen?
WMS, WMTS, WFS und OGC API Features, Vector Tiles als MVT oder PMTiles, GeoJSON, GeoParquet und Cloud Optimized GeoTIFF. Hintergrundkarten sind MapLibre-Style-URLs oder Raster-Kacheldienste. Besucher können WMS- und WMTS-Dienste per URL hinzufügen und GeoJSON, KML und GPX als URL oder lokale Datei einbringen.
Wie wird eine Karte in eine Website oder ein CMS eingebettet?
Das Paket map0-viewer wird mit einem Module-Script-Tag geladen, von einem CDN wie jsDelivr oder nach npm install map0-viewer vom eigenen Server. An der gewünschten Stelle steht ein <map0-viewer>-Element. Die Konfiguration kommt als eingebettetes JSON-Script, über ein config-src-Attribut mit dem Pfad einer JSON-Datei oder als JavaScript-Property. Als Standard-Custom-Element funktioniert das in reinem HTML, in jedem CMS-Feld, das HTML erlaubt, und in jedem Framework.
Braucht es einen Server, eine Datenbank oder einen Build-Step?
Nein. Statisches Hosting genügt. Die Karte wird im Browser gerendert und spricht direkt mit den Kartendiensten, die deshalb CORS-Header senden müssen. map0 selbst sendet nichts: keine Analytics, keine Cookies, kein Tracking.
Wie wird eine Karte konfiguriert?
In einem einzigen JSON-Dokument, geprüft gegen das veröffentlichte JSON Schema unter map0.net/schema/v1.json. Hintergrundkarten, Layer, Popups, Legenden, Suche, Messen, Druck, Theme und Sprachen sind Schlüssel in diesem Dokument; über extends erbt eine Karte von einer gemeinsamen Basis-Config. Fehler werden vor dem Rendern gemeldet, mit dem JSON-Pfad der betroffenen Stelle. Im Playground lässt sich eine Config bearbeiten, die Karte folgt sofort.
Wie verhält sich map0 zu MapLibre GL JS?
MapLibre ist die Rendering-Engine in map0. map0 ergänzt die Anwendung darum herum: Layerbaum, Legenden, Popups, Suche, Messen, Druck, Permalinks und Theming, gesteuert über die Config statt über Code. MapLibre-Style-URLs dienen unverändert als Hintergrundkarte, Vektor-Layer werden mit der MapLibre-Style-Spezifikation gestylt.
Ist map0 kostenlos, auch für kommerzielle Nutzung?
Ja. map0 steht unter MIT-Lizenz und darf kostenlos genutzt, verändert und weitergegeben werden, in kommerziellen wie in öffentlichen Projekten. Der Quellcode liegt auf GitHub. Entwickelt wird map0 von der Spatial Focus GmbH in Wien.
Ist map0 produktionsreif?
map0 ist ein 0.x-Release. Alles auf dieser Seite läuft gegen Live-Dienste, und die Demos dieser Site laufen darauf. JavaScript-API und Config-Format sind aber noch Entwürfe und können sich bis 1.0 ohne Deprecation-Pfad ändern. Eine exakte Version pinnen und beim Update das Changelog lesen.
Welche Sprachen, Bildschirme und Themes werden unterstützt?
Die Oberfläche gibt es in Deutsch und Englisch, jeder String lässt sich pro Sprache aus der Config überschreiben. Die Komponente ist responsiv von 320 px bis 4K, zeigt Feature-Info auf kleinen Bildschirmen als Bottom Sheet und folgt dem Hell/Dunkel-Modus des Betriebssystems. Primärfarbe, Eckenradius und Schrift kommen aus der Config oder aus den CSS Custom Properties der Seite.
Demos
24 Demos. Echte Dienste. Und zu jeder die exakte Config.
Jede Demo behandelt ein Thema und enthält eine interaktive Karte, eine Erklärung und die zugehörige Konfiguration. Die Funktionen lassen sich direkt ausprobieren und die Einstellungen übernehmen.