İSPARK Live Map

A live parking occupancy map for all İSPARK parking lots in Istanbul. The application retrieves real-time capacity and available parking data from the Istanbul Metropolitan Municipality (IMM) Open Data API and visualizes it using deck.gl.

Features

• Live data — Automatically refreshes every 60 seconds using the IMM Open Data API
• Heatmap → 3D columns — Displays a heatmap at low zoom levels and switches to 3D columns when zoomed in
• Color-coded occupancy — Green (available) → Yellow (moderately occupied) → Red (full)
• Parking details panel — Click a parking lot to view capacity, occupied, and available spaces
• Mobile-friendly — Smooth pinch-to-zoom and navigation on iOS and Android
• Vercel Serverless proxy — Bypasses CORS restrictions on the server side

Screenshot

The map displays the real-time occupancy status of İSPARK parking lots across Istanbul using color-coded markers.

Tech Stack

Local Development

# 1. Clone the repository
git clone https://github.com/kenissha/ispark-canli-harita.git
cd ispark-canli-harita

# 2. Install dependencies
npm install

# 3. Start the development server
npm run dev

Open http://localhost:5173 in your browser.

Vite automatically proxies /api/proxy requests to https://api.ibb.gov.tr/ispark/Park. No API key or additional configuration is required.

Project Structure

ispark-canli-harita/
├── api/
│   └── proxy.ts                   # Vercel Serverless Function (CORS proxy)
├── src/
│   ├── App.tsx                    # Main application
│   ├── components/
│   │   ├── IsparkMap.tsx          # deck.gl + MapLibre map component
│   │   ├── IsparkDetailPanel.tsx  # Parking details panel
│   │   ├── Header.tsx             # Top navigation/header
│   │   └── Legend.tsx             # Color legend
│   ├── hooks/
│   │   ├── useIsparkData.ts       # Hook for fetching IMM API data
│   │   └── useMapView.ts          # Map view state management
│   ├── layers/
│   │   ├── isparkColumnLayer.ts   # 3D column layer
│   │   └── isparkHeatmapLayer.ts  # Heatmap layer
│   └── types.ts                   # TypeScript type definitions
├── vercel.json                    # Vercel deployment configuration
└── vite.config.ts                 # Vite + proxy configuration

Occupancy Colors

Deploy to Vercel

# Using the Vercel CLI
npm install -g vercel
vercel

Or simply import the GitHub repository into Vercel—the included vercel.json file handles all required configuration automatically.

Data Source

All parking data is provided through the publicly accessible Istanbul Metropolitan Municipality (IMM) Open Data Portal:

GET https://api.ibb.gov.tr/ispark/Park

No authentication or API key is required.

License

MIT — see LICENSE.

Acknowledgements

• IMM Open Data Portal — for providing the public İSPARK API
• deck.gl, MapLibre, and CARTO Basemaps — for the open-source mapping infrastructure

Built With

• css
• html
• javascript
• python
• typescript