Mappa.js Clear Canvas with Leaflet marker

Question

I am using Mappa.js with Leaflet to generate a web map.

However the function clear(); has no effect on a Leaflet marker, but only works with a p5.js element. Redrawing the marker over and over each time the map changes.

How can I erase and redraw the Leaflet marker every time the map changes, either using leaflet or using p5.js?

This is my code:

let myMap;
let canvas;
const mappa = new Mappa('Leaflet');

// Lets put all our map options in a single object
const options = {
  lat: 48.85,
  lng: 2.35,
  zoom: 1.5,
  style: "http://{s}.tile.osm.org/{z}/{x}/{y}.png"
}

function setup(){
  canvas = createCanvas(800,400); 
  // background(100); let's uncomment this, we don't need it for now

  // Create a tile map with the options declared
  myMap = mappa.tileMap(options); 
  myMap.overlay(canvas);
  myMap.onChange(marker_leaflet);
}

function draw(){
    clear();
  const paris = myMap.latLngToPixel(48.85, 2.35); 
  // Using that position, draw an ellipse
  ellipse(paris.x, paris.y, 25, 25);
}

function marker_leaflet() {
  clear();
  L.marker([48.85, 2.35]).addTo(myMap.map);
}

I don't know how to share the result, but you can copy-paste my code in this p5.js web editor for see the result and the bug.

Answer 1

You are using a Leaflet command (L.) in Mappa. Mappa does not recognize it. In Mappa, you need to use Mappa methods.

Use VSCode, use the get started from Leaflet, and the L. commands will work.
or draw your markers using p5 syntax (ellipse, rect, beginShape).