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
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.