Add w3w enrichment call and add w3w name and icon (#11)

* Add w3w enrichment call and add w3w name and icon * remove empty line and unused method --------- Co-authored-by: Georgi Dobrilov <[email protected]>
experianplc · Oct 11, 2023 · 881bdf6 · 881bdf6
1 parent ee37952
commit 881bdf6
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 5 deletions.
diff --git a/dist/css/experian-address-validation.css b/dist/css/experian-address-validation.css
@@ -191,4 +191,13 @@ input.showing-suggestions {
     font-style: italic;
     padding-top: 0px;
     font-size: 12px;
+}
+
+#what3words-key {
+    padding-top: 10px;
+    padding-right: 5px;
+}
+
+#what3words-value {
+    padding-top: 10px;
 }
diff --git a/dist/images/w3w_Symbol_RGB_WhiteRed.png b/dist/images/w3w_Symbol_RGB_WhiteRed.png
diff --git a/dist/js/experian-address-validation.js b/dist/js/experian-address-validation.js
diff --git a/dist/lib/address-search.d.ts b/dist/lib/address-search.d.ts
@@ -19,6 +19,7 @@ export default class AddressValidation {
     private inputs;
     private lastSearchTerm;
     private currentSearchTerm;
+    private shouldTriggerWhat3WordsEnrichment;
     private currentCountryCode;
     private currentDataSet;
     private hasSearchInputBeenReset;

diff --git a/index.html b/index.html
@@ -341,6 +341,7 @@ <h2>Validated address information</h2>
           <span id="confidence-key"></span><span id="confidence-value"></span>
           <span id="delivery-type-key"></span><span id="delivery-type-value"></span>
           <span id="delivery-address-key"></span><span id="delivery-address-value"></span>
+          <span id="what3words-key" class="hidden"><img src="./dist/images/w3w_Symbol_RGB_WhiteRed.png"/></span><span id="what3words-value" class="hidden"></span>
         </div>
         <div class="map hidden" id="map"></div>
         <a href="https://github.com/experianplc/Experian-Address-Validation" target="_blank" class="download-button">Download sample code</a>
@@ -466,13 +467,31 @@ <h2>Validated address information</h2>
 
       // Display a map with the lat/long details after a data enrichment lookup
       address.events.on("post-enrichment", function(data) {
-        if (data.result.geocodes && data.result.geocodes.latitude) {
+        if ((data.result.geocodes && data.result.geocodes.latitude) ||
+            (data.result.what3words && data.result.what3words.latitude)) {
           document.querySelector("#map").classList.remove("hidden");
+
+          let lat, long;
+          if (data.result.what3words) {
+            document.querySelector(".metadata #what3words-key").classList.remove("hidden");
+            document.querySelector(".metadata #what3words-value").classList.remove("hidden");
+            document.querySelector(".metadata #what3words-value").innerHTML = '///' + data.result.what3words.name;
+
+            lat = data.result.what3words.latitude;
+            long = data.result.what3words.longitude;
+          } else {
+            document.querySelector(".metadata #what3words-key").classList.add("hidden");
+            document.querySelector(".metadata #what3words-value").classList.add("hidden");
+
+            lat = data.result.geocodes.latitude;
+            long = data.result.geocodes.longitude;
+          }
 
-          var latlong = [data.result.geocodes.latitude, data.result.geocodes.longitude];
+          var latlong = [lat, long];
           var zoom = 16;
           var attribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
 
+
           // Intantiate a new map
           if (!addressValidationMap) {
             addressValidationMap = L.map('map').setView(latlong, zoom);

diff --git a/src/css/experian-address-validation.css b/src/css/experian-address-validation.css
@@ -191,4 +191,13 @@ input.showing-suggestions {
     font-style: italic;
     padding-top: 0px;
     font-size: 12px;
+}
+
+#what3words-key {
+    padding-top: 10px;
+    padding-right: 5px;
+}
+
+#what3words-value {
+    padding-top: 10px;
 }
diff --git a/src/images/w3w_Symbol_RGB_WhiteRed.png b/src/images/w3w_Symbol_RGB_WhiteRed.png
diff --git a/src/ts/address-search.ts b/src/ts/address-search.ts
@@ -27,6 +27,7 @@ export default class AddressValidation {
   private inputs: HTMLInputElement[];
   private lastSearchTerm: string;
   private currentSearchTerm: string;
+  private shouldTriggerWhat3WordsEnrichment: boolean;
   private currentCountryCode: string;
   private currentDataSet: string | string[];
   private hasSearchInputBeenReset: boolean;
@@ -64,9 +65,12 @@ export default class AddressValidation {
           global_address_key: globalAddressKey
         },
         attributes: {
-          geocodes: ['latitude', 'longitude', 'match_level']
+          geocodes: ['latitude', 'longitude', 'match_level'],
+          what3words: this.shouldTriggerWhat3WordsEnrichment ? 
+            ['latitude', 'longitude', 'name', 'description'] : null
         }
       };
+
       this.events.trigger('pre-enrichment');
       this.request.send(this.baseUrl + this.enrichmentEndpoint, 'POST', this.handleEnrichmentResult.bind(this), JSON.stringify(data));
     }
@@ -392,6 +396,7 @@ export default class AddressValidation {
       }
       else {
         this.isWhat3Words = false;
+        this.shouldTriggerWhat3WordsEnrichment = false;
       }
 
       // Fire an event before a search takes place
@@ -1065,6 +1070,9 @@ export default class AddressValidation {
     const headers = [{ key: 'Add-Addresses', value: true }];
     const callback = this.picklist.showLookup;
 
+    //Set the shouldTriggerWhat3WordsEnrichment so that we can trigger it after the user chooses an address.
+    this.shouldTriggerWhat3WordsEnrichment = true;
+
     // Initiate new Search request
     this.request.send(url, 'POST', callback, lookupV2Request, headers);
   }