Caller-owned scale and map tools

// @gis-api 0.5-session
// @permissions ["project.read", "map.write"]
import {map} from 'sqsmap';
const scale = await map.sqs.scaleAt({point:[64,48],maxWidth:80});
map.zoomIn();
await map.sqs.flush({render:true});
export default {scale,minZoom:await map.getMinZoom(),maxZoom:await map.getMaxZoom()};

<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>SqsMap caller-owned map tools</title>
<style>body{margin:0;font:15px system-ui}#map{height:80vh;min-height:320px}.tools{display:flex;align-items:center;gap:12px;padding:12px;flex-wrap:wrap}button{padding:8px 12px}#scale-line{border:2px solid currentColor;border-top:0;height:7px;margin-top:4px}#error{color:#b42318;white-space:pre-wrap}#state{font-size:13px}</style>
<div id="map"></div>
<div class="tools"><button id="zoom-in" disabled>+</button><button id="zoom-out" disabled>−</button><button id="north" disabled>North</button><div><span id="scale-label">Loading…</span><div id="scale-line"></div></div><span id="state">Initializing</span><button id="dispose" disabled>Remove map and tools</button></div><pre id="error" role="status"></pre>
<script type="module">
import {MapView} from './dist/index.js';
const element=id=>document.getElementById(id),plus=element('zoom-in'),minus=element('zoom-out'),north=element('north'),state=element('state'),error=element('error');
let view,off,disposed=false,busy=false,refreshSequence=0,since=0;
async function refresh(){
 const current=++refreshSequence;
 try{
  const [camera,scale,min,max]=await Promise.all([view.cameraState(),view.scaleAt({maxWidth:100}),view.getMinZoom(),view.getMaxZoom()]);
  if(disposed||current!==refreshSequence)return;
  plus.disabled=busy||camera.camera.zoom+1>max||camera.camera.zoom+1<min;minus.disabled=busy||camera.camera.zoom-1<min||camera.camera.zoom-1>max;north.disabled=busy||Math.abs(camera.camera.bearing)<1e-7;
  element('scale-line').style.width=scale.width+'px';element('scale-label').textContent=scale.distance>=1000?(scale.distance/1000)+' km':scale.distance+' m';
  state.textContent='Zoom '+camera.camera.zoom.toFixed(2)+' · Bearing '+camera.camera.bearing.toFixed(1)+'°';state.dataset.zoom=String(camera.camera.zoom);state.dataset.bearing=String(camera.camera.bearing);state.dataset.metersPerPixel=String(scale.metersPerPixel);state.dataset.ready='true';
 }catch(cause){if(!disposed&&current===refreshSequence){plus.disabled=minus.disabled=north.disabled=true;error.textContent=String(cause);}}
}
async function apply(action){
 if(disposed||busy)return;busy=true;plus.disabled=minus.disabled=north.disabled=true;error.textContent='';
 try{action();const receipt=await view.flush({render:true,since});since=receipt.submittedSequence;}
 catch(cause){if(Number.isSafeInteger(cause.submittedSequence))since=cause.submittedSequence;error.textContent=String(cause);}
 finally{busy=false;if(!disposed)await refresh();}
}
function dispose(){if(disposed)return;disposed=true;refreshSequence++;off?.();plus.onclick=minus.onclick=north.onclick=null;plus.disabled=minus.disabled=north.disabled=true;element('dispose').disabled=true;view?.destroy();state.textContent='Disposed';state.dataset.ready='false';state.dataset.disposed='true';}
plus.onclick=()=>apply(()=>view.zoomIn());minus.onclick=()=>apply(()=>view.zoomOut());north.onclick=()=>apply(()=>view.resetNorth());element('dispose').onclick=dispose;addEventListener('pagehide',dispose,{once:true});
try{
 view=await MapView.create(element('map'));if(view.capabilities.scaleTools!==true)throw Error('CAPABILITY_UNAVAILABLE: matching scale tools SDK required');if(disposed){view.destroy();}else{
  off=view.on('move',()=>{void refresh();});view.addSource('demo',{type:'geojson',data:{type:'Feature',properties:{},geometry:{type:'Point',coordinates:[0,60]}}});view.addLayer({id:'demo',source:'demo',type:'circle',paint:{'circle-radius':12,'circle-color':'#2563eb'}});view.jumpTo({center:[0,60],zoom:4,bearing:30});since=(await view.flush({render:true})).submittedSequence;await refresh();element('dispose').disabled=false;
 }
}catch(cause){error.textContent=String(cause);}
</script></html>