Added examples

ponlawat-w · Nov 22, 2023 · f948988 · f948988
1 parent 60c0db3
commit f948988
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -161,5 +161,3 @@ dist
 .ionide
 
 # End of https://www.toptal.com/developers/gitignore/api/node,visualstudiocode
-
-examples/*
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css">
+    <style>
+      #container {
+        display: flex;
+      }
+
+      #map {
+        width: 75%;
+        height: 90vh;
+      }
+
+      #review {
+        width: 25%;
+      }
+
+      #review textarea {
+        width: 100%;
+        height: 40vh;
+        font-family: monospace;
+        font-size: 0.8em;
+        word-break: break-all;
+        word-wrap: break-word;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="map"></div>
+      <div id="review">
+        <div>Number of vertices: <span id="vertices">-</span></div>
+        <div>WKT <textarea id="wkt" disabled></textarea></div>
+        <div>GeoJSON <textarea id="geojson" disabled></textarea></div>
+      </div>
+    </div>
+
+    </div>
+
+    <div id="status"></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 osmWayLayer = new ol.layer.Vector({
+        source: new OSMWaySnap.OSMWaySource({
+          maximumResolution: 5,
+          fetchBufferSize: 250,
+          overpassEndpointURL: 'https://...' // Choose one instance from https://wiki.openstreetmap.org/wiki/Overpass_API#Public_Overpass_API_instances
+        }),
+        style: OSMWaySnap.OSMWaySource.getDefaultStyle()
+      });
+
+      osmWayLayer.getSource().on('featuresloadstart', () => {
+        document.getElementById('status').innerHTML = 'Loading from OSM…';
+      });
+      osmWayLayer.getSource().on('featuresloadend', () => {
+        document.getElementById('status').innerHTML = '';
+      });
+      osmWayLayer.getSource().on('featuresloaderror', () => {
+        document.getElementById('status').innerHTML = 'ERROR';
+      });
+
+      const map = new ol.Map({
+        target: 'map',
+        layers: [basemap, osmWayLayer, targetFeaturesLayer],
+        view: new ol.View({
+          center: [11018989, 2130015],
+          zoom: 16
+        })
+      });
+
+      const interaction = new OSMWaySnap.OSMWaySnap({
+        source: targetFeaturesLayer.getSource(),
+        waySource: osmWayLayer.getSource()
+      });
+      map.addInteraction(interaction);
+      map.addInteraction(new ol.interaction.Snap({
+        source: osmWayLayer.getSource()
+      }));
+
+      const wkt = new ol.format.WKT();
+      const geojson = new ol.format.GeoJSON();
+
+      map.on('click', () => {
+        setTimeout(() => {
+          const feature = interaction.activeFeature;
+          if (!feature) return;
+
+          document.getElementById('vertices').innerHTML = feature.getGeometry().getCoordinates().length;
+          document.getElementById('wkt').innerHTML = wkt.writeGeometry(feature.getGeometry());
+          document.getElementById('geojson').innerHTML = geojson.writeGeometry(feature.getGeometry());
+        }, 200);
+      });
+    </script>
+  </body>
+</html>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -161,5 +161,3 @@ dist
		.ionide

		# End of https://www.toptal.com/developers/gitignore/api/node,visualstudiocode

		examples/*