Additional exported elements about maplibre-gl-export HOT 6 CLOSED

We can do this using html2canvas. It would be nice to see a community owned project provide this functionality.

from maplibre-gl-export.

@whittaker007 I was trying to add attribution from style.json before, but at that time, I could not manage to add it. However, any PR to this repository is most welcome, feel free to fork it and pull request, please.

from maplibre-gl-export.

Also interested in this enhancement - particularly a 'legend' element. Any update on this?

from maplibre-gl-export.

@zbyte64 Thank you for the comment. Please feel free to create a PR to this repo. I am happy to merge it.

from maplibre-gl-export.

I'm a bit hesitant to make a PR, mainly concerned over how it changes the API interface being offered. Here are some broad strokes though so we can get a concrete discussion going (and to help others):

We have an async function that calls html2canvas to copy everything from the "map container" (this includes the Canvas as well as the mapbox controls) into a new canvas element:

async function draw(): Promise<HTMLCanvasElement> {
      return html2canvas(map.getContainer(), {
        ignoreElements,
      });
    }

html2canvas takes a function that lets us filter out elements we don't want (ie interactive elements). We could let the user pass in a function or make some convenience factory that filters by classnames:

export function ignoreElementsFactory(hiddenClassNames: string[]) {
  const hiddenClassNamesSet = new Set(hiddenClassNames);
  return (element: Element) => {
    // Remove all elements with class in hiddenClassNames
    // eslint-disable-next-line no-restricted-syntax
    for (const hiddenClassName of element.classList) {
      if (hiddenClassNamesSet.has(hiddenClassName)) {
        return true;
      }
    }
    return false;
  }
}

Also, most of the time the attribution isn't optimized for print (ie might be underlined to indicate it's a link), so we may want to also allow the user to easily provide additional HTML elements.

To recap, my questions are:

• how should the user specify which elements to ignore? is there any affordances we want to add (eg filter by class names)?
• how should the user specify elements to inject? maybe a callback to generate html elements, which then get called to html2canvas and blitted over the map result?

from maplibre-gl-export.