Merged in feat/sw-3240-move-staticmap-to-design-system (pull request #2654)

feat(SW-3240): Move StaticMap to design-system

* Move StaticMap to design-system


Approved-by: Joakim Jäderberg

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

@@ -0,0 +1,75 @@
+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} />
+}