Installation

npm install @geoman-io/mapbox-geoman-free

Usage

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 = '<YOUR_MAPBOX_TOKEN>';

const map = new mapboxgl.Map({
  container: 'dev-map',
  style: {
    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,
      },
    ],
  },
  center: [0, 51],
  zoom: 5,
});

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

Documentation

Visit geoman.io/docs/maplibre to get started.

Demo

Check out the full power of Geoman Pro on geoman.io/demo/maplibre

Links

• GitHub Repository
• Report Issues
• Pro Version & Pricing

License

MIT