Docs / Setup / React / Longdo

Longdo setup

How to use Longdo Map on the Web through MapConductor. It is the strong choice for Thailand, wrapping Longdo Map JS API3.

PACKAGE

react-for-longdo

API KEY

Required

CSS

None

REACT NATIVE

None

Same provider, other platformsAndroid iOS

View demoStore Map · React ↗

Before you start

Node.js 18 or newer

An API key issued in the Longdo Map console

STEP 01

Install

The package loads Longdo Map JS API3 dynamically with your key — no script tag to write.

terminalnpm

npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
            @mapconductor/react-for-longdo

STEP 02

Pass the API key to the state hook

LongdoMap.tsxTypeScript · React

const state = useLongdoViewState({
  apiKey: import.meta.env.VITE_LONGDO,
  mapDesignType: LongdoDesign.Normal,
  cameraPosition: createMapCameraPosition({ position: BANGKOK, zoom: 12 }),
});

CAUTION

Feed the key from a build-time environment variable (import.meta.env.VITE_* under Vite) and keep it out of source control. It reaches the browser either way, so always restrict it by referrer or domain so exposure is harmless.

VERIFY

What you should see

A map centred on Bangkok means you are done.

LongdoMap.tsxTypeScript · React

import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { LongdoDesign, LongdoMapView2D, useLongdoViewState } from '@mapconductor/react-for-longdo';

const BANGKOK = createGeoPoint({ latitude: 13.7563, longitude: 100.5018 });

export function LongdoMap() {
  const state = useLongdoViewState({
    apiKey: import.meta.env.VITE_LONGDO,
    mapDesignType: LongdoDesign.Normal,
    cameraPosition: createMapCameraPosition({ position: BANGKOK, zoom: 12 }),
  });
  const [markerState] = useState(() => createMarkerState({ id: 'bkk', position: BANGKOK }));

  return (
    <LongdoMapView2D state={state} style={{ height: 480 }}>
      <Marker state={markerState} />
    </LongdoMapView2D>
  );
}

Map designs

LongdoDesign maps onto Longdo's base layers.

LongdoDesign

Notes

Normal / Easy / Political

The standard family

Pastel / PastelGray / Light / Gray

Muted styles

Night / Dark / Hard

Dark and high-contrast styles

Satellite / Hybrid

Satellite imagery and hybrid

Osm

OpenStreetMap-based

Troubleshooting

The map does not appear

Check apiKey is not an empty string.
Confirm the key is registered for the domain you serve from.

The map initialises twice in development

React StrictMode double-invokes effects. Every provider detects this and discards the aborted run, so you do not need to turn StrictMode off.

LongdoMapView is the 3D view and LongdoMapView2D the 2D one; they share a state object.