v-map

Appearance

v-mapWeb-Mapping-Komponenten

Provider-agnostische Web-Mapping-Komponentenbibliothek auf Basis von Stencil.js — OpenLayers, Cesium, Leaflet und Deck.gl hinter einem einheitlichen, deklarativen Web-Component-API.

Erste Schritte
Komponenten-API
GitHub

Provider-agnostisch

OpenLayers, Leaflet, Cesium und Deck.gl hinter einem einheitlichen Web-Component-API. Ein Providerwechsel ist eine einzige Prop — `flavour="ol"`, `"leaflet"`, `"cesium"` oder `"deck"`.

19 Web Components

Karten-Container, Layer-Gruppen, Layer-Control, Styling, Error-Toasts und ein reicher Layer-Katalog (OSM, XYZ, WMS, WFS, WCS, GeoJSON, WKT, GeoTIFF, 3D-Tiles, Terrain, Deck.gl-Scatterplot, Google Tiles).

Deklaratives Building

Komplette Karten und Layer aus JSON oder YAML konfigurieren — `` erzeugt Layer-Gruppen, Layer und Styles automatisch aus einer Konfiguration.

Styling mit GeoStyler

`` mit Unterstützung für GeoStyler-JSON, SLD, mapbox-gl, QGIS und lyrx — providerübergreifend wiederverwendbar.

Error-Toasts ohne JavaScript

`` lauscht auf das `vmap-error` Event und rendert Fehler als Toasts im Karten-Container — kein Listener-Code, kein Boilerplate.

Vollständige TypeScript-Typen

Generierte Komponenten-Typen, JSX-Definitionen für React/Vue/Svelte/Stencil und eine durchgängig getypte API.

Touch-optimiert

Funktioniert auf Desktop und mobilen Geräten — Pinch-Zoom, Pan und Touch-Gesten werden über alle Provider konsistent unterstützt.

Layer-Matrix

Übersicht aller Layer-Typen und welche Provider sie unterstützen. Findet auf einen Blick die richtige Provider-Layer-Kombination.

Zur Matrix

Open Source (MIT)

Entwickelt mit Stencil.js, getestet mit Vitest, dokumentiert mit VitePress. Pull Requests und Issues willkommen.

GitHub Repository

Live-Demo ​

Eine echte v-map-Instanz, direkt auf dieser Doku-Seite. Provider: OpenLayers, Basemap: OpenStreetMap. <v-map-error> rendert Lade-/Laufzeitfehler automatisch oben rechts als Toast — kein JavaScript nötig.

Schnellstart ​

Installation:

bash
pnpm add @npm9912/v-map
# plus die gewünschte Engine
pnpm add ol

Im HTML einbinden:

html
<script type="module"
        src="./node_modules/@npm9912/v-map/dist/v-map/v-map.esm.js"></script>

<v-map flavour="ol">
  <v-map-layergroup group-title="Basiskarten" basemapid="OSM-BASE">
    <v-map-layer-osm id="OSM-BASE" label="OpenStreetMap"></v-map-layer-osm>
  </v-map-layergroup>
</v-map>

Mehr Details im Getting-Started-Guide.