Karten

Modulare Webkarten mit MapLibre.

Jede Karte ist eine eigene HTML-Datei und bindet nur die Module ein, die sie wirklich braucht. So wächst die Karte Schritt für Schritt.

Referenz: MapLibre GL JS Doku.

  • Basismodul: MapLibre + PMTiles + Style
  • Module: Jede Funktion als eigene JS-Datei
  • Vorschau: Live-Karte pro Kachel
  • Versionen: Klar dokumentiert je Karte

Karten

Die Vorschau ist interaktiv und unterstützt den Vollbildmodus direkt in jeder Karte.

Basismodul: MapLibre + PMTiles

Minimaler Einstieg mit dem Style ch.vectormap.lightbasemap.json und PMTiles-Quelle.

Vergleich: AV-WMS in sechs Karten

Sechs synchronisierte Karten vergleichen Vectormap, swisstopo und vier AV-WMS-Dienste in einem responsiven Grid.

  • MapLibre GL JS: 5.23.0
  • PMTiles: 4.4.1
  • Quellen: Vectormap / swisstopo / vier AV-WMS-Dienste
  • URL: maps/av-wms.html
  • Module: base-map.js + fullscreen-control.js + navigation-control.js + geolocate-control.js + av-wms-map.js + search-map.js

Struktur der Module

Jede Karte hat eine eigene HTML-Datei im Ordner maps/ und bindet Module aus assets/js/modules/ ein.

<script>
window.vectormapExampleConfig = { autoInit: true };
</script>
<script src="../assets/js/modules/base-map.js"></script>
<script src="../assets/js/modules/fullscreen-control.js"></script>
<script src="../assets/js/modules/navigation-control.js"></script>
<script src="../assets/js/modules/geolocate-control.js"></script>

<script src="../assets/js/modules/base-map.js"></script>
<script src="../assets/js/modules/fullscreen-control.js"></script>
<script src="../assets/js/modules/search-map.js"></script>
<script src="../assets/js/modules/navigation-control.js"></script>
<script src="../assets/js/modules/geolocate-control.js"></script>

<script>
window.vectormapExampleConfig = { autoInit: false };
window.vectormapCompareConfig = { ... };
</script>
<script src="../assets/js/modules/base-map.js"></script>
<script src="../assets/js/modules/fullscreen-control.js"></script>
<script src="../assets/js/modules/search-map.js"></script>
<script src="../assets/js/modules/navigation-control.js"></script>
<script src="../assets/js/modules/geolocate-control.js"></script>
<script src="../assets/js/modules/compare-map.js"></script>

<script>
window.vectormapExampleConfig = { autoInit: false };
window.vectormapAvWmsConfig = { ... };
</script>
<script src="../assets/js/modules/base-map.js"></script>
<script src="../assets/js/modules/fullscreen-control.js"></script>
<script src="../assets/js/modules/navigation-control.js"></script>
<script src="../assets/js/modules/geolocate-control.js"></script>
<script src="../assets/js/modules/av-wms-map.js"></script>
<script src="../assets/js/modules/search-map.js"></script>

Neue Karten hinzufügen

Lege eine neue HTML-Datei in maps/ an und binde die gewünschten Module aus assets/js/modules/ ein. Die Übersicht lässt sich dann um eine weitere Karte ergänzen.