VersaTiles Map Editor

A standalone, embeddable map editor for VersaTiles. Draw and style markers, lines, circles and polygons on a vector map and share the result via a self-contained URL hash.

This is a SvelteKit application built with MapLibre GL and @versatiles/style. It was extracted from node-versatiles-svelte to be developed on its own.

Development

npm install
npm run dev      # start the dev server
npm run build    # build the static site (adapter-static)
npm run preview  # preview the production build

Quality checks

npm run lint            # ESLint
npm run format:check    # Prettier
npm run test-unit       # Vitest unit tests
npm run test-playwright # Playwright visual/e2e tests

Embedding

The editor reads its state from the URL hash, so it can be embedded in an <iframe>:

<iframe src="https://your-host/#<state-hash>" style="width: 600px; height: 600px;"></iframe>

When embedded (i.e. not the top-level window) the editing sidebar is hidden and the map renders in read-only mode. The state can alternatively be provided via the iframe's data attribute.

License

MIT — see LICENSE.