Karten

Vectormap Karten.

Die Hauptkarte bündelt alle Funktionen. Die Modulbeispiele zeigen einzelne Bausteine schlank und nachvollziehbar.

Hauptkarte

Alle Vectormap-Funktionen in einer Karte.

Modulübersicht

Alle Bausteine auf einen Blick.

Basiskarte base-map.js MapLibre, PMTiles und Vectormap-Style.
Zoom & Rotation navigation-control.js MapLibre-Navigation mit Zoom und Kompass.
Vollbild fullscreen-control.js Vollbildmodus für Karte oder Vergleich.
Standort geolocate-control.js Browser-Standort, wenn freigegeben.
Basemap-Auswahl basemap-control.js Wechsel zwischen Vectormap, swisstopo und weiteren Basemaps.
URL-State url-state.js Persistiert Kamera-, Modus-, Such- und Basemap-Zustand in der URL.
Share share-control.js Kopiert oder teilt den aktuellen Kartenlink direkt aus der Karte.
Suche search-map.js Orte und Adressen über swisstopo Search.
Vergleich compare-map.js Einzelkarte, Split-Vergleich und Doppelvergleich.
AV-WMS av-wms-map.js Zusatzkarte für die SOGI-Umfrage.

Modulbeispiele

Fokussierte Beispiele statt überladene Demos.

Basismodul

Basiskarte mit Zoom/Navigation und Vollbild.

  • URL: maps/base-map.html
  • Module: base-map.js + fullscreen-control.js + navigation-control.js

Suchmodul

Basiskarte mit swisstopo-Suche.

Style-Vergleich

Vectormap und swisstopo im Vergleich.

Zusatzkarte zur AV-WMS-Umfrage

Getrenntes Zusatzprodukt für die SOGI-Umfrage AV-WMS.

AV-WMS Umfragekarte

Sechs synchronisierte Karten: Vectormap, swisstopo und vier AV-WMS-Dienste.

Einbindung

base-map.js kommt zuerst. Danach folgen die gewünschten Controls in der Reihenfolge, in der sie innerhalb derselben MapLibre-Position erscheinen sollen. für ein einzelnes Modul lässt du die übrigen Script-Tags weg.

<div id="map" aria-label="Kartenansicht"></div>

<script>
  window.vectormapExampleConfig = {
    autoInit: true,
    styleUrl: "../styles/ch.vectormap.lightbasemap.json"
  };

  window.vectormapBasemapControlConfig = {
    position: "bottom-left",
    initialBasemapId: "vectormap.light"
  };
</script>

<script src="../assets/js/modules/base-map.js"></script>
<script src="../assets/js/modules/url-state.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/basemap-control.js"></script>
<script src="../assets/js/modules/share-control.js"></script>
<script src="../assets/js/modules/search-map.js"></script>