panComplete not firing

[WarrenG]

I'm using the react Maps control and would like to use the panComplete event to check the visible area of the map, but the panComplete event doesn't fire. Am I doing something wrong or is there a bug in the control. 

As an example, in the following snippet both pan and zoomComplete will fire, but not panComplete. I've tested in latest versions of Firefox and MS Edge.

function App() {

const safeStringify = (obj: any) => {

const seen = new WeakSet();

return JSON.stringify(obj, (key, value) => {

if (typeof value === "object" && value !== null) {

if (seen.has(value)) {

return;

}

seen.add(value);

}

return value;

});

};

const mapObj = useRef<MapsComponent>(null);

const map = () => {

return (

<MapsComponent id="maps"

pan={(args: IMapPanEventArgs) => {

console.log(`pan with args: ${safeStringify(args)}`);

}}

panComplete={(args: IMapPanEventArgs) => {

console.log(`panComplete with args: ${safeStringify(args)}`);

}}

zoomComplete={(args: IMapPanEventArgs) => {

console.log(`zoomComplete with args: ${safeStringify(args)}`);

}}

zoomSettings={{

enable: true,

mouseWheelZoom: true,

enablePanning: true,

maxZoom: 18,

shouldZoomInitially: true

}}

height={'100%'}

width={'100%'}

border={{color: 'grey', width: 1}}

ref={mapObj}

margin={{

bottom: 0,

left: 0,

right: 0,

top: 0

}}>

<Inject services={[MapsTooltip, Zoom, Marker]}/>

<LayersDirective>

<LayerDirective

urlTemplate="https://tile.openstreetmap.org/level/tileX/tileY.png"

animationDuration={400}

>

</LayerDirective>

</LayersDirective>

</MapsComponent>

)

}

return (

<>

{map()}

</>

)

}

Attachment: map_test_9231c487.zip

[Indumathi Ravi]

Hi Warren,

We were able to reproduce the reported issue - "The "panComplete" event is not working properly for the online map providers". However, we have considered this as a bug and logged a defect report for the same. The fix for the issue will be included in our weekly patch release, which is expected to be available by the end of October 2024.

https://www.syncfusion.com/feedback/61894

[Indumathi Ravi]

Hi Warren,

We have fixed the reported issue – “The ‘panComplete’ event is not working properly for the online map providers” and the fix is included in our weekly patch release (v27.1.56).

Root Cause:

Previously, the “panComplete” event was not triggered because the condition for pan completion was checked only for shape maps, not for online map providers. We have now modified the condition, and the event is triggered correctly.

Please update the “ej2-maps” and “ej2-react-maps” packages to the latest version in your application to resolve the reported issue. You can find the package link below.

https://www.npmjs.com/package/@syncfusion/ej2-maps

https://www.npmjs.com/package/@syncfusion/ej2-react-maps

Please let us know if you need any further assistance.