@a2f0/skyline 0.1.4 → 0.1.6

package/docs/package.md

@@ -113,6 +113,11 @@ toolbar and study links so they do not overlap the host's navigation. Set
 loading silhouette, star controls, original comparison, and building details.
 The scene's control bar starts folded behind its star; set `controls: 'open'` to
 start it open, with no fold, from its first frame. Visitors can still fold it.
+Open, the bar shows the camera hint and the OpenStreetMap credit for the streets
+and footprints. Set `attribution: false` to leave the credit out. OpenStreetMap's
+[licence](https://www.openstreetmap.org/copyright) requires crediting its contributors
+wherever its data is shown, so do this only when the host page credits
+© OpenStreetMap contributors itself.
 A small independent **show original** button remains available until the first
 3D frame succeeds, and reappears if the graphics context is lost. The SVG stays
 reachable even if WebGL, the scene document, or its bootstrap script cannot load.

package/lib/skyline-package.d.ts

@@ -10,6 +10,12 @@ export interface SkylineOptions {
     navigation?: boolean;
     /** Start the 3D scene's control bar open, or folded behind its star. Closed by default. */
     controls?: "open" | "closed";
+    /**
+     * Show the OpenStreetMap credit with the 3D scene's controls. Shown by default. OpenStreetMap's
+     * licence requires that credit wherever its data appears, so hide it only when the host page
+     * credits OpenStreetMap contributors itself.
+     */
+    attribution?: boolean;
 }
 export interface SkylineInstance {
     /** The viewer's frame; its styles are isolated from the host application. */
@@ -22,4 +28,4 @@ export interface SkylineInstance {
  * this module never touches the DOM; call it after mounting a browser component.
  * The container controls placement and size. Destroy it when that component leaves.
  */
-export declare function mountSkyline(container: HTMLElement, { assetsUrl, title, navigation, controls }: SkylineOptions): SkylineInstance;
+export declare function mountSkyline(container: HTMLElement, { assetsUrl, title, navigation, controls, attribution }: SkylineOptions): SkylineInstance;

package/lib/skyline-package.js

@@ -3,7 +3,7 @@
  * this module never touches the DOM; call it after mounting a browser component.
  * The container controls placement and size. Destroy it when that component leaves.
  */
-export function mountSkyline(container, { assetsUrl, title = "Interactive Chicago skyline", navigation = false, controls = "closed" }) {
+export function mountSkyline(container, { assetsUrl, title = "Interactive Chicago skyline", navigation = false, controls = "closed", attribution = true }) {
     if (controls !== "open" && controls !== "closed")
         throw new TypeError('Skyline controls must be "open" or "closed".');
     const document = container.ownerDocument;
@@ -21,6 +21,8 @@ export function mountSkyline(container, { assetsUrl, title = "Interactive Chicag
         viewerUrl.searchParams.set("embed", "1");
     if (controls === "open")
         viewerUrl.searchParams.set("controls", "open");
+    if (!attribution)
+        viewerUrl.searchParams.set("attribution", "hidden");
     element.src = viewerUrl.href;
     element.allowFullscreen = true;
     element.style.cssText = "display:block;width:100%;height:100%;border:0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2f0/skyline",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Interactive Chicago skyline viewer and reusable Three.js building models",
   "license": "UNLICENSED",
   "repository": {

package/site/skyline-3d.html

@@ -79,20 +79,23 @@
       </div>
     </footer>
     <script>
-      // ?controls=open, on this page's address or on the viewer that frames it, starts the bar
-      // open from its first frame, with no fold; skyline-3d.ts folds it from there.
+      // Settings from this page's address, then from the viewer that frames it, applied before
+      // the bar's first frame. ?controls=open starts the bar open, with no fold; skyline-3d.ts
+      // folds it from there. ?attribution=hidden leaves out the OpenStreetMap credit.
       (() => {
-        let controls = new URLSearchParams(location.search).get("controls");
+        const settings = new URLSearchParams(location.search);
         try {
-          if (!controls && parent !== window && parent.document.querySelector("#skyline-3d-scene")?.contentWindow === window) {
-            controls = new URLSearchParams(parent.location.search).get("controls");
+          if (parent !== window && parent.document.querySelector("#skyline-3d-scene")?.contentWindow === window) {
+            for (const [key, value] of new URLSearchParams(parent.location.search)) if (!settings.has(key)) settings.set(key, value);
           }
         } catch { /* A scene embedded on another origin reads only its own address. */ }
-        if (controls !== "open") return;
-        const toggle = document.querySelector("#menu-toggle");
-        toggle.setAttribute("aria-expanded", "true");
-        toggle.title = "Hide the controls";
-        document.querySelector(".control-bar").classList.add("open");
+        if (settings.get("controls") === "open") {
+          const toggle = document.querySelector("#menu-toggle");
+          toggle.setAttribute("aria-expanded", "true");
+          toggle.title = "Hide the controls";
+          document.querySelector(".control-bar").classList.add("open");
+        }
+        if (settings.get("attribution") === "hidden") document.querySelector(".attribution").hidden = true;
       })();
     </script>
     <div class="tooltip" id="tooltip" aria-hidden="true" hidden></div>

package/site/skyline-3d.js

@@ -75,7 +75,8 @@ for (const button of celebrationButtons) {
         return message ? [`${message.lines.join(" ")}${message.adapted ? " (adapted tribute)" : ""} · ${model.building.userData["geography"]?.name ?? model.building.name}`] : [];
     });
     button.title = `${preset.label}: ${displays.join("; ")} · click to light all; click again to turn off`;
-    button.disabled = displays.length === 0;
+    // A badge no mapped building can display is left out rather than greyed out.
+    button.hidden = displays.length === 0;
     button.addEventListener("click", () => {
         const next = button.getAttribute("aria-pressed") === "true" ? null : preset.id;
         const targets = next === null ? illuminated.filter((model) => model.illumination.active === preset.id) : illuminated;

package/site/skyline-comparison.js

@@ -74,7 +74,8 @@ export function createSkylineComparison(models, anchor) {
     const streetButton = document.querySelector("#streets");
     function onLayoutChange(name) {
         const geographic = name === "geographic";
-        streetButton.disabled = !geographic;
+        // Only the geographic layout maps streets; elsewhere the toggle is left out.
+        streetButton.hidden = !geographic;
         document.querySelector("#layout-status").textContent = geographic
             ? "Geographic layout · mapped footprints and published heights, or heights read on the drawing where none is published, with detailed facades on all thirty-four buildings. Skyline view: the drawing’s camera, on the lakefront by the Adler Planetarium. Light grey outlines: mapped ground coverage. Grey lines: street centerlines. Grid: 100 m."
             : "Original layout · proportions and spacing fitted to the drawing. Use ground plan or height comparison, then toggle layouts to compare at the same camera scale.";

package/site/skyline-study.html

@@ -50,7 +50,7 @@
           <button type="button" id="reset">reset view</button>
         </div>
         <div class="button-group" role="group" aria-label="Model display">
-          <button type="button" id="streets" aria-pressed="true" disabled>streets</button>
+          <button type="button" id="streets" aria-pressed="true" hidden>streets</button>
           <button type="button" id="wireframe" aria-pressed="false">wireframe</button>
           <button type="button" id="turntable" aria-pressed="false" aria-describedby="motion-status">turntable</button>
         </div>

package/site/study-viewer.js

@@ -470,7 +470,8 @@ export function createBuildingStudy({ models, defaultView = "quarter", views = {
     }
     function updateMotionPreference() {
         controls.enabled = !reducedMotion.matches;
-        turntableButton.disabled = reducedMotion.matches;
+        // Under reduced motion the turntable cannot run, so its button goes rather than greying out.
+        turntableButton.hidden = reducedMotion.matches;
         if (reducedMotion.matches)
             setTurning(false);
         updateMotionStatus();