MapConductor React SDK Samples

कोड उदाहरण

import { useMemo } from 'react';
import { createGeoPoint, createMapCameraPosition, createPolygonState } from '@mapconductor/js-sdk-core';
import { Polygon } from '@mapconductor/js-sdk-react';
import { MapLibreDesign, MapLibreMapView, 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 geodesicPolygon = useMemo(() => createPolygonState({
  id: 'geodesic', points: longDistancePoints, geodesic: true,
}), [longDistancePoints]);
const straightPolygon = useMemo(() => geodesicPolygon.copy({
  id: 'straight', geodesic: false,
}), [geodesicPolygon]);
const polygons = [geodesicPolygon, straightPolygon];


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


<MapLibreMapView state={mapViewState}>
  {polygons.map(polygon => (
    <Polygon key={polygon.id} state={polygon} />
  ))}
</MapLibreMapView>

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

लंबी दूरियों पर और दिनांक रेखा के आर-पार, जियोडेसिक और ग़ैर-जियोडेसिक पॉलीगॉन भुजाओं की तुलना करें।

geodesicPolygon geodesic:true के साथ बनता है, और straightPolygon उसी की .copy है — geodesic:false के साथ, उन्हीं longDistancePoints पर।

दोनों को साथ रेंडर करने पर दिखता है कि जियोडेसिक भुजाएँ सबसे छोटे रास्ते के पीछे मुड़ती हैं, जबकि सीधी भुजाएँ मैप के प्रोजेक्शन में सपाट रहती हैं।