Description
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);
.