Added text input to Geocoding example

geocode-a-location-from-address/demo.html

@@ -8,7 +8,7 @@
     <link rel="stylesheet" type="text/css" href="demo.css" />
     <link rel="stylesheet" type="text/css" href="styles.css" />
     <link rel="stylesheet" type="text/css" href="../template.css" />
-    <script type="text/javascript" src='../test-credentials.js'></script>    
+    <script type="text/javascript" src='../test-credentials.js'></script>
     <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
     <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
     <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
@@ -19,16 +19,22 @@
         <h1>Search for a Location based on an Address</h1>
         <p>Request a location using a free-form text input and display it on the map.</p>
     </div>
-    <p>This example makes a geocoding request and retrieves the latitude, longitude and 
-      complete address details of <b>200 S Mathilda Ave, Sunnyvale, CA</b> based on a free-form 
-      text input. A clickable marker is placed on the location found.</p>
+    <p>This example makes a geocoding request to the
+      <a href="https://developer.here.com/documentation/geocoding-search-api/dev_guide/topics/endpoint-geocode-brief.html" target="_blank">Geocoding and Search API v7</a>
+      retrieving latitude, longitude and
+      complete details of the address in the text input. <br/>
+      Try it yourself and type an address.</p>
     <div id="map"></div>
+    <div id="inputAddress">
+      <input type="text" id="geocodeAddress" style="width: 250px;" value="200 S Mathilda Sunnyvale CA"/>
+      <input type="button" value="Geocode" onclick="geocode()" />
+    </div>
     <div id="panel"></div>
     <h3>Code</h3>
     <p>Access to the geocoding service is obtained from the <code>H.service.Platform</code>
-       by calling <code>getSearchService()</code>. The <code>geocode()</code> method is used 
-       to find a location by passing in the relevant <code>q</code> parameter as defined in 
-       <a href="https://developer.here.com/documentation/geocoding-search-api/dev_guide/topics/endpoint-geocode-brief.html" target="_blank">Geocoding and Search API v7</a>. 
+       by calling <code>getSearchService()</code>. The <code>geocode()</code> method is used
+       to find a location by passing in the relevant <code>q</code> parameter as defined in
+       <a href="https://developer.here.com/documentation/geocoding-search-api/dev_guide/topics/endpoint-geocode-brief.html" target="_blank">Geocoding and Search API v7</a>.
        The styling and display of the response is under the control of the developer.</p>
     <script type="text/javascript" src='demo.js'></script>
   </body>

geocode-a-location-from-address/demo.js

@@ -1,41 +1,37 @@
 /**
- * Calculates and displays the address details of 200 S Mathilda Ave, Sunnyvale, CA
- * based on a free-form text
- *
- *
- * A full list of available request parameters can be found in the Geocoder API documentation.
- * see: http://developer.here.com/rest-apis/documentation/geocoder/topics/resource-geocode.html
- *
- * @param   {H.service.Platform} platform    A stub class to access HERE services
+ * Geocode the address in the input text field and center the map on success.
  */
-function geocode(platform) {
-  var geocoder = platform.getSearchService(),
-      geocodingParameters = {
-        q: '200 S Mathilda Sunnyvale CA'
-      };
+ function geocode() {
+  const address = document.getElementById('geocodeAddress').value;
+  /*
+  * A full list of available request parameters can be found in the Geocoder API documentation.
+  * See: http://developer.here.com/rest-apis/documentation/geocoder/topics/resource-geocode.html
+  */
+  const geocodingParameters = {
+      q: address
+  };
+
+  if (!address) {
+    return;
+  }
 
-  geocoder.geocode(
+  geocodingService.geocode(
     geocodingParameters,
     onSuccess,
     onError
   );
 }
+
 /**
  * This function will be called once the Geocoder REST API provides a response
- * @param  {Object} result          A JSONP object representing the  location(s) found.
+ * @param {Object} result A JSON object representing the location(s) found.
  *
- * see: http://developer.here.com/rest-apis/documentation/geocoder/topics/resource-type-response-geocode.html
+ * See: http://developer.here.com/rest-apis/documentation/geocoder/topics/resource-type-response-geocode.html
  */
-function onSuccess(result) {
-  var locations = result.items;
- /*
-  * The styling of the geocoding response on the map is entirely under the developer's control.
-  * A representitive styling can be found the full JS + HTML code of this example
-  * in the functions below:
-  */
+ function onSuccess(result) {
+  const locations = result.items;
   addLocationsToMap(locations);
   addLocationsToPanel(locations);
-  // ... etc.
 }
 
 /**
@@ -47,79 +43,60 @@ function onError(error) {
 }
 
 /**
- * Boilerplate map initialization code starts below:
- */
+ * Boilerplate map initialization code starts below
+*/
 
-//Step 1: initialize communication with the platform
+// Step 1: initialize communication with the platform
 // In your own code, replace variable window.apikey with your own apikey
-var platform = new H.service.Platform({
+const platform = new H.service.Platform({
   apikey: window.apikey
 });
-var defaultLayers = platform.createDefaultLayers();
+const defaultLayers = platform.createDefaultLayers();
 
-//Step 2: initialize a map - this map is centered over California
-var map = new H.Map(document.getElementById('map'),
+// Step 2: initialize a map - this map is initially centered over California
+const map = new H.Map(document.getElementById('map'),
   defaultLayers.vector.normal.map,{
-  center: {lat:37.376, lng:-122.034},
+  center: {lat: 37.376, lng: -122.034},
   zoom: 15,
   pixelRatio: window.devicePixelRatio || 1
 });
 // add a resize listener to make sure that the map occupies the whole container
 window.addEventListener('resize', () => map.getViewPort().resize());
 
-var locationsContainer = document.getElementById('panel');
+const locationsContainer = document.getElementById('panel');
 
-//Step 3: make the map interactive
-// MapEvents enables the event system
-// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
-var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
+// Step 3: make the map interactive
+//  MapEvents enables the event system
+//  Behavior implements default interactions for pan/zoom (also on mobile touch environments)
+const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
 
 // Create the default UI components
-var ui = H.ui.UI.createDefault(map, defaultLayers);
+const ui = H.ui.UI.createDefault(map, defaultLayers);
 
-// Hold a reference to any infobubble opened
-var bubble;
-
-/**
- * Opens/Closes a infobubble
- * @param  {H.geo.Point} position     The location on the map.
- * @param  {String} text              The contents of the infobubble.
- */
-function openBubble(position, text){
- if(!bubble){
-    bubble =  new H.ui.InfoBubble(
-      position,
-      {content: text});
-    ui.addBubble(bubble);
-  } else {
-    bubble.setPosition(position);
-    bubble.setContent(text);
-    bubble.open();
-  }
-}
+// Create an instance of the Geocoding and Search service
+const geocodingService = platform.getSearchService();
 
 /**
  * Creates a series of list items for each location found, and adds it to the panel.
  * @param {Object[]} locations An array of locations as received from the
  *                             H.service.GeocodingService
  */
 function addLocationsToPanel(locations){
-
-  var nodeOL = document.createElement('ul'),
-      i;
+  const nodeOL = document.createElement('ul');
 
   nodeOL.style.fontSize = 'small';
   nodeOL.style.marginLeft ='5%';
   nodeOL.style.marginRight ='5%';
 
 
-   for (i = 0;  i < locations.length; i += 1) {
-     let location = locations[i];
-     var li = document.createElement('li'),
-          divLabel = document.createElement('div'),
-          address = location.address,
-          content =  '<strong style="font-size: large;">' + address.label  + '</strong></br>';
-          position = location.position;
+   for (let i = 0; i < locations.length; i++) {
+     const location = locations[i],
+      li = document.createElement('li'),
+      divLabel = document.createElement('div'),
+      address = location.address,
+      position = location.position;
+
+     let content =  '<strong style="font-size: large;">' + address.label  + '</strong></br>';
 
       content += '<strong>houseNumber:</strong> ' + address.houseNumber + '<br/>';
       content += '<strong>street:</strong> '  + address.street + '<br/>';
@@ -138,38 +115,44 @@ function addLocationsToPanel(locations){
       nodeOL.appendChild(li);
   }
 
-  locationsContainer.appendChild(nodeOL);
+  locationsContainer.replaceChildren(nodeOL);
 }
 
 
 /**
- * Creates a series of H.map.Markers for each location found, and adds it to the map.
+ * Creates an instance of H.map.Marker for each location found and adds them to the map.
  * @param {Object[]} locations An array of locations as received from the
  *                             H.service.GeocodingService
  */
-function addLocationsToMap(locations){
-  var group = new  H.map.Group(),
-      position,
-      i;
+ function addLocationsToMap(locations) {
+  const group = new H.map.Group();
+
+  if (!locations || locations.length === 0) {
+    alert('Address not found');
+    return;
+  }
+
+  // Remove all the pre-existent objects from the map
+  map.removeObjects(map.getObjects());
 
   // Add a marker for each location found
-  for (i = 0;  i < locations.length; i += 1) {
-    let location = locations[i];
+  for (let i = 0; i < locations.length; i += 1) {
+    const location = locations[i];
     marker = new H.map.Marker(location.position);
     marker.label = location.address.label;
     group.addObject(marker);
   }
 
-  group.addEventListener('tap', function (evt) {
-    map.setCenter(evt.target.getGeometry());
-    openBubble(
-       evt.target.getGeometry(), evt.target.label);
-  }, false);
-
   // Add the locations group to the map
   map.addObject(group);
-  map.setCenter(group.getBoundingBox().getCenter());
+
+  // Position the map according to the number of locations
+  if (group.getObjects().length > 1) {
+    map.getViewModel().setLookAtData({bounds: group.getBoundingBox()});
+  } else {
+    map.getViewModel().setLookAtData({bounds: group.getBoundingBox(), zoom: 13});
+  }
 }
 
-// Now use the map as required...
-geocode(platform);
+// Send the initial geocoding request
+geocode();