BETA Unlocked: Address Input!

Be in the know
,
65

I’ve received an update that it could take us a bit to publish an example for the Address Input (team in charge of the examples has higher priorities), so in the meantime I want to share with you a demo I created.

Frankly, the code (and explanations) is not on par with the standard of our examples, but I’ll do my best to help you with it.

First things first; head over to the demo , enter an address (in the UK) and find Cat Cafes nearby.

Next, let’s go over how I set up the Editor Elements and Data before I present the Corvid code.

Editor Elements used:

  1. Address Input

  2. Google Map

  3. Repeater with information on the Cat Cafes. Each Repeater Item holds 3 Text Elements:

  • Name of the Cat Cafe

  • Its address

  • Its distance from the entered address

Data Collection and Dataset setup:

  • The Collection has two fields: ‘Name’ (Text) and ‘Address’ (Address)

  • I manually entered the details of 10 Cat Cafes in the UK

  • Corresponding Dataset is Read-only and displays 20 items at a go
    Note that I made it easy on myself: because all items fit in a single Dataset Page I didn’t have to write code to handle multiple pages.

Address Input setup:

Repeater setup:

  • Connected to Cat Cafes Dataset

  • Connected Name & Address Text Elements to the corresponding fields

Google Map setup (AKA Welcome to the Realm of Workarounds):

  • Configured to Multiple Locations.

  • I would have liked to connect the element to the addresses in the Cat Cafes collection, but unfortunately this is not supported yet (hint hint).

  • As a fallback, I would have liked to retrieve these addresses in code and set them to the location property, but alas, setting multiple locations through code is not supported yet either (yes, hint hint, I get it).

  • So instead I manually entered 11 addresses: the first one is a placeholder that will be used to set the address the visitor will enter (I set its default location to Buckingham Palace), the other addresses are duplicates of those in the data collection.

Finally, the code:

HTH
I’m here for questions, which I bet you have :slight_smile:

  1. //===== Init =====

  3. var catCafesData = null ;

  5. export async function catCafes_ready() {

  6. // Fetch Cat Cafes data once (it is static) and keep it in a global variable. 

  7. catCafesData =  **await**  getCatCafesData($w('#catCafes')); 

  9. // Set the default address to be the first Google Maps location, which is used as the placeholder for the visitor entered address.

  10. let DEFAULT_VISITOR_ADDRESS = $w(‘#googleMaps1’).location;

  11. // Display distances of all Cat Cafes from this address and sort them by it. 

  12. displayDistances(DEFAULT_VISITOR_ADDRESS); 

  13. sortByDistance();

  14. }

  16. function getCatCafesData(catCafesDataset) {

  17. return catCafesDataset.getItems(0, catCafesDataset.getPageSize())

  18. .then( (result) => {

  19. return result.items;

  20. } )

  21. }

  23. //===== Event Handlers =====

  25. export async function addressInput1_change(event) {

  26. let address = $w(‘#addressInput1’).value;

  27. if (!address || !address.location) return ;

  29. viewAddressOnMap(address); 

  31. displayDistances(address.location); 

  32. sortByDistance();

  33. }

  35. //===== View address on Google Maps =====

  37. function viewAddressOnMap(address) {

  38. if  (!address || !address.location)  **return** ; 

  39. $w("#googleMaps1").location = { 

  40.     "latitude": address.location.latitude, 

  41.     "longitude": address.location.longitude, 

  42.     "description": address.formatted 

  43. };

  44. }

  46. //===== Display and sort Cat Cafes (Repeater items) by distance from an address =====

  48. function displayDistances(addressLocation) {

  49. let catCafeNameToDistance = catCafesData.reduce((map, item) => (map[item.title] = getDistanceFromLatLonInKm(addressLocation.latitude, addressLocation.longitude, item.address.location.lat, item.address.location.lng), map), {});

  50. // Add the distance of the address from each Cat Cafe on the Repeater data. We will need if for sorting. 

  51. $w("#catCafesInfo").data = $w("#catCafesInfo").data.map((item) => { item['distance'] = catCafeNameToDistance[item.title];  **return**  item}); 

  53. // Update the distance text indication for each Repeater item. 

  54. $w("#catCafesInfo").forEachItem( ($item, itemData, index) => { 

  55.     $item("#catCafeDistance").text = itemData.distance.toFixed(2) + ' km'; 

  56. } );

  57. }

  59. function sortByDistance() {

  60. $w("#catCafesInfo").data = $w("#catCafesInfo").data.sort( 

  61.     function  (item1, item2) { 

  62.         let  d1 = item1.distance; 

  63.         let  d2 = item2.distance; 

  64.         if  (d1 < d2) { 

  65.             **return**  -1; 

  66.         } 

  67.         if  (d1 > d2) { 

  68.             **return**  1; 

  69.         } 

  70.         **return**  0; 

  71.     } 

  72. );

  73. }

  75. //===== Lat/lon distance calculations =====

  76. //

  77. // I simply copied it from:

  78. // algorithm - Calculate distance between two latitude-longitude points? (Haversine formula) - Stack Overflow

  80. function deg2rad(deg) {

  81. return deg * (Math.PI/180)

  82. }

  84. function getDistanceFromLatLonInKm(lat1,lon1,lat2,lon2) {

  85. var  R = 6371; // Radius of the earth in km 

  86. var  dLat = deg2rad(lat2-lat1); 

  87. var  dLon = deg2rad(lon2-lon1); 

  88. var  a =

  89. Math.sin(dLat/2) * Math.sin(dLat/2) +

  90. Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *

  91. Math.sin(dLon/2) * Math.sin(dLon/2);

  92. var  c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 

  93. var  d = R * c; // Distance in km 

  94. **return**  d;

  95. }