geoman-io · dailyprice · Aug 21, 2024 · Aug 21, 2024 · Aug 21, 2024 · Sep 18, 2024
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,6 @@
+# IDE
+.idea
+
 # Dependencies
 /node_modules
 

diff --git a/.npmrc b/.npmrc
@@ -0,0 +1,3 @@
+engine-strict=true
+resolution-mode=highest
+@geoman-io:registry=https://npm.geoman.io/
diff --git a/docs/01-basics.md b/docs/01-basics.md
@@ -0,0 +1,108 @@
+---
+title: "Basic Usage"
+---
+
+# Basic Usage
+
+## Installation
+
+### Pro Version
+
+```shell
+# install pro version
+npm install @geoman-io/maplibre-geoman-pro
+```
+
+Add the following content to .npmrc in your project root
+
+```shell
+@geoman-io:registry=https://npm.geoman.io/
+//npm.geoman.io/:_authToken="&#96;&lt;YOUR LICENSE KEY&gt;&#96;"
+```
+
+Replace `<YOUR LICENSE KEY>` with your license key.
+Don't have a license key yet? [Purchase one here](https://geoman.io/pricing).
+
+### Free Version
+
+```shell
+# install free version
+npm install @geoman-io/maplibre-geoman-free
+```
+
+## Expected HTML Structure
+```html
+<!-- index.html -->
+<html lang="en_US">
+<head>
+  <title>Geoman Maplibre</title>
+  <style>
+    #dev-map {
+      height: 100vh;
+      width: 100vw;
+    }
+  </style>
+</head>
+<body>
+  <div id="dev-map"></div>
+</body>
+</html>
+```
+
+## Maplibre and Geoman initialization
+```typescript
+import ml from 'maplibre-gl';
+import { type GmOptionsPartial } from '@geoman-io/maplibre-geoman-pro';
+
+import 'maplibre-gl/dist/maplibre-gl.css';
+import '@geoman-io/maplibre-geoman-pro/dist/maplibre-geoman.css';
+
+
+const mapStyle: ml.StyleSpecification = {
+  version: 8,
+  glyphs: 'https://demotiles.maplibre.org/font/{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: mapLibreStyle,
+  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 });
+});
+```
diff --git a/docs/02-events.md b/docs/02-events.md
@@ -0,0 +1,31 @@
+---
+title: "Events"
+---
+
+# Event Listening
+
+Event listening works the same way as in Maplibre. You can listen to all events fired by Geoman.
+
+```typescript
+// example of listening to the create event
+map.on('gm:create', (event: GMEvent) => {
+  log.debug('Event', event);
+});
+```
+
+To debug all events, you can use the following code. This will display all Geoman events in the browser console.
+
+```typescript
+import { type GlobalEventsListenerParemeters } from '@geoman-io/maplibre-geoman-pro';
+
+map.gm.setGlobalEventsListener((event: GlobalEventsListenerParemeters) => {
+  if (event.type === 'converted') {
+    console.log('Regular event', event);
+  } else if (event.type === 'system') {
+    console.log('System event', event);
+  }
+});
+
+// you can disable the global events listener when you don't need it anymore
+map.gm.setGlobalEventsListener(null);
+```
diff --git a/docs/03-mode-switching.md b/docs/03-mode-switching.md
@@ -0,0 +1,24 @@
+---
+title: "Modes Handling"
+---
+
+# Mode Handling
+
+All available modes can be enabled, disabled, or toggled using the following methods:
+
+For example, to handle the `edit:drag` mode:
+```typescript
+// enable mode
+map.gm.options.enableMode('edit', 'drag');
+
+// disable mode
+map.gm.options.disableMode('edit', 'drag');
+
+// toggle mode
+map.gm.options.toggleMode('edit', 'drag');
+
+// check mode state
+map.gm.options.isModeEnabled('edit', 'drag');
+```
+
+TypeScript support is available, so you can see all available options for each method in Geoman.
diff --git a/docs/12.utils.md b/docs/12.utils.md
diff --git a/docs/14.lazy-loading.md b/docs/14.lazy-loading.md
diff --git a/docs/16.keyboard.md b/docs/16.keyboard.md
diff --git a/docs/changelog/_category_.json b/docs/changelog/_category_.json