Indoor map example update (#148)

Signed-off-by: Daniele Bacarella <[email protected]>

Author: dbacarel

indoor-map/demo.html

@@ -42,20 +42,20 @@ <h1>Show an Indoor Map</h1>
     <p>
 		The Indoor Maps module facilitates access to your private indoor maps including full JSON models. The HERE Indoor Maps API also provides information about indoor spaces, buildings, level geometry and points of interest.
     </p>
-	
+
      <p>
-      More information on the use of the HERE Indoor Maps API is available <a href="https://developer.here.com/documentation/maps/dev_guide/topics/venues.html" target="_blank">here</a>.
+      More information on the use of the HERE Indoor Maps API is available <a href="https://developer.here.com/documentation/maps/dev_guide/topics/indoor-maps.html" target="_blank">here</a>.
     </p>
-	
+
     <p>
-      This example shows an Indoor Map of the <b>Zurich Airport (7348)</b>. 
+      This example shows an Indoor Map of the <b>Zurich Airport (7348)</b>.
       This example also works with Tiefgarage Riem Arcaden APCOA parking garage (27158) and Mall of Berlin (22766)
     </p>
-	
+
     <div id="map"></div>
     <h3>Code</h3>
     <p>
-      The example shows loading the Indoor Map using <code>H.venues.Service2</code> and renders the indoor map using an instance of <code>H.venues.Provider</code>.<br> 
+      The example shows loading the Indoor Map using <code>H.venues.Service2</code> and renders the indoor map using an instance of <code>H.venues.Provider</code>.<br>
 	    The example also shows how to:
       <ul>
         <li>get the list of indoor maps from the given HRN using <code>H.venues.Service2.getMapInfoList()</code></li>
@@ -64,6 +64,9 @@ <h3>Code</h3>
         <li>override default indoor map label text preferences using <code>H.venues.Service2.LABEL_TEXT_PREFERENCE_OVERRIDE</code></li>
       </ul>
     </p>
+    <p>
+      For complete descriptions of the parameters shown in this example, see the <a href=https://developer.here.com/documentation/maps/dev_guide/api_reference/index.html target="_blank">API Reference</a>.
+    </p>
     <script type="text/javascript" src='demo.js'></script>
   </body>
 </html>

indoor-map/demo.js

@@ -2,7 +2,7 @@
  * Example for Indoor Map for JSMapsApi.
  */
 
-// Replace with your HERE platform app api key 
+// Replace with your HERE platform app api key
 const yourApikey = 'ZKBUeAgkzH4JWhg93AA7cIE_kZotbMGhVI0_UYC0COY';
 
 // Replace with your indoor map platform collection hrn
@@ -14,7 +14,7 @@ const indoorMapHrn = 'hrn:here:data::org651595200:indoormap-ed6d5667-cfe0-4748-b
 // 22766 - Mall of Berlin
 const venueId = '7348';
 
-// The value of the drawing id varies as per the venue being loaded. Replace with appropriate value.
+// Optionally, the value of the drawing id varies as per the venue being loaded. Replace with appropriate value.
 const drawingId = 'structure-7880';
 
 // Set to false if base map is not needed to be displayed.
@@ -33,8 +33,12 @@ const labelTextPreferenceOverride = [
  * Load and add indoor data on the map.
  *
  * @param  {H.Map} map A HERE Map instance
+ * @param  {H.service.Platform} platform A HERE Platform instance
  */
-function addVenueToMap(map) {
+function addVenueToMap(map, platform) {
+  // Indoor Maps provider interacts with a tile layer to visualize and control the Indoor Map
+  const venuesProvider = new H.venues.Provider();
+
   // Get an instance of the Indoor Maps service using a valid apikey for Indoor Maps
   const venuesService = platform.getVenuesService({ apikey: yourApikey, hrn: indoorMapHrn }, 2);
 
@@ -52,7 +56,7 @@ function addVenueToMap(map) {
     venuesProvider.setActiveVenue(venue);
 
     // create a tile layer for the Indoor Maps provider
-    const venueLayer = new H.map.layer.TileLayer(venuesProvider);   
+    const venueLayer = new H.map.layer.TileLayer(venuesProvider);
     if (showBaseMap) {
       // Add venueLayer to the base layer
       map.addLayer(venueLayer);
@@ -91,7 +95,7 @@ function addVenueToMap(map) {
 // 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: window.apikey
+  apikey: yourApikey
 });
 var defaultLayers = platform.createDefaultLayers();
 
@@ -113,8 +117,5 @@ var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
 // Step 4: create the default UI component, for displaying bubbles
 var ui = H.ui.UI.createDefault(map, defaultLayers);
 
-// Indoor Maps provider interacts with a tile layer to visualize and control the Indoor Map
-const venuesProvider = new H.venues.Provider();
-
 // Step 5: add the Indoor Map
-addVenueToMap(map);
+addVenueToMap(map, platform);