MapLibre से पहला मानचित्र प्रदर्शित करें

import SwiftUI
import MapConductorCore
import MapConductorForMapLibre

struct ContentView: View {
    @StateObject private var mapState = MapLibreViewState(
        mapDesignType: MapLibreDesign.OsmBright,
        cameraPosition: MapCameraPosition(
            position: GeoPoint(latitude: 35.6812, longitude: 139.7671),
            zoom: 14
        )
    )
    @State private var selected: MarkerState?

    var body: some View {
        MapLibreMapView(state: mapState, onMapClick: { _ in selected = nil }) {
            Marker(
                position: GeoPoint(latitude: 35.6812, longitude: 139.7671),
                onClick: { selected = $0 }
            )
            if let selected {
                InfoBubble(marker: selected) { Text("Hello, MapConductor") }
            }
        }
    }
}

import { useMemo, useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState }
  from '@mapconductor/js-sdk-core';
import { InfoBubble, Marker } from '@mapconductor/js-sdk-react';
import { MapLibreDesign, MapLibreMapView, useMapLibreViewState }
  from '@mapconductor/react-for-maplibre';
import '@mapconductor/react-for-maplibre/style.css';

const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });

export function HelloMap() {
  const mapState = useMapLibreViewState({
    mapDesignType: MapLibreDesign.OsmBright,
    cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 14 }),
  });
  const [selected, setSelected] = useState(false);
  const marker = useMemo(() =>
    createMarkerState({
      id: 'hello',
      position: TOKYO,
      onClick: () => setSelected(true),
    }), []);

  return (
    <MapLibreMapView state={mapState} onMapClick={() => setSelected(false)}>
      <Marker state={marker} />
      {selected && (
        <InfoBubble marker={marker}>Hello, MapConductor</InfoBubble>
      )}
    </MapLibreMapView>
  );
}