0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.