Interactive Marker Placement

Click on the map to add markers:

Click the map to place markers (0 placed)

import { useState } from 'react';
import { SphereProvider, SphereMap, Marker, type Location } from 'gistda-sphere-react';

function App() {
  const [markers, setMarkers] = useState<Location[]>([]);

  return (
    <SphereProvider apiKey="YOUR_API_KEY">
      <button onClick={() => setMarkers([])}>Clear</button>
      <SphereMap
        center={{ lon: 100.5, lat: 13.75 }}
        zoom={10}
        style={{ height: '500px' }}
        onClick={(location) => setMarkers([...markers, location])}
      >
        {markers.map((pos) => (
          <Marker key={`${pos.lon}-${pos.lat}`} position={pos} />
        ))}
      </SphereMap>
    </SphereProvider>
  );
}