Update examples to demonstrate typical use case

examples/draw-and-append-features.html

@@ -5,7 +5,7 @@ shortdesc: Example of using the appendCoordinates function of ol/interaction/Dra
 docs: >
   Example of using the the appendCoordinates function of Draw interaction. Select a geometry type from the
   dropdown above to start drawing. To finish drawing, click the last point.
-  Click the green LineString Feature to append its coordinates to your drawing.
+  Click the purple Point to append the coordinates of the connected purple LineString feature to your drawing.
   Appending is supported for drawing LineStrings and Polygons.
 tags: "draw, edit, freehand, vector"
 ---

examples/draw-and-append-features.js

@@ -2,8 +2,10 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import Draw from '../src/ol/interaction/Draw.js';
 import Snap from '../src/ol/interaction/Snap.js';
+import Circle from '../src/ol/style/Circle.js';
 import Style from '../src/ol/style/Style.js';
 import Stroke from '../src/ol/style/Stroke.js';
+import Fill from '../src/ol/style/Fill.js';
 import Collection from '../src/ol/Collection.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
@@ -13,32 +15,41 @@ const raster = new TileLayer({
   source: new OSM()
 });
 
-const sampleFeatures = new Collection();
+const baseFeature = new Collection();
-sampleFeatures.push(
+baseFeature.push(
   new GeoJSON().readFeature({
-    type: 'LineString',
+    type: 'Polygon',
-    coordinates: [
+    coordinates: [[
-      [-12000000, 4600000],
+      [-11500000, 5000000],
-      [-12000000, 4000000],
+      [-12000000, 4500000],
-      [-10000000, 5600000],
+      [-12000000, 5500000],
-      [-9000000, 3000000],
-      [-10000000, 4000000],
-      [-11000000, 3000000],
       [-13000000, 4000000],
-      [-12000000, 5600000]
+      [-11000000, 3000000],
-    ]
+      [-10500000, 3500000],
+      [-10000000, 3500000],
+      [-10000000, 4000000],
+      [-11000000, 4000000],
+      [-10000000, 4500000],
+      [-10500000, 5500000],
+      [-11000000, 5000000],
+      [-11500000, 5000000]
+    ]]
   })
 );
 
-const sampleVector = new VectorLayer({
+
+const baseVector = new VectorLayer({
   source: new VectorSource({
-    features: sampleFeatures,
+    features: baseFeature,
     wrapX: false
   }),
   style: new Style({
     stroke: new Stroke({
-      color: 'rgba(0, 256, 0, 1)',
+      color: 'rgba(100, 255, 0, 1)',
       width: 3
+    }),
+    fill: new Fill({
+      color: 'rgba(100, 255, 0, 0.3)'
     })
   })
 });
@@ -49,8 +60,82 @@ const vector = new VectorLayer({
   source: source
 });
 
+
+const appendLine = new Collection();
+const LineA = new GeoJSON().readFeature({
+  type: 'LineString',
+  coordinates: [
+    [-10000000, 3500000],
+    [-10000000, 4000000],
+    [-11000000, 4000000],
+    [-10000000, 4500000],
+    [-10500000, 5500000],
+    [-11000000, 5000000],
+    [-11500000, 5000000],
+    [-12000000, 4500000],
+    [-12000000, 5500000]
+  ]
+});
+appendLine.push(LineA);
+
+const LineB = new GeoJSON().readFeature({
+  type: 'LineString',
+  coordinates: [
+    [-13000000, 4000000],
+    [-11000000, 3000000],
+    [-10500000, 3500000]
+  ]
+});
+appendLine.push(LineB);
+
+const appendHandleFeature = new Collection();
+const appendHandle = new GeoJSON().readFeature({
+  type: 'Point',
+  coordinates: [-10000000, 3500000]
+});
+appendHandleFeature.push(appendHandle);
+
+const appendHandleB = new GeoJSON().readFeature({
+  type: 'Point',
+  coordinates: [-13000000, 4000000]
+});
+appendHandleFeature.push(appendHandleB);
+
+const handleVector = new VectorLayer({
+  source: new VectorSource({
+    features: appendHandleFeature,
+    wrapX: false
+  }),
+  style: new Style({
+    image: new Circle({
+      radius: 5,
+      fill: new Fill({
+        color: 'rgba(100, 0, 255, 1)'
+      }),
+      stroke: new Stroke({
+        color: 'rgba(100, 0, 255, 1)',
+        width: 2
+      })
+    }),
+    radius: 7
+  })
+});
+
+const appendLineVector = new VectorLayer({
+  source: new VectorSource({
+    features: appendLine,
+    wrapX: false
+  }),
+  style: new Style({
+    stroke: new Stroke({
+      color: 'rgba(100, 0, 255, 1)',
+      width: 2
+    })
+  })
+});
+
 const map = new Map({
-  layers: [raster, sampleVector, vector],
+  layers: [raster, baseVector, appendLineVector, handleVector, vector],
   target: 'map',
   view: new View({
     center: [-11000000, 4600000],
@@ -69,20 +154,26 @@ map.on('click', (event) => {
     }, {
       hitTolerance: 10,
       layerFilter: (layer) => {
-        return layer === sampleVector;
+        return layer === handleVector;
       }
     }
   );
-  if (clickedFeature !== null) {
+
-    // In this demo we remove the new point that was clicked,
+  if (clickedFeature == appendHandle) {
-    // and add the whole feature instead:
+    // In this demo we remove the new point that was clicked from the drawing,
+    // and add the connected feature coordinates:
     draw.removeLastPoint();
-    draw.appendCoordinates(clickedFeature.getGeometry().getCoordinates());
+    draw.appendCoordinates(LineA.getGeometry().getCoordinates());
+  } else if (clickedFeature == appendHandleB) {
+    // In this demo we remove the new point that was clicked from the drawing,
+    // and add the connected feature coordinates:
+    draw.removeLastPoint();
+    draw.appendCoordinates(LineB.getGeometry().getCoordinates());
   }
 });
 
 const snapInteraction = new Snap({
-  source: sampleVector.getSource()
+  source: handleVector.getSource()
 });
 
 const typeSelect = document.getElementById('type');