Sites Map

Interactive map visualization for energy sites using Mapbox GL.

Interactive Map

Loading map...

Sites (4)

Online

Offline

Setup

Click a site to select

Site List (hover to highlight)

Stockholm HQ

Kungsgatan 1, Stockholm

4.5 kW

live

Gothenburg Office

Avenyn 10, Gothenburg

3.2 kW

live

Malmö Site

Stortorget 5, Malmö

0.0 kW

offline

Uppsala Campus

Universitetsvägen 1, Uppsala

1.2 kW

commissioning

Features

Dark mode support with automatic style switching
Status-based marker colors (live, offline, error, commissioning)
Animated pulsing for offline/error sites
Auto-fit bounds to show all sites
Hover animation: smooth flyTo on first hover, instant jump after
Custom labels showing site name and power output
Interactive legend with site count

Usage

import { SitesMap, type Site } from "@/components/ui/sites-map"

const sites: Site[] = [
  {
    id: "1",
    name: "Stockholm HQ",
    status: "live",
    coordinates: { lat: 59.3293, lng: 18.0686 },
    currentProduction: 4500,
  },
  // ...more sites
]

<SitesMap
  sites={sites}
  mapboxToken={process.env.NEXT_PUBLIC_MAPBOX_TOKEN}
  onSiteSelect={(siteId) => console.log("Selected:", siteId)}
  hoveredSiteId={hoveredSiteId}
/>

Dependencies

npm install react-map-gl mapbox-gl

# Add to your .env.local
NEXT_PUBLIC_MAPBOX_TOKEN=your_mapbox_token

Scroll Area

Energy Flow