web/packages/design-system/lib/components/StaticMap/index.tsx

import { getUrlWithSignature } from './utils'

export type StaticMapProps = {
  city?: string
  country?: string
  coordinates?: {
    lat: number
    lng: number
  }
  width: number
  height: number
  zoomLevel?: number
  mapType?: 'roadmap' | 'satellite' | 'terrain' | 'hybrid'
  altText: string
  mapId?: string
  googleMapKey: string
  googleMapSecret: string
}

function getCenter({
  coordinates,
  city,
  country,
}: {
  coordinates?: { lat: number; lng: number }
  city?: string
  country?: string
}): string | undefined {
  if (coordinates) {
    return `${coordinates.lat},${coordinates.lng}`
  }
  if (city && country) {
    return `${city}, ${country}`
  }
  if (country) {
    return country
  }
  return city
}

export default async function StaticMap({
  city,
  country,
  coordinates,
  width,
  height,
  zoomLevel = 14,
  mapType = 'roadmap',
  altText,
  mapId,
  googleMapKey,
  googleMapSecret,
}: StaticMapProps) {
  // const key = env.GOOGLE_STATIC_MAP_KEY
  // const secret = env.GOOGLE_STATIC_MAP_SIGNATURE_SECRET
  const baseUrl = 'https://maps.googleapis.com/maps/api/staticmap'
  const center = getCenter({ coordinates, city, country })

  if (!center) {
    return null
  }

  // Google Maps Static API only supports images smaller than 640x640px. Read: https://developers.google.com/maps/documentation/maps-static/start#Largerimagesizes
  const url = new URL(
    `${baseUrl}?center=${center}&zoom=${zoomLevel}&size=${width}x${height}&maptype=${mapType}&key=${googleMapKey}`
  )

  if (mapId) {
    url.searchParams.append('map_id', mapId)
  }

  const src = getUrlWithSignature(url, googleMapSecret)
  return <img src={src} alt={altText} />
}