Documentación / Configuración / React / Mappls

Configurar Mappls

Pasos para usar el SDK web de Mappls (MapmyIndia) desde MapConductor. En web se pasa una clave de API al view state.

PACKAGE
@mapconductor/react-for-mappls
API KEY
Necesario
VIEW
MapplsMapView2D
TIME
10 minutos
El mismo proveedor, otras plataformasAndroidiOS

Antes de empezar

Un proyecto con Node.js y React 18 o superior
Una cuenta de Mappls (MapmyIndia) y una clave de API
STEP 01

Obtener la clave de API

En la consola para desarrolladores de Mappls, emita una clave de API para web. A diferencia de nativo, web funciona con una sola clave, no con un archivo de configuración.

STEP 02

Instalar el paquete

El SDK web de Mappls se incluye como dependencia.

shellShell
npm install @mapconductor/react-for-mappls @mapconductor/js-sdk-core @mapconductor/js-sdk-react
STEP 03

Pasar la clave al view state

La clave se pasa a useMapplsViewState. No ponga el valor real en el control de fuentes; cárguelo mediante el mecanismo de variables de entorno de su herramienta de compilación.

VERIFICAR

Lo que deberías ver

Muestra un mapa centrado en Delhi. Cuando se carguen los mosaicos, habrá terminado.

import {
  MapplsDesign,
  MapplsMapView2D,
  useMapplsViewState,
} from '@mapconductor/react-for-mappls';
import { createGeoPoint, createMapCameraPosition } from '@mapconductor/js-sdk-core';

// Your own key. Read it from your environment however your build tool does
// it, and keep it out of source control.
const MAPPLS_API_KEY = '…';

const DELHI = createGeoPoint({ latitude: 28.6139, longitude: 77.2090 });

export default function App() {
  const state = useMapplsViewState({
    apiKey: MAPPLS_API_KEY,
    mapDesignType: MapplsDesign.Default,
    cameraPosition: createMapCameraPosition({ position: DELHI, zoom: 11 }),
  });

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <MapplsMapView2D state={state} />
    </div>
  );
}

Diseños de mapa

Notes
Default
Estilo predeterminado utilizable independientemente del contrato
StandardDay
Estilo diurno estándar
StandardNight / GreyDay
Opción de pago con costo adicional. Si no tiene contrato, el SDK lo rechazará.

Solución de problemas

El mapa está completamente blanco, no llega ningún mosaico

  • Verifique que las credenciales estén establecidas antes de la generación del mapa.
  • Verifique en la consola de Mappls que la clave sea válida y no haya excedido el límite de uso.
  • Verifique que el dispositivo tenga salida a la red.

Al cambiar el estilo aparece style not found

  • StandardNight y GreyDay son opciones de pago con costo adicional. Si no tiene contrato, use Default o StandardDay.

No se puede cargar el script del SDK debido a 401

  • El SDK web de Mappls se carga desde sdk.mappls.com con clave. Si se devuelve 401, la clave no tiene permiso para usar el SDK web o ha caducado.

Siguiente

Puede seguir usando marker, polyline, polygon, circle, groundImage, rasterLayer e InfoBubble a través de la API común.