Add MapLibre flyTo demo

stamen · Jul 11, 2024 · 2673bf9 · 2673bf9
1 parent 1a97bd9
commit 2673bf9
Showing 1 changed file with 83 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Slowly fly to a location</title>
+    <meta property="og:description" content="Use flyTo with flyOptions to slowly zoom to a location." />
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel='stylesheet' href='https://unpkg.com/[email protected]/dist/maplibre-gl.css' />
+    <script src='https://unpkg.com/[email protected]/dist/maplibre-gl.js'></script>
+    <style>
+        body { margin: 0; padding: 0; }
+        html, body, #map { height: 100%; }
+    </style>
+</head>
+<body>
+<style>
+    #fly {
+        display: block;
+        position: absolute;
+        top: 20px;
+        left: 50%;
+        transform: translate(-50%);
+        width: 50%;
+        height: 40px;
+        padding: 10px;
+        border: none;
+        border-radius: 3px;
+        font-size: 12px;
+        text-align: center;
+        color: #fff;
+        background: #ee8a65;
+    }
+</style>
+<div id="map"></div>
+<br />
+<button id="fly">Fly</button>
+<script>
+    const start = [-74.5, 40];
+    const end = [74.5, 40];
+    const map = new maplibregl.Map({
+        container: 'map',
+        style:
+            'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
+        center: start,
+        zoom: 9
+    });
+
+    let isAtStart = true;
+
+    document.getElementById('fly').addEventListener('click', () => {
+        // depending on whether we're currently at point a or b, aim for
+        // point a or b
+        const target = isAtStart ? end : start;
+
+        // and now we're at the opposite point
+        isAtStart = !isAtStart;
+
+        map.flyTo({
+            // These options control the ending camera position: centered at
+            // the target, at zoom level 9, and north up.
+            center: target,
+            zoom: 9,
+            bearing: 0,
+
+            // These options control the flight curve, making it move
+            // slowly and zoom out almost completely before starting
+            // to pan.
+            speed: 0.2, // make the flying slow
+            curve: 1, // change the speed at which it zooms out
+
+            // This can be any easing function: it takes a number between
+            // 0 and 1 and returns another number between 0 and 1.
+            easing (t) {
+                return t;
+            },
+
+            // this animation is considered essential with respect to prefers-reduced-motion
+            essential: true
+        });
+    });
+</script>
+</body>
+</html>