Updated README

ponlawat-w · Nov 25, 2023 · 6efd30d · 6efd30d
1 parent 745a3e9
commit 6efd30d
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -49,20 +49,15 @@ Or use a custom vector source (not OSM) for snapping.
 ```ts
 const interaction = new OSMWaySnap({
   source: targetLayer.getSource(),
-  waySource: someVectorSource
+  waySource: someVectorSource,
   maximumResolution: 5,
   fetchBufferSize: 250
 });
 map.addInteraction(interaction);
 ```
 
-## Examples
-TODO
-
 ## Constructor Options
 
-### For `OSMWaySnap`
-
 - `autoFocus?: boolean` - True to automatically fit map view to next candidantes. (default: true)
 - `focusPadding?: number` - Used with autoFocus, specify number to add padding to view fitting. (default: 50 !PROJECTION SENSITIVE!)
 - `sketchStyle?: StyleLike` - Style of sketch features (default is predefined, overwrite if necessary)
@@ -71,12 +66,99 @@ TODO
 - `createAndAddWayLayer?: boolean` - Create a new way layer from way source (if provided) and add to map (default: true)
 - `wrapX?: boolean` - WrapX
 
-### extended options if `waySource` is not provided
+If `waySource` is not provided, `OSMOverpass` will be used as source for snapping, so the constructor options for `OSMWaySnap` will be extended to include [thoses options from `OSMOverpassSourceBase`](https://github.com/ponlawat-w/ol-osmoverpass#constructor-options).
+
+## Examples
+
+[Full page example using the library from CDN](./examples/index.html)
+
+### Using as module
+
+```ts
+import { Map, View } from 'ol';
+import TileLayer from 'ol/layer/Tile';
+import VectorLayer from 'ol/layer/Vector';
+import OSM from 'ol/source/OSM';
+import VectorSource from 'ol/source/Vector';
+import Feature from 'ol/Feature';
+import LineString from 'ol/geom/LineString'; 
+import OSMWaySnap from 'ol-osmwaysnap';
+
+const basemap = new TileLayer({ source: new OSM() });
+const targetLayer = new VectorLayer<VectorSource<Feature<LineString>>>({
+  source: new VectorSource()
+});
+
+const view = new View({
+  center: [11018989, 2130015],
+  zoom: 16
+});
+const map = new Map({
+  target: 'map',
+  layers: [basemap, targetLayer],
+  view
+});
 
-- `cachedFeaturesCount: number` - The number of features to store before getting cleared. This is to prevent heavy memory consumption.
-- `fetchBufferSize: number` - Buffer size to apply to the extent of fetching OverpassAPI. This is to prevent excessive call despite slight map view panning. **USE THE SAME PROJECTION WITH THE LAYER**.
-- `maximumResolution: number` - Map view resolution to start fetching OverpassAPI. This is to prevent fetching elements in too big extent. **USE THE SAME PROJECTION WITH THE LAYER**
-- `overpassQuery: string` - OverpassQL statement(s) to fetch, excluding settings and out statements.
-- `overpassEndpointURL?: string` - OverpassAPI endpoint URL (https://wiki.openstreetmap.org/wiki/Overpass_API#Public_Overpass_API_instances)
+const interaction = new OSMWaySnap({
+  source: targetLayer.getSource(),
+  maximumResolution: 5,
+  fetchBufferSize: 250,
+  overpassEndpointURL: 'https://...' // Choose one instance from https://wiki.openstreetmap.org/wiki/Overpass_API#Public_Overpass_API_instances
+});
+mao.addInteraction(interaction);
+```
+
+### Using as CDN
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css">
+    <style>
+      #map {
+        width: 100%;
+        height: 90vh;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map"></div>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
+    <script src="https://www.unpkg.com/ol-osmwaysnap/dist/webpack/index.js"></script>
+    <script lang="js">
+      const basemap = new ol.layer.Tile({ source: new ol.source.OSM() });
+
+      const targetFeaturesLayer = new ol.layer.Vector({
+        source: new ol.source.Vector(),
+        style: new ol.style.Style({
+          stroke: new ol.style.Stroke({
+            width: 4,
+            color: '#ff0000'
+          })
+        })
+      });
+
+      const map = new ol.Map({
+        target: 'map',
+        layers: [basemap, targetFeaturesLayer],
+        view: new ol.View({
+          center: [11018989, 2130015],
+          zoom: 16
+        })
+      });
+
+      const interaction = new OSMWaySnap.OSMWaySnap({
+        source: targetFeaturesLayer.getSource(),
+        maximumResolution: 5,
+        fetchBufferSize: 250,
+        overpassEndpointURL: 'https://...' // Choose one instance from https://wiki.openstreetmap.org/wiki/Overpass_API#Public_Overpass_API_instances
+      });
+      map.addInteraction(interaction);
+    </script>
+  </body>
+</html>
+```
 
 ---
diff --git a/examples/index.html b/examples/index.html
@@ -69,7 +69,7 @@
         source: targetFeaturesLayer.getSource(),
         maximumResolution: 5,
         fetchBufferSize: 250,
-        overpassEndpointURL: 'https://overpass.kumi.systems/api/interpreter' // Choose one instance from https://wiki.openstreetmap.org/wiki/Overpass_API#Public_Overpass_API_instances
+        overpassEndpointURL: 'https://...' // Choose one instance from https://wiki.openstreetmap.org/wiki/Overpass_API#Public_Overpass_API_instances
       });
       map.addInteraction(interaction);