p5.js + mappa.js | Unable to place map in parent div

moriartp

I am working with the mappa.js library found in the p5 libraries section of the p5 site. I am looking to place the map within a container div, but cannot for the life of me figure out how to do this.

This issue is demonstrated in this codepen. In the pen you can see the map and canvas overlay are inserted below the footer.

Does anyone have experience with this library and placement of a map within specific page elements? Thank you in advance for your time and insight.

Unable to place map in parent div https://codepen.io/moriartp/pen/yvOjXx

moriartp

So, after hours of unsuccessful attempts, I found a solution shortly after posting this.

At the end of the p5 draw function, I added a little bit of jQuery to reassign the parent div.

$("#mappa").detach().appendTo("#container");

for more general reference $("#div_to_move").detach().appendTo("#new_parent_container");

blindfish

You really shouldn't be doing any DOM manipulation in draw if you can avoid it: very bad for performance! I don't have time to look into this now, but will try and look into it tomorrow...

blindfish

@moriartp - I found the issue in the Mappa source:

const container = L.DomUtil.create('div', 'leaflet-layer');
container.appendChild(this.canvas); 

Mappa appears to be a very loose wrapper around a number of map providers. The above code creates a div container for the Leaflet map and moves the p5 canvas into the same div: i.e. your canvas.parent("container"); makes no difference as it's overridden...

Unless Mappa itself provides an option to set a parent then there's no solution other than DOM manipulation :/

You could raise an issue with the author; though TBH if you know you want to use Leaflet I'd suggest you just use it directly and figure out how to overlay the p5 canvas - it's not so difficult and it'll give you direct access to the Leaflet API: which allows you to set the parent ID on instantiation ;)

GoToLoop

https://GitHub.com/cvalenzuela/Mappa/blob/master/src/providers/tile/Leaflet.js#L44-L54

L.overlay = L.Layer.extend({
  onAdd: () => {
    const overlayPane = overlay.getPane();
    const container = L.DomUtil.create('div', 'leaflet-layer');
    container.appendChild(this.canvas);
    overlayPane.appendChild(container);
  },

  drawLayer: () => {},
});

const overlay = new L.overlay();
this.map.addLayer(overlay);//http://LeafletJS.com/reference-1.3.0.html#map-addlayer

https://GitHub.com/cvalenzuela/Mappa/blob/master/src/providers/tile/Leaflet.js#L19-L26

createMap() {
  this.map = L.map(this.id, {
    center: [
      this.options.lat, this.options.lng,
    ],
    zoom: this.options.zoom,
    inertia: false,
  });

http://LeafletJS.com/reference-1.3.0.html#map-getcontainer

myMap = mappa.tileMap(options);
//myMap.overlay(canvas);
myMap.overlay(canvas, () => container.appendChild( myMap.map.getContainer() ));