Maplibre-Geoman

// Vite
import workerUrl from "maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url";
ml.setWorkerUrl(workerUrl);

// Webpack 5 / Rspack (or any bundler supporting `new URL(..., import.meta.url)`)
ml.setWorkerUrl(new URL("maplibre-gl/dist/maplibre-gl-worker.mjs", import.meta.url).href);

// No bundler — serve the file yourself and pass its path
ml.setWorkerUrl("/vendor/maplibre-gl-worker.mjs");

import * as ml from "maplibre-gl";
import workerUrl from "maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url";
import { Geoman, type GmOptionsPartial } from "@geoman-io/maplibre-geoman-free";

import "maplibre-gl/dist/maplibre-gl.css";
import "@geoman-io/maplibre-geoman-free/dist/maplibre-geoman.css";

// See "MapLibre requirements" above — must run before the first `new ml.Map()`.
ml.setWorkerUrl(workerUrl);

const mapStyle: ml.StyleSpecification = {
  version: 8,
  glyphs: "https://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
  sources: {
    "osm-tiles": {
      type: "raster",
      tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
      tileSize: 256,
      attribution: "© OpenStreetMap contributors",
    },
  },
  layers: [
    {
      id: "osm-tiles-layer",
      type: "raster",
      source: "osm-tiles",
      minzoom: 0,
      maxzoom: 19,
    },
  ],
};

const map = new ml.Map({
  container: "dev-map",
  style: mapStyle,
  center: [0, 51],
  zoom: 5,
});

const gmOptions: GmOptionsPartial = {
  // geoman options here
};

const geoman = new Geoman(map, gmOptions);

map.on("gm:loaded", () => {
  console.log("Geoman fully loaded");

  // Here you can add your geojson shapes for example
  const shapeGeoJson = {
    type: "Feature",
    geometry: { type: "Point", coordinates: [0, 51] },
  };
  map.gm.features.addGeoJsonFeature({ shapeGeoJson });
});

import mapboxgl from "mapbox-gl";
import { Geoman, type GmOptionsPartial } from "@geoman-io/mapbox-geoman-free";

import "mapbox-gl/dist/mapbox-gl.css";
import "@geoman-io/mapbox-geoman-free/dist/mapbox-geoman.css";

mapboxgl.accessToken = import.meta.env.VITE_MAPBOX_TOKEN ?? "";

const mapStyle: mapboxgl.StyleSpecification = {
  version: 8,
  glyphs: "https://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
  sources: {
    "osm-tiles": {
      type: "raster",
      tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
      tileSize: 256,
      attribution: "© OpenStreetMap contributors",
    },
  },
  layers: [
    {
      id: "osm-tiles-layer",
      type: "raster",
      source: "osm-tiles",
      minzoom: 0,
      maxzoom: 19,
    },
  ],
};

const map = new mapboxgl.Map({
  container: "dev-map",
  style: mapStyle,
  center: [0, 51],
  zoom: 5,
});

const gmOptions: GmOptionsPartial = {
  // geoman options here
};

const geoman = new Geoman(map, gmOptions);
await geoman.waitForGeomanLoaded();

const geoman = new Geoman(map, {
  customControls: [
    {
      id: 'toggle-parcels', // unique; also used for the button id/class and removal
      title: 'Toggle parcels layer', // tooltip (first 2 chars are the text fallback)
      icon: '<svg viewBox="0 0 20 20">...</svg>', // optional SVG, sanitized before render
      order: 10, // optional sort order within the custom group
      onClick: ({ gm, control, event }) => {
        const visible = map.getLayoutProperty('parcels', 'visibility') !== 'none';
        map.setLayoutProperty('parcels', 'visibility', visible ? 'none' : 'visible');
      },
    },
  ],
});

geoman.control.addCustomControl({ id: 'export', title: 'Export', onClick: () => save() });
geoman.control.removeCustomControl('export');