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.
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP