Change img.src and map on the fly -> Error Unable to set property 'coords'

[SarahTrees]

Error: Unable to set property 'coords' of undefined or null reference

Everything works the way we want it first time, excellent, thank you for the tool!

Our users can change the src of the image. After that we delete all area from the map and put new area in the map.

There are problems here. The tool saves the old areas between and wants to adjust them after the src change. But at this time the map has no area.

Error: Unable to set property 'coords' of undefined or null reference
Line 20: areas[idx].coords = cachedAreaCoords.split(',').map(scale).join(',');
Reason: areas[idx] is undefined.

How can we change the src and build the new map without having this error?

The tool was initialized by $ ('#mainpicture map').ImageMapResize();
How can we de-initialize / destroy / delete / remove it? To reinitialize it after setting all the HTML details?

[davidjbradshaw]

Can you try the version in this PR and let me know if it works for you?

#57

[nzlrhyz]

@davidjbradshaw I also have a pretty identical use case to this I have tried the linked PR however it still comes up Cannot set property 'coords' of undefined

[nzlrhyz]

I fixed this issue for myself the two changes that I believe are needed are

if (true==true) {
            setup()
            addEventListeners()
            start()
        } else {
            map._resize() //Already setup, so just resize map
        }

Which just negates the beenHere check

and

function resizeAreaTag(cachedAreaCoords, idx) {
                function scale(coord) {
                    var dimension = 1 === (isWidth = 1 - isWidth) ? 'width' : 'height'
                    return (
                        padding[dimension] +
                        Math.floor(Number(coord) * scalingFactor[dimension])
                    )
                }

                if (areas.length === 0) {
                    setup()
                    addEventListeners()
                    start()
                }else{
                    var isWidth = 0

                    areas[idx].coords = cachedAreaCoords
                        .split(',')
                        .map(scale)
                        .join(',')
                }
                
            }

Which stopped the error about Coords not being set, It seem to call it too early (resulting in the error) and then call again which worked

[SarahTrees]

@nzlrhyz: Thanks for the solution! We had given up in 2018 and today I was able to realise our requirement with your trick.

@davidjbradshaw
It would be nice if there would be a function destroy() where everything would be set to start, so everything would be implemented cleanly.
... and thanks for the script it is very helpful!

[davidjbradshaw]

Happy to accept a PR

[Baraw]

I fixed this issue for myself the two changes that I believe are needed are

if (true==true) {
            setup()
            addEventListeners()
            start()
        } else {
            map._resize() //Already setup, so just resize map
        }

Which just negates the beenHere check

and

function resizeAreaTag(cachedAreaCoords, idx) {
                function scale(coord) {
                    var dimension = 1 === (isWidth = 1 - isWidth) ? 'width' : 'height'
                    return (
                        padding[dimension] +
                        Math.floor(Number(coord) * scalingFactor[dimension])
                    )
                }

                if (areas.length === 0) {
                    setup()
                    addEventListeners()
                    start()
                }else{
                    var isWidth = 0

                    areas[idx].coords = cachedAreaCoords
                        .split(',')
                        .map(scale)
                        .join(',')
                }
                
            }

Which stopped the error about Coords not being set, It seem to call it too early (resulting in the error) and then call again which worked

THANK YOU VERY MUCH!!

I had the same issue about changing the source image + changing its map dynamically. It is now working !