diff --git a/geocode-a-location-from-address/demo.html b/geocode-a-location-from-address/demo.html
index de0c1d1..7aab94e 100644
--- a/geocode-a-location-from-address/demo.html
+++ b/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>
diff --git a/geocode-a-location-from-address/demo.js b/geocode-a-location-from-address/demo.js
index 096b907..0d54715 100644
--- a/geocode-a-location-from-address/demo.js
+++ b/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,56 +43,38 @@ 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.
@@ -104,22 +82,21 @@ function openBubble(position, text){
* 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();