किसी बिंदु तक उड़ान | MapLibre

कोड उदाहरण

import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Markers } from '@mapconductor/js-sdk-react';
import { MapLibreDesign, MapLibreMapView2D, useMapLibreViewState } from '@mapconductor/react-for-maplibre';


// (1) मैप बनाएँ


const initialCamera = createMapCameraPosition({
  position: createGeoPoint({ latitude: 35.6812, longitude: 139.7671 }),
  zoom: 12,
});


const mapViewState = useMapLibreViewState({
  mapDesignType: MapLibreDesign.OsmBrightJa,
  cameraPosition: initialCamera,
});


// (2) डेटा और इंटरैक्शन स्टेट तैयार करें
const destination = createMapCameraPosition({
  position: createGeoPoint({ latitude: 35.6812, longitude: 139.7671 }),
  zoom: 13,
});
const destinations = [createMarkerState({ id: 'tokyo', position: destination.position })];


// (3) मैप और उसके ओवरले रेंडर करें


<button onClick={() => mapViewState.moveCameraTo(destination, 1000)}>
  Fly to destination
</button>


<MapLibreMapView2D state={mapViewState}>
  <Markers states={destinations} />
</MapLibreMapView2D>

कोड कैसे काम करता है

एक सेकंड के एनिमेशन के साथ कैमरा गंतव्य तक ले जाएँ — हर प्रोवाइडर के लिए वही API।

गंतव्य एक MapCameraPosition है, जो निर्देशांक और ज़ूम स्तर दोनों तय करता है, और destinations सरणी वहाँ एक मार्कर रख देती है ताकि लक्ष्य दिखे।

बटन mapViewState.moveCameraTo(destination, 1000) बुलाता है, और 1000 ms का एनिमेशन एक जैसा चलता है — मैप चाहे कोई भी प्रोवाइडर रेंडर करे।

MapConductor React SDK Samples

किसी बिंदु तक उड़ान | MapLibre | MapConductor React SDK

कोड उदाहरण

कोड कैसे काम करता है