Add brewery map page

package.json

@@ -39,5 +39,8 @@
     "typescript": "^4.9",
     "vite": "^4.5"
   },
-  "type": "module"
+  "type": "module",
+  "dependencies": {
+    "svelte-maplibre": "^0.8.3"
+  }
 }

src/lib/types.ts

@@ -45,6 +45,12 @@ export interface Brewery {
   latitude: Float64Array;
 }
 
+export interface BreweryMarker {
+  name: string;
+  lngLat: [number, number];
+  id: string;
+}
+
 export interface Metadata {
   total: string;
   per_page: string;

src/routes/documentation/[slug]/+page.ts

@@ -1,5 +1,6 @@
 /** @type {import('./$types').PageLoad} */
 export async function load() {
+  // Backwards compatibility for old documentation
   return {
     status: 301,
     redirect: '/documentation',

src/routes/map/+page.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+  import {
+    MapLibre,
+    GeoJSON,
+    CircleLayer,
+    Popup,
+    SymbolLayer,
+  } from 'svelte-maplibre';
+  import breweryGeoJson from '$site/breweries.geojson?url';
+  import { API_URL } from '$lib/utils';
+  import type { Brewery } from '$lib/types';
+
+  let clickedFeature;
+  let clickedBrewery: Brewery;
+
+  async function getBrewery() {
+    const breweryResults = await fetch(
+      `${API_URL}/breweries/${clickedFeature.id}`
+    );
+    const brewery: Brewery = await breweryResults.json();
+    clickedBrewery = brewery;
+  }
+</script>
+
+<svelte:head>
+  <title>Map - Open Brewery DB</title>
+  <meta property="og:title" content="Map - Open Brewery DB" />
+  <meta
+    property="og:description"
+    content="Map of breweries in Open Brewery DB"
+  />
+  <meta name="twitter:title" content="Map - Open Brewery DB" />
+  <meta
+    name="twitter:description"
+    content="Map of breweries in Open Brewery DB"
+  />
+</svelte:head>
+
+<h1>Brewery Map</h1>
+
+<MapLibre
+  style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
+  standardControls
+  class="relative w-full aspect-[9/16] max-h-[70vh] sm:max-h-full sm:aspect-video"
+  center={[-40.755638, 37.525571]}
+  zoom={2}
+>
+  <GeoJSON
+    id="breweries"
+    data={breweryGeoJson}
+    cluster={{
+      radius: 500,
+      maxZoom: 10,
+    }}
+  >
+    <CircleLayer
+      id="cluster_circles"
+      applyToClusters
+      hoverCursor="pointer"
+      paint={{
+        'circle-color': '#f1f075',
+        'circle-radius': ['step', ['get', 'point_count'], 20, 100, 30, 750, 40],
+        'circle-stroke-width': 1,
+      }}
+      manageHoverState
+    />
+
+    <SymbolLayer
+      id="cluster_labels"
+      interactive={false}
+      applyToClusters
+      layout={{
+        'text-field': [
+          'format',
+          ['get', 'point_count_abbreviated'],
+          { 'font-scale': 0.8 },
+        ],
+        'text-size': 12,
+        'text-offset': [0, -0.1],
+      }}
+    />
+
+    <CircleLayer
+      id="brewery_circle"
+      applyToClusters={false}
+      hoverCursor="pointer"
+      paint={{
+        'circle-color': '#f1f075',
+        'circle-radius': 4,
+        'circle-stroke-width': 1,
+        'circle-stroke-color': '#000',
+      }}
+      on:click={async (e) => {
+        clickedFeature = e.detail.features?.[0]?.properties;
+        await getBrewery();
+      }}
+    >
+      <Popup
+        openOn="click"
+        closeOnClickInside
+        on:close={() => (clickedBrewery = null)}
+        let:features
+      >
+        {@const props = features?.[0]?.properties}
+        <ul>
+          {#if clickedBrewery}
+            <li>
+              <strong>Brewery:</strong>
+              {clickedBrewery.name} ({clickedBrewery.brewery_type})
+            </li>
+            <li><strong>Street:</strong> {clickedBrewery.address_1}</li>
+            <li>
+              <strong>Location:</strong>
+              {clickedBrewery.city}, {clickedBrewery.state_province}
+            </li>
+            <li><strong>Country:</strong>: {clickedBrewery.country}</li>
+          {:else}
+            ...
+          {/if}
+        </ul>
+      </Popup>
+    </CircleLayer>
+  </GeoJSON>
+</MapLibre>

src/routes/map/page.ts

@@ -0,0 +1,8 @@
+import type { BreweryMarker } from '$lib/types';
+
+/** @type {import('./$types').PageLoad} */
+export async function load({ fetch }) {
+  const data = await fetch(`https://github.com/openbrewerydb/openbrewerydb/blob/1a5be9009b2e30f7ca7a5b1fd16d2ff5464aa6c7/breweries-map.json`);
+  const markers: BreweryMarker[]  = await data.json();
+  return { markers };
+}

svelte.config.js

@@ -38,6 +38,9 @@ const config = {
       split: false,
     }),
     appDir: '_app',
+    alias: {
+      '$site/*': './src/site/*',
+    },
     csp: {
       mode: 'auto',
       directives: {