Sidebar with Map Controls

import { SphereProvider, SphereMap, Marker, useMapControls } from 'gistda-sphere-react';

const cities = [
  { name: 'Bangkok', lon: 100.5018, lat: 13.7563 },
  { name: 'Chiang Mai', lon: 98.9853, lat: 18.7883 },
  { name: 'Phuket', lon: 98.3923, lat: 7.8804 },
];

function Sidebar() {
  const { goTo, setBaseLayer, setFilter } = useMapControls();

  return (
    <div style={{ padding: '1rem', width: '200px' }}>
      <h3>Cities</h3>
      {cities.map((city) => (
        <button key={city.name} onClick={() => goTo({ center: city, zoom: 12 })}>
          {city.name}
        </button>
      ))}
      <h3>Layers</h3>
      <button onClick={() => setBaseLayer('STREETS')}>Streets</button>
      <button onClick={() => setBaseLayer('HYBRID')}>Satellite</button>
      <h3>Filters</h3>
      <button onClick={() => setFilter('Dark')}>Dark</button>
      <button onClick={() => setFilter(false)}>None</button>
    </div>
  );
}

function App() {
  return (
    <SphereProvider apiKey="YOUR_API_KEY">
      <div style={{ display: 'flex', height: '100vh' }}>
        <Sidebar />
        <SphereMap style={{ flex: 1 }}>
          {cities.map((city) => (
            <Marker key={city.name} position={city} title={city.name} />
          ))}
        </SphereMap>
      </div>
    </SphereProvider>
  );
}