Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uncaught type error when I attempt to redraw the map and overlay after deleting it. #47

Closed
ChaimStanton opened this issue Apr 8, 2022 · 1 comment

Comments

@ChaimStanton
Copy link

ChaimStanton commented Apr 8, 2022

Below is the code I use to create a map and associated overlay.
(I am using p5 in instance mode because I have multiple sketches on the same page)

const sketchForMap = p => {
    p.setup = function setup() {
        this.canvas = createCanvas(Visual.width, Visual.height);
        this.canvas.id('p5MapOverlay');

        let myMap = mappa.tileMap(options);
        myMap.overlay(this.canvas);
    };
    p.draw = function draw() {
        fill('green');
        rect(100, 100, 100, 100);
    };
};
this.myFunInstance = new p5(sketchForMap); // here we invoke it 

Later on in the code I delete it by using

let mappaContainer = select('#mappa');
mappaContainer.remove();
this.myFunInstance.remove();

Which acts as expected.
However, when I go to redraw the map and sketch again using the above code I get the following error.

mappa.min.js:1 Uncaught TypeError: Cannot set properties of undefined (setting 'onload')
    at Leaflet.overlay (mappa.min.js:1:9160)
    at p5.setup (blackBoxMap.js:28:23)
    at p5._setup (p5.js:64079:27)
    at p5._start (p5.js:64002:25)
    at new p5 (p5.js:64355:22)
    at BlackBoxMap.superSetup (blackBoxMap.js:37:30)
    at Gallery.selectVisual (gallery.js:94:30)
    at _main.default.Element.<anonymous> (gallery.js:54:12)

A similar issue has been raised in issues #36 and #11 and in both of those they recommend that I update my version of p5.js or mappajs I have tried both of these and it has not worked.
And a related issue has been raised in #45.
In addition to the above, I have attempted to fiddle around with the onload function in the HTML tags and that has not worked either.

Any help or suggestions would be appreciated.

EDIT: In the first block of code I changed the line myMap.overlay(canvas); to myMap.overlay(this.canvas);.

@ChaimStanton
Copy link
Author

ChaimStanton commented Apr 8, 2022

Quite conveniently as I was visiting the repo on GitHub I noticed that there was an open pull request #10 from @GoToLoop and I copied and pasted in the code from here and it worked.

The only difference was the CSS in the HTML was slightly in that the id of the layer wasn't set to mappa. (This was easily overcome, however), it was changed to leaflet.
Would this be considered a breaking change?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant