Mappls セットアップ

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