From d0a1c10cec48c8260c8acf3e422eb434f4b80df0 Mon Sep 17 00:00:00 2001
From: Andreas Hocevar <andreas.hocevar@gmail.com>
Date: Sat, 28 Nov 2020 13:09:36 +0100
Subject: [PATCH] Add example for Modify with hit detection

---
 examples/modify-icon.html | 10 ++++++
 examples/modify-icon.js   | 67 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 77 insertions(+)
 create mode 100644 examples/modify-icon.html
 create mode 100644 examples/modify-icon.js

diff --git a/examples/modify-icon.html b/examples/modify-icon.html
new file mode 100644
index 0000000000..37d936c61c
--- /dev/null
+++ b/examples/modify-icon.html
@@ -0,0 +1,10 @@
+---
+layout: example.html
+title: Icon modification
+shortdesc: Example using a Modify interaction to edit an icon.
+docs: >
+  The icon on this map can be dragged to modify its location.
+  <p>The Modify interaction can be configured with a `layer` option. With this option, hit detection will be used to determine the modification candidate.</p>
+tags: "vector, modify, icon, marker"
+---
+<div id="map" class="map"></div>
diff --git a/examples/modify-icon.js b/examples/modify-icon.js
new file mode 100644
index 0000000000..13f470ab7c
--- /dev/null
+++ b/examples/modify-icon.js
@@ -0,0 +1,67 @@
+import Feature from '../src/ol/Feature.js';
+import Map from '../src/ol/Map.js';
+import Point from '../src/ol/geom/Point.js';
+import TileJSON from '../src/ol/source/TileJSON.js';
+import VectorSource from '../src/ol/source/Vector.js';
+import View from '../src/ol/View.js';
+import {Icon, Style} from '../src/ol/style.js';
+import {Modify} from '../src/ol/interaction.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+
+const iconFeature = new Feature({
+  geometry: new Point([0, 0]),
+  name: 'Null Island',
+  population: 4000,
+  rainfall: 500,
+});
+
+const iconStyle = new Style({
+  image: new Icon({
+    anchor: [0.5, 46],
+    anchorXUnits: 'fraction',
+    anchorYUnits: 'pixels',
+    src: 'data/icon.png',
+  }),
+});
+
+iconFeature.setStyle(iconStyle);
+
+const vectorSource = new VectorSource({
+  features: [iconFeature],
+});
+
+const vectorLayer = new VectorLayer({
+  source: vectorSource,
+});
+
+const rasterLayer = new TileLayer({
+  source: new TileJSON({
+    url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json?secure=1',
+    crossOrigin: '',
+  }),
+});
+
+const target = document.getElementById('map');
+const map = new Map({
+  layers: [rasterLayer, vectorLayer],
+  target: target,
+  view: new View({
+    center: [0, 0],
+    zoom: 3,
+  }),
+});
+
+const modify = new Modify({
+  layer: vectorLayer,
+  style: function () {}, // do not render the modification vertex
+});
+modify.on(['modifystart', 'modifyend'], function (evt) {
+  target.style.cursor = evt.type === 'modifystart' ? 'grabbing' : 'pointer';
+});
+map.on('pointermove', function (evt) {
+  if (!evt.dragging) {
+    target.style.cursor = map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : '';
+  }
+});
+
+map.addInteraction(modify);