Overlay Collection Hooks

import { useMarkers } from 'gistda-sphere-react';

function MarkerManager() {
  const { items, add, update, remove, clear, get } = useMarkers();

  const addMarker = () => {
    const id = add({
      position: { lon: 100.5, lat: 13.75 },
      title: 'New Marker',
      draggable: true,
    });
    console.log('Added marker with ID:', id);
  };

  return (
    <div>
      <button onClick={addMarker}>Add</button>
      <button onClick={clear}>Clear All</button>
      <p>Count: {items.length}</p>
    </div>
  );
}

import { useOverlays } from 'gistda-sphere-react';

const { markers, polygons, polylines, circles, clearAll } = useOverlays();