MapConductor React SDK Samples

कोड उदाहरण

import { useEffect, useState } from 'react';
import { createGeoPoint, createMapCameraPosition } from '@mapconductor/js-sdk-core';
import { MapLibreDesign, MapLibreMapView2D, useMapLibreViewState } from '@mapconductor/react-for-maplibre';
import { HeatmapOverlay, HeatmapPointState, HeatmapPoints } from '@mapconductor/react-heatmap';


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


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


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


// (2) डेटा और इंटरैक्शन स्टेट तैयार करें
const [heatmapPoints, setHeatmapPoints] = useState<HeatmapPointState[]>([]);
useEffect(() => {
  fetch('/postoffice/postoffices.json')
    .then(response => response.json() as Promise<[number, number][]>)
    .then(data => setHeatmapPoints(data.map(([latitude, longitude], index) =>
      new HeatmapPointState({
        id: `post-office-${index}`,
        position: createGeoPoint({ latitude, longitude }),
      }),
    )));
}, []);


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


<MapLibreMapView2D state={mapViewState}>
  <HeatmapOverlay>
    <HeatmapPoints states={heatmapPoints} />
  </HeatmapOverlay>
</MapLibreMapView2D>

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

भारित भौगोलिक बिंदुओं को हीटमैप एक्सटेंशन के ओवरले के भीतर जोड़ें।

एक useEffect postoffices.json लाता है और हर निर्देशांक को React स्टेट में रखे HeatmapPointState में बदल देता है।

<HeatmapOverlay> के भीतर का <HeatmapPoints> पूरा सेट एक साथ जोड़ता है, और एक्सटेंशन घनत्व का मैप किसी भी प्रोवाइडर पर रेंडर कर देता है।