update markers debug to use rotation and pitch alignments

mapbox · Oct 18, 2019 · edbac23 · edbac23
1 parent bc32342
commit edbac23
Showing 1 changed file with 54 additions and 25 deletions.
diff --git a/debug/markers.html b/debug/markers.html
@@ -8,12 +8,13 @@
     <style>
         body { margin: 0; padding: 0; }
         html, body, #map { height: 100%; }
+        #animate { position: absolute; top: 0; left: 0; }
     </style>
 </head>
 
 <body>
 <div id='map'></div>
-
+<button id="animate">Animate</button>
 <script src='../dist/mapbox-gl-dev.js'></script>
 <script src='../debug/access_token_generated.js'></script>
 <script>
@@ -26,31 +27,59 @@
     hash: true
 });
 
-function addRandomMarker() {
-    var bounds = map.getBounds();
-    var s = bounds.getSouth();
-    var n = bounds.getNorth();
-    var w = bounds.getWest();
-    var e = bounds.getEast();
-
-    var lng = w + (e - w) * Math.random();
-    var lat = s + (n - s) * Math.random();
-    var popup = new mapboxgl.Popup().setText('hello hi');
-
-    var r = Math.round(Math.random() * 255);
-    var g = Math.round(Math.random() * 255);
-    var b = Math.round(Math.random() * 255);
-
-    var marker = new mapboxgl.Marker({
-        color: `rgb(${r}, ${g}, ${b})`,
-        draggable: true
-    })
-        .setLngLat([lng, lat])
-        .setPopup(popup)
-        .addTo(map);
-}
+const spinningMarkers = [];
+['auto', 'map', 'viewport'].forEach((rotationAlignment, i) => {
+    ['auto', 'map', 'viewport'].forEach((pitchAlignment, j) => {
+        var bounds = map.getBounds();
+        var s = bounds.getSouth();
+        var n = bounds.getNorth();
+        var w = bounds.getWest();
+        var e = bounds.getEast();
+
+        var lng = w + (e - w) * (i / 3);
+        var lat = s + (n - s) * (j / 3);
+
+        var popup = new mapboxgl.Popup().setHTML(`Pitch Alignment: ${pitchAlignment}<br>Rotation Alignment: ${rotationAlignment}`);
+
+        var r = Math.round(Math.random() * 255);
+        var g = Math.round(Math.random() * 255);
+        var b = Math.round(Math.random() * 255);
+
+        var marker = new mapboxgl.Marker({
+            color: `rgb(${r}, ${g}, ${b})`,
+            draggable: true,
+            rotationAlignment: rotationAlignment,
+            pitchAlignment: pitchAlignment
+        })
+            .setLngLat([lng, lat])
+            .setPopup(popup)
+            .addTo(map);
 
-for (var i = 0; i < 100; i++) addRandomMarker();
+        marker.togglePopup();
+
+        spinningMarkers.push(marker);
+    });
+});
+
+let animate = false;
+document.getElementById('animate').addEventListener('click', () => {
+    animate = !animate;
+    if (animate) {
+        spinMarkers();
+    }
+});
+
+let rotation = 0;
+function spinMarkers() {
+    rotation++;
+    spinningMarkers.forEach((marker) => {
+        marker.setRotation(rotation);
+    });
+    if (animate) {
+        window.requestAnimationFrame(spinMarkers);
+    }
+}
+window.requestAnimationFrame(spinMarkers)
 
 map.addControl(new mapboxgl.NavigationControl());