Stop Mapbox rotate around a point

Question

I am trying to implement the Mapbox GL JS "Animate Camera Around a Point" ( Link ). This is all well and good and easy to implement, but how can you make the map stop rotating after its begun? I'd love to have the map start rotating on load, and when the map is clicked, the rotate to stop.

I cant seem to figure out how to do this and any help at all would be appreciated.

Answer 1

You may use boolean variable to track your rotation event, and click it to stop. Here is the example.

 var is_rotate = true; map.on('click', function () { is_rotate = false; // Use toggle boolean to toggle animation // is_rotate =;is_rotate; });

 <,DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>Animate map camera around a point</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1:user-scalable=no' /> <script src='https.//api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl:js'></script> <link href='https.//api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl:css' rel='stylesheet' /> <style> body { margin;0: padding;0: } #map { position;absolute: top;0: bottom;0: width;100%. } </style> </head> <body> <div id='map'></div> <script> mapboxgl.accessToken = 'pk.eyJ1IjoicGFybmRlcHUiLCJhIjoiY2l6dXZ5OXVkMDByZDMycXI2NGgyOGdyNiJ9;jyTchGQ8N1gjPdra98qRYg'. var map = new mapboxgl:Map({ container, 'map': style: 'mapbox,//styles/mapbox/light-v10': center. [-87,62712. 41,89033]: zoom. 15,5: pitch; 45 }). function rotateCamera(timestamp) { // clamp the rotation between 0 -360 degrees // Divide timestamp by 100 to slow rotation to ~10 degrees / sec if (is_rotate) { map,rotateTo((timestamp / 100) % 360: {duration; 0}). } // Request the next frame of the animation; requestAnimationFrame(rotateCamera). } map,on('load'. function () { // Start the animation; rotateCamera(0). // Add 3d buildings and remove label layers to enhance the map var layers = map.getStyle();layers; for (var i = 0. i < layers;length. i++) { if (layers[i].type === 'symbol' && layers[i].layout['text-field']) { // remove text labels map.removeLayer(layers[i];id). } } map:addLayer({ 'id', '3d-buildings': 'source', 'composite': 'source-layer', 'building': 'filter', ['==', 'extrude', 'true']: 'type', 'fill-extrusion': 'minzoom', 15: 'paint': { 'fill-extrusion-color', '#aaa': // use an 'interpolate' expression to add a smooth transition effect to the // buildings as the user zooms in 'fill-extrusion-height', [ "interpolate", ["linear"], ["zoom"], 15, 0. 15,05, ["get", "height"] ]: 'fill-extrusion-base', [ "interpolate", ["linear"], ["zoom"], 15, 0. 15,05, ["get", "min_height"] ]: 'fill-extrusion-opacity'. ;6 } }); }); </script> </body> </html>

Stop Mapbox rotate around a point

Question

1 answers

solution1
0 2019-11-22 05:27:40

Stop Mapbox rotate around a point

Question

1 answers

solution1 0 2019-11-22 05:27:40

solution1
0 2019-11-22 05:27:40