Zum Inhalt

SmartMaps-Migrationsleitfaden

Dieser Teil der Dokumentation widmet sich der Migration von Mapbox GL zu SmartMaps GL.

Dieser Leitfaden bietet einen unkomplizierten Ansatz für den Übergang zwischen den beiden Bibliotheken, die sich ähneln, jedoch bei neueren Funktionen voneinander abweichen können.

Migrationsschritte

Mapbox deinstallieren und SmartMapsGL installieren

Deinstallieren Sie zunächst mapbox-gl aus Ihren Node-Paketen und installieren Sie smartmapsgl. Sie können auch CDN-Links verwenden, wie unten gezeigt.

mapboxgl durch smartmapsgl ersetzen

Aktualisieren Sie Ihre TypeScript-, JavaScript-, HTML- und CSS-Dateien, indem Sie alle Vorkommen von mapboxgl durch smartmapsgl ersetzen.

// Before
mapboxgl.accessToken = "INSERT ACCESS-TOKEN";
var map = new mapboxgl.Map({
    container: 'map', // container ID
    center: [-74.5, 40], // starting position [lng, lat]
    style: "mapbox://styles/mapbox/satellite-streets-v12",
    zoom: 9 // starting zoom
});

// After
var map = new smartmapsgl.Map({
    apiKey: '[INSERT API-KEY]',
    container: 'map', // container ID
    center: [-74.5, 40], // starting position [lng, lat]
    style: smartmapsgl.MapStyle.AUTO,
    zoom: 9 // starting zoom
});

<!-- Before -->
<button class="mapboxgl-ctrl"></button>

<!-- After -->
<button class="smartmapsgl-ctrl"></button>

Ersetzen Sie den Mapbox-CDN-Link durch den SmartMapsGL-CDN-Link:

<!-- Before -->
<script src="https://api.mapbox.com/mapbox-gl-js/v#.#.#/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v#.#.#/mapbox-gl.css" rel="stylesheet" />

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

Beachten Sie, dass der CSS-Link für SmartMapsGL nicht erforderlich ist, da er im in diesem Beispiel verwendeten UMD-Modul enthalten ist.

API-Keys und Kartenstile

  • API-Keys: SmartMaps GL verwendet keine Access Tokens. Die Authentifizierung erfolgt über einen API-Key, der als Map-Option apiKey übergeben wird — ersetzen Sie die Zuweisung von mapboxgl.accessToken also, anstatt sie zu übernehmen.
  • Kartenstile: Aktualisieren Sie alle Kartenstil-URLs, sodass sie den von SmartMapsGL bereitgestellten entsprechen.

Dieser Leitfaden soll Ihnen den Übergang von Mapbox zu SmartMaps GL erleichtern, indem er ähnliche Schritte nutzt wie die Migration zu MapLibre.