GISTDA sphere map component for ReactJS + demo

Live Preview

1. Replace SPHERE_MAP_KEY value in ./src/App.jsx with your own API key (get one here).

   const SPHERE_MAP_KEY =
     import.meta.env.VITE_SPHERE_MAP_KEY || 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';

2. Call <SphereMap /> and pass in props.

   import { SphereMap } from './sphere-map';
   
   <div style={{ height: '100%', width: '100%' }}>
     <SphereMap
       id='sphere-map'
       mapKey={mapKey}
       callback={onMapLoad}
       mapRef={mapRef}
       sphereRef={sphereRef}
     />
   </div>

3. Use mapRef ref to interact with map, for example:

   mapRef.goTo({ center: { lon: 100.510847, lat: 13.743757 }, zoom: 14 });

For more example usage, see ./src/App.jsx.

• GISTDA sphere API Demo
• GISTDA sphere API Reference