साधारण बबल | MapLibre

कोड उदाहरण

import { useMemo, useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { InfoBubble, Marker } 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 position = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });
const [selected, setSelected] = useState(false);
const marker = useMemo(() => createMarkerState({
  id: 'place', position, onClick: () => setSelected(true),
}), [position]);


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


<MapLibreMapView2D state={mapViewState}>
  <Marker state={marker} />
  {selected && (
    <InfoBubble marker={marker}>Simple text content</InfoBubble>
  )}
</MapLibreMapView2D>

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

उपयोगकर्ता के चुने हुए मार्कर से एक सादा React सामग्री वाला बबल बाँधें।

एक बूलियन selected फ़्लैग useState में रहता है, और मार्कर का onClick उसे true कर देता है।

InfoBubble तभी रेंडर होता है जब selected true हो, और उसमें सादा टेक्स्ट भर होता है — मार्कर से बँधे बबल का सबसे छोटा रूप।

MapConductor React SDK Samples

साधारण बबल | MapLibre | MapConductor React SDK

कोड उदाहरण

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