Documentación / Configuración / React / MapTiler

Configurar MapTiler

Pasos para usar estilos de MapTiler Cloud desde MapConductor en la web. El renderizador es `maplibre-gl` y el estilo se construye como una URL de MapTiler Cloud con clave de API.

PACKAGE

react-for-maptiler

API KEY

Necesario

CSS

Necesario

REACT NATIVE

Ninguno

El mismo proveedor, otras plataformasAndroid iOS

Ver demoMapa de tiendas · React ↗

Antes de empezar

Node.js 18 o superior

Cuenta de MapTiler Cloud y clave de API

STEP 01

Para instalar

Instale el paquete principal, los enlaces de React y el paquete del proveedor. Al cambiar el proveedor, solo cambia el tercero.

terminalnpm

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

STEP 02

Excluir del agrupado previo de Vite

Si usa Vite, agregue el proveedor a `optimizeDeps.exclude`. `maplibre-gl` v6 carga los workers mediante URL; si se agrupa previamente, el archivo del worker no se genera en `.vite/deps` y falla la carga.

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

Cargar la hoja de estilos

Cárguelo una sola vez en el punto de entrada de la aplicación. Si se olvida, la posición del mapa y el aspecto de los controles se desconfiguran.

main.tsxTypeScript

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

STEP 04

Pasar la clave de API al hook de estado

La clave se incorpora en la URL del JSON de estilo (https://api.maptiler.com/maps/