itstiles.com

Vektorkarten · OpenStreetMap · Frankfurt am Main

Map Tiles kostenlos –
in Deutschland gehostet.

Eine vollständige Weltkarte für Ihre Website. Ohne Konto, ohne API-Key, ohne Cookies. Einfach URL einsetzen.

In 1 Minute einbinden Anleitung lesen ↗
Stil

48,5216° N · 9,0576° O · Zoom 12,5Karte wird geladen …

Legende

Was Sie bekommen

Einbinden

In 1 Minute eingebunden

Kopieren, einfügen, Koordinaten anpassen. Die Karte lädt nur die Kacheln, die gerade zu sehen sind.

HTML · jede Website

Ohne Build-Schritt. Fehler erscheinen direkt in der Karte.

<link rel="stylesheet" href="https://itstiles.com/assets/maplibre-gl.css">
<div id="karte" style="height:420px"></div>
<script type="module">
  import { createMapViewer } from "https://itstiles.com/assets/embed.js";
  createMapViewer({
    container: "karte",
    manifestUrl: "https://itstiles.com/maps/light.json",
    center: [9.0576, 48.5216], // [Länge, Breite]: Tübingen
    zoom: 13,
    cooperativeGestures: true,
  }).catch((error) => console.error(error));
</script>

npm · React, Next.js, Vite

Mit eigenem MapLibre. In React im useEffect erstellen und mit map.remove() aufräumen.

// npm i -E [email protected] [email protected]
import maplibregl from "maplibre-gl";
import { Protocol } from "pmtiles";
import "maplibre-gl/dist/maplibre-gl.css";

maplibregl.addProtocol("pmtiles", new Protocol().tile); // einmal pro Seite

export const map = new maplibregl.Map({
  container: "karte", // braucht eine Höhe, z. B. 420px
  style: "https://itstiles.com/styles/protomaps/light.json",
  center: [9.0576, 48.5216], // [Länge, Breite]: Tübingen
  zoom: 13,
  cooperativeGestures: true,
});

Die eine Bedingung: Lassen Sie die Kartenzuschreibung sichtbar. Sie enthält automatisch den Link auf itstiles.com sowie Protomaps und OpenStreetMap. Details in den Nutzungsbedingungen.

Vollständige Anleitung: eigene Daten, Next.js, CSP, Dark Mode ↗ Eigene Kartenstile gestalten ↗