TransWikia.com

Mappa.js Clear Canvas with Leaflet marker

Geographic Information Systems Asked on August 17, 2021

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.

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP