Cannot call map.on('load') for Mapbox GL

[alsino]

Hi Cristóbal,

thanks again for this great library! It really helps connecting p5.js with tile maps. While playing around, I have had a small issue:

I cannot seem to call the map.on('load') method. I would need this functionality to handle events on the map object after it is initialized. Here is what I have come up with so far:

  let token = "xxx";
  let mappa = new Mappa("Mapboxgl", token);
  let myMap;
  let canvas;

  function setup(){
    canvas = createCanvas(windowWidth, windowHeight);
    myMap = mappa.tileMap(mapOptions); // lat 0, lng 0, zoom 4
    myMap.overlay(canvas);

    let mapObject = myMap.map;
  
    mapObject.on("load", function(){
      console.log("Map is ready!");
    })
}

When doing this, I get the following error:

Could you maybe help out?

[cvalenzuela]

Hi @alsino

Try this:

let token = "xxx";
let mappa = new Mappa("Mapboxgl", token);
let myMap;
let canvas;

function setup(){
  canvas = createCanvas(windowWidth, windowHeight);
  myMap = mappa.tileMap(0,0,4); // lat 0, lng 0, zoom 4

  // you can pass a callback that will execute when the map is loaded and the p5 canvas is ready.
  myMap.overlay(canvas, startListeningToEvents);
}

function startListeningToEvents () {
  myMap.map.on("load", function(){
    console.log("Map is ready!");
  })

  myMap.map.on("move", function(){
    console.log("Map is moving");
  })
}

I need to update the readme to show how to use that callback

Let me know if that works for you

[alsino]

Works like a charm, thanks! Probably a good idea to add this to the documentation ;)