Iframe (#573)

* hash value for iframe

* app: modify UI for iframe mode

* change position of zoom number to not be blocked by large attribution
* improve appearance of filename in nav for local files

* improve fill appearance in overlay mode

app/src/Frame.tsx

@@ -131,6 +131,7 @@ export function Frame(props: {
   children: JSX.Element;
   page: string;
   pmtilesOnly?: boolean;
+  iframe?: boolean;
 }) {
   const [errorMessage, setErrorMessage] = createSignal<string | undefined>();
   const [activeDrag, setActiveDrag] = createSignal<boolean>(false);
@@ -195,69 +196,76 @@ export function Frame(props: {
       ondragover={dragover}
       ondrop={drop}
     >
-      <div class="flex-none flex items-center px-4 md:px-0 pt-4 md:pt-0 flex-col md:flex-row">
+      <Show when={!props.iframe}>
-        <div class="flex items-center flex-grow flex-1">
+        <div class="flex-none flex items-center px-4 md:px-0 pt-4 md:pt-0 flex-col md:flex-row">
-          <h1 class="hidden md:inline text-xl mx-5">{pageTitle}</h1>
+          <div class="flex items-center flex-grow flex-1">
-          <form class="flex flex-1 items-center" onSubmit={loadTileset}>
+            <h1 class="hidden md:inline text-xl mx-5">{pageTitle}</h1>
-            <span class="relative flex flex-1 items-center app-border">
+            <form class="flex flex-1 items-center" onSubmit={loadTileset}>
-              <Show
+              <span class="relative flex flex-1 items-center app-border">
-                when={
+                <Show
-                  props.tileset() &&
+                  when={
-                  props.tileset()?.getStateUrl() === undefined
+                    props.tileset() &&
-                }
+                    props.tileset()?.getStateUrl() === undefined
-              >
+                  }
-                <span class="bg-yellow-500 rounded px-2 text-sm text-black">
+                  fallback={
-                  local file {props.tileset()?.getLocalFileName()}
+                    <input
-                </span>
+                      class="px-2 flex-1"
-              </Show>
+                      type="text"
-              <input
+                      name="url"
-                class="px-2 flex-1"
+                      placeholder={`${props.pmtilesOnly ? "" : "TileJSON or "}.pmtiles`}
-                type="text"
+                      value={props.tileset()?.getStateUrl() || ""}
-                name="url"
+                    />
-                placeholder={`${props.pmtilesOnly ? "" : "TileJSON or "}.pmtiles`}
+                  }
-                value={props.tileset()?.getStateUrl() || ""}
-              />
-              <Show when={props.tileset()}>
-                <button
-                  type="button"
-                  class="mr-2 text-sm px-2 btn-secondary cursor-pointer"
-                  onClick={() => props.setTileset(undefined)}
                 >
-                  clear
+                  <span class="flex-1 app-well rounded px-2 m-1 text-sm">
-                </button>
+                    {props.tileset()?.getLocalFileName()}
-              </Show>
+                  </span>
-            </span>
+                </Show>
-            <button class="px-4 ml-2 btn-primary cursor-pointer" type="submit">
+                <Show when={props.tileset()}>
-              load
+                  <button
-            </button>
+                    type="button"
-            <a
+                    class="mr-2 text-sm px-2 btn-secondary cursor-pointer"
-              href="https://github.com/protomaps/PMTiles"
+                    onClick={() => props.setTileset(undefined)}
-              target="_blank"
+                  >
-              rel="noreferrer"
+                    clear
-              class="hidden md:inline text-xs mx-4"
+                  </button>
-            >
+                </Show>
-              @{GIT_SHA}
+              </span>
-            </a>
+              <button
-          </form>
+                class="px-4 ml-2 btn-primary cursor-pointer"
+                type="submit"
+              >
+                load
+              </button>
+              <a
+                href="https://github.com/protomaps/PMTiles"
+                target="_blank"
+                rel="noreferrer"
+                class="hidden md:inline text-xs mx-4"
+              >
+                @{GIT_SHA}
+              </a>
+            </form>
+          </div>
+          <div class="flex">
+            <LinkTab
+              page="map"
+              selected={props.page === "map"}
+              tileset={props.tileset}
+            />
+            <LinkTab
+              page="archive"
+              selected={props.page === "archive"}
+              tileset={props.tileset}
+            />
+            <LinkTab
+              page="tile"
+              selected={props.page === "tile"}
+              tileset={props.tileset}
+            />
+          </div>
         </div>
-        <div class="flex">
+      </Show>
-          <LinkTab
-            page="map"
-            selected={props.page === "map"}
-            tileset={props.tileset}
-          />
-          <LinkTab
-            page="archive"
-            selected={props.page === "archive"}
-            tileset={props.tileset}
-          />
-          <LinkTab
-            page="tile"
-            selected={props.page === "tile"}
-            tileset={props.tileset}
-          />
-        </div>
-      </div>
       <Show when={errorMessage()}>
         <div class="bg-red-900 px-2 py-3 flex justify-between">
           <span>{errorMessage()}</span>

app/src/PageMap.tsx

@@ -117,8 +117,12 @@ function MapView(props: {
       protocol.add(archiveForProtocol);
     }
 
+    let fillOpacity = 0.2;
+    let fillHighlightOpacity = 0.4;
     if (await tileset.isOverlay()) {
       setBasemap(true);
+      fillOpacity = 0.6;
+      fillHighlightOpacity = 0.8;
     }
 
     if (await tileset.isVector()) {
@@ -139,8 +143,8 @@ function MapView(props: {
             "fill-opacity": [
               "case",
               ["boolean", ["feature-state", "hover"], false],
-              0.25,
+              fillHighlightOpacity,
-              0.1,
+              fillOpacity,
             ],
           },
           filter: ["==", ["geometry-type"], "Polygon"],
@@ -522,10 +526,10 @@ function MapView(props: {
               setBasemap={setBasemap}
             />
           </div>
-          <div class="absolute left-2 bottom-2">
+          <div class="absolute left-3 top-28">
             <button
               type="button"
-              class="flex items-center rounded border app-bg app-border cursor-pointer"
+              class="flex items-center rounded app-border cursor-pointer"
               onClick={roundZoom}
             >
               <span class="app-well px-1 rounded-l">Z</span>
@@ -570,6 +574,7 @@ function PageMap() {
     });
     hash = parseHash(location.hash);
   }
+  const iframe = hash.iframe === "true";
 
   const mapHashPassed = hash.map !== undefined;
   const [tileset, setTileset] = createSignal<Tileset | undefined>(
@@ -597,7 +602,7 @@ function PageMap() {
   });
 
   return (
-    <Frame tileset={tileset} setTileset={setTileset} page="map">
+    <Frame tileset={tileset} setTileset={setTileset} page="map" iframe={iframe}>
       <Show
         when={tileset()}
         fallback={<ExampleChooser setTileset={setTileset} />}