Doku / Einrichtung / React / MapTiler

MapTiler einrichten

Anleitung, um MapTiler Cloud-Stile im Web über MapConductor zu verwenden. Der Renderer ist `maplibre-gl`, der Stil wird als MapTiler Cloud-URL mit API-Schlüssel zusammengestellt.

PACKAGE

react-for-maptiler

API KEY

Erforderlich

CSS

Erforderlich

REACT NATIVE

Keine

Derselbe Anbieter, andere PlattformenAndroid iOS

Demo ansehenFilialkarte · React ↗

Bevor Sie beginnen

Node.js 18 oder höher

MapTiler Cloud-Konto und API-Schlüssel

STEP 01

Zu installieren

Installieren Sie das Kernpaket, die React-Bindings und das Provider-Paket. Bei einem Wechsel des Providers ändert sich nur das dritte Paket.

terminalnpm

npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
            @mapconductor/react-for-maptiler

STEP 02

Aus Vite-Vorbündelung ausschließen

Bei Verwendung von Vite fügen Sie den Provider zu `optimizeDeps.exclude` hinzu. `maplibre-gl` v6 lädt Worker per URL; bei vorabem Bündelung wird die Worker-Datei nicht unter `.vite/deps` ausgegeben, was zu einem Ladefehler führt.

vite.config.tsTypeScript · Vite

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
    optimizeDeps: {
        exclude: ["@mapconductor/react-for-maptiler", "@mapconductor/js-sdk-core"],
    },
    plugins: [react()],
});

STEP 03

Stylesheet laden

Laden Sie es genau einmal am Einstiegspunkt der App. Wenn Sie es vergessen, gehen Position der Karte und das Erscheinungsbild der Steuerelemente verloren.

main.tsxTypeScript

import '@mapconductor/react-for-maptiler/style.css';

STEP 04

API-Schlüssel an State-Hook übergeben

Der Schlüssel wird in die URL der Stil-JSON eingebaut (https://api.maptiler.com/maps/