Interaktive Karte

OpenStreetMap-basierte Kartendaten gibt es bei Protomaps
Höhendaten gibt es bei Maptherhorn
Zum herumspielen sollte man sich nicht gleich die Daten für den gesamten Planeten ziehen.
Daher erst einmal die pmtiles-CLI installieren.
Die Daten für die Bounding-Box des Kartenausschnitts kann man z.B. hier bestimmen. Dazu nach der Auswahl unten links by Copy&Paste im Dropdown 'CSV' auswählen.
Ich habe mir dann mit folgenden Befehlen eine Ausschnitt beider Datensätze heruntergeladen:
- Kartendaten: pmtiles extract –bbox=3.9,42.8,17.63,60.57 https://build.protomaps.com/20260815.pmtiles central_europe.pmtiles
- Höhendaten: pmtiles extract –bbox=3.9,42.8,17.63,60.57 https://download.mapterhorn.com/planet.pmtiles central_europe_dem.pmtiles

(npm muss installiert sein)
Vite installieren: npm create vite@latest
- Projekttyp „Vanilla“
In das Projektverzeichnis wechseln
MapLibre GL installieren: npm install maplibre-gl

Inhalt der main.js

import {Map, setWorkerUrl} from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';

setWorkerUrl(workerUrl);

const map = new Map({
    container: 'map', // container id
    style: 'https://demotiles.maplibre.org/globe.json', // style URL
    center: [0, 0], // starting position [lng, lat]
    zoom: 1 // starting zoom
});

Inhalt der index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3dmap</title>
    <style>
      body { margin: 0; padding: 0; }
      html, body, #map { height: 100%; }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

http://localhost:5173/ aufrufen - es sollte ein Weltkugel mit Ländergrenzen zu sehen sein, mit dem interagiert werden kann

Interaktive Karte

Kartendaten

Erste Schritte