update the marker and add the copy to clipboard button

README.md

@@ -45,6 +45,9 @@ You can find the Custom Web AppBuilder what3words widget in this [Github page](h
 - Clicking on the map will allow you to discover what3words addresses at the clicked location. For example, the point selected on the map returned this what3words address: `///filled.count.soap`.
 ![reverse-geocode](./what3words/docs/ScreenShot-05-reverse-geocode.png)
 
+- You can also copy the what3words address by clicking on the `Copy` button next to the what3words address displayed on the window popup.
+![copy-what3words](./what3words/docs/ScreenShot-08-copy-what3words.png)
+
 ## Issues
 
 Found a bug or want to request a new feature? Please let us know by [submitting an issue](https://github.com/what3words/w3w-arcgis-webappbuilder-widget/issues).

WebApp-what3words/widgets/what3words/Widget.js

@@ -1,7 +1,9 @@
 define(['dojo/_base/declare',
     'jimu/BaseWidget',
-    'dojo/_base/lang',
     'dojo/on',
+    'dojo/_base/lang',
+    'dojo/_base/html',
+    'dojo/_base/array',
     'esri/symbols/PictureMarkerSymbol',
     'esri/layers/GraphicsLayer',
     'esri/graphic',
@@ -11,7 +13,7 @@ define(['dojo/_base/declare',
     'dijit/layout/ContentPane',
     'jimu/loaderplugins/jquery-loader!https://code.jquery.com/jquery-git1.min.js'
   ],
-  function (declare, BaseWidget, lang, on, PictureMarkerSymbol, GraphicsLayer,
+  function (declare, BaseWidget, on, lang, html, array, PictureMarkerSymbol, GraphicsLayer,
     Graphic, Locator, esriRequest, InfoTemplate, ContentPane, $) {
     //To create a widget, you need to derive from BaseWidget.
     return declare([BaseWidget], {
@@ -27,7 +29,6 @@ define(['dojo/_base/declare',
       startup: function () {
         console.log('startup');
         this.inherited(arguments);
-        // this.mapIdNode.innerHTML = 'map id:' + this.map.id;
         this._initContentPane();
       },
 
@@ -48,8 +49,8 @@ define(['dojo/_base/declare',
         if (!this.enabled) {
           return;
         }
-        var graphic = this._getMarkerGraphic(evt.mapPoint);
-        this._get3wordAddressWithLocator(evt.mapPoint, graphic);
+        // var graphic = this._getMarkerGraphic(evt.mapPoint);
+        this._get3wordAddressWithLocator(evt.mapPoint);
       },
 
       _getMarkerGraphic: function (mapPoint) {
@@ -58,21 +59,27 @@ define(['dojo/_base/declare',
           this.folderUrl + "images/redmarker.png",
           30, 30
         );
-        // symbol.setOffset(0, 12);
+        // map.toScreen(mapPoint)
+        symbol.setOffset(0, 11);
         return new Graphic(mapPoint, symbol, mapPoint, infoTemplate);
       },
 
-      copyToClipboard: function(containerid) {
-        var range = document.createRange();
-        range.selectNode(containerid);
-        window.getSelection().removeAllRanges(); 
-        window.getSelection().addRange(range); 
-        document.execCommand("copy");
-        window.getSelection().removeAllRanges();
+      _appendBtnCopy: function(){
+        var btnCopy = document.createElement("button");
+        btnCopy.setAttribute("class", "esriCTCopyAction");
+        var w3wText = document.getElementById("w3w");
+        w3wText.appendChild(btnCopy);
+      },
+
+      _onBtnCopyClicked: function(copyText) {
+        navigator.clipboard.writeText(copyText);
+        // // Alert the copied text
+        alert("Copied the text: " + copyText);
       },
 
-      _get3wordAddressWithLocator: function (mapPoint, graphic) {
+      _get3wordAddressWithLocator: function (mapPoint) {
         var map = this.map;
+        var graphic = this._getMarkerGraphic(mapPoint);
         var geocoderUrl = this.config.geocoderUrl;
         var locator = new Locator(geocoderUrl);
         var zoomIt = Number(this.config.zoomLvlconfig);
@@ -91,7 +98,7 @@ define(['dojo/_base/declare',
             map.graphics.clear();
             map.infoWindow.hide();
             // add graphics and infoWindow
-            var content = "<b>what3words Address:</b> ///" + response.address.what3words + "</br></br>" + "<b>Coordinates:</b> " + response.address.Y + ", " + response.address.X + "</br></br>" + "<b>wkid</b>: " + response.location.spatialReference.wkid;
+            var content = "<b>what3words Address: </b>" + "<span id='w3w'>///" + response.address.what3words + "</span>" + "</br></br>" + "<b>Coordinates:</b> " + response.address.Y + ", " + response.address.X + "</br></br>" + "<b>wkid</b>: " + response.location.spatialReference.wkid;
             $('.w3winputcontainer').html(content);
 
             map.graphics.add(graphic);
@@ -100,6 +107,17 @@ define(['dojo/_base/declare',
             map.infoWindow.resize(250, 110);
             map.infoWindow.show(mapPoint, map.getInfoWindowAnchor(mapPoint));
             map.centerAndZoom(mapPoint, zoomIt);
+            var btnCopy = document.createElement("button");
+            btnCopy.setAttribute("class", "esriCTCopyAction");
+            btnCopy.setAttribute("title", "Copy what3words address");
+            var w3wText = document.getElementById("w3w");
+            w3wText.appendChild(btnCopy);
+            btnCopy.onclick = function() {
+              navigator.clipboard.writeText(w3wText.innerText);
+              // // Alert the copied text
+              alert("Copied the what3words address: " + w3wText.innerText);
+            }
+
           });
         }, function (error) {
           console.log("Error: ", error);

WebApp-what3words/widgets/what3words/css/style.css

@@ -1,3 +1,19 @@
 .jimu-on-screen-widget-panel {
   height: 160px !important;
+}
+
+.esriCTCopyAction {
+  cursor: pointer;
+  width: 14px;
+  height: 16px;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  border: none;
+  background-image: url('../images/copy_black.png');
+  margin-left: 10px;
+  display: inline-flex;
+}
+
+.esriCTCopyAction:hover {
+  background-image: url('../images/copy_black_hover.png');
 }

WebApp-what3words/widgets/what3words/what3words-widget.html

@@ -56,8 +56,8 @@ <h2 id="installation-and-configuration">Installation and Configuration</h2>
                 Example of a what3words Locator:
                 <code>https://utility.arcgis.com/usrsvcs/servers/&lt;MyGeocodingArcGISUniqueID&gt;/rest/services/what3words_EN_English/GeocodeServer</code>.
             </p>
-            <p>You can also add a zoom level to choose how close or far you want to dispaly your what3words address.</p>
-            <img src="./docs/ScreenShot-03-config-with-w3w-locator-url.png" alt="config-with-locator-url" width="750px">
+            <p>You can also add a zoom level to choose how close or far you want to display your what3words address.</p>
+            <img src="./docs/ScreenShot-03-config-with-locator-url.png" alt="config-with-locator-url" width="750px">
         </li>
         <li>
             <p>To find the what3words Locator URL, go to your ArcGIS Online or Portal for ArcGIS, click on the
@@ -68,7 +68,7 @@ <h2 id="installation-and-configuration">Installation and Configuration</h2>
         <li>
             <p>Then click on your Locator, scroll down to the bottom of the page, on the right-hand side, you will find
                 the URL of your Locator. You need to <em>copy and paste this URL to the configuration page of the
-                    what3words widget</em>, as shown on this screenshot.:</p>
+                    what3words widget</em>, as shown on this screenshot:</p>
             <img src="./docs/ScreenShot-07-arcgis-online-locator-url.png" alt="arcgis-online-locator-url" width="750px">
         </li>
         <li>
@@ -83,6 +83,11 @@ <h2 id="installation-and-configuration">Installation and Configuration</h2>
                 the point selected on the map returned this what3words address: <code>///filled.count.soap</code>.</p>
             <img src="./docs/ScreenShot-05-reverse-geocode.png" alt="reverse-geocode" width="750px">
         </li>
+        <li>
+            <p>You can also copy the what3words address by clicking on the <code>Copy</code> button next to the what3words address
+                displayed on the window popup.</p>
+            <img src="./docs/ScreenShot-08-copy-what3words.png" alt="reverse-geocode" width="750px">
+        </li>
     </ul>
     <h2 id="issues">Issues</h2>
     <p>Found a bug or want to request a new feature? Please let us know by <a

what3words/Widget.js

@@ -1,7 +1,9 @@
 define(['dojo/_base/declare',
     'jimu/BaseWidget',
-    'dojo/_base/lang',
     'dojo/on',
+    'dojo/_base/lang',
+    'dojo/_base/html',
+    'dojo/_base/array',
     'esri/symbols/PictureMarkerSymbol',
     'esri/layers/GraphicsLayer',
     'esri/graphic',
@@ -11,7 +13,7 @@ define(['dojo/_base/declare',
     'dijit/layout/ContentPane',
     'jimu/loaderplugins/jquery-loader!https://code.jquery.com/jquery-git1.min.js'
   ],
-  function (declare, BaseWidget, lang, on, PictureMarkerSymbol, GraphicsLayer,
+  function (declare, BaseWidget, on, lang, html, array, PictureMarkerSymbol, GraphicsLayer,
     Graphic, Locator, esriRequest, InfoTemplate, ContentPane, $) {
     //To create a widget, you need to derive from BaseWidget.
     return declare([BaseWidget], {
@@ -27,7 +29,6 @@ define(['dojo/_base/declare',
       startup: function () {
         console.log('startup');
         this.inherited(arguments);
-        // this.mapIdNode.innerHTML = 'map id:' + this.map.id;
         this._initContentPane();
       },
 
@@ -48,8 +49,8 @@ define(['dojo/_base/declare',
         if (!this.enabled) {
           return;
         }
-        var graphic = this._getMarkerGraphic(evt.mapPoint);
-        this._get3wordAddressWithLocator(evt.mapPoint, graphic);
+        // var graphic = this._getMarkerGraphic(evt.mapPoint);
+        this._get3wordAddressWithLocator(evt.mapPoint);
       },
 
       _getMarkerGraphic: function (mapPoint) {
@@ -58,12 +59,27 @@ define(['dojo/_base/declare',
           this.folderUrl + "images/redmarker.png",
           30, 30
         );
-        // symbol.setOffset(0, 12);
+        // map.toScreen(mapPoint)
+        symbol.setOffset(0, 11);
         return new Graphic(mapPoint, symbol, mapPoint, infoTemplate);
       },
 
-      _get3wordAddressWithLocator: function (mapPoint, graphic) {
+      _appendBtnCopy: function(){
+        var btnCopy = document.createElement("button");
+        btnCopy.setAttribute("class", "esriCTCopyAction");
+        var w3wText = document.getElementById("w3w");
+        w3wText.appendChild(btnCopy);
+      },
+
+      _onBtnCopyClicked: function(copyText) {
+        navigator.clipboard.writeText(copyText);
+        // // Alert the copied text
+        alert("Copied the text: " + copyText);
+      },
+
+      _get3wordAddressWithLocator: function (mapPoint) {
         var map = this.map;
+        var graphic = this._getMarkerGraphic(mapPoint);
         var geocoderUrl = this.config.geocoderUrl;
         var locator = new Locator(geocoderUrl);
         var zoomIt = Number(this.config.zoomLvlconfig);
@@ -78,14 +94,30 @@ define(['dojo/_base/declare',
         requestHandle.then(function () {
           locator.locationToAddress(mapPoint, 100, function (response) {
             // console.log(response)
-            var content = "<b>what3words Address:</b> ///" + response.address.what3words + "</br></br>" + "<b>Coordinates:</b> " + response.address.Y + ", " + response.address.X + "</br></br>" + "<b>wkid</b>: " + response.location.spatialReference.wkid;
+            // clear graphics and infoWindow
+            map.graphics.clear();
+            map.infoWindow.hide();
+            // add graphics and infoWindow
+            var content = "<b>what3words Address: </b>" + "<span id='w3w'>///" + response.address.what3words + "</span>" + "</br></br>" + "<b>Coordinates:</b> " + response.address.Y + ", " + response.address.X + "</br></br>" + "<b>wkid</b>: " + response.location.spatialReference.wkid;
             $('.w3winputcontainer').html(content);
+
             map.graphics.add(graphic);
             map.infoWindow.setTitle("Location");
             map.infoWindow.setContent(content);
             map.infoWindow.resize(250, 110);
             map.infoWindow.show(mapPoint, map.getInfoWindowAnchor(mapPoint));
             map.centerAndZoom(mapPoint, zoomIt);
+            var btnCopy = document.createElement("button");
+            btnCopy.setAttribute("class", "esriCTCopyAction");
+            btnCopy.setAttribute("title", "Copy what3words address");
+            var w3wText = document.getElementById("w3w");
+            w3wText.appendChild(btnCopy);
+            btnCopy.onclick = function() {
+              navigator.clipboard.writeText(w3wText.innerText);
+              // // Alert the copied text
+              alert("Copied the what3words address: " + w3wText.innerText);
+            }
+
           });
         }, function (error) {
           console.log("Error: ", error);

what3words/css/style.css

@@ -1,3 +1,19 @@
 .jimu-on-screen-widget-panel {
   height: 160px !important;
+}
+
+.esriCTCopyAction {
+  cursor: pointer;
+  width: 14px;
+  height: 16px;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  border: none;
+  background-image: url('../images/copy_black.png');
+  margin-left: 10px;
+  display: inline-flex;
+}
+
+.esriCTCopyAction:hover {
+  background-image: url('../images/copy_black_hover.png');
 }

what3words/what3words-widget.html

@@ -56,8 +56,8 @@ <h2 id="installation-and-configuration">Installation and Configuration</h2>
                 Example of a what3words Locator:
                 <code>https://utility.arcgis.com/usrsvcs/servers/&lt;MyGeocodingArcGISUniqueID&gt;/rest/services/what3words_EN_English/GeocodeServer</code>.
             </p>
-            <p>You can also add a zoom level to choose how close or far you want to dispaly your what3words address.</p>
-            <img src="./docs/ScreenShot-03-config-with-w3w-locator-url.png" alt="config-with-locator-url" width="750px">
+            <p>You can also add a zoom level to choose how close or far you want to display your what3words address.</p>
+            <img src="./docs/ScreenShot-03-config-with-locator-url.png" alt="config-with-locator-url" width="750px">
         </li>
         <li>
             <p>To find the what3words Locator URL, go to your ArcGIS Online or Portal for ArcGIS, click on the
@@ -68,7 +68,7 @@ <h2 id="installation-and-configuration">Installation and Configuration</h2>
         <li>
             <p>Then click on your Locator, scroll down to the bottom of the page, on the right-hand side, you will find
                 the URL of your Locator. You need to <em>copy and paste this URL to the configuration page of the
-                    what3words widget</em>, as shown on this screenshot.:</p>
+                    what3words widget</em>, as shown on this screenshot:</p>
             <img src="./docs/ScreenShot-07-arcgis-online-locator-url.png" alt="arcgis-online-locator-url" width="750px">
         </li>
         <li>
@@ -83,6 +83,11 @@ <h2 id="installation-and-configuration">Installation and Configuration</h2>
                 the point selected on the map returned this what3words address: <code>///filled.count.soap</code>.</p>
             <img src="./docs/ScreenShot-05-reverse-geocode.png" alt="reverse-geocode" width="750px">
         </li>
+        <li>
+            <p>You can also copy the what3words address by clicking on the <code>Copy</code> button next to the what3words address
+                displayed on the window popup.</p>
+            <img src="./docs/ScreenShot-08-copy-what3words.png" alt="reverse-geocode" width="750px">
+        </li>
     </ul>
     <h2 id="issues">Issues</h2>
     <p>Found a bug or want to request a new feature? Please let us know by <a