Is it possible to put a legend widget in a container outside the viewDiv container?

janzagar_0

I want to place a legend div that I'm creating using the Legend widget in a HTML div that is not a child of the "viewDiv" element. Is this even possible? I really don't want to have a legend item floating around in my map div.

I have included a sample CodePen below for reference. I want the legend to go in the "sidebar" element.

https://codepen.io/janzagar0/pen/dPyjeYR

JoelBennett

Yes, you can create a legend as a child of any pre-existing element.  The following example shows getting a reference to an existing element via document.getElementById:

const legend = new Legend({
  view: view,
  container: document.getElementById("sidebar")
});

 

In your example, the "sidebar" element needs to be created and added to the document before creating the Legend though.