versatiles-svg-renderer
    Preparing search index...

    Class SVGExportControl

    A MapLibre GL JS control that exports the current map view as an SVG image.

    Adds a button to the map. Clicking it opens a panel with a live preview of the view as SVG, where the user can set the image size, choose whether to include labels and icons, and then download the file or open it in a new tab. The map stops responding to panning and zooming while the panel is open, so the preview matches what is exported.

    The preview is rendered with renderToSVG from the map's current style, centre and zoom, and the panel shows the attribution of the style's sources.

    import maplibregl from 'maplibre-gl';
    import { SVGExportControl } from '@versatiles/maplibre-svg-export';

    const map = new maplibregl.Map({
      container: 'map',
      style: 'https://tiles.versatiles.org/assets/styles/colorful/style.json',
      center: [13.4, 52.52],
      zoom: 10,
    });

    map.addControl(new SVGExportControl(), 'top-right');

    The UMD bundle, served by jsDelivr, exposes everything on a global VersaTilesSVG:

    <script src="https://unpkg.com/maplibre-gl@5/dist/maplibre-gl.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@versatiles/maplibre-svg-export@2"></script>
    <script>
      const map = new maplibregl.Map({ container: 'map', style: '…', center: [13.4, 52.52], zoom: 10 });
      map.addControl(new VersaTilesSVG.SVGExportControl(), 'top-right');
    </script>

    map.addControl(new SVGExportControl({ defaultWidth: 1920, defaultHeight: 1080 }));

    Implements

    • MapLibreControl
    Index
    constructor
    onAdd onRemove

    • Called by MapLibre when the control is added with map.addControl(); not meant to be called directly. Returns the button to place on the map.

      Parameters

      • map: MapLibreMap

      Returns HTMLElement

    • Called by MapLibre when the control is removed with map.removeControl(); not meant to be called directly. Closes the panel and cleans up.

      Returns void

    Settings
    Member Visibility

    On This Page
    Constructors
    Methods