From cffc17386621d479e71b6f73a7e7546156bc9a5a Mon Sep 17 00:00:00 2001
From: Jay Varner <jayvarner@gmail.com>
Date: Thu, 21 Nov 2024 13:35:04 -0500
Subject: [PATCH] Switching to only Elasticsearch

---
 app/components/FeaturedMedium.tsx             |  15 +-
 app/components/VideoEmbed.tsx                 |  24 +-
 app/components/VideoModal.tsx                 |  16 +-
 app/components/VideoThumbnail.tsx             |  34 +--
 app/components/layout/PlaceContent.tsx        |   2 +
 app/components/layout/RelatedRecords.tsx      |  31 +--
 .../relatedRecords/RelatedPhotographs.tsx     |  78 ++++---
 .../relatedRecords/RelatedPlaces.tsx          | 211 ++++++++----------
 .../relatedRecords/RelatedVideos.tsx          |  16 +-
 app/contexts.ts                               |  36 ++-
 app/data/coredata.ts                          |  21 +-
 app/esTypes.ts                                |  53 +++++
 app/routes/islands.$id.tsx                    |  97 +++-----
 app/routes/places.$id.tsx                     |  23 +-
 app/types.ts                                  |   8 +-
 app/utils/toFeatureCollection.ts              |  17 +-
 package-lock.json                             |   2 +-
 package.json                                  |   2 +-
 18 files changed, 331 insertions(+), 355 deletions(-)
 create mode 100644 app/esTypes.ts

diff --git a/app/components/FeaturedMedium.tsx b/app/components/FeaturedMedium.tsx
index 565435a..32a3d80 100644
--- a/app/components/FeaturedMedium.tsx
+++ b/app/components/FeaturedMedium.tsx
@@ -1,19 +1,16 @@
+import type { ESPlace } from "~/esTypes";
 import VideoEmbed from "./VideoEmbed";
-import type { TRelatedCoreDataRecords } from "~/types";
 
 interface Props {
-  record: TRelatedCoreDataRecords;
+  record: ESPlace;
 }
 
 const FeaturedMedium = ({ record }: Props) => {
-  if (!record.items || !record.media_contents) return null;
-  if (record.items?.videos) {
-    return <VideoEmbed video={record.items.videos[0]} />;
+  if (record.featured_video) {
+    return <VideoEmbed video={record.featured_video} />;
   }
-  if (record.media_contents?.photographs) {
-    return (
-      <img src={record.media_contents.photographs[0].content_url} alt="" />
-    );
+  if (record.featured_photograph) {
+    return <img src={record.featured_photograph} alt="" />;
   }
   return <></>;
 };
diff --git a/app/components/VideoEmbed.tsx b/app/components/VideoEmbed.tsx
index 7a3c868..ce48541 100644
--- a/app/components/VideoEmbed.tsx
+++ b/app/components/VideoEmbed.tsx
@@ -1,32 +1,16 @@
-import { useMemo, useState } from "react";
-import type { TVideoItem } from "../types";
+import type { ESVideo } from "~/esTypes";
 
 interface Props {
-  video: TVideoItem;
+  video: ESVideo;
 }
 
 const VideoEmbed = ({ video }: Props) => {
-  const [embedSrc, setEmbedSrc] = useState<string | undefined>(undefined);
-
-  useMemo(() => {
-    switch (video.provider) {
-      case "Vimeo":
-        setEmbedSrc(`https://player.vimeo.com/video/${video.embed_id}`);
-        break;
-      case "YouTube":
-        setEmbedSrc(`https://www.youtube.com/embed/${video.embed_id}`);
-      default:
-        break;
-    }
-    return;
-  }, [video]);
-
   return (
     <div className="relative pb-[56.25%] h-0 overflow-hidden max-w-full">
       <iframe
         className="absolute t-0 l-0 h-full w-full"
-        src={embedSrc}
-        title={video.source_titles.find((t) => t.primary)?.name.name}
+        src={video.embed_url}
+        title={video.name}
         allowFullScreen
       />
     </div>
diff --git a/app/components/VideoModal.tsx b/app/components/VideoModal.tsx
index 643b39b..ae39ed2 100644
--- a/app/components/VideoModal.tsx
+++ b/app/components/VideoModal.tsx
@@ -9,13 +9,12 @@ import {
 } from "@headlessui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCircleXmark } from "@fortawesome/free-solid-svg-icons";
-import VideoEmbed from "./VideoEmbed";
-import type { TVideoItem } from "~/types";
 import type { ReactNode } from "react";
+import type { ESVideo } from "~/esTypes";
 
 interface Props {
   children: ReactNode;
-  video: TVideoItem;
+  video: ESVideo;
 }
 
 const VideoModal = ({ children, video }: Props) => {
@@ -47,14 +46,21 @@ const VideoModal = ({ children, video }: Props) => {
                 <DialogPanel className="w-full max-w-md md:max-w-4xl rounded-xl bg-white p-6">
                   <DialogTitle as="div" className="flex justify-between">
                     <h3 className="text-base/7 font-medium text-black">
-                      {video.primary_name.name.name}
+                      {video.name}
                     </h3>
 
                     <Button onClick={close}>
                       <FontAwesomeIcon icon={faCircleXmark} /> Close
                     </Button>
                   </DialogTitle>
-                  <VideoEmbed video={video} />
+                  <div className="relative pb-[56.25%] h-0 overflow-hidden max-w-full">
+                    <iframe
+                      className="absolute t-0 l-0 h-full w-full"
+                      src={video.embed_url}
+                      title={video.name}
+                      allowFullScreen
+                    />
+                  </div>
                 </DialogPanel>
               </TransitionChild>
             </div>
diff --git a/app/components/VideoThumbnail.tsx b/app/components/VideoThumbnail.tsx
index a9c5902..98c54d1 100644
--- a/app/components/VideoThumbnail.tsx
+++ b/app/components/VideoThumbnail.tsx
@@ -1,34 +1,14 @@
-import { useMemo, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlayCircle } from "@fortawesome/free-solid-svg-icons";
-import type { TVideoItem } from "../types";
+import type { ESVideo } from "~/esTypes";
 
 interface Props {
-  video: TVideoItem;
+  video: ESVideo;
   imgClassName?: string;
   figClassName?: string;
 }
 
 const VideoThumbnail = ({ video, imgClassName, figClassName }: Props) => {
-  const [thumbnailSrc, setThumbnailSrc] = useState<string | undefined>(
-    undefined,
-  );
-
-  useMemo(() => {
-    switch (video.provider) {
-      case "Vimeo":
-        setThumbnailSrc(`https://vumbnail.com/${video.embed_id}.jpg`);
-        break;
-      case "YouTube":
-        setThumbnailSrc(
-          `https://img.youtube.com/vi/${video.embed_id}/hqdefault.jpg`,
-        );
-      default:
-        break;
-    }
-    return;
-  }, [video]);
-
   return (
     <figure className={`${figClassName ?? ""}`}>
       <div className="relative">
@@ -38,11 +18,13 @@ const VideoThumbnail = ({ video, imgClassName, figClassName }: Props) => {
             className="drop-shadow-2xl opacity-80"
           />
         </span>
-        <img className={`${imgClassName ?? ""}`} src={thumbnailSrc} alt="" />
+        <img
+          className={`${imgClassName ?? ""}`}
+          src={video.thumbnail_url}
+          alt=""
+        />
       </div>
-      <figcaption className="md:w-32 text-left">
-        {video.source_titles.find((t) => t.primary)?.name.name}
-      </figcaption>
+      <figcaption className="md:w-32 text-left">{video.name}</figcaption>
     </figure>
   );
 };
diff --git a/app/components/layout/PlaceContent.tsx b/app/components/layout/PlaceContent.tsx
index 6db70d0..d1d9aad 100644
--- a/app/components/layout/PlaceContent.tsx
+++ b/app/components/layout/PlaceContent.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import RelatedRecords from "./RelatedRecords";
 
 interface Props {
   children: ReactNode;
@@ -8,6 +9,7 @@ const PlaceContent = ({ children }: Props) => {
   return (
     <div className="w-full md:w-1/2 lg:w-2/5 overflow-scroll pb-32">
       <div className="flex flex-col">{children}</div>
+      <RelatedRecords />
     </div>
   );
 };
diff --git a/app/components/layout/RelatedRecords.tsx b/app/components/layout/RelatedRecords.tsx
index e035428..9a9189e 100644
--- a/app/components/layout/RelatedRecords.tsx
+++ b/app/components/layout/RelatedRecords.tsx
@@ -5,29 +5,20 @@ import RelatedVideos from "../relatedRecords/RelatedVideos";
 import RelatedPhotographs from "../relatedRecords/RelatedPhotographs";
 import RelatedMapLayers from "../relatedRecords/RelatedMapLayers";
 import RelatedTopoQuads from "../relatedRecords/RelatedTopoQuads";
-import type { TRelatedCoreDataRecords } from "~/types";
 
-interface Props {
-  related: TRelatedCoreDataRecords;
-}
-
-const RelatedRecords = ({ related }: Props) => {
-  const { place } = useContext(PlaceContext);
+const RelatedRecords = () => {
+  const { place, manifestLabel } = useContext(PlaceContext);
   return (
     <>
-      {related.places?.relatedPlaces && (
-        <RelatedPlaces places={related.places.relatedPlaces} />
-      )}
-      {related.items?.videos && <RelatedVideos videos={related.items.videos} />}
-      {related.media_contents?.photographs && (
-        <RelatedPhotographs manifest={place.iiif_manifest} />
-      )}
-      {related.places?.mapLayers && (
-        <RelatedMapLayers layers={related.places.mapLayers} />
-      )}
-      {related.places?.topoQuads && (
-        <RelatedTopoQuads quads={related.places.topoQuads} />
-      )}
+      <RelatedPlaces />
+      <RelatedVideos />
+      <RelatedPhotographs
+        manifest={place.manifests.find(
+          (manifest) => manifest.label === manifestLabel
+        )}
+      />
+      {/* <RelatedMapLayers layers={place.places.mapLayers} />
+      <RelatedTopoQuads quads={place.places.topoQuads} /> */}
     </>
   );
 };
diff --git a/app/components/relatedRecords/RelatedPhotographs.tsx b/app/components/relatedRecords/RelatedPhotographs.tsx
index 412a7b4..9be2335 100644
--- a/app/components/relatedRecords/RelatedPhotographs.tsx
+++ b/app/components/relatedRecords/RelatedPhotographs.tsx
@@ -2,9 +2,10 @@ import { useEffect, useState } from "react";
 import RelatedSection from "./RelatedSection";
 import PhotographModal from "../PhotographModal";
 import type { TIIIFManifest, TIIIFBody, TPhotograph } from "~/types";
+import type { ESManifests } from "~/esTypes";
 
 interface Props {
-  manifest: string;
+  manifest?: ESManifests;
 }
 
 const RelatedPhotographs = ({ manifest }: Props) => {
@@ -13,7 +14,8 @@ const RelatedPhotographs = ({ manifest }: Props) => {
 
   useEffect(() => {
     const fetchIIIF = async () => {
-      const response = await fetch(manifest);
+      if (!manifest) return;
+      const response = await fetch(manifest.identifier);
       const data: TIIIFManifest = await response.json();
       setPhotographs(
         data.items.map((item) => {
@@ -23,7 +25,7 @@ const RelatedPhotographs = ({ manifest }: Props) => {
             body: item.items[0].items[0].body,
             name: item.label.en[0],
           };
-        }),
+        })
       );
     };
     fetchIIIF();
@@ -34,39 +36,43 @@ const RelatedPhotographs = ({ manifest }: Props) => {
     setActivePhotograph(photographs[0].body);
   }, [photographs]);
 
-  return (
-    <RelatedSection title="Photographs">
-      <div className="flex flex-wrap justify-around md:justify-start">
-        {photographs && (
-          <>
-            {photographs.map((photo) => {
-              return (
-                <PhotographModal
-                  key={photo.thumb}
-                  activePhotograph={activePhotograph}
-                  photographs={photographs}
-                  setActivePhotograph={setActivePhotograph}
-                  photograph={photo}
-                >
-                  <figure className="md:my-8 md:mr-8 max-w-xs">
-                    <img
-                      src={photo.thumb}
-                      alt=""
-                      className="drop-shadow-md h-auto md:h-32 w-full md:w-auto m-auto"
-                    />
-                    <span className="sr-only">Select image</span>
-                    {/* <figcaption className="md:w-32 text-left break-words text-sm pt-1">
-                      {photo.name}
-                    </figcaption> */}
-                  </figure>
-                </PhotographModal>
-              );
-            })}
-          </>
-        )}
-      </div>
-    </RelatedSection>
-  );
+  if (photographs) {
+    return (
+      <RelatedSection title="Photographs">
+        <div className="flex flex-wrap justify-around md:justify-start">
+          {photographs && (
+            <>
+              {photographs.map((photo) => {
+                return (
+                  <PhotographModal
+                    key={photo.name}
+                    activePhotograph={activePhotograph}
+                    photographs={photographs}
+                    setActivePhotograph={setActivePhotograph}
+                    photograph={photo}
+                  >
+                    <figure className="md:my-8 md:mr-8 max-w-xs">
+                      <img
+                        src={photo.thumb}
+                        alt=""
+                        className="drop-shadow-md h-auto md:h-32 w-full md:w-auto m-auto"
+                      />
+                      <span className="sr-only">Select image</span>
+                      {/* <figcaption className="md:w-32 text-left break-words text-sm pt-1">
+                        {photo.name}
+                      </figcaption> */}
+                    </figure>
+                  </PhotographModal>
+                );
+              })}
+            </>
+          )}
+        </div>
+      </RelatedSection>
+    );
+  }
+
+  return null;
 };
 
 export default RelatedPhotographs;
diff --git a/app/components/relatedRecords/RelatedPlaces.tsx b/app/components/relatedRecords/RelatedPlaces.tsx
index d5edb27..631a1ae 100644
--- a/app/components/relatedRecords/RelatedPlaces.tsx
+++ b/app/components/relatedRecords/RelatedPlaces.tsx
@@ -1,110 +1,95 @@
 import { useCallback, useContext, useEffect, useState } from "react";
-import type {
-  MapLayerMouseEvent,
-  GeoJSONSource,
-  SourceSpecification,
-} from "maplibre-gl";
-import { LngLatBounds } from "maplibre-gl";
+import { GeoJSONSource, LngLatBounds } from "maplibre-gl";
 import { bbox } from "@turf/turf";
-import { pulsingDot } from "~/utils/pulsingDot";
 import RelatedSection from "./RelatedSection";
 import { MapContext, PlaceContext } from "~/contexts";
 import { toFeatureCollection } from "~/utils/toFeatureCollection";
 import PlacePopup from "../mapping/PlacePopup";
-import { orderLayers } from "~/utils/orderLayers";
 import { cluster, clusterCount, singlePoint } from "~/mapStyles/geoJSON";
 import { Link } from "@remix-run/react";
-import type { TRelatedPlaceRecord } from "~/types";
+import type { MapLayerMouseEvent, SourceSpecification } from "maplibre-gl";
+import type { ESRelatedPlace } from "~/esTypes";
 
-interface Props {
-  places: TRelatedPlaceRecord[];
-}
-
-const RelatedPlaces = ({ places }: Props) => {
+const RelatedPlaces = () => {
   const { map } = useContext(MapContext);
   const { place, setLayerSources, setActiveLayers } = useContext(PlaceContext);
-  const [activePlace, setActivePlace] = useState<
-    TRelatedPlaceRecord | undefined
-  >(undefined);
-
-  const handleUnclusteredPointClick = useCallback(
-    (e: MapLayerMouseEvent) => {
-      if (!e.features || !e.features.length) return;
-      const feature = e.features[0];
-      const clickedPlace = places.find(
-        (place) => place.identifier === feature.properties.identifier
-      );
-
-      setActivePlace(clickedPlace);
-    },
-    [places]
+  const [activePlace, setActivePlace] = useState<ESRelatedPlace | undefined>(
+    undefined
+  );
+  const [placeBounds, setPlaceBounds] = useState<LngLatBounds | undefined>(
+    undefined
   );
 
-  const handleClusterClick = useCallback(
-    async (e: MapLayerMouseEvent) => {
+  const handleClick = useCallback(
+    async ({ features, lngLat, ...rest }: MapLayerMouseEvent) => {
       if (!map) return;
-      const features = map.queryRenderedFeatures(e.point, {
-        layers: [`${place.uuid}-clusters`],
-      });
-      if (
-        features.length > 0 &&
-        features[0].properties &&
-        features[0].geometry
-      ) {
-        const clusterId = features[0].properties.cluster_id;
-        const source = map.getSource(`${place.uuid}-places`) as GeoJSONSource;
-        if (source) {
-          try {
-            const zoom = await source.getClusterExpansionZoom(clusterId);
-            const geometry = features[0].geometry;
-            if (geometry.type === "Point") {
-              map.easeTo({
-                center: geometry.coordinates as [number, number],
-                zoom: zoom,
-              });
-            }
-          } catch (err) {
-            console.error("Error expanding cluster:", err);
-          }
-        }
+
+      if (features && features[0].id) {
+        const clickedPlace = place.places.find(
+          (relatedPlaces) => relatedPlaces.uuid === features[0].id
+        );
+        setActivePlace(clickedPlace);
+      }
+      if (features && features[0].properties.cluster) {
+        const source: GeoJSONSource | undefined = map.getSource(
+          features[0].layer.source
+        );
+        if (!source) return;
+        const zoom = await source.getClusterExpansionZoom(
+          features[0].properties.cluster_id
+        );
+        map.easeTo({
+          center: lngLat,
+          zoom,
+        });
       }
     },
     [map, place]
   );
 
+  const handleMouseEnter = useCallback(() => {
+    if (!map) return;
+    map.getCanvas().style.cursor = "pointer";
+  }, [map]);
+
+  const handleMouseLeave = useCallback(() => {
+    if (!map) return;
+    map.getCanvas().style.cursor = "";
+  }, [map]);
+
+  useEffect(() => {
+    if (!placeBounds || !map) return;
+    if (!activePlace) map.fitBounds(placeBounds);
+  }, [map, placeBounds, activePlace]);
+
   useEffect(() => {
     if (!map) return;
+    if (place.places.length === 0) return;
 
-    const geoJSON = toFeatureCollection(places);
+    const geojson = toFeatureCollection(place.places);
 
     const bounds = new LngLatBounds(
-      bbox(geoJSON) as [number, number, number, number]
+      bbox(geojson) as [number, number, number, number]
     );
 
-    // Extend the island bounds if related places are beyond the island bounds.
+    // // Extend the island bounds if related places are beyond the island bounds.
     const newBounds = map.getBounds().extend(bounds);
 
-    map.fitBounds(newBounds, { maxZoom: 14 });
+    setPlaceBounds(newBounds);
 
-    if (!map.getImage("pulsing-dot")) {
-      const dot = pulsingDot(map);
-      if (dot) {
-        map.addImage("pulsing-dot", dot, { pixelRatio: 2 });
-      }
-    }
+    map.fitBounds(newBounds, { maxZoom: 14 });
 
     const placesSource: SourceSpecification = {
       type: "geojson",
-      data: geoJSON,
+      data: geojson,
       cluster: true,
       clusterMaxZoom: 14,
       clusterRadius: 50,
+      promoteId: "uuid",
     };
 
-    if (map.getSource(`${place.uuid}-places`)) {
+    if (map.getSource(`${place.uuid}-places`))
       map.removeSource(`${place.uuid}-places`);
-    }
-
     map.addSource(`${place.uuid}-places`, placesSource);
 
     const clusterLayer = cluster(
@@ -134,68 +119,50 @@ const RelatedPlaces = ({ places }: Props) => {
       map.addLayer(unclusteredLayer);
     }
 
-    // Clear active place when clicking outside of a point
-    map.on("click", () => {
-      setActivePlace(undefined);
-    });
-
-    map.on("click", clusterLayer.id, handleClusterClick);
-    map.on("click", unclusteredLayer.id, handleUnclusteredPointClick);
-
-    map.on("mouseenter", clusterLayer.id, () => {
-      map.getCanvas().style.cursor = "pointer";
-    });
-    map.on("mouseleave", clusterLayer.id, () => {
-      map.getCanvas().style.cursor = "";
-    });
-
-    map.on("mouseenter", unclusteredLayer.id, () => {
-      map.getCanvas().style.cursor = "pointer";
-    });
-    map.on("mouseleave", unclusteredLayer.id, () => {
-      map.getCanvas().style.cursor = "";
-    });
-
-    if (setLayerSources)
-      setLayerSources((layerSources) => {
-        return { ...layerSources, [`${place.uuid}-places`]: placesSource };
-      });
-
-    orderLayers(map, place.uuid);
+    map.on("mouseenter", clusterLayer.id, handleMouseEnter);
+    map.on("mouseenter", unclusteredLayer.id, handleMouseEnter);
+    map.on("mouseleave", clusterLayer.id, handleMouseLeave);
+    map.on("mouseleave", unclusteredLayer.id, handleMouseLeave);
+    map.on("click", clusterLayer.id, handleClick);
+    map.on("click", unclusteredLayer.id, handleClick);
 
     return () => {
-      try {
-        if (map.getImage("pulsing-dot")) map.removeImage("pulsing-dot");
-        if (map.getLayer(clusterLayer.id)) map.removeLayer(clusterLayer.id);
-        if (map.getLayer(countLayer.id)) map.removeLayer(countLayer.id);
-        if (map.getLayer(unclusteredLayer.id))
-          map.removeLayer(unclusteredLayer.id);
-        if (map.getSource(`${place.uuid}-places`))
-          map.removeSource(`${place.uuid}-places`);
-        if (map.getSource(`${place.uuid}-places`))
-          map.removeSource(`${place.uuid}-places`);
-        map.off("click", clusterLayer.id, handleClusterClick);
-        map.off("click", unclusteredLayer.id, handleUnclusteredPointClick);
-      } catch {}
+      map.off("mouseenter", clusterLayer.id, handleMouseEnter);
+      map.off("mouseleave", clusterLayer.id, handleMouseLeave);
+      map.off("mouseenter", unclusteredLayer.id, handleMouseEnter);
+      map.off("mouseleave", unclusteredLayer.id, handleMouseLeave);
+      map.off("click", clusterLayer.id, handleClick);
+      map.off("click", unclusteredLayer.id, handleClick);
+      if (map.getLayer(clusterLayer.id)) map.removeLayer(clusterLayer.id);
+      if (map.getLayer(countLayer.id)) map.removeLayer(countLayer.id);
+      if (map.getLayer(unclusteredLayer.id))
+        map.removeLayer(unclusteredLayer.id);
+      if (map.getSource(`${place.uuid}-places`))
+        map.removeSource(`${place.uuid}-places`);
+      if (map.getSource(`${place.uuid}-places`))
+        map.removeSource(`${place.uuid}-places`);
     };
   }, [
     map,
     place,
-    handleClusterClick,
-    handleUnclusteredPointClick,
+    handleClick,
     setActiveLayers,
     setLayerSources,
-    places,
+    handleMouseEnter,
+    handleMouseLeave,
   ]);
 
+  if (place.places.length === 0) {
+    return null;
+  }
+
   return (
     <RelatedSection title="Related Places">
       <div className="grid grid-cols-1 md:grid-cols-2">
-        {places.map((relatedPlace) => {
+        {place.places.map((relatedPlace) => {
           return (
-            <div key={relatedPlace.uuid}>
+            <div key={`related-place-${relatedPlace.uuid}`}>
               <button
-                key={relatedPlace.uuid}
                 className={`text-black/75 hover:text-black text-left md:py-1 ${activePlace === relatedPlace ? "underline font-bold" : ""}`}
                 onClick={() => {
                   setActivePlace(relatedPlace);
@@ -205,20 +172,20 @@ const RelatedPlaces = ({ places }: Props) => {
               </button>
               <PlacePopup
                 location={{
-                  lat: relatedPlace.place_geometry.geometry_json.coordinates[1],
-                  lon: relatedPlace.place_geometry.geometry_json.coordinates[0],
+                  lat: relatedPlace.location.lat,
+                  lon: relatedPlace.location.lon,
                 }}
-                show={activePlace === relatedPlace}
+                show={activePlace?.uuid === relatedPlace.uuid}
                 onClose={() => setActivePlace(undefined)}
               >
                 <h4 className="text-xl">{relatedPlace.name}</h4>
-                <div
+                {/* <div
                   dangerouslySetInnerHTML={{
                     __html: relatedPlace.description ?? "",
                   }}
-                />
+                /> */}
                 <Link
-                  to={`/places/${relatedPlace.name.replaceAll(" ", "-")}`}
+                  to={`/places/${relatedPlace.slug}`}
                   state={{ backTo: place.name }}
                   className="text-blue-600 underline underline-offset-2 hover:text-blue-900"
                 >
diff --git a/app/components/relatedRecords/RelatedVideos.tsx b/app/components/relatedRecords/RelatedVideos.tsx
index 8274dab..df32000 100644
--- a/app/components/relatedRecords/RelatedVideos.tsx
+++ b/app/components/relatedRecords/RelatedVideos.tsx
@@ -1,19 +1,21 @@
-import type { TVideoItem } from "~/types";
 import RelatedSection from "./RelatedSection";
 import VideoThumbnail from "../VideoThumbnail";
 import VideoModal from "../VideoModal";
+import { useContext } from "react";
+import { PlaceContext } from "~/contexts";
 
-interface Props {
-  videos: TVideoItem[];
-}
+const RelatedVideos = () => {
+  const { place } = useContext(PlaceContext);
 
-const RelatedVideos = ({ videos }: Props) => {
+  if (place.videos.length === 0) {
+    return null;
+  }
   return (
     <RelatedSection title="Videos">
       <div className="flex flex-wrap justify-around md:justify-start">
-        {videos.map((video) => {
+        {place.videos.map((video) => {
           return (
-            <VideoModal key={video.uuid} video={video}>
+            <VideoModal key={video.embed_id} video={video}>
               <VideoThumbnail
                 video={video}
                 figClassName="md:my-8 md:mr-8 max-w-xs"
diff --git a/app/contexts.ts b/app/contexts.ts
index 6443f30..ceaeb36 100644
--- a/app/contexts.ts
+++ b/app/contexts.ts
@@ -1,8 +1,9 @@
 import { createContext } from "react";
 import type { Dispatch, SetStateAction } from "react";
 import type { Map } from "maplibre-gl";
-import type { TPlaceRecord, TPlaceSource } from "./types";
+import type { TPlaceSource } from "./types";
 import type { FeatureCollection } from "geojson";
+import type { ESPlace } from "./esTypes";
 
 type TMapContext = {
   map: Map | undefined;
@@ -12,12 +13,13 @@ type TMapContext = {
 };
 
 type TPlaceContext = {
-  place: TPlaceRecord;
+  place: ESPlace;
   activeLayers: string[];
   setActiveLayers: Dispatch<SetStateAction<string[]>>;
   geoJSON?: FeatureCollection;
   layerSources: TPlaceSource;
   setLayerSources: Dispatch<SetStateAction<TPlaceSource>>;
+  manifestLabel: "photographs" | "combined";
 };
 
 export const MapContext = createContext<TMapContext>({
@@ -33,17 +35,33 @@ export const MapContext = createContext<TMapContext>({
 
 export const PlaceContext = createContext<TPlaceContext>({
   place: {
-    uuid: "",
     name: "",
-    place_names: [],
-    place_layers: [],
-    web_identifiers: [],
-    place_geometry: { geometry_json: { type: "Point", coordinates: [0, 0] } },
-    user_defined: { key: { label: "", value: "" } },
-    iiif_manifest: "",
+    description: "",
+    featured_photograph: "",
+    featured_video: {
+      featured: false,
+      embed_url: "",
+      provider: "",
+      embed_id: "",
+      name: "",
+      thumbnail_url: "",
+      uuid: "",
+    },
+    identifier: "",
+    types: [],
+    county: "",
+    places: [],
+    videos: [],
+    photographs: [],
+    location: { lat: 0, lon: 0 },
+    uuid: "",
+    slug: "",
+    manifests: [],
+    geojson: { type: "FeatureCollection", features: [] },
   },
   activeLayers: [],
   layerSources: {},
+  manifestLabel: "photographs",
   setActiveLayers: (_: SetStateAction<string[]>) => {
     console.error(
       "setActiveLayers not implemented. Did you pass it to context?"
diff --git a/app/data/coredata.ts b/app/data/coredata.ts
index e62ced5..a18d203 100644
--- a/app/data/coredata.ts
+++ b/app/data/coredata.ts
@@ -6,6 +6,7 @@ import {
   keys,
   modelFieldUUIDs,
 } from "~/config";
+import { ESPlace } from "~/esTypes";
 import type {
   TPlaceRecord,
   TPlace,
@@ -95,16 +96,20 @@ export const fetchPlaceBySlug = async (slug: string | undefined) => {
     from: 0,
     _source: {
       includes: [
-        "name",
-        "description",
         "county",
-        "uuid",
-        "location",
-        "types",
+        "description",
+        "featured_photograph",
+        "featured_video",
         "identifier",
-        "geojson",
+        "manifests",
+        "name",
+        "location",
+        "photographs",
+        "places",
         "slug",
-        "manifest",
+        "types",
+        "uuid",
+        "videos",
       ],
     },
   };
@@ -119,7 +124,7 @@ export const fetchPlaceBySlug = async (slug: string | undefined) => {
   );
 
   const data = await response.json();
-  const place: TPlace = data.hits.hits.map((hit: TESHit) => hit._source)[0];
+  const place: ESPlace = data.hits.hits.map((hit: TESHit) => hit._source)[0];
   return place;
 };
 
diff --git a/app/esTypes.ts b/app/esTypes.ts
new file mode 100644
index 0000000..9523e9c
--- /dev/null
+++ b/app/esTypes.ts
@@ -0,0 +1,53 @@
+import { FeatureCollection } from "geojson";
+
+type TLonLat = {
+  lon: number;
+  lat: number;
+};
+
+export type ESRelatedPlace = {
+  name: string;
+  location: TLonLat;
+  type: string;
+  uuid: string;
+  slug: string;
+};
+
+export type ESVideo = {
+  featured: null | boolean;
+  embed_url: string;
+  provider: string;
+  embed_id: string;
+  name: string;
+  thumbnail_url: string;
+  uuid: string;
+};
+
+export type ESPhotograph = {
+  featured: boolean | null;
+  name: string;
+  uuid: string;
+};
+
+export type ESManifests = {
+  identifier: string;
+  label: "combined" | "photographs";
+};
+
+export type ESPlace = {
+  name: string;
+  description: string;
+  featured_photograph: string;
+  featured_video: ESVideo;
+  identifier: string;
+  types: string[];
+  county: string;
+  places: ESRelatedPlace[];
+  videos: ESVideo[];
+  photographs: ESPhotograph[];
+  location: TLonLat;
+  uuid: string;
+  slug: string;
+  manifests: ESManifests[];
+  geojson: FeatureCollection;
+};
diff --git a/app/routes/islands.$id.tsx b/app/routes/islands.$id.tsx
index f980b78..8204605 100644
--- a/app/routes/islands.$id.tsx
+++ b/app/routes/islands.$id.tsx
@@ -7,29 +7,18 @@ import {
   defer,
 } from "@remix-run/react";
 import { dataHosts } from "~/config.ts";
-import { fetchPlaceBySlug, fetchRelatedRecords } from "~/data/coredata";
-import RelatedPlaces from "~/components/relatedRecords/RelatedPlaces";
+import { fetchPlaceBySlug } from "~/data/coredata";
 import FeaturedMedium from "~/components/FeaturedMedium";
-import RelatedVideos from "~/components/relatedRecords/RelatedVideos";
 import { PlaceContext, MapContext } from "~/contexts";
-import RelatedPhotographs from "~/components/relatedRecords/RelatedPhotographs";
 import RouteError from "~/components/errorResponses/RouteError";
 import CodeError from "~/components/errorResponses/CodeError";
 import Loading from "~/components/layout/Loading";
-import type {
-  TWordPressData,
-  TIslandServerData,
-  TIslandClientData,
-  TRelatedCoreDataRecords,
-  TPlaceSource,
-} from "~/types";
-import RelatedMapLayers from "~/components/relatedRecords/RelatedMapLayers";
-import RelatedTopoQuads from "~/components/relatedRecords/RelatedTopoQuads";
 import Heading from "~/components/layout/Heading";
 // import PlaceGeoJSON from "~/components/mapping/PlaceGeoJSON";
 import { islands as islandStyle } from "~/mapStyles";
+import PlaceContent from "~/components/layout/PlaceContent";
+import type { TWordPressData, TIslandClientData, TPlaceSource } from "~/types";
 import type { LoaderFunctionArgs } from "@remix-run/node";
-import type { ClientLoaderFunctionArgs } from "@remix-run/react";
 
 export const loader = async ({ params }: LoaderFunctionArgs) => {
   const place = await fetchPlaceBySlug(params.id);
@@ -50,25 +39,24 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
   return defer({ place, wpData: wpData[0] });
 };
 
-export const clientLoader = async ({
-  serverLoader,
-}: ClientLoaderFunctionArgs) => {
-  const serverData = await serverLoader<TIslandServerData>();
-  const relatedRecords: TRelatedCoreDataRecords | {} =
-    await fetchRelatedRecords(serverData.place.uuid);
+// export const clientLoader = async ({
+//   serverLoader,
+// }: ClientLoaderFunctionArgs) => {
+//   const serverData = await serverLoader<TIslandServerData>();
+//   const relatedRecords: TRelatedCoreDataRecords | {} =
+//     await fetchRelatedRecords(serverData.place.uuid);
 
-  return { ...serverData, ...relatedRecords };
-};
+//   return { ...serverData, ...relatedRecords };
+// };
 
-clientLoader.hydrate = true;
+// clientLoader.hydrate = true;
 
 export const HydrateFallback = () => {
   return <Loading />;
 };
 
 const IslandPage = () => {
-  const { island, wpData, place, maps, ...related } =
-    useLoaderData<TIslandClientData>();
+  const { wpData, place } = useLoaderData<TIslandClientData>();
   const { map, mapLoaded } = useContext(MapContext);
   const [activeLayers, setActiveLayers] = useState<string[]>([]);
   const [layerSources, setLayerSources] = useState<TPlaceSource>({});
@@ -109,51 +97,30 @@ const IslandPage = () => {
         place,
         activeLayers,
         setActiveLayers,
-        geoJSON: place.geojson,
         layerSources,
         setLayerSources,
+        manifestLabel: "combined",
       }}
     >
-      <div className="w-full md:w-1/2 lg:w-2/5 overflow-scroll pb-32">
-        <Suspense fallback={<HydrateFallback />}>
-          <div className="flex flex-col">
-            <Heading
-              as="h1"
-              className="text-2xl px-4 pt-4 sticky top-0 z-10 bg-white"
-            >
-              {place.name}
-            </Heading>
-            <div ref={topRef} className="relative -top-12 z-10 min-h-10">
-              <FeaturedMedium record={related} />
-            </div>
-            <div
-              className="relative px-4 -mt-12 primary-content"
-              dangerouslySetInnerHTML={{
-                __html: wpData?.content.rendered ?? place.description,
-              }}
-            />
+      <Suspense fallback={<HydrateFallback />}>
+        <PlaceContent>
+          <Heading
+            as="h1"
+            className="text-2xl px-4 pt-4 sticky top-0 z-10 bg-white"
+          >
+            {place.name}
+          </Heading>
+          <div ref={topRef} className="relative -top-12 z-10 min-h-10">
+            <FeaturedMedium record={place} />
           </div>
-          {related.places?.relatedPlaces && (
-            <RelatedPlaces places={related.places.relatedPlaces} />
-          )}
-          {related.items?.videos && (
-            <RelatedVideos videos={related.items.videos} />
-          )}
-          {/* TODO: Fix how the manifest is indexed */}
-          {related.media_contents?.photographs && (
-            <RelatedPhotographs
-              manifest={`https://${dataHosts.coreData}${place.manifest.identifier}`}
-            />
-          )}
-          {related.places?.mapLayers && (
-            <RelatedMapLayers layers={related.places.mapLayers} />
-          )}
-          {related.places?.topoQuads && (
-            <RelatedTopoQuads quads={related.places.topoQuads} />
-          )}
-          {/* {place.geojson && <PlaceGeoJSON />} */}
-        </Suspense>
-      </div>
+          <div
+            className="relative px-4 -mt-12 primary-content"
+            dangerouslySetInnerHTML={{
+              __html: wpData?.content.rendered ?? place.description,
+            }}
+          />
+        </PlaceContent>
+      </Suspense>
     </PlaceContext.Provider>
   );
 };
diff --git a/app/routes/places.$id.tsx b/app/routes/places.$id.tsx
index fbcb465..e05f911 100644
--- a/app/routes/places.$id.tsx
+++ b/app/routes/places.$id.tsx
@@ -7,27 +7,22 @@ import {
 } from "@remix-run/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
-import { fetchPlaceBySlug, fetchRelatedRecords } from "~/data/coredata";
+import { fetchPlaceBySlug } from "~/data/coredata";
 import { PlaceContext } from "~/contexts";
 import Heading from "~/components/layout/Heading";
 import FeaturedMedium from "~/components/FeaturedMedium";
 import PlaceContent from "~/components/layout/PlaceContent";
-import RelatedRecords from "~/components/layout/RelatedRecords";
 import PlaceGeoJSON from "~/components/mapping/PlaceGeoJSON";
 import Loading from "~/components/layout/Loading";
 import type { LoaderFunctionArgs } from "@remix-run/node";
-import type {
-  TPlaceRecord,
-  TPlaceSource,
-  TRelatedCoreDataRecords,
-} from "~/types";
+import type { TPlaceRecord, TPlaceSource } from "~/types";
 // import { faArrowCircleLeft, faArrowLeft, faArrowLeftLong } from "@fortawesome/free-solid-svg-icons";
 
 export const loader = async ({ params }: LoaderFunctionArgs) => {
   if (!params.id) {
     throw new Response(null, {
       status: 404,
-      statusText: "You must provide an identifier for a place.",
+      statusText: "You must provide a place in the address, eg. sapelo-island.",
     });
   }
 
@@ -38,14 +33,11 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
       statusText: `${params.id} not found.`,
     });
   }
-  const related: TRelatedCoreDataRecords | {} = await fetchRelatedRecords(
-    place.uuid
-  );
 
-  return defer({ place, related });
+  return defer({ place });
 };
 const PlacePage = () => {
-  const { place, related } = useLoaderData<TPlaceRecord>();
+  const { place } = useLoaderData<TPlaceRecord>();
   const [activeLayers, setActiveLayers] = useState<string[]>([]);
   const [layerSources, setLayerSources] = useState<TPlaceSource>({});
   const [backTo, setBackTo] = useState<boolean>(false);
@@ -67,6 +59,7 @@ const PlacePage = () => {
         layerSources,
         setLayerSources,
         geoJSON: place.geojson,
+        manifestLabel: "photographs",
       }}
     >
       <Suspense fallback={<Loading />}>
@@ -86,7 +79,7 @@ const PlacePage = () => {
             {place.name}
           </Heading>
           <div ref={topRef} className="relative -top-12 z-10 min-h-10">
-            <FeaturedMedium record={related} />
+            <FeaturedMedium record={place} />
           </div>
           <div
             className="relative px-4 -mt-12 primary-content"
@@ -95,7 +88,7 @@ const PlacePage = () => {
             }}
           />
         </PlaceContent>
-        <RelatedRecords related={related} />
+        {/* <RelatedRecords /> */}
         {place.geojson && <PlaceGeoJSON />}
       </Suspense>
     </PlaceContext.Provider>
diff --git a/app/types.ts b/app/types.ts
index cb70d7f..b51ea7b 100644
--- a/app/types.ts
+++ b/app/types.ts
@@ -10,6 +10,7 @@ import type {
 import type { LabeledIIIFExternalWebResource } from "@samvera/clover-iiif/image";
 import type { ImageService } from "@iiif/presentation-3";
 import type { SourceSpecification } from "maplibre-gl";
+import { ESPlace } from "./esTypes";
 
 export type Geometry =
   | Point
@@ -111,7 +112,7 @@ export type TCoreDataPlace = {
   user_defined: TUserDefinedField;
 };
 
-export type TPlaceRecord = TCoreDataPlace & {
+export type TPlaceRecord = {
   uuid: string;
   name: string;
   place_names: TNames[];
@@ -172,6 +173,9 @@ type TCoreDataItem = {
 export type TVideoItem = TCoreDataItem & {
   embed_id: string;
   provider: "Vimeo" | "YouTube";
+  name: string;
+  thumbnail_url: string;
+  embed_url: string;
 };
 
 type TThumbnail = {
@@ -243,7 +247,7 @@ export type TIslandConfig = {
 
 export type TIslandServerData = {
   island: TIslandConfig;
-  place: TPlaceRecord;
+  place: ESPlace;
 };
 
 export type TRelatedPlaceRecord = {
diff --git a/app/utils/toFeatureCollection.ts b/app/utils/toFeatureCollection.ts
index b81c7d8..479e563 100644
--- a/app/utils/toFeatureCollection.ts
+++ b/app/utils/toFeatureCollection.ts
@@ -1,10 +1,11 @@
-import { feature, featureCollection } from "@turf/turf";
+import { featureCollection, point } from "@turf/turf";
 import { PLACE_TYPES } from "~/config";
 import resolveConfig from "tailwindcss/resolveConfig";
 import tailwindConfig from "tailwind.config";
-import type { TPlaceGeoJSON, TPlaceRecord, TRelatedPlaceRecord } from "~/types";
+import type { TPlaceGeoJSON } from "~/types";
 import type { Hit } from "instantsearch.js";
 import type { FeatureCollection } from "geojson";
+import type { ESRelatedPlace } from "~/esTypes";
 
 // TODO: Maybe use Tailwind config to keep things constant.
 const DEFAULT_COLOR = "#ea580c";
@@ -19,15 +20,13 @@ const getColor = (type: string) => {
   return DEFAULT_COLOR;
 };
 
-export const toFeatureCollection = (
-  places: TPlaceRecord[] | TRelatedPlaceRecord[]
-) => {
+export const toFeatureCollection = (places: ESRelatedPlace[]) => {
   return featureCollection(
     places.map((place) => {
-      // @ts-ignore
-      const placeFeature = feature(place.place_geometry.geometry_json);
-      placeFeature.properties = place;
-      placeFeature.properties.hexColor = DEFAULT_COLOR;
+      const placeFeature = point([place.location.lon, place.location.lat], {
+        ...place,
+        hexColor: getColor(place.type),
+      });
       return placeFeature;
     })
   );
diff --git a/package-lock.json b/package-lock.json
index eaada1a..dafd45d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
         "save-dev": "^0.0.1-security"
       },
       "devDependencies": {
-        "@allmaps/maplibre": "^1.0.0-beta.25",
+        "@allmaps/maplibre": "^1.0.0-beta.30",
         "@iiif/presentation-3": "^2.2.3",
         "@remix-run/dev": "^2.9.2",
         "@remix-run/eslint-config": "^2.9.2",
diff --git a/package.json b/package.json
index f0641c4..1810814 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "save-dev": "^0.0.1-security"
   },
   "devDependencies": {
-    "@allmaps/maplibre": "^1.0.0-beta.25",
+    "@allmaps/maplibre": "^1.0.0-beta.30",
     "@iiif/presentation-3": "^2.2.3",
     "@remix-run/dev": "^2.9.2",
     "@remix-run/eslint-config": "^2.9.2",