TypeError: Cannot set property 'onload' of undefined

[sergitrilles]

Hi guys,

I'm getting this error when I re-run this skeatch:

let myMap;
let canvas;
let locationData;

const mappa = new Mappa('Leaflet');
const options = {
lat: 40,
lng: 0,
zoom: 4,
style: "http://{s}.tile.osm.org/{z}/{x}/{y}.png"
}

p5.setup = function() {
locationData = p5.getCurrentPosition();
canvas = p5.createCanvas(640,640);
myMap = mappa.tileMap(options);
myMap.overlay(canvas);

// Add a color to our ellipse
p5.fill(200, 100, 100);
console.log(locationData.latitude +" "+ locationData.longitude);

}

p5.draw = function() {
p5.clear();
console.log(locationData.latitude +" "+ locationData.longitude);
// Every Frame, get the canvas position
// for the latitude and longitude of Nigeria
const nigeria = myMap.latLngToPixel(locationData.latitude, locationData.longitude);
// Using that position, draw an ellipse
p5.ellipse(nigeria.x, nigeria.y, 20, 20);
$("#mappa").detach().appendTo("#kajero-p5-3");
}

The error is invocked by myMap.overlay(canvas); . I executed correctly the sketch in the first time, but I'm getting this error the second time.

Best

[cvalenzuela]

Is there any particular reason you are using p5 in instance mode?

[sergitrilles]

We are developing a webapp to create notebooks with some bock types (text, code, maps,...). One of these types is P5. The final user can write and execute p5 code on "live".

[cvalenzuela]

I tried your code, removing the the $("#mappa").detach().appendTo("#kajero-p5-3"); in the draw function, and it works. Are you trying to append the mappa instance to another component? Try with p5 parent() method and there's no need to reference this in the draw loop.

[sergitrilles]

Yes, I have to do that to move the map inside the div (see https://forum.processing.org/two/discussion/26239/p5-js-mappa-js-unable-to-place-map-in-parent-div)

With p5 parent is not working, I tried with mappa and canvas element.

Thanks

[cvalenzuela]

Do you have p5.dom.js in your sketch?

All the examples on the website are appending the canvas to another div with .parent(). Take a look at: https://github.com/cvalenzuela/Mappa/blob/master/docs/assets/scripts/tile-leaflet.js#L23

[sergitrilles]

Yes, I have p5.dom . But, removing $("#mappa").detach().appendTo("#DivName"); and using .parent() the map is drawing outside the Div.
But, the problem is not that and continues, when I run this sketch two times, the map disappears. And the overlay gets an error

[cvalenzuela]

It seems the example from the Processing forum was using version 0.0.4 directly from npm.
Version 0.0.5 had this bug solved, but I never updated the package on npm. by bad!

Here's the same CodePen from the forum but with version 0.0.5

https://codepen.io/anon/pen/Zxeemq

thanks for pointing this out! I just updated the version on npm!

[sergitrilles]

Perfect! Thanks a lot!