Vektorkarten (Beta)

Sie können unsere Vektorkarten bereits mit MapLibre GL JS in Ihre eigene Webanwendung einbinden und testen. Der Dienst befindet sich derzeit in der Betaphase.

Bei Vektorkacheln zeichnet Ihr Browser die Karte aus den Kartendaten anhand eines mitgelieferten Kartenstils. Dies ermöglicht flüssiges Zoomen und eine scharfe Darstellung von Beschriftungen und Linien, auch auf hochauflösenden Bildschirmen.

Wie bei unseren Rasterkarten decken die OpenStreetMap-Daten die ganze Welt ab und werden kontinuierlich aktualisiert. Wir stellen die Karten in unserem Standard-Kartenstil in Farbe und in einer Graustufenvariante bereit.

Zugang und Kosten

Mit einem aktiven kostenpflichtigen Plan oder während Ihrer kostenlosen 14-tägigen Testphase können Sie die Vektorkarten in der Betaphase kostenlos nutzen. Die Anfragen für Vektorkacheln werden in Ihrer Nutzungsstatistik erfasst, während der Betaphase jedoch nicht auf Ihr monatliches Kachelkontingent angerechnet.

Falls Sie nach Ablauf Ihrer kostenlosen Testphase weiterhin Zugang benötigen, kontaktieren Sie uns bitte.

Erste Schritte

1. Registrieren Sie sich oder melden Sie sich in Ihrem Konto an.
2. Öffnen Sie den Reiter Vektorkacheln im Administrationsbereich und bestätigen Sie Ihre Teilnahme an der Betaphase.
3. Erstellen Sie einen API-Key für Vektorkacheln und geben Sie die Domains Ihrer Webanwendung an. Für Vektorkacheln benötigen Sie einen separaten API-Key, unabhängig von Ihren bestehenden API-Keys.
4. Kopieren Sie die URL des Kartenstils und verwenden Sie diese wie unten gezeigt in Ihrer Anwendung.

Karten mit MapLibre GL JS einbinden

Wir stellen Kartenstile bereit, die mit MapLibre GL JS kompatibel sind. Verwenden Sie eine der folgenden URLs und ersetzen Sie ihr-api-key durch Ihren API-Key für Vektorkacheln:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@^5.24.0/dist/maplibre-gl.css" />
    <script src="https://unpkg.com/maplibre-gl@^5.24.0/dist/maplibre-gl.js"></script>
    <script type='text/javascript'>

    function initMap() {
        const map = new maplibregl.Map({
            container: 'map',
            center: [8.22, 53.14],
            zoom: 13,
            style: 'https://maps.omniscale.net/v2/your-api-key/style.default/style.json'
        });
    }
    </script>
  </head>
  <body onload='initMap()'>
    <div id='map' style='height: 400px; width: 400px;'></div>
  </body>
</html>

Fragen und Rückmeldungen

Wir freuen uns über Ihre Rückmeldungen zur Beta. Bei Fragen oder Problemen kontaktieren Sie uns bitte. Bei Darstellungsproblemen geben Sie den Ort, die Zoomstufe und den verwendeten Browser an und fügen Sie nach Möglichkeit einen Screenshot bei.