src/components/legend.js
function getRemoteLegend(href) {
  let ref = null;
  const div = (<div ref={(me) => {
    ref = me;
  }} />);

  // kick off the href fun!
  fetch(href).then(response => response.text())
    .then((html) => {
    // This is equivalent to dangerouslySetInnerHTML
      if (ref !== null) {
        ref.innerHTML = html;
      }
    }).catch((error) => {
      console.error('An error occured.', error);
    });

  return div;
}
function getRemoteLegend(href) {
  let ref = null;
  const div = (<div ref={(me) => {
    ref = me;
  }} />);

  // kick off the href fun!
  fetch(href).then(response => response.text())
    .then((html) => {
    // This is equivalent to dangerouslySetInnerHTML
      if (ref !== null) {
        ref.innerHTML = html;
      }
    }).catch((error) => {
      console.error('An error occured.', error);
    });

  return div;
}
@module components/legend
@desc React Component to render the legend data.
Create legend objects using the metadata prefixes
"bnd:legend-type" and "bnd:legend-contents".
Neither the Mapbox GL Spec nor the specific underlying
services for vector layers have a standardized way of
providing legends.  This is using the metadata provided
by the layer to do so.
"bnd:legend-type" can be one of "image", "html", "href"
where "bnd:legend-content" would then provide the appropriate
additional information.
"bnd:legend-type" : "image", "bnd:legend-content" would provide
the src attribute for an <img>
"bnd:legend-type" : "html", "bnd:legend-content" would provide
the html content for a <div>
"bnd:legend-type" : "href", "bnd:legend-content" would provide
the URL for html content.
 Return a div that is asynchronously populated
with the content from the parameter href.

@param {string} href The location of the content for the div.

@returns {Object} A <div> element.