Here Maps

SanjayPrabhakaran · Jan 30, 2024 · 924b355 · 924b355
1 parent f2d654b
commit 924b355
Show file tree

Hide file tree

Showing 5 changed files with 256 additions and 0 deletions.
diff --git a/SJPv6/www/here-maps.css b/SJPv6/www/here-maps.css
@@ -0,0 +1,18 @@
+#geocode #map {
+    display: block;
+    width: 95%;
+    margin-bottom: 3px;
+    height: 450px;
+    background: grey;
+}
+
+#geocode #panel {
+    display: block;
+    width: 95%;
+    min-height: 450px;
+    max-height: 450px;
+    border: 1px solid #e3e3e3;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
+    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
+}
diff --git a/SJPv6/www/here-maps.details b/SJPv6/www/here-maps.details
@@ -0,0 +1,12 @@
+---
+ name: Search for a Location based on an Address
+ description: Request a location using a free-form text input and display it on the map
+ resources:
+   - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js
+ normalize_css: no
+ dtd: html 5
+ wrap: d
+ panel_html: 0
+ panel_js: 0
+ panel_css: 0
+...
diff --git a/SJPv6/www/here-maps.html b/SJPv6/www/here-maps.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
+    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
+    <title>Search for a Location based on an Address</title>
+    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
+    <link rel="stylesheet" type="text/css" href="here-maps.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="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>
+    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
+  </head>
+  <input type="text" id="location" name="location" required minlength="3" maxlength="40" size="10" />
+  <button onclick="javascript:searchLocation()">Search Location</button>
+  <body id="geocode">
+    <div class="page-header">
+        <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>
+    <div id="map"></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://www.here.com/docs/bundle/geocoding-and-search-api-v7-api-reference/page/index.html#/paths/~1geocode/get" 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='here-maps.js'></script>
+  </body>
+</html>
diff --git a/SJPv6/www/here-maps.js b/SJPv6/www/here-maps.js
@@ -0,0 +1,189 @@
+/**
+ * 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: https://www.here.com/docs/bundle/geocoding-and-search-api-v7-api-reference/page/index.html#/paths/~1geocode/get
+ *
+ * @param   {H.service.Platform} platform    A stub class to access HERE services
+ */
+
+function geocode(platform) {
+  var geocoder = platform.getSearchService(),
+      geocodingParameters = {
+        q: 'Chennai'//'200 S Mathilda Sunnyvale CA'
+      };
+
+  geocoder.geocode(
+    geocodingParameters,
+    onSuccess,
+    onError
+  );
+}
+/**
+ * This function will be called once the Geocoder REST API provides a response
+ * @param  {Object} result A JSON object representing the location(s) found.
+ * See: https://www.here.com/docs/bundle/geocoding-and-search-api-v7-api-reference/page/index.html#/paths/~1geocode/get
+ */
+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:
+  */
+  addLocationsToMap(locations);
+  addLocationsToPanel(locations);
+  // ... etc.
+}
+
+/**
+ * This function will be called if a communication error occurs during the JSON-P request
+ * @param  {Object} error  The error message received.
+ */
+function onError(error) {
+  alert('Can\'t reach the remote server');
+}
+
+/**
+ * Boilerplate map initialization code starts below:
+ */
+
+//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({
+  apikey: 'faufZS2XOMIwlELktKbKASVY6kexKiMmH5VxPsyAwmg'//window.apikey
+});
+var defaultLayers = platform.createDefaultLayers();
+
+//Step 2: initialize a map - this map is centered over California
+var map = new H.Map(document.getElementById('map'),
+  defaultLayers.vector.normal.map,{
+  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');
+
+//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));
+
+// Create the default UI components
+var 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();
+  }
+}
+
+/**
+ * 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;
+
+  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;
+
+      content += '<strong>houseNumber:</strong> ' + address.houseNumber + '<br/>';
+      content += '<strong>street:</strong> '  + address.street + '<br/>';
+      content += '<strong>district:</strong> '  + address.district + '<br/>';
+      content += '<strong>city:</strong> ' + address.city + '<br/>';
+      content += '<strong>postalCode:</strong> ' + address.postalCode + '<br/>';
+      content += '<strong>county:</strong> ' + address.county + '<br/>';
+      content += '<strong>country:</strong> ' + address.countryName + '<br/>';
+      content += '<strong>TimeZone:</strong> ' + JSON.stringify(location.timeZone) + '<br/>';
+      content += '<strong>position:</strong> ' +
+        Math.abs(position.lat.toFixed(4)) + ((position.lat > 0) ? 'N' : 'S') +
+        ' ' + Math.abs(position.lng.toFixed(4)) + ((position.lng > 0) ? 'E' : 'W') + '<br/>';
+
+      divLabel.innerHTML = content;
+      li.appendChild(divLabel);
+
+      nodeOL.appendChild(li);
+  }
+
+  locationsContainer.appendChild(nodeOL);
+}
+
+
+/**
+ * Creates a series of H.map.Markers for each location found, and adds it 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;
+
+  // Add a marker for each location found
+  for (i = 0;  i < locations.length; i += 1) {
+    let 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());
+}
+
+// Now use the map as required...
+geocode(platform);
+function searchLocation(){
+    var geocoder = platform.getSearchService(),
+        geocodingParameters = {
+          q: document.getElementById("location").value,
+          show: "tz"//'Chennai'//'200 S Mathilda Sunnyvale CA'
+        };
+
+    geocoder.geocode(
+      geocodingParameters,
+      onSuccess,
+      onError
+    );
+  }
diff --git a/SJPv6/www/img/arrows.png b/SJPv6/www/img/arrows.png