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,6 +196,7 @@ export function Frame(props: {
       ondragover={dragover}
       ondrop={drop}
     >
+      <Show when={!props.iframe}>
         <div class="flex-none flex items-center px-4 md:px-0 pt-4 md:pt-0 flex-col md:flex-row">
           <div class="flex items-center flex-grow flex-1">
             <h1 class="hidden md:inline text-xl mx-5">{pageTitle}</h1>
@@ -205,11 +207,7 @@ export function Frame(props: {
                     props.tileset() &&
                     props.tileset()?.getStateUrl() === undefined
                   }
-              >
+                  fallback={
-                <span class="bg-yellow-500 rounded px-2 text-sm text-black">
-                  local file {props.tileset()?.getLocalFileName()}
-                </span>
-              </Show>
                     <input
                       class="px-2 flex-1"
                       type="text"
@@ -217,6 +215,12 @@ export function Frame(props: {
                       placeholder={`${props.pmtilesOnly ? "" : "TileJSON or "}.pmtiles`}
                       value={props.tileset()?.getStateUrl() || ""}
                     />
+                  }
+                >
+                  <span class="flex-1 app-well rounded px-2 m-1 text-sm">
+                    {props.tileset()?.getLocalFileName()}
+                  </span>
+                </Show>
                 <Show when={props.tileset()}>
                   <button
                     type="button"
@@ -227,7 +231,10 @@ export function Frame(props: {
                   </button>
                 </Show>
               </span>
-            <button class="px-4 ml-2 btn-primary cursor-pointer" type="submit">
+              <button
+                class="px-4 ml-2 btn-primary cursor-pointer"
+                type="submit"
+              >
                 load
               </button>
               <a
@@ -258,6 +265,7 @@ export function Frame(props: {
             />
           </div>
         </div>
+      </Show>
       <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} />}