MapConductor React SDK Samples

कोड उदाहरण

import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition } from '@mapconductor/js-sdk-core';
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 mapDesignOptions = providerDesignOptions;
const [selectedDesignId, setSelectedDesignId] = useState(
  String(mapViewState.mapDesignType.id),
);


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


const handleDesignChange = (designId: string) => {
  const option = mapDesignOptions.find(item => item.design.id === designId);
  if (!option) return;
  mapViewState.mapDesignType = option.design;
  setSelectedDesignId(String(option.design.id));
};


<MapLibreMapView2D state={mapViewState}>
  <select
    value={selectedDesignId}
    onChange={event => handleDesignChange(event.target.value)}
  >
    {mapDesignOptions.map(option => (
      <option key={String(option.design.id)} value={String(option.design.id)}>
        {option.label}
      </option>
    ))}
  </select>
</MapLibreMapView2D>

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

व्यू स्टेट पर अमूर्त मैप डिज़ाइन बदलें, और हर प्रोवाइडर को उसे अपने नेटिव स्टाइल में बदलने दें।

mapDesignOptions चालू प्रोवाइडर की डिज़ाइन सूची से आते हैं, और selectedDesignId mapViewState.mapDesignType.id की नकल रखता है ताकि <select> नियंत्रित कंपोनेंट बना रहे।

handleDesignChange चुना गया विकल्प ढूँढ़कर option.design को mapViewState.mapDesignType में डाल देता है; फिर प्रोवाइडर मैप दोबारा बनाए बिना उससे मेल खाते नेटिव स्टाइल पर चला जाता है।