การตั้งค่า Longdo

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