MapLibre SVG Export

Export the map view as vector SVG

Maintained by Versatiles

A MapLibre GL JS control from VersaTiles that renders the current map view as a vector SVG image, with a live preview, a size setting and a download button.

Live demo

MapLibre SVG Export running on MapLibre GL JS in your browser

Loading the map…

Demo code

import { SVGExportControl } from "@versatiles/maplibre-svg-export";
import type { IControl } from "maplibre-gl";
import type { PluginDemo } from "../types";

export default {
  center: [13.4, 52.52], // Berlin
  zoom: 12,
  run({ map, container }) {
    // A button that renders the current view as a vector SVG image, ready to download.
    // (The cast only bridges the plugin's own copy of the MapLibre style types.)
    map.addControl(new SVGExportControl() as unknown as IControl, "top-right");

    // Open its panel, which shows a live SVG preview of the view.
    container.querySelector<HTMLButtonElement>(".maplibregl-ctrl-top-right button")?.click();
  },
} satisfies PluginDemo;