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 [palette, setPalette] = useState({
  water: '#3a7ca5',
  land: '#f2efe6',
  street: '#ffffff',
  building: '#d9d0c9',
});
// A rule reaches layers by role, so the same words work in someone
// else's style. mix blends each layer's own colour toward the picked
// one; visible: false leaves the layers out of the document, so they
// are not drawn at all.
const rules = buildStyleRules((r) => {
  r.role(LayerRole.water, { colorFilter: { mix: { color: palette.water, amount: strength } } });
  r.role(LayerRole.building, { visible: false });
});


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


<MapLibreMapView2D state={mapViewState}>
  <VectorTileLayer style={style} rules={rules} opacity={opacity} />
</MapLibreMapView2D>

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

ब्राउज़र में रैस्टराइज़ करके और परिणाम को सामान्य रास्टर टाइलों के रूप में परोसकर किसी भी बैकएंड पर MapLibre वेक्टर स्टाइल बनाता है।

बैकएंड कभी वेक्टर स्टाइल नहीं देखता — इसीलिए यह Google Maps, MapKit, Cesium और उन सभी पर काम करता है जो उसे पढ़ नहीं सकते।

रंग बदलने पर स्टाइल बदल जाती है और मेमोरी में मौजूद वेक्टर टाइलें दोबारा रैस्टराइज़ होती हैं। कुछ भी दोबारा नहीं लाया जाता: ज्यामिति वही रही, केवल रंग बदला। सिंबल लेयर नहीं बनाई जातीं, क्योंकि बिना टकराव के लेबल रखने के लिए पड़ोसी टाइलें देखनी पड़ती हैं।