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

Answers

• moriartp

  February 2018 Answer ✓

  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

  February 2018

  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

  February 2018

  @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

  February 2018 edited February 2018

  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() ));