update

website/src/components/explorer/index.jsx

@@ -1,6 +1,6 @@
 // Contains code adapted from https://observablehq.com/@nrabinowitz/h3-index-inspector under the ISC license
 
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useCallback, useMemo } from "react";
 import { isValidCell, latLngToCell, getResolution } from "h3-js";
 import {
   Banner,
@@ -11,6 +11,7 @@ import {
 import { useQueryState } from "use-location-state";
 import { SelectedHexDetails } from "./details";
 import { ExplorerMap } from "./map";
+import { WhereAmIButton } from "./where-am-i";
 
 function fullyTrim(str) {
   if (!str) {
@@ -83,31 +84,6 @@ function zoomToResolution(zoom) {
 
 export default function HomeExporer({ children }) {
   const [userInput, setUserInput] = useQueryState("hex", "");
-  const [geolocationStatus, setGeolocationStatus] = useState("");
-
-  const doGeoLocation = useCallback(async () => {
-    if ("geolocation" in navigator) {
-      setGeolocationStatus("Locating...");
-      navigator.geolocation.getCurrentPosition(
-        (position) => {
-          // TODO: Consider using the accuracy to select resolution
-          setUserInput(
-            latLngToCell(
-              position.coords.latitude,
-              position.coords.longitude,
-              11,
-            ),
-          );
-          setGeolocationStatus("");
-        },
-        () => {
-          setGeolocationStatus("Error");
-        },
-      );
-    } else {
-      setGeolocationStatus("No location services");
-    }
-  }, [setUserInput]);
 
   const splitUserInput = useMemo(() => {
     return doSplitUserInput(userInput);
@@ -184,13 +160,6 @@ export default function HomeExporer({ children }) {
               resize: "vertical",
             }}
           />
-          <input
-            type="button"
-            value="Where am I?"
-            onClick={doGeoLocation}
-            style={{ marginRight: "0.5rem" }}
-          />
-          {geolocationStatus}
           {splitUserInput.length ? (
             <SelectedHexDetails
               splitUserInput={splitUserInput}
@@ -202,6 +171,7 @@ export default function HomeExporer({ children }) {
             <></>
           )}
         </BannerContainer>
+        <WhereAmIButton setUserInput={setUserInput} />
       </Banner>
       {children}
     </>

website/src/components/explorer/map.jsx

@@ -35,6 +35,7 @@ export function ExplorerMap({
 }) {
   const [currentInitialViewState, setCurrentInitialViewState] =
     useState(initialViewState);
+  const [deckLoaded, setDeckLoaded] = useState(false);
   const deckRef = useRef();
   const res0Cells = useMemo(() => getRes0Cells().map((hex) => ({ hex })), []);
   const res1Cells = useMemo(
@@ -99,7 +100,7 @@ export function ExplorerMap({
         });
       }
     }
-  }, [userInput, userValidHex]);
+  }, [userInput, userValidHex, deckLoaded]);
 
   const layers = userValidHex
     ? [
@@ -209,6 +210,7 @@ export function ExplorerMap({
       getTooltip={getTooltip}
       getCursor={getCursor}
       onClick={onClick}
+      onLoad={() => setDeckLoaded(true)}
     >
       <Map reuseMaps mapStyle={mapStyle} />
     </DeckGL>

website/src/components/explorer/where-am-i.jsx

@@ -0,0 +1,56 @@
+import { latLngToCell } from "h3-js";
+import React, { useCallback, useState } from "react";
+
+export const WhereAmIButton = ({ setUserInput }) => {
+  const [geolocationStatus, setGeolocationStatus] = useState("");
+
+  const doGeoLocation = useCallback(async () => {
+    if ("geolocation" in navigator) {
+      setGeolocationStatus("Locating...");
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          // TODO: Consider using the accuracy to select resolution
+          setUserInput(
+            latLngToCell(
+              position.coords.latitude,
+              position.coords.longitude,
+              11,
+            ),
+          );
+          setGeolocationStatus("");
+        },
+        () => {
+          setGeolocationStatus("Error");
+        },
+      );
+    } else {
+      setGeolocationStatus("No location services");
+    }
+  }, [setUserInput]);
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        right: "12px",
+        top: "12px",
+      }}
+    >
+      <button
+        type="button"
+        onClick={doGeoLocation}
+        title="Where am I?"
+        disabled={Boolean(geolocationStatus)}
+      >
+        {geolocationStatus || (
+          <img
+            style={{ filter: "grayscale(1)" }}
+            src="images/icon-high-precision.svg"
+            alt="Where am I?"
+            title="Where am I?"
+          ></img>
+        )}
+      </button>
+    </div>
+  );
+};