Merge pull request #4 from sdl60660/control-features

Control features

package.json

@@ -31,13 +31,15 @@
     "@turf/distance": "^6.3.0",
     "@turf/helpers": "^6.3.0",
     "@turf/line-distance": "^4.7.3",
+    "@turf/line-offset": "^6.3.0",
     "@turf/point-to-line-distance": "^6.3.0",
     "@turf/polygon-to-line": "^6.3.0",
     "d3": "^6.7.0",
-    "mapbox-gl": "^2.2.0",
+    "mapbox-gl": "2.2",
     "scrollama": "^2.2.2",
     "sirv-cli": "^1.0.0",
     "svelte-loading-spinners": "^0.1.4",
+    "svelte-slider": "^1.0.0",
     "topojson-client": "^3.1.0",
     "topojson-server": "^3.0.1"
   }

src/components/Controls.svelte

@@ -0,0 +1,80 @@
+<script>
+    export let vizState;
+    export let activeFeatureIndex;
+
+    export let paused;
+    export let togglePause;
+
+    export let altitudeMultiplier;
+    export let setAltitudeMultipier;
+
+</script>
+
+<style>
+    .wrapper {
+        background-color: rgba(221, 221, 221, 0.89);
+        padding: 0.5rem 0.8rem;
+        border-radius: 4px;
+
+        /* position: absolute; */
+        /* right: 3rem; */
+        /* top: 40%; */
+        /* z-index: 20; */
+        /* display: grid; */
+        grid-gap: 0.8rem;
+        grid-template-columns: 2rem 1fr;
+        justify-items: center;
+        align-items: center;
+
+    }
+
+    .detail-speed-slider {
+        display: grid;
+        grid-template-columns: 2fr 1fr 2fr;
+        font-size: 0.8rem;
+        width: 100%;
+    }
+
+    .pause-button {
+        padding: 0.5rem;
+        border-radius: 8rem;
+        /* border: 1px solid black; */
+        width: 2.5rem;
+        height: 2.5rem;
+        font-weight: bold;
+        cursor: pointer;
+    }
+
+    #altitude {
+        padding: 0;
+        width: 100%;
+        grid-column: 1 / 4;
+    }
+
+    .slider-label-left {
+        grid-column: 1 / 2;
+        justify-self: left;
+    }
+
+    .slider-label-right {
+        grid-column: 3 / 4;
+        justify-self: right;
+    }
+
+
+</style>
+
+<div class="wrapper" style="display: {activeFeatureIndex >= 0 ? "grid" : "none"};">
+
+    <div class="pause-button-wrapper">
+        <button class="pause-button" on:click={togglePause}>{paused ? "▶" : "| |"}</button>
+    </div>
+
+    <div class="detail-speed-slider">
+        <!-- <label for="altitude">Camera Altitude</label> -->
+        <input type="range" id="altitude" name="altitude" min="0.6" max="5" step="0.01" value={altitudeMultiplier} on:input={(e) => setAltitudeMultipier(e)}>
+        <div class="slider-label slider-label-left">More Detail</div>
+        <div class="slider-label slider-label-right">Faster</div>
+    </div>
+
+</div>