WEBSDK-639 Update public examples to use HERE Maps API for JavaScript v3.2 (#176)

* Updated all the examples to use the latest major version HERE Maps API for JavaScript v3.2

---------

Co-authored-by: Daniele Bacarella <[email protected]>

Author: mandarwagh94

README.md

@@ -11,13 +11,14 @@ See the [LICENSE](LICENSE) file in the root of this project for license details.
 
 ## Maps API for JavaScript
 
-All of the following examples use **version 3.1** of the API
+All of the following examples use **version 3.2** of the API
 
 * [Adding an Overlay to the Map](https://heremaps.github.io/maps-api-for-javascript-examples/custom-tile-overlay/demo.html) - Display custom map tiles as an overlay
 * [Animated Markers](https://heremaps.github.io/maps-api-for-javascript-examples/markers-update-position-with-animation/demo.html) - Update marker position with animation
 * [Calculating a Location from a Mouse Click](https://heremaps.github.io/maps-api-for-javascript-examples/position-on-mouse-click/demo.html) - Obtain the latitude and longitude of a location within the map
 * [Changing from the Metric System](https://heremaps.github.io/maps-api-for-javascript-examples/map-scale-bar-changing-from-the-metric-system/demo.html) - Display a map including a scale bar in miles or yards
 * [Circle on the Map](https://heremaps.github.io/maps-api-for-javascript-examples/circle-on-the-map/demo.html) - Display a map highlighting a circular region
+* [Context Menu](https://heremaps.github.io/maps-api-for-javascript-examples/context-menu/demo.html) - Adding a context menu to map objects
 * [DOM Marker](https://heremaps.github.io/maps-api-for-javascript-examples/map-with-dom-marker/demo.html) - Display a marker that is capable of receiving DOM events
 * [DOM Marker rotation](https://heremaps.github.io/maps-api-for-javascript-examples/dom-marker-rotation/demo.html) - Rotate DOM Marker's content using CSS
 * [Display KML Data](https://heremaps.github.io/maps-api-for-javascript-examples/display-kml-on-map/demo.html) - Parse a KML file and display the data on a map
@@ -62,7 +63,6 @@ All of the following examples use **version 3.1** of the API
 * [Search for a Location based on an Address](https://heremaps.github.io/maps-api-for-javascript-examples/geocode-a-location-from-address/demo.html) - Request a location using a free-form text input and display it on the map.
 * [Search for a Location given a Structured Address](https://heremaps.github.io/maps-api-for-javascript-examples/geocode-a-location-from-structured-address/demo.html) - Request a location from a structured address and display it on the map.
 * [Search for the Address of a Known Location](https://heremaps.github.io/maps-api-for-javascript-examples/reverse-geocode-an-address-from-location/demo.html) - Request address details for a given location and display it on the map.
-* [Set a map style at the load time](https://heremaps.github.io/maps-api-for-javascript-examples/change-style-at-load/demo.html) - Set a style of the whole map during the map instantiation
 * [Set a map style exported from the HERE Style Editor](https://heremaps.github.io/maps-api-for-javascript-examples/change-harp-style-at-load/demo.html) - Set a style exported from the [HERE Style Editor](https://platform.here.com/style-editor) during the map instantiation
 * [Synchronising Two Maps](https://heremaps.github.io/maps-api-for-javascript-examples/synchronising-two-maps/demo.html) - Synchronise a static map with an interactive map
 * [Take a Snapshot of the Map](https://heremaps.github.io/maps-api-for-javascript-examples/capture-map-area/demo.html) - Capture an area on the map

capture-map-area/demo.html

@@ -5,15 +5,15 @@
     <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
     <meta name="description" content="Capture an area on the map">
     <title>Take a Snapshot of the Map</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="https://js.api.here.com/v3/3.2/mapsjs-ui.css" />
     <link rel="stylesheet" type="text/css" href="../template.css" />
     <link rel="stylesheet" type="text/css" href="demo.css" />
     <link rel="stylesheet" type="text/css" href="styles.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>
+    <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-core.js"></script>
+    <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-service.js"></script>
+    <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-ui.js"></script>
+    <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-mapevents.js"></script>
   </head>
   <body id="capture-map-area">
     <div class="page-header">

capture-map-area/demo.js

@@ -9,16 +9,23 @@ function capture(resultContainer, map, ui) {
   // Capturing area of the map is asynchronous, callback function receives HTML5 canvas
   // element with desired map area rendered on it.
   // We also pass an H.ui.UI reference in order to see the ScaleBar in the output.
-  // If dimensions are omitted, whole veiw port will be captured
-  map.capture(function(canvas) {
-    if (canvas) {
-      resultContainer.innerHTML = '';
-      resultContainer.appendChild(canvas);
-    } else {
-      // For example when map is in Panorama mode
-      resultContainer.innerHTML = 'Capturing is not supported';
-    }
-  }, [ui], 50, 50, 500, 200);
+  // If dimensions are omitted, whole view port will be captured
+  map.capture(
+    function (canvas) {
+      if (canvas) {
+        resultContainer.innerHTML = "";
+        resultContainer.appendChild(canvas);
+      } else {
+        // For example when map is in Panorama mode
+        resultContainer.innerHTML = "Capturing is not supported";
+      }
+    },
+    [ui],
+    50,
+    50,
+    500,
+    200
+  );
 }
 
 /**
@@ -31,46 +38,45 @@ var platform = new H.service.Platform({
 });
 var defaultLayers = platform.createDefaultLayers();
 
-var mapContainer = document.getElementById('map');
+var mapContainer = document.getElementById("map");
 
 // Step 2: initialize a map
 var map = new H.Map(mapContainer, defaultLayers.vector.normal.map, {
   // initial center and zoom level of the map
   zoom: 16,
   // Champs-Elysees
-  center: {lat: 48.869145, lng: 2.314298},
-  pixelRatio: window.devicePixelRatio || 1
+  center: { lat: 48.869145, lng: 2.314298 },
+  pixelRatio: window.devicePixelRatio || 1,
 });
 // add a resize listener to make sure that the map occupies the whole container
-window.addEventListener('resize', () => map.getViewPort().resize());
+window.addEventListener("resize", () => map.getViewPort().resize());
 
 // 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 4: Create the default UI
-var ui = H.ui.UI.createDefault(map, defaultLayers, 'en-US');
-
+var ui = H.ui.UI.createDefault(map, defaultLayers, "en-US");
 
 // Step 6: Create "Capture" button and place for showing the captured area
-var resultContainer = document.getElementById('panel');
+var resultContainer = document.getElementById("panel");
 
 // Create container for the "Capture" button
-var containerNode = document.createElement('div');
-containerNode.className = 'btn-group';
+var containerNode = document.createElement("div");
+containerNode.className = "btn-group";
 
 // Create the "Capture" button
-var captureBtn = document.createElement('input');
-captureBtn.value = 'Capture';
-captureBtn.type = 'button';
-captureBtn.className = 'btn btn-sm btn-default';
+var captureBtn = document.createElement("input");
+captureBtn.value = "Capture";
+captureBtn.type = "button";
+captureBtn.className = "btn btn-sm btn-default";
 
 // Add both button and container to the DOM
 containerNode.appendChild(captureBtn);
 mapContainer.appendChild(containerNode);
 
 // Step 7: Handle capture button click event
-captureBtn.onclick = function() {
+captureBtn.onclick = function () {
   capture(resultContainer, map, ui);
-};
+};

change-harp-style-at-load/demo.html

@@ -4,16 +4,16 @@
     <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>Set a map style exported from the HERE Style Editor</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="https://js.api.here.com/v3/3.2/mapsjs-ui.css" />
     <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="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-harp.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>
+    <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-core.js"></script>
+    <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-harp.js"></script>
+    <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-service.js"></script>
+    <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-ui.js"></script>
+    <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-mapevents.js"></script>
   </head>
   <body id="markers-on-the-map">
     <div class="page-header">

change-harp-style-at-load/demo.js

@@ -9,31 +9,29 @@ var platform = new H.service.Platform({
   apikey: window.apikey
 });
 
-// Step 2: specify engine type. In this example, we use HARP rendering engine, which is capable
-// of rendering vector data using the style configuration exported from the HERE Style Editor.
-// HARP engine is not the default engine, and it's not included in the mapsjs-core.js module.
-// To use this engine, you need to include mapsjs-harp.js file to your HTML page
-var engineType = H.Map.EngineType['HARP'];
-
-// Step 3: create the style object from the style configuration
+// Step 2: create the style object from the style configuration
 // exported from the HERE Style Editor. The argument is a style path
-var style = new H.map.render.harp.Style('https://heremaps.github.io/maps-api-for-javascript-examples/change-harp-style-at-load/data/night.json');
+var style = new H.map.render.harp.Style(
+  "https://heremaps.github.io/maps-api-for-javascript-examples/change-harp-style-at-load/data/night.json"
+);
 
 // Step 4: create a layer with the style object:
-var vectorLayer = platform.getOMVService().createLayer(style, { engineType });
+var vectorLayer = platform.getOMVService().createLayer(style);
 
 // Step 5: initialize a map
-var map = new H.Map(document.getElementById('map'),
-  vectorLayer, {
-  engineType,
-  center: {lat: 52.51477270923461, lng: 13.39846691425174},
-  zoom: 13,
-  pixelRatio: window.devicePixelRatio || 1
-});
+var map = new H.Map(
+  document.getElementById("map"),
+  vectorLayer,
+  {
+    center: { lat: 52.51477270923461, lng: 13.39846691425174 },
+    zoom: 13,
+    pixelRatio: window.devicePixelRatio || 1,
+  }
+);
 // add a resize listener to make sure that the map occupies the whole container
-window.addEventListener('resize', () => map.getViewPort().resize());
+window.addEventListener("resize", () => map.getViewPort().resize());
 
 //Step 6: 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));
+var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));