Replace map image with interactive Mapbox map (#64)

.env

@@ -1,3 +1,7 @@
 REST_API=
 NEXT_PUBLIC_REST_API=$REST_API
-NEXT_PUBLIC_INTERNAL_SITE=
+NEXT_PUBLIC_INTERNAL_SITE=
+# Note: This token is restricted to ystv.co.uk and dev.ystv.co.uk.
+# To develop locally, you'll need to get a Mapbox token that has localhost:8080 as an allowed domain,
+# and add it to your .env.local file.
+NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=pk.eyJ1IjoibXAxNDIzIiwiYSI6ImNsbHFuMXQ2djBnb3IzZXRobGZ0bHEzYmYifQ.jJFtQm6liHLCICMlN1bYNA

package.json

@@ -34,12 +34,15 @@
     "@storybook/addon-essentials": "^7.0.26",
     "@storybook/addon-links": "^7.0.26",
     "@storybook/nextjs": "^7.0.26",
+    "@types/mapbox-gl": "^2.7.13",
     "@types/node": "^20.4.0",
     "@types/react": "^18.2.14",
     "babel-loader": "^9.1.2",
     "eslint": "8.44.0",
     "eslint-config-next": "^13.4.8",
     "eslint-config-prettier": "^8.8.0",
+    "mapbox-gl": "^2.15.0",
+    "react-map-gl": "^7.1.5",
     "storybook": "^7.0.26",
     "storybook-css-modules-preset": "^1.1.1",
     "typescript": "^5.1.6"

pages/find-us.tsx

@@ -1,21 +1,50 @@
 import YstvHead from "../components/YstvHead";
-import Image from "next/image"
-import MapImage from "../public/site-images/ystv_map.png"
+import Image from "next/image";
+import MapImage from "../public/site-images/ystv_map.png";
+import Map, { Marker } from "react-map-gl";
+import "mapbox-gl/src/css/mapbox-gl.css";
+import MapPin from "../public/site-images/Map-Pin-YSTV-Web.svg";
 
-export default function FindUs() {
-  return (
-    <div className="center thin">
-      <YstvHead />
-      <h1>Find Us</h1>
+function YSTVMap() {
+  if (!process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN) {
+    return (
       <Image
         src={MapImage}
         alt="Map showing YSTV's location on Campus West"
         unoptimized
         sizes="100vw"
         style={{
           width: "100%",
-          height: "auto"
-        }} />
+          height: "auto",
+        }}
+      />
+    );
+  }
+  return (
+    <Map
+      mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN}
+      initialViewState={{
+        longitude: -1.05553,
+        latitude: 53.94636,
+        zoom: 14
+      }}
+      style={{width: "100%", height: 400}}
+      mapStyle="mapbox://styles/mapbox/streets-v9"
+
+      >
+        <Marker longitude={-1.05553} latitude={53.94636} anchor="bottom">
+          <Image src={MapPin} alt="A map pin, with the YSTV Logo in the centre." width={64} height={64} />
+        </Marker>
+      </Map>
+  )
+}
+
+export default function FindUs() {
+  return (
+    <div className="center thin">
+      <YstvHead />
+      <h1>Find Us</h1>
+      <YSTVMap />
       <p>
         YSTV’s studio is in James College; if you need any help finding us just
         ask at Campus South Information or email us. There’s a courtyard in the