Skip to content

README.md

Latest commit

 

History

History
62 lines (45 loc) · 2.38 KB

README.md

File metadata and controls

62 lines (45 loc) · 2.38 KB

gistda-sphere-react

Disclaimer: This is an unofficial community project and is not affiliated with, endorsed by, or supported by GISTDA (Geo-Informatics and Space Technology Development Agency). For official documentation and support, please visit sphere.gistda.or.th.

Note: This project is currently under active development. APIs may change between releases.

A React wrapper for the GISTDA Sphere Map API. Build interactive maps of Thailand with full TypeScript support.

Documentation | Playground

Installation

npm install gistda-sphere-react

Quick Start

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

function App() {
  return (
    <SphereProvider apiKey="YOUR_API_KEY">
      <SphereMap
        center={{ lon: 100.5018, lat: 13.7563 }}
        zoom={10}
        style={{ width: '100%', height: '500px' }}
      >
        <Marker
          position={{ lon: 100.5018, lat: 13.7563 }}
          title="Bangkok"
          detail="Capital of Thailand"
        />
      </SphereMap>
    </SphereProvider>
  );
}

Getting an API Key

  1. Visit sphere.gistda.or.th
  2. Register for an account
  3. Create a new API key and set the allowed hosts to your domains (e.g. localhost, yourdomain.com)

Note: The API key is sent as a query parameter in requests and is visible client-side. Use host restrictions as your primary security mechanism.

Features

  • Components: SphereMap, Marker, Polygon, Polyline, Circle, Popup, Dot, Rectangle, Layer
  • Hooks: useMap, useSphere, useMapControls, useSearch, useRoute, useTags, useMarkers, usePolygons, usePolylines, useCircles, useOverlays
  • Event Hooks: useMapReady, useMapClick, useMapZoom, useMapLocation, useOverlayClick, useMapEvent
  • Built-in Layers: Traffic, PM2.5, Hotspot, Flood, Drought, Satellite imagery
  • Predefined Overlays: Live CCTV cameras, traffic events, air quality data
  • Full TypeScript support with exported types for all components, hooks, and options

For detailed API reference, examples, and interactive demos, visit the documentation.

License

MIT