Doku / Einrichtung / React / Mappls

Mappls einrichten

Schritte zur Verwendung des Web SDK von Mappls (MapmyIndia) aus MapConductor. Im Web wird ein API-Schlüssel an den view state übergeben.

PACKAGE
@mapconductor/react-for-mappls
API KEY
Erforderlich
VIEW
MapplsMapView2D
TIME
10 Minuten
Derselbe Anbieter, andere PlattformenAndroidiOS

Bevor Sie beginnen

Ein Projekt mit Node.js und React 18 oder höher
Ein Mappls (MapmyIndia)-Konto und ein API-Schlüssel
STEP 01

API-Schlüssel abrufen

Erstellen Sie in der Mappls-Entwicklerkonsole einen API-Schlüssel für das Web. Im Gegensatz zu nativ läuft das Web mit einem einzigen Schlüssel statt mit einer Konfigurationsdatei.

STEP 02

Paket installieren

Das Web SDK von Mappls ist als Abhängigkeit enthalten.

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

Schlüssel an den view state übergeben

Der Schlüssel wird an useMapplsViewState übergeben. Bitte übergeben Sie den tatsächlichen Wert nicht an die Quellcodeverwaltung, sondern laden Sie ihn über den Umgebungsvariablenmechanismus Ihres Build-Tools.

PRÜFEN

Was Sie sehen sollten

Zeigt eine Karte zentriert auf Delhi an. Sobald die Kacheln geladen sind, sind Sie fertig.

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>
  );
}

Kartendesigns

Notes
Default
Standardstil, unabhängig vom Vertrag nutzbar
StandardDay
Standard-Tag-Stil
StandardNight / GreyDay
Kostenpflichtige Option mit zusätzlichen Gebühren. Ohne Vertrag lehnt das SDK ab.

Fehlerbehebung

Die Karte ist komplett weiß, es kommt keine einzige Kachel

  • Überprüfen Sie, ob die Anmeldeinformationen vor der Kartenerzeugung festgelegt sind.
  • Überprüfen Sie in der Mappls-Konsole, ob der Schlüssel gültig ist und das Nutzungslimit nicht überschritten wurde.
  • Überprüfen Sie, ob das Gerät Netzwerkzugang hat.

Beim Ändern des Stils tritt style not found auf

  • StandardNight und GreyDay sind kostenpflichtige Optionen mit zusätzlichen Gebühren. Wenn Sie keinen Vertrag haben, verwenden Sie Default oder StandardDay.

Das SDK-Skript kann aufgrund von 401 nicht geladen werden

  • Das Web SDK von Mappls wird von sdk.mappls.com mit Schlüssel geladen. Wenn 401 zurückgegeben wird, hat der Schlüssel keine Berechtigung für die Nutzung des Web SDK oder er ist abgelaufen.

Weiter

Marker, Polylinien, Polygone, Kreise, GroundImage, RasterLayer und InfoBubble können weiterhin über die gemeinsame API verwendet werden.