detect map hash being passed more reliably to auto-set bounds [#246] (#251)

* add README for installing /app [#244]

app/README.md

@@ -0,0 +1,4 @@
+# Install
+
+* First go to the `/js` directory in the root of the PMTiles repository and `npm install`
+* `npm run dev` to start the app on port 3000

app/src/App.tsx

@@ -59,6 +59,7 @@ function App() {
 
   let [errorDisplay, setErrorDisplay] = useState<string | undefined>();
   let [file, setFile] = useState<PMTiles | undefined>();
+  let [mapHashPassed, setMapHashPassed] = useState<boolean>(false);
 
   // initial load
   useEffect(() => {
@@ -67,6 +68,9 @@ function App() {
       let initialValue = new PMTiles(loadUrl);
       setFile(initialValue);
     }
+    if (location.hash.includes("map")) {
+      setMapHashPassed(true);
+    }
   }, []);
 
   useEffect(() => {
@@ -110,7 +114,11 @@ function App() {
           </GithubA>
         </GithubLink>
       </Header>
-      {file ? <Loader file={file} /> : <Start setFile={setFile} />}
+      {file ? (
+        <Loader file={file} mapHashPassed={mapHashPassed} />
+      ) : (
+        <Start setFile={setFile} />
+      )}
       <DialogPrimitive.Root open={errorDisplay !== undefined}>
         <DialogPrimitive.Portal>
           <StyledOverlay />

app/src/Loader.tsx

@@ -70,12 +70,14 @@ const ToolbarLink = StyledLink;
 const ToolbarToggleGroup = StyledToggleGroup;
 const ToolbarToggleItem = StyledToggleItem;
 
-function Loader(props: { file: PMTiles }) {
+function Loader(props: { file: PMTiles; mapHashPassed: boolean }) {
   let [tab, setTab] = useState("maplibre");
 
   let view;
   if (tab === "maplibre") {
-    view = <MaplibreMap file={props.file} />;
+    view = (
+      <MaplibreMap file={props.file} mapHashPassed={props.mapHashPassed} />
+    );
   } else if (tab === "inspector") {
     view = <Inspector file={props.file} />;
   } else {

app/src/MaplibreMap.tsx

@@ -319,7 +319,7 @@ const vectorStyle = async (file: PMTiles): Promise<any> => {
   };
 };
 
-function MaplibreMap(props: { file: PMTiles }) {
+function MaplibreMap(props: { file: PMTiles; mapHashPassed: boolean }) {
   let mapContainerRef = useRef<HTMLDivElement>(null);
   let [hamburgerOpen, setHamburgerOpen] = useState<boolean>(true);
   let [showAttributes, setShowAttributes] = useState<boolean>(false);
@@ -437,11 +437,7 @@ function MaplibreMap(props: { file: PMTiles }) {
       if (mapRef.current) {
         let map = mapRef.current;
         let header = await props.file.getHeader();
-        if (
+        if (!props.mapHashPassed) {
-          map.getCenter().lng === INITIAL_LNG &&
-          map.getCenter().lat == INITIAL_LAT &&
-          map.getZoom() === INITIAL_ZOOM
-        ) {
           // the map hash was not passed, so auto-detect the initial viewport based on metadata
           map.fitBounds(
             [