@defra/interactive-map 0.0.10-alpha → 0.0.12-alpha

package/providers/beta/esri/dist/esm/im-esri-provider.js

@@ -1 +1 @@
-import e from"@babel/runtime/helpers/objectWithoutProperties";import t from"@babel/runtime/helpers/asyncToGenerator";import i from"@arcgis/core/config.js";import n from"@arcgis/core/Map.js";import o from"@arcgis/core/views/MapView.js";import r from"@arcgis/core/layers/VectorTileLayer.js";import{when as a,once as s,watch as m}from"@arcgis/core/core/reactiveUtils.js";import u from"@arcgis/core/geometry/Extent.js";import l from"@arcgis/core/geometry/Point.js";var v={animationDuration:200},c=["showKeyboardHelp","selectControl","moveLarge","nudgeMap","zoomLarge","nudgeZoom"];var p=(e,t)=>{var i=null,n=function(){for(var n=arguments.length,o=new Array(n),r=0;r<n;r++)o[r]=arguments[r];clearTimeout(i),i=setTimeout(()=>{e(...o)},t)};return n.cancel=()=>{i&&(clearTimeout(i),i=null)},n};function h(e){var{mapProvider:t,view:i,baseTileLayer:n,events:o,eventBus:r,getZoom:u,getCenter:l,getBounds:v,getResolution:c}=e,h=!1,d=[],y=[],g=e=>{var t=(()=>{if(h||!i||i.destroyed||!i.extent)return null;var{maxZoom:e,minZoom:t}=i.constraints;return{center:l(),bounds:v(),resolution:c(),zoom:u(),isAtMaxZoom:i.zoom+.01>=e,isAtMinZoom:i.zoom-.01<=t}})();t&&r.emit(e,t)};a(()=>n.loaded&&i.resolution>0,()=>g(o.MAP_LOADED)),s(()=>i.ready).then(()=>{h||r.emit(o.MAP_READY,t.getMapAPI())}),s(()=>i.stationary).then(()=>g(o.MAP_FIRST_IDLE));var w=p(()=>g(o.MAP_MOVE_END),500);y.push(w),d.push(m(()=>[i.interacting,i.animation],e=>{var[t,i]=e;(t||i)&&r.emit(o.MAP_MOVE_START),t||i||w()}));var f,x,M,b=(f=()=>g(o.MAP_MOVE),x=10,M=0,function(){var e=Date.now();e-M>=x&&(M=e,f(...arguments))});y.push(b),d.push(m(()=>i.zoom,b)),d.push(m(()=>i.extent,()=>r.emit(o.MAP_RENDER),{initial:!1}));var E=p(()=>g(o.MAP_DATA_CHANGE),500);return y.push(E),d.push(m(()=>i.updating,e=>!e&&E())),d.push(i.on("click",e=>{var t=e.mapPoint,i={x:e.x,y:e.y};r.emit(o.MAP_CLICK,{point:i,coords:[t.x,t.y]})})),{remove(){h=!0,y.forEach(e=>e.cancel()),d.forEach(e=>e.remove())}}}var d=e=>{var t=1609.344,i=e/t;if(i<.5/t)return"".concat(Math.round(e),"m");if(i<10){var n=Number.parseFloat(i.toFixed(1)),o=1===n?"mile":"miles";return"".concat(n," ").concat(o)}var r=Math.round(i),a=1===r?"mile":"miles";return"".concat(r," ").concat(a)};var y={top:0,right:0,bottom:0,left:0};function g(){return(g=t(function*(e,t){if(!e||!t)return[];var i=e.map.layers.filter(e=>e instanceof r);return i.length?(yield e.hitTest(t,{include:i.toArray()})).results.map(e=>({layerId:e.layer.id,layerTitle:e.layer.title||e.layer.id,type:e.layer.type,geometry:e.graphic.geometry,symbol:e.graphic.symbol})):[]})).apply(this,arguments)}var w=e=>e?new u({xmin:e[0],ymin:e[1],xmax:e[2],ymax:e[3],spatialReference:{wkid:27700}}):void 0,f=e=>e?new l({x:e[0],y:e[1],spatialReference:{wkid:27700}}):void 0,x=["container","padding","mapStyle","maxExtent"];class M{constructor(e){var{mapProviderConfig:t={},events:i,eventBus:n}=e;this.events=i,this.eventBus=n,this.capabilities={supportedShortcuts:c,supportsMapSizes:!1},Object.assign(this,t),this.mapEventHandles=[],this.appEventHandles=[]}initMap(a){var s=this;return t(function*(){var{container:t,padding:m,mapStyle:u,maxExtent:l}=a;e(a,x);var{events:v,eventBus:c}=s;s.setupConfig&&(yield s.setupConfig(i));var p=new r({id:"baselayer",url:u.url,visible:!0}),d=new n({layers:[p]}),y=l?w(l):null,g=new o({spatialReference:27700,container:t,map:d,zoom:a.zoom,center:f(a.center),maxExtent:l,constraints:{snapToZoom:!1,minZoom:a.minZoom,maxZoom:a.maxZoom,maxScale:0,geometry:y,rotationEnabled:!1},ui:{components:[]},popupEnabled:!1});(e=>{if(e){var t=e.querySelector(".esri-view-surface");t.removeAttribute("role"),t.tabIndex=-1,t.style["outline-color"]="transparent",t.style.touchAction="none"}})(g.container),g.padding=m,a.bounds&&g.when(()=>g.goTo(w(a.bounds),{duration:0})),s.mapEventHandles=h({mapProvider:s,view:g,baseTileLayer:p,events:v,eventBus:c,getZoom:s.getZoom.bind(s),getCenter:s.getCenter.bind(s),getBounds:s.getBounds.bind(s),getResolution:s.getResolution.bind(s)}),s.appEventHandles=function(e){var{baseTileLayer:t,events:i,eventBus:n}=e,o=e=>{t.loadStyle(e.url).then(()=>{n.emit(i.MAP_STYLE_CHANGE,e)})};return n.on(i.MAP_SET_STYLE,o),{remove(){n.off(i.MAP_SET_STYLE,o)}}}({baseTileLayer:p,events:v,eventBus:c})||[],s.map=d,s.view=g,s.baseTileLayer=p})()}destroyMap(){var e,t;null===(e=this.mapEvents)||void 0===e||e.remove(),null===(t=this.appEvents)||void 0===t||t.remove(),this.mapEvents=null,this.appEvents=null,this.view&&(this.view.container=null,this.view.destroy(),this.view=null),this.map&&(this.map.removeAll(),this.map=null)}getMapAPI(){return{map:this.map,view:this.view,crs:this.crs,fitToBounds:this.fitToBounds.bind(this),setView:this.setView.bind(this)}}setView(e){var t,{center:i,zoom:n}=e;null===(t=this.view.animation)||void 0===t||t.destroy(),this.view.goTo({center:i,zoom:n,duration:v.animationDuration})}zoomIn(e){var t;null===(t=this.view.animation)||void 0===t||t.destroy(),this.view.goTo({zoom:this.view.zoom+e,duration:v.animationDuration})}zoomOut(e){var t;null===(t=this.view.animation)||void 0===t||t.destroy(),this.view.goTo({zoom:this.view.zoom-e,duration:v.animationDuration})}panBy(e){var{x:t,y:i}=this.view.toScreen(this.view.center),n={x:t+e[0],y:i+e[1]},o=this.view.toMap(n);this.view.goTo({center:o,duration:v.animationDuration})}fitToBounds(e){this.view.goTo(w(e),{duration:v.DELAY})}setPadding(e){this.view.padding=e}getCenter(){var e=this.view.center;return[e.x,e.y].map(e=>Math.round(100*e)/100)}getZoom(){return this.view.zoom}getBounds(){var{xmin:e,ymin:t,xmax:i,ymax:n}=this.view.extent;return[e,t,i,n].map(e=>Math.round(100*e)/100)}getFeaturesAtPoint(e,t){return function(e,t){return g.apply(this,arguments)}(this.view,e)}getAreaDimensions(){return(e=>{if(!(e&&e instanceof u))return"";var t=e.xmin,i=e.ymin,n=e.xmax,o=e.ymax-i,r=d(n-t),a=d(o);return"".concat(a," by ").concat(r)})(function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:y;if(!e.container)return null;var{width:i,height:n}=e.container.getBoundingClientRect(),o={x:t.left,y:n-t.bottom},r={x:i-t.right,y:t.top},a=e.toMap(o),s=e.toMap(r);return new u({xmin:a.x,ymin:a.y,xmax:s.x,ymax:s.y,spatialReference:a.spatialReference})}(this.view))}getCardinalMove(e,t){return function(e,t){var[i,n]=e,[o,r]=t,a=o-i,s=r-n,m=[];return Math.abs(s)>.1&&m.push("".concat(s>0?"north":"south"," ").concat(d(Math.abs(s)))),Math.abs(a)>.1&&m.push("".concat(a>0?"east":"west"," ").concat(d(Math.abs(a)))),m.join(", ")}(e,t)}getResolution(){return this.view.resolution}mapToScreen(e){var t=f(e),i=this.view.toScreen(t);return{x:i.x,y:i.y}}screenToMap(e){var t=this.view.toMap(e);return[t.x,t.y]}}export{M as default};
+import e from"@babel/runtime/helpers/defineProperty";import t from"@babel/runtime/helpers/objectWithoutProperties";import r from"@babel/runtime/helpers/asyncToGenerator";import n from"@arcgis/core/config.js";import o from"@arcgis/core/layers/support/TileInfo.js";import i from"@arcgis/core/Map.js";import a from"@arcgis/core/views/MapView.js";import s from"@arcgis/core/layers/VectorTileLayer.js";import m from"@arcgis/core/geometry/Point.js";import{when as l,once as u,watch as c}from"@arcgis/core/core/reactiveUtils.js";import p from"@arcgis/core/geometry/Extent.js";var v={animationDuration:200},y=["showKeyboardHelp","selectControl","moveLarge","nudgeMap","zoomLarge","nudgeZoom"];var h=(e,t)=>{var r=null,n=function(){for(var n=arguments.length,o=new Array(n),i=0;i<n;i++)o[i]=arguments[i];clearTimeout(r),r=setTimeout(()=>{e(...o)},t)};return n.cancel=()=>{r&&(clearTimeout(r),r=null)},n};function d(e){var{mapProvider:t,view:r,baseTileLayer:n,events:o,eventBus:i,getZoom:a,getCenter:s,getBounds:m,getResolution:p}=e,v=!1,y=[],d=[],f=e=>{var t=(()=>{if(v||!r||r.destroyed||!r.extent)return null;var{maxZoom:e,minZoom:t}=r.constraints;return{center:s(),bounds:m(),resolution:p(),zoom:a(),isAtMaxZoom:r.zoom+.01>=e,isAtMinZoom:r.zoom-.01<=t}})();t&&i.emit(e,t)};l(()=>n.loaded&&r.resolution>0,()=>f(o.MAP_LOADED)),u(()=>r.ready).then(()=>{v||i.emit(o.MAP_READY,{map:t.map,view:t.view,mapStyleId:t.mapStyleId,mapSize:t.mapSize,crs:t.crs})}),u(()=>r.stationary).then(()=>f(o.MAP_FIRST_IDLE));var g=h(()=>f(o.MAP_MOVE_END),500);d.push(g),y.push(c(()=>[r.interacting,r.animation],e=>{var[t,r]=e;(t||r)&&i.emit(o.MAP_MOVE_START),t||r||g()}));var x,w,b,M=(x=()=>f(o.MAP_MOVE),w=10,b=0,function(){var e=Date.now();e-b>=w&&(b=e,x(...arguments))});d.push(M),y.push(c(()=>r.zoom,M)),y.push(c(()=>r.extent,()=>i.emit(o.MAP_RENDER),{initial:!1}));var E=h(()=>f(o.MAP_DATA_CHANGE),500);d.push(E),y.push(c(()=>r.updating,e=>!e&&E()));var A=null,S=null;return y.push(r.on("pointer-down",e=>{A=e.x,S=e.y})),y.push(r.on("pointer-up",e=>{var n;if(0===e.button&&!(Math.hypot(e.x-A,e.y-S)>6)&&"active"!==(null===(n=t.sketchViewModel)||void 0===n?void 0:n.state)){var a={x:e.x,y:e.y},s=r.toMap(a);s&&i.emit(o.MAP_CLICK,{point:a,coords:[s.x,s.y]})}})),{remove(){v=!0,d.forEach(e=>e.cancel()),y.forEach(e=>e.remove())}}}var f=e=>e?new p({xmin:e[0],ymin:e[1],xmax:e[2],ymax:e[3],spatialReference:{wkid:27700}}):void 0,g=e=>e?new m({x:e[0],y:e[1],spatialReference:{wkid:27700}}):void 0,x=(e,t)=>{if(e)if("FeatureCollection"===e.type)e.features.forEach(e=>x(e,t));else if("Feature"===e.type)x(e.geometry,t);else if("GeometryCollection"===e.type)e.geometries.forEach(e=>x(e,t));else{var r=e=>{Array.isArray(e)&&("number"==typeof e[0]?t.push(e):e.forEach(r))};r(e.coordinates)}},w=e=>{var t=[];x(e,t);var r=t.map(e=>e[0]),n=t.map(e=>e[1]);return f([Math.min(...r),Math.min(...n),Math.max(...r),Math.max(...n)])},b=e=>{var t=1609.344,r=e/t;if(r<.5/t)return"".concat(Math.round(e),"m");if(r<10){var n=Number.parseFloat(r.toFixed(1)),o=1===n?"mile":"miles";return"".concat(n," ").concat(o)}var i=Math.round(r),a=1===i?"mile":"miles";return"".concat(i," ").concat(a)};var M={top:0,right:0,bottom:0,left:0};function E(){return(E=r(function*(e,t){if(!e||!t)return[];var r=e.map.layers.filter(e=>e instanceof s);return r.length?(yield e.hitTest(t,{include:r.toArray()})).results.map(e=>({layerId:e.layer.id,layerTitle:e.layer.title||e.layer.id,type:e.layer.type,geometry:e.graphic.geometry,symbol:e.graphic.symbol})):[]})).apply(this,arguments)}var A=["container","padding","mapStyle","mapSize","maxExtent"];function S(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function T(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?S(Object(n),!0).forEach(function(r){e(t,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):S(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))})}return t}class P{constructor(e){var{mapProviderConfig:t={},events:r,eventBus:n}=e;this.events=r,this.eventBus=n,this.capabilities={supportedShortcuts:y,supportsMapSizes:!1},Object.assign(this,t),this.mapEventHandles=[],this.appEventHandles=[]}initMap(e){var m=this;return r(function*(){var{container:r,padding:l,mapStyle:u,mapSize:c,maxExtent:p}=e;t(e,A),m.mapStyleId=null==u?void 0:u.id,m.mapSize=c;var{events:v,eventBus:y}=m;m.setupConfig&&(yield m.setupConfig(n));var h=new s({id:"baselayer",url:u.url,visible:!0}),x=new i({layers:[h]}),w=p?f(p):null,b=new a({spatialReference:27700,container:r,map:x,zoom:e.zoom,center:g(e.center),maxExtent:p,constraints:{lods:o.create({spatialReference:{wkid:27700}}).lods,snapToZoom:!1,minZoom:e.minZoom,maxZoom:e.maxZoom,maxScale:0,geometry:w,rotationEnabled:!1},ui:{components:[]},popupEnabled:!1});(e=>{if(e){var t=e.querySelector(".esri-view-surface");t.removeAttribute("role"),t.tabIndex=-1,t.style["outline-color"]="transparent",t.style.touchAction="none"}})(b.container),b.padding=l,e.bounds&&b.when(()=>b.goTo(f(e.bounds),{duration:0})),m.mapEventHandles=d({mapProvider:m,view:b,baseTileLayer:h,events:v,eventBus:y,getZoom:m.getZoom.bind(m),getCenter:m.getCenter.bind(m),getBounds:m.getBounds.bind(m),getResolution:m.getResolution.bind(m)}),m.appEventHandles=function(e){var{baseTileLayer:t,events:r,eventBus:n}=e,o=e=>{t.loadStyle(e.url).then(()=>{n.emit(r.MAP_STYLE_CHANGE,{mapStyleId:e.id})})};return n.on(r.MAP_SET_STYLE,o),{remove(){n.off(r.MAP_SET_STYLE,o)}}}({baseTileLayer:h,events:v,eventBus:y})||[],m.map=x,m.view=b,m.baseTileLayer=h})()}destroyMap(){var e,t;null===(e=this.mapEvents)||void 0===e||e.remove(),null===(t=this.appEvents)||void 0===t||t.remove(),this.mapEvents=null,this.appEvents=null,this.view&&(this.view.container=null,this.view.destroy(),this.view=null),this.map&&(this.map.removeAll(),this.map=null)}setView(e){var t,{center:r,zoom:n}=e;null===(t=this.view.animation)||void 0===t||t.destroy();var o={center:r?new m({x:r[0],y:r[1],spatialReference:{wkid:27700}}):this.view.center,zoom:null!=n?n:this.view.zoom};this.view.goTo(T(T({},o),{},{duration:v.animationDuration}))}zoomIn(e){var t;null===(t=this.view.animation)||void 0===t||t.destroy(),this.view.goTo({zoom:this.view.zoom+e,duration:v.animationDuration})}zoomOut(e){var t;null===(t=this.view.animation)||void 0===t||t.destroy(),this.view.goTo({zoom:this.view.zoom-e,duration:v.animationDuration})}panBy(e){var{x:t,y:r}=this.view.toScreen(this.view.center),n={x:t+e[0],y:r+e[1]},o=this.view.toMap(n);this.view.goTo({center:o,duration:v.animationDuration})}fitToBounds(e){var t=Array.isArray(e)?f(e):w(e);this.view.goTo(t,{duration:v.DELAY})}setPadding(e){this.view.padding=e}getCenter(){var e=this.view.center;return[e.x,e.y].map(e=>Math.round(100*e)/100)}getZoom(){return this.view.zoom}getBounds(){var{xmin:e,ymin:t,xmax:r,ymax:n}=this.view.extent;return[e,t,r,n].map(e=>Math.round(100*e)/100)}getFeaturesAtPoint(e,t){return function(e,t){return E.apply(this,arguments)}(this.view,e)}getAreaDimensions(){return(e=>{if(!(e&&e instanceof p))return"";var t=e.xmin,r=e.ymin,n=e.xmax,o=e.ymax-r,i=b(n-t),a=b(o);return"".concat(a," by ").concat(i)})(function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:M;if(!e.container)return null;var{width:r,height:n}=e.container.getBoundingClientRect(),o={x:t.left,y:n-t.bottom},i={x:r-t.right,y:t.top},a=e.toMap(o),s=e.toMap(i);return new p({xmin:a.x,ymin:a.y,xmax:s.x,ymax:s.y,spatialReference:a.spatialReference})}(this.view))}getCardinalMove(e,t){return function(e,t){var[r,n]=e,[o,i]=t,a=o-r,s=i-n,m=[];return Math.abs(s)>.1&&m.push("".concat(s>0?"north":"south"," ").concat(b(Math.abs(s)))),Math.abs(a)>.1&&m.push("".concat(a>0?"east":"west"," ").concat(b(Math.abs(a)))),m.join(", ")}(e,t)}getResolution(){return this.view.resolution}mapToScreen(e){var t=g(e),r=this.view.toScreen(t);return{x:r.x,y:r.y}}screenToMap(e){var t=this.view.toMap(e);return[t.x,t.y]}isGeometryObscured(e,t){return((e,t,r)=>{if(null==r||!r.container)return!1;var n=r.container.getBoundingClientRect(),o=w(e),i=[r.toScreen(new m({x:o.xmin,y:o.ymin,spatialReference:o.spatialReference})),r.toScreen(new m({x:o.xmin,y:o.ymax,spatialReference:o.spatialReference})),r.toScreen(new m({x:o.xmax,y:o.ymin,spatialReference:o.spatialReference})),r.toScreen(new m({x:o.xmax,y:o.ymax,spatialReference:o.spatialReference}))],a=Math.min(...i.map(e=>e.x)),s=Math.max(...i.map(e=>e.x)),l=Math.min(...i.map(e=>e.y)),u=Math.max(...i.map(e=>e.y)),c=t.left-n.left,p=t.top-n.top,v=t.right-n.left,y=t.bottom-n.top;return a<v&&s>c&&l<y&&u>p})(e,t,this.view)}}export{P as default};

package/providers/beta/esri/src/appEvents.js

@@ -1,7 +1,13 @@
-export function attachAppEvents ({ baseTileLayer, events, eventBus }) {
+export function attachAppEvents ({
+  baseTileLayer,
+  events,
+  eventBus
+}) {
   const handleSetMapStyle = mapStyle => {
     baseTileLayer.loadStyle(mapStyle.url).then(() => {
-      eventBus.emit(events.MAP_STYLE_CHANGE, mapStyle)
+      eventBus.emit(events.MAP_STYLE_CHANGE, {
+        mapStyleId: mapStyle.id
+      })
     })
   }
 

package/providers/beta/esri/src/esriProvider.js

@@ -1,15 +1,17 @@
 // src/plugins/mapStyles/EsriProvider.jsx
 import './esriProvider.scss'
 import esriConfig from '@arcgis/core/config.js'
+import TileInfo from '@arcgis/core/layers/support/TileInfo.js'
 import EsriMap from '@arcgis/core/Map.js'
 import MapView from '@arcgis/core/views/MapView.js'
 import VectorTileLayer from '@arcgis/core/layers/VectorTileLayer.js'
+import Point from '@arcgis/core/geometry/Point.js'
 import { defaults, supportedShortcuts } from './defaults.js'
 import { attachAppEvents } from './appEvents.js'
 import { attachMapEvents } from './mapEvents.js'
-import { getAreaDimensions, getCardinalMove, getPaddedExtent } from './utils/spatial.js'
+import { getAreaDimensions, getCardinalMove, getPaddedExtent, isGeometryObscured } from './utils/spatial.js'
 import { queryVectorTileFeatures } from './utils/query.js'
-import { getExtentFromFlatCoords, getPointFromFlatCoords } from './utils/coords.js'
+import { getExtentFromFlatCoords, getPointFromFlatCoords, getBboxFromGeoJSON } from './utils/coords.js'
 import { cleanDOM } from './utils/esriFixes.js'
 
 export default class EsriProvider {
@@ -28,7 +30,9 @@ export default class EsriProvider {
   }
 
   async initMap (config) {
-    const { container, padding, mapStyle, maxExtent, ...initConfig } = config
+    const { container, padding, mapStyle, mapSize, maxExtent, ...initConfig } = config
+    this.mapStyleId = mapStyle?.id
+    this.mapSize = mapSize
     const { events, eventBus } = this
 
     if (this.setupConfig) {
@@ -47,6 +51,7 @@ export default class EsriProvider {
       center: getPointFromFlatCoords(config.center),
       maxExtent: maxExtent,
       constraints: {
+        lods: TileInfo.create({ spatialReference: { wkid: 27700 } }).lods,
         snapToZoom: false,
         minZoom: config.minZoom,
         maxZoom: config.maxZoom,
@@ -112,24 +117,15 @@ export default class EsriProvider {
     }
   }
 
-  /** Returns the public API exposed via the map:ready event. */
-  getMapAPI () {
-    return {
-      map: this.map,
-      view: this.view,
-      crs: this.crs,
-      fitToBounds: this.fitToBounds.bind(this),
-      setView: this.setView.bind(this)
-    }
-  }
-
   // ==========================
   // Side-effects
   // ==========================
 
-  setView ({ center, zoom }) {
+  setView({ center, zoom }) {
     this.view.animation?.destroy()
-    this.view.goTo({ center, zoom, duration: defaults.animationDuration })
+    const point = center ? new Point({ x: center[0], y: center[1], spatialReference: { wkid: 27700 }}) : this.view.center
+    const target = { center: point, zoom: zoom ?? this.view.zoom }
+    this.view.goTo({ ...target, duration: defaults.animationDuration })
   }
 
   zoomIn (zoomDelta) {
@@ -150,7 +146,8 @@ export default class EsriProvider {
   }
 
   fitToBounds (bounds) {
-    this.view.goTo(getExtentFromFlatCoords(bounds), { duration: defaults.DELAY })
+    const extent = Array.isArray(bounds) ? getExtentFromFlatCoords(bounds) : getBboxFromGeoJSON(bounds)
+    this.view.goTo(extent, { duration: defaults.DELAY })
   }
 
   setPadding (padding) {
@@ -211,4 +208,15 @@ export default class EsriProvider {
     const mapPoint = this.view.toMap(point)
     return [mapPoint.x, mapPoint.y]
   }
+
+  /**
+   * Returns true if the geometry's screen bounding box overlaps the given panel rectangle.
+   *
+   * @param {object} geojson - GeoJSON Feature, FeatureCollection, or geometry.
+   * @param {DOMRect} panelRect - Bounding rect of the panel element (viewport coordinates).
+   * @returns {boolean}
+   */
+  isGeometryObscured (geojson, panelRect) {
+    return isGeometryObscured(geojson, panelRect, this.view)
+  }
 }

package/providers/beta/esri/src/mapEvents.js

@@ -54,7 +54,13 @@ export function attachMapEvents ({
   // ready
   once(() => view.ready).then(() => {
     if (!destroyed) {
-      eventBus.emit(events.MAP_READY, mapProvider.getMapAPI())
+      eventBus.emit(events.MAP_READY, {
+        map: mapProvider.map,
+        view: mapProvider.view,
+        mapStyleId: mapProvider.mapStyleId,
+        mapSize: mapProvider.mapSize,
+        crs: mapProvider.crs
+      })
     }
   })
 
@@ -99,10 +105,41 @@ export function attachMapEvents ({
     updating => !updating && emitDataChange()
   ))
 
-  // click
-  handlers.push(view.on('click', e => {
-    const mapPoint = e.mapPoint
+  // Click
+  // handlers.push(view.on('click', e => {
+  //   const mapPoint = e.mapPoint
+  //   const screenPoint = { x: e.x, y: e.y }
+  //   eventBus.emit(events.MAP_CLICK, { point: screenPoint, coords: [mapPoint.x, mapPoint.y] })
+  // }))
+
+  // Using pointer-up instead of click/immediate-click — significantly more responsive as it
+  // bypasses ArcGIS's internal hit-testing pipeline. Track pointer-down position to suppress
+  // pointer-up after a drag/pan. Also suppress when SketchViewModel is active so draw/edit
+  // vertex clicks don't leak through to the map click handler.
+  const DRAG_TOLERANCE = 6
+  let pointerDownX = null
+  let pointerDownY = null
+
+  handlers.push(view.on('pointer-down', e => {
+    pointerDownX = e.x
+    pointerDownY = e.y
+  }))
+
+  handlers.push(view.on('pointer-up', e => {
+    if (e.button !== 0) {
+      return
+    }
+    if (Math.hypot(e.x - pointerDownX, e.y - pointerDownY) > DRAG_TOLERANCE) {
+      return
+    }
+    if (mapProvider.sketchViewModel?.state === 'active') {
+      return
+    }
     const screenPoint = { x: e.x, y: e.y }
+    const mapPoint = view.toMap(screenPoint)
+    if (!mapPoint) {
+      return
+    }
     eventBus.emit(events.MAP_CLICK, { point: screenPoint, coords: [mapPoint.x, mapPoint.y] })
   }))
 

package/providers/beta/esri/src/utils/coords.js

@@ -23,7 +23,40 @@ const getPointFromFlatCoords = (coords) => {
     : undefined
 }
 
+const collectCoords = (obj, acc) => {
+  if (!obj) return
+  if (obj.type === 'FeatureCollection') {
+    obj.features.forEach(f => collectCoords(f, acc))
+  } else if (obj.type === 'Feature') {
+    collectCoords(obj.geometry, acc)
+  } else if (obj.type === 'GeometryCollection') {
+    obj.geometries.forEach(g => collectCoords(g, acc))
+  } else {
+    const flatten = (coords) => {
+      if (!Array.isArray(coords)) { return }
+      if (typeof coords[0] === 'number') acc.push(coords)
+      else coords.forEach(flatten)
+    }
+    flatten(obj.coordinates)
+  }
+}
+
+/**
+ * Get an ESRI Extent from any GeoJSON object (Feature, FeatureCollection, or geometry).
+ *
+ * @param {object} geojson - GeoJSON Feature, FeatureCollection, or geometry
+ * @returns {import('@arcgis/core/geometry/Extent.js').default}
+ */
+const getBboxFromGeoJSON = (geojson) => {
+  const points = []
+  collectCoords(geojson, points)
+  const xs = points.map(p => p[0])
+  const ys = points.map(p => p[1])
+  return getExtentFromFlatCoords([Math.min(...xs), Math.min(...ys), Math.max(...xs), Math.max(...ys)])
+}
+
 export {
   getExtentFromFlatCoords,
-  getPointFromFlatCoords
+  getPointFromFlatCoords,
+  getBboxFromGeoJSON
 }

package/providers/beta/esri/src/utils/coords.test.js

@@ -0,0 +1,126 @@
+import { getExtentFromFlatCoords, getPointFromFlatCoords, getBboxFromGeoJSON } from './coords.js'
+
+jest.mock('@arcgis/core/geometry/Extent.js', () =>
+  jest.fn().mockImplementation((opts) => ({ ...opts, type: 'extent' }))
+)
+jest.mock('@arcgis/core/geometry/Point.js', () =>
+  jest.fn().mockImplementation((opts) => ({ ...opts, type: 'point' }))
+)
+
+describe('coords utils', () => {
+  describe('getExtentFromFlatCoords', () => {
+    test('returns an Extent with correct xmin/ymin/xmax/ymax', () => {
+      const result = getExtentFromFlatCoords([1, 2, 3, 4])
+      expect(result.xmin).toBe(1)
+      expect(result.ymin).toBe(2)
+      expect(result.xmax).toBe(3)
+      expect(result.ymax).toBe(4)
+      expect(result.spatialReference).toEqual({ wkid: 27700 })
+    })
+
+    test('returns undefined for falsy input', () => {
+      expect(getExtentFromFlatCoords(null)).toBeUndefined()
+      expect(getExtentFromFlatCoords(undefined)).toBeUndefined()
+    })
+  })
+
+  describe('getPointFromFlatCoords', () => {
+    test('returns a Point with correct x/y', () => {
+      const result = getPointFromFlatCoords([100, 200])
+      expect(result.x).toBe(100)
+      expect(result.y).toBe(200)
+      expect(result.spatialReference).toEqual({ wkid: 27700 })
+    })
+
+    test('returns undefined for falsy input', () => {
+      expect(getPointFromFlatCoords(null)).toBeUndefined()
+    })
+  })
+
+  describe('getBboxFromGeoJSON', () => {
+    test('Point feature → extent wrapping that single point', () => {
+      const feature = {
+        type: 'Feature',
+        geometry: { type: 'Point', coordinates: [300000, 100000] },
+        properties: {}
+      }
+      const result = getBboxFromGeoJSON(feature)
+      expect(result.xmin).toBe(300000)
+      expect(result.ymin).toBe(100000)
+      expect(result.xmax).toBe(300000)
+      expect(result.ymax).toBe(100000)
+    })
+
+    test('LineString feature → tight bbox around all coords', () => {
+      const feature = {
+        type: 'Feature',
+        geometry: {
+          type: 'LineString',
+          coordinates: [[100, 200], [300, 50], [500, 400]]
+        },
+        properties: {}
+      }
+      const result = getBboxFromGeoJSON(feature)
+      expect(result.xmin).toBe(100)
+      expect(result.ymin).toBe(50)
+      expect(result.xmax).toBe(500)
+      expect(result.ymax).toBe(400)
+    })
+
+    test('Polygon feature → bbox around all rings', () => {
+      const feature = {
+        type: 'Feature',
+        geometry: {
+          type: 'Polygon',
+          coordinates: [[[0, 0], [10, 0], [10, 5], [0, 5], [0, 0]]]
+        },
+        properties: {}
+      }
+      const result = getBboxFromGeoJSON(feature)
+      expect(result.xmin).toBe(0)
+      expect(result.ymin).toBe(0)
+      expect(result.xmax).toBe(10)
+      expect(result.ymax).toBe(5)
+    })
+
+    test('FeatureCollection → bbox spanning all features', () => {
+      const fc = {
+        type: 'FeatureCollection',
+        features: [
+          { type: 'Feature', geometry: { type: 'Point', coordinates: [100, 200] }, properties: {} },
+          { type: 'Feature', geometry: { type: 'Point', coordinates: [500, 800] }, properties: {} }
+        ]
+      }
+      const result = getBboxFromGeoJSON(fc)
+      expect(result.xmin).toBe(100)
+      expect(result.ymin).toBe(200)
+      expect(result.xmax).toBe(500)
+      expect(result.ymax).toBe(800)
+    })
+
+    test('GeometryCollection → bbox spanning all geometries', () => {
+      const gc = {
+        type: 'GeometryCollection',
+        geometries: [
+          { type: 'Point', coordinates: [10, 20] },
+          { type: 'LineString', coordinates: [[50, 5], [100, 90]] }
+        ]
+      }
+      const result = getBboxFromGeoJSON(gc)
+      expect(result.xmin).toBe(10)
+      expect(result.ymin).toBe(5)
+      expect(result.xmax).toBe(100)
+      expect(result.ymax).toBe(90)
+    })
+
+    test('result has correct spatialReference from getExtentFromFlatCoords', () => {
+      const feature = {
+        type: 'Feature',
+        geometry: { type: 'Point', coordinates: [1, 2] },
+        properties: {}
+      }
+      const result = getBboxFromGeoJSON(feature)
+      expect(result.spatialReference).toEqual({ wkid: 27700 })
+    })
+  })
+})

package/providers/beta/esri/src/utils/spatial.js

@@ -1,4 +1,6 @@
 import Extent from '@arcgis/core/geometry/Extent.js'
+import Point from '@arcgis/core/geometry/Point.js'
+import { getBboxFromGeoJSON } from './coords.js'
 
 // -----------------------------------------------------------------------------
 // Internal (not exported)
@@ -124,8 +126,52 @@ const getPaddedExtent = (view, padding = DEFAULT_PADDING) => {
 }
 
 
+/**
+ * Returns true if the geometry's screen bounding box overlaps the given panel rectangle.
+ * Used to decide whether to pan/zoom when a panel opens over a visibleGeometry target.
+ *
+ * @param {object} geojson - GeoJSON Feature, FeatureCollection, or geometry
+ * @param {DOMRect} panelRect - Bounding rect of the panel element (viewport coordinates)
+ * @param {import('@arcgis/core/views/MapView.js').default} view - ESRI MapView instance
+ * @returns {boolean}
+ */
+const isGeometryObscured = (geojson, panelRect, view) => {
+  if (!view?.container) {
+    return false
+  }
+
+  const containerRect = view.container.getBoundingClientRect()
+  const extent = getBboxFromGeoJSON(geojson)
+
+  const corners = [
+    view.toScreen(new Point({ x: extent.xmin, y: extent.ymin, spatialReference: extent.spatialReference })),
+    view.toScreen(new Point({ x: extent.xmin, y: extent.ymax, spatialReference: extent.spatialReference })),
+    view.toScreen(new Point({ x: extent.xmax, y: extent.ymin, spatialReference: extent.spatialReference })),
+    view.toScreen(new Point({ x: extent.xmax, y: extent.ymax, spatialReference: extent.spatialReference }))
+  ]
+
+  const screenMinX = Math.min(...corners.map(c => c.x))
+  const screenMaxX = Math.max(...corners.map(c => c.x))
+  const screenMinY = Math.min(...corners.map(c => c.y))
+  const screenMaxY = Math.max(...corners.map(c => c.y))
+
+  // Convert panelRect from viewport coords to view-container-relative coords
+  const panelLeft = panelRect.left - containerRect.left
+  const panelTop = panelRect.top - containerRect.top
+  const panelRight = panelRect.right - containerRect.left
+  const panelBottom = panelRect.bottom - containerRect.top
+
+  return (
+    screenMinX < panelRight &&
+    screenMaxX > panelLeft &&
+    screenMinY < panelBottom &&
+    screenMaxY > panelTop
+  )
+}
+
 export {
   getAreaDimensions,
   getCardinalMove,
-  getPaddedExtent
+  getPaddedExtent,
+  isGeometryObscured
 }

package/providers/beta/esri/src/utils/spatial.test.js

@@ -0,0 +1,55 @@
+import { isGeometryObscured } from './spatial.js'
+
+jest.mock('@arcgis/core/geometry/Extent.js', () =>
+  jest.fn().mockImplementation((opts) => ({ ...opts, type: 'extent' }))
+)
+
+jest.mock('@arcgis/core/geometry/Point.js', () =>
+  jest.fn().mockImplementation((opts) => ({ ...opts, type: 'point' }))
+)
+
+jest.mock('./coords.js', () => ({
+  getBboxFromGeoJSON: jest.fn(() => ({
+    xmin: 100, ymin: 200, xmax: 500, ymax: 600,
+    spatialReference: { wkid: 27700 },
+    type: 'extent'
+  }))
+}))
+
+describe('isGeometryObscured', () => {
+  const geojson = { type: 'Feature', geometry: { type: 'Point', coordinates: [300, 400] }, properties: {} }
+
+  // Container sits at viewport origin so container-relative coords equal viewport coords
+  const makeView = (toScreenFn) => ({
+    container: {
+      getBoundingClientRect: jest.fn(() => ({ left: 0, top: 0, right: 1000, bottom: 800 }))
+    },
+    toScreen: jest.fn(toScreenFn)
+  })
+
+  // Panel occupies the right 400px of the viewport
+  const panelRect = { left: 600, top: 0, right: 1000, bottom: 800, width: 400, height: 800 }
+
+  test('returns false when view has no container', () => {
+    expect(isGeometryObscured(geojson, panelRect, null)).toBe(false)
+    expect(isGeometryObscured(geojson, panelRect, {})).toBe(false)
+  })
+
+  test('returns true when geometry screen bbox overlaps the panel rect', () => {
+    // Corners project into the panel (x: 650 is between panelLeft 600 and panelRight 1000)
+    const view = makeView(() => ({ x: 650, y: 400 }))
+    expect(isGeometryObscured(geojson, panelRect, view)).toBe(true)
+  })
+
+  test('returns false when geometry screen bbox does not overlap the panel rect', () => {
+    // Corners project to x: 300, entirely left of panelLeft (600)
+    const view = makeView(() => ({ x: 300, y: 400 }))
+    expect(isGeometryObscured(geojson, panelRect, view)).toBe(false)
+  })
+
+  test('projects all four bbox corners', () => {
+    const view = makeView(() => ({ x: 300, y: 400 }))
+    isGeometryObscured(geojson, panelRect, view)
+    expect(view.toScreen).toHaveBeenCalledTimes(4)
+  })
+})