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