SmartMaps GL JS

SmartMaps GL JS ist die weltweit einsetzbare Vektorkarten-Basis zur Integration interaktiver und anpassbarer Karten in Ihre Webanwendungen. Aufbauend auf MapLibre GL bietet SmartMaps GL JS eine leistungsstarke und flexible Lösung für Kartenrendering und die Visualisierung von Standortdaten. Ob Sie Einsteiger oder erfahrener Entwickler sind, diese Dokumentation vermittelt Ihnen das Wissen und die Werkzeuge, die Sie benötigen, um das volle Potenzial von SmartMaps GL auszuschöpfen. Sie finden detaillierte Erklärungen, Codebeispiele und Best Practices, die Ihnen helfen, beeindruckende, interaktive Karten zu erstellen, die Ihre Webanwendungen aufwerten.

Erste Schritte

Um mit SmartMaps GL JS zu starten, benötigen Sie einen API-Key. Registrieren Sie sich kostenlos und wählen Sie den Plan, der Ihren Anforderungen am besten entspricht.

Bevor Sie live gehen

Lesen Sie API-Keys & Sicherheit (beschränken Sie Ihren Key auf Ihre Domain) und Attribution & Lizenzierung (die © SmartMaps © OpenStreetMap contributors Attribution ist erforderlich).

Binden Sie als Nächstes die SmartMaps GL JS-Bibliothek in Ihre Webseite ein:

<script src="https://cdn.smartmaps.cloud/packages/smartmaps/smartmaps-gl/v2/umd/smartmaps-gl.min.js"></script>

Initialisieren der Karte

Erstellen Sie ein Container-Element für die Karte und initialisieren Sie eine neue smartmapsgl.Map-Instanz:

<div id="map"></div>
<script>
    const map = new smartmapsgl.Map({
        apiKey: '[INSERT API-KEY]',
        container: 'map',
        center: { lat: 49.0216, lng: 8.4393 },
        zoom: 12,
        style: smartmapsgl.MapStyle.AUTO
    });
</script>

Kartenstile

SmartMaps GL JS bietet verschiedene vordefinierte Kartenstile:

Essential
Light
Dark
Grey
Accessible
Satellite

Weitere Details finden Sie in der Stil-Dokumentation.

Controls

Erweitern Sie Ihre Karte mit praktischen Controls:

Fullscreen: Karte im Vollbildmodus anzeigen
Geolocation: Position des Nutzers ermitteln
Globe: Kartenprojektion auf Globusansicht ändern
Language: Sprache basierend auf Nutzer- oder Browsereinstellungen ändern
Navigation: Zoom- und Rotations-Controls
Scale Control: Entfernungen auf der Karte anzeigen
Terrain: 3D-Terrain und Hillshading aktivieren

Marker und Pop-ups

Markers: Benutzerdefinierte Marker an bestimmten Positionen platzieren
Popups: Informationen beim Klicken auf Marker oder Kartenelemente anzeigen

Datenquellen

Unterstützte Datenquellen für vielseitiges Kartenrendering:

GeoJSON: GeoJSON-Daten laden und anzeigen
Vector Tiles: Effizientes Rendering von Vector-Tiles
Raster Tiles: Raster-Tile-Layer integrieren
Image Overlays: Statische Bilder als Overlays hinzufügen

Layer und Stile

Passen Sie das Erscheinungsbild der Karte mit Layern und Stilen an:

Custom Layers: Eigene Layer zur Datenvisualisierung erstellen
Layer Filters: Features basierend auf Attributen ein- oder ausblenden
Style Specification: Das visuelle Erscheinungsbild mithilfe der MapLibre-Style-Spezifikation anpassen

Integration

Einfache Karte

Dieses Beispiel zeigt, wie eine Karte in einen DIV-Container geladen wird. Die Mittelpunktkoordinate bestimmt zusammen mit der Zoomstufe den Kartenausschnitt. Kopieren Sie einfach den Code in Ihre Anwendung und fügen Sie Ihren API-Key hinzu.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="https://cdn.smartmaps.cloud/packages/smartmaps/smartmaps-gl/v2/umd/smartmaps-gl.min.js"></script>
        <style>
            html,
            body {
                height: 100vh;
                margin: 0;
                padding: 0;
            }
            #map {
                height: 100%;
            }
        </style>   
    </head>

    <body>
        <div id="map"></div>
        <script>
            const map = new smartmapsgl.Map({
                apiKey: "[INSERT API-KEY]",
                container: "map",
                center: { lat: 49.021, lng: 8.4393 },
                zoom: 12,
                style: smartmapsgl.MapStyle.LIGHT
            });
        </script>
    </body>
</html>

Mit SmartMaps GL JS können Entwickler einfach dynamische und interaktive Karten erstellen. Ob Sie eine einfache Karte oder eine komplexe Geodatenanwendung entwickeln, SmartMaps GL JS bietet Ihnen die notwendigen Werkzeuge für eine effektive Kartenintegration.

Integration mit anderen GL-Bibliotheken

SmartMaps ermöglicht eine nahtlose Integration mit gängigen Mapping-Bibliotheken. Nachfolgend finden Sie Beispiele, die zeigen, wie Sie Leaflet, MapLibre GL und OpenLayers mit SmartMaps-Stilen verwenden. Für die native mobile Integration (iOS & Android) siehe den Abschnitt Mobile-Integration.

Verwenden Sie die untenstehenden Tabs, um die Integration mit Leaflet, MapLibre GL und OpenLayers zu erkunden.

LeafletMapLibre GLOpenLayers

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link
      rel="stylesheet"
      href="https://cdn.smartmaps.cloud/packages/leaflet/leaflet-1.9.4.css"
    />
    <script src="https://cdn.smartmaps.cloud/packages/leaflet/leaflet-1.9.4.min.js"></script>
    <style>
      #map { height: 400px; }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      const map = L.map('map').setView([51.1657, 10.4515], 6);

      L.tileLayer(
        'https://tiles.smartmaps.cloud/tiles/v1/smartmaps/light/{z}/{x}/{y}.webp?apiKey=[INSERT API-KEY]',
        { attribution: '© <a href="https://smartmaps.net/copyright" target="_blank">SmartMaps</a> | © <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap contributors</a>' }
      ).addTo(map);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.smartmaps.cloud/packages/maplibre-gl/5.1.1/maplibre-gl.js"></script>
    <link
      href="https://cdn.smartmaps.cloud/packages/maplibre-gl/5.1.1/maplibre-gl.css"
      rel="stylesheet"
    />
    <style>
      #map { height: 400px; }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      const map = new maplibregl.Map({
        container: 'map',
        style: 'https://tiles.smartmaps.cloud/styles/v1/smartmaps/light/style.json?apiKey=[INSERT API-KEY]',
        center: [10.4515, 51.1657],
        zoom: 6
      });
    </script>
  </body>
</html>

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>SmartMaps GL - OpenLayers Demo</title>
    <meta charset="UTF-8" />
    <style>
      html,
      body,
      #map {
        font-family: sans-serif;
        margin: 0;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="module" src="index.js"></script>
  </body>
</html>

index.js

import "ol/ol.css";
import { apply as applyMapboxStyle } from "ol-mapbox-style";
import Map from "ol/Map";
import View from "ol/View";
import { useGeographic as olUseGeographic } from "ol/proj";
import {
  DragRotateAndZoom,
  defaults as defaultInteractions
} from "ol/interaction.js";

// Enable geographic coordinates
olUseGeographic();

const center = [10.4515, 51.1657]; // Centering on Germany

// Initialize the map
const map = new Map({
  interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
  view: new View({
    center: center,
    zoom: 6
  }),
  target: "map"
});

// Apply SmartMaps GL style
applyMapboxStyle(
  map,
  "https://tiles.smartmaps.cloud/tiles/v1/smartmaps/light/style.json?apiKey=[INSERT API-KEY]"
);

package.json

{
  "name": "smartmaps-openlayers-demo",
  "version": "1.0.0",
  "description": "SmartMaps GL - OpenLayers Demo",
  "main": "index.html",
  "scripts": {
    "start": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "ol": "10.3.0",
    "ol-mapbox-style": "12.3.5",
    "vite": "6.0.2"
  },
  "devDependencies": {
    "@babel/core": "7.26.0",
    "typescript": "5.7.2"
  },
  "resolutions": {
    "@babel/preset-env": "7.26.0"
  },
  "keywords": ["javascript", "smartmaps", "openlayers"]
}

SmartMaps GL Integration mit GIS-Software

SmartMaps GL bietet eine nahtlose Integration mit gängigen GIS-Tools wie QGIS und ArcGIS Online und ermöglicht die erweiterte Visualisierung und Überlagerung von Vector-Tile-Layern. Folgen Sie den nachstehenden Anweisungen, um SmartMaps in Ihre bevorzugte GIS-Umgebung zu integrieren.

GIS-Integrationsbeispiele

QGIS-IntegrationArcGIS Online-Integration

QGIS unterstützt Vector-Tile-Dienste nativ ab Version 3.16. Aufgrund unvollständiger Unterstützung der Mapbox-Spezifikationen kann es jedoch zu Abweichungen beim Rendering kommen (z. B. bei Hillshading und zoomstufenabhängigen Inhalten).

Schritte zur Integration von SmartMaps GL in QGIS:

Öffnen Sie QGIS (Version 3.16 oder höher).
Navigieren Sie zu:
- Layer > Add layer > Add Vector Tile Layer
- Klicken Sie auf New > New Generic Connection
- Name: SmartMaps GL - Light
- URL: https://tiles.smartmaps.cloud/tiles/v1/smartmaps/{z}/{x}/{y}.pbf?apiKey=[INSERT API-KEY]
- Style-URL: https://tiles.smartmaps.cloud/styles/v1/smartmaps/light/style.json?apiKey=[INSERT API-KEY]
- Klicken Sie auf OK
Ersetzen Sie [INSERT API-KEY] durch Ihren tatsächlichen SmartMaps-API-Key.
Fügen Sie den Vector-Tile-Layer zu Ihrem Projekt hinzu und passen Sie die Stile nach Bedarf an.

Schriftartenkonfiguration

Um eine korrekte Textdarstellung sicherzustellen, installieren Sie diese Schriftarten: -- Noto Sans Regular -- Noto Sans Bold

Laden Sie sie von Google Noto Fonts herunter.

ArcGIS Online und ArcGIS Enterprise Portal (Version 11.1 oder höher für Windows) unterstützen SmartMaps GL-Stile für Vector-Tile-Layer. Gehen Sie zur Integration wie folgt vor:

JSON-Stil speichern: Laden Sie die gewünschte SmartMaps-GL-Stildatei herunter:
https://tiles.smartmaps.cloud/styles/v1/smartmaps/light/style.json?apiKey=[INSERT API-KEY]
Vector-Tile-Layer duplizieren: Kopieren Sie einen gehosteten Vector-Tile-Layer in ArcGIS Online oder ArcGIS Enterprise und speichern Sie ihn.
Stil aktualisieren: Verwenden Sie auf der Seite Item Details des duplizierten Layers die Option Update, um den vorhandenen Stil durch den gespeicherten SmartMaps-GL-JSON-Stil zu ersetzen.
Aktualisierten Layer verwenden: Der aktualisierte Layer kann nun als Layer oder Basiskarte im ArcGIS Map Viewer hinzugefügt werden.

Events

SmartMaps GL JS unterstützt verschiedene Events zur Verarbeitung von Nutzerinteraktionen und Kartenstatusänderungen:

load: Wird ausgelöst, wenn die Karte vollständig geladen wurde
click: Wird ausgelöst, wenn der Nutzer auf die Karte klickt
mousemove: Wird ausgelöst, wenn der Nutzer die Maus über die Karte bewegt
mouseenter: Wird ausgelöst, wenn die Maus den Kartencontainer betritt
mouseleave: Wird ausgelöst, wenn die Maus den Kartencontainer verlässt
zoom: Wird ausgelöst, wenn sich die Zoomstufe der Karte ändert
zoomstart: Wird ausgelöst, wenn eine Zoom-Animation beginnt
zoomend: Wird ausgelöst, wenn eine Zoom-Animation endet
rotate: Wird ausgelöst, wenn sich die Rotation der Karte ändert
rotatestart: Wird ausgelöst, wenn eine Rotationsanimation beginnt
rotateend: Wird ausgelöst, wenn eine Rotationsanimation endet
drag: Wird während einer „Drag-to-Pan"-Interaktion wiederholt ausgelöst
dragstart: Wird ausgelöst, wenn eine „Drag-to-Pan"-Interaktion beginnt
dragend: Wird ausgelöst, wenn eine „Drag-to-Pan"-Interaktion endet

Browser-Unterstützung

SmartMaps GL JS unterstützt alle Browser, die WebGL unterstützen:

Chrome
Firefox
Safari
Edge

Für optimale Leistung und Funktionalität empfehlen wir die Verwendung der jeweils neuesten Versionen dieser Browser.

Support und Feedback

Wenn Sie Fragen, Probleme oder Feedback zu SmartMaps GL JS haben, wenden Sie sich bitte an unser Support-Team unter maps@yellowmap.de. Wir helfen Ihnen gerne bei Ihren Mapping-Anforderungen weiter.

Viel Erfolg beim Mapping mit SmartMaps GL JS!