Docs / Setup / React / Mappls

Mappls setup

How to drive Mappls (MapmyIndia)'s web SDK through MapConductor. On the web it takes a single API key, passed to the view state.

PACKAGE
@mapconductor/react-for-mappls
API KEY
Required
VIEW
MapplsMapView2D
TIME
10 min
Same provider, other platformsAndroidiOS

Before you start

Node.js and a React 18+ project
A Mappls (MapmyIndia) account and API key
STEP 01

Get an API key

Issue a web API key in the Mappls developer console. Unlike the native platforms, the web SDK works from a single key rather than configuration files.

STEP 02

Install the packages

Mappls's web SDK is bundled as a dependency.

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

Pass the key to the view state

Pass the key to useMapplsViewState. Keep the value out of source control and read it through whatever environment mechanism your build tool provides.

VERIFY

What you should see

Show a map centred on Delhi. Tiles loading means you are done.

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

Map designs

Notes
Default
The default style, available on any plan
StandardDay
The standard daytime style
StandardNight / GreyDay
Paid add-ons. Without the entitlement the SDK rejects them

Troubleshooting

The map is blank and no tiles arrive

  • Check that the credentials are set before the first map is created.
  • Confirm the key is active in the Mappls console and you are within quota.
  • Confirm the device can reach the network.

Switching style reports "style not found"

  • StandardNight and GreyDay are paid add-ons. Without the entitlement, use Default or StandardDay.

The SDK script fails to load with 401

  • Mappls's web SDK is loaded from sdk.mappls.com with the key in the URL. A 401 means the key is not entitled to the web SDK, or has expired.

Next

Markers, polylines, polygons, circles, ground images, raster layers and info bubbles all work through the shared API.