heremaps · iamravisingh · Jun 30, 2025 · Jul 2, 2025
diff --git a/indoor-map-with-route-from-a-to-b/demo.css b/indoor-map-with-route-from-a-to-b/demo.css
@@ -0,0 +1,10 @@
+#map {
+    width: 95%;
+    height: 450px;
+    background: grey;
+}
+
+#panel {
+    width: 100%;
+    height: 400px;
+}
diff --git a/indoor-map-with-route-from-a-to-b/demo.details b/indoor-map-with-route-from-a-to-b/demo.details
@@ -0,0 +1,12 @@
+---
+ name: Indoor Map with Route from A to B
+ description: Use Here Indoor Maps service to calculate route on a indoor 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/indoor-map-with-route-from-a-to-b/demo.html b/indoor-map-with-route-from-a-to-b/demo.html
@@ -0,0 +1,70 @@
+<!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">
+    <meta name="description" content="Use the HERE Indoor Maps API to load and visualize an indoor map">
+    <title>Indoor Map with Driving Route from A to B</title>
+    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
+    <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-mapevents.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-venues.js"></script>
+    <link rel="stylesheet" type="text/css" href="../template.css" />
+    <link rel="stylesheet" type="text/css" href="demo.css" />
+    <script type="text/javascript" src='../test-credentials.js'></script>
+    <style type="text/css">
+      .log {
+        position: absolute;
+        top: 5px;
+        left: 5px;
+        height: 150px;
+        width: 250px;
+        overflow: scroll;
+        background: white;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        font-size: 12px;
+      }
+      .log-entry {
+        padding: 5px;
+        border-bottom: 1px solid #d0d9e9;
+      }
+      .log-entry:nth-child(odd) {
+          background-color: #e1e7f1;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Show routes on Indoor Map</h1>
+    <p>Request a walking route from A to B and display it on the venue.</p>
+    <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://www.here.com/docs/bundle/maps-api-for-javascript-developer-guide/page/topics/indoor-maps.html" target="_blank">here</a>.
+    </p>
+
+    <p>
+      This example shows an Indoor Map of the <b>Zurich Airport</b>. 
+      This example also works with Tiefgarage Riem Arcaden APCOA parking garage and Mall of Berlin
+    </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>
+      <p>Access to the routing service is obtained from the <code>H.venues.Service2</code> by calling
+        <code>calculateRoute(routeParams)</code>. The <code>calculateRoute()</code> method is used to calculate the shortest
+        pedestrian route by passing in the relevant parameters as defined in
+        <a href="https://www.here.com/docs/bundle/indoor-routing-api-v1-api-reference/page/index.html#tag/Indoor-Routing/operation/getRoute" target="_blank">Indoor Routing API</a>.
+        The styling and display of the response is under the control of the developer.</p>
+      <p>
+      For complete descriptions of the parameters shown in this example, see the <a href=https://www.here.com/docs/bundle/maps-api-for-javascript-api-reference/page/H.venues.html target="_blank">API Reference</a>.
+    </p>
+    <script type="text/javascript" src='demo.js'></script>
+  </body>
+</html>
diff --git a/indoor-map-with-route-from-a-to-b/demo.js b/indoor-map-with-route-from-a-to-b/demo.js
@@ -0,0 +1,156 @@
+/**
+ * Example for Indoor Map for JSMapsApi.
+ */
+
+// Replace with your HERE platform app api key
+const yourApikey = 'ZKBUeAgkzH4JWhg93AA7cIE_kZotbMGhVI0_UYC0COY';
+
+// Replace with your indoor map platform collection hrn
+const indoorMapHrn = 'hrn:here:data::org651595200:indoormap-ed6d5667-cfe0-4748-bbf5-88b00e7e3b21-collection';
+
+const venuesProvider = null
+const venuesService = null
+// Specify the venue ID for your map. Examples of the map ID mentioned below.
+// For legacy maps, you can continue to use the numeric value. 
+// Examples:
+// indoormap-00000000-0000-4000-a000-000000007348 for Zurich Airport (legacy id 7348) 
+// indoormap-00000000-0000-4000-a000-000000027158 for Tiefgarage Riem Arcaden APCOA Parking garage (legacy id 27158) 
+// indoormap-00000000-0000-4000-a000-000000022766 for Mall of Berlin (legacy id 22766)
+const venueId = 'indoormap-00000000-0000-4000-a000-000000007348';
+
+// Set to false if base map is not needed to be displayed.
+const showBaseMap = true;
+
+// Optional, list of label text preferences to override.
+const labelTextPreferenceOverride = [
+  H.venues.Service2.LABEL_TEXT_PREFERENCE_OVERRIDE.OCCUPANT_NAMES,
+  H.venues.Service2.LABEL_TEXT_PREFERENCE_OVERRIDE.SPACE_NAME
+]
+
+/**
+ * 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, platform) {
+  // Indoor Maps provider interacts with a tile layer to visualize and control the Indoor Map
+  venuesProvider = new H.venues.Provider();
+
+  // Get an instance of the Indoor Maps service using a valid apikey for Indoor Maps
+  venuesService = platform.getVenuesService({ apikey: yourApikey, hrn: indoorMapHrn }, 2);
+
+  // Use venuesService.getMapInfoList to retrieve the list of Indoor maps from the given HRN
+  venuesService.getMapInfoList().then(mapInfoList => {
+    mapInfoList.forEach(mapInfo => {
+      console.log("Indoor map id: " + mapInfo.mapId + ", map name: " + mapInfo.mapName);
+    });
+  });
+
+  // Indoor Maps service provides a loadVenue method. Optionally, overriding the label preferences
+  venuesService.loadVenue(venueId, { labelTextPreferenceOverride }).then((venue) => {
+    // add Indoor Maps data to the Indoor Maps provider
+    venuesProvider.addVenue(venue);
+    venuesProvider.setActiveVenue(venue);
+
+    // create a tile layer for the Indoor Maps provider
+    const venueLayer = new H.map.layer.TileLayer(venuesProvider);
+    if (showBaseMap) {
+      // Add venueLayer to the base layer
+      map.addLayer(venueLayer);
+    } else {
+      // If base map is not needed, set the venueLayer as base layer
+      map.setBaseLayer(venueLayer);
+    }
+
+    // Set center of the map view to the center of the venue
+    map.setCenter(venue.getCenter());
+
+    // Create a level control
+    const levelControl = new H.venues.ui.LevelControl(venue);
+    ui.addControl('level-control', levelControl);
+
+    // Create a drawing control:
+    const drawingControl = new H.venues.ui.DrawingControl(venue);
+    ui.addControl('drawing-control', drawingControl);
+  });
+}
+
+/**
+ * calculate route from a to b and load it on venue
+ *  @param  {H.Map} map A HERE Map instance
+
+ * A full list of available request parameters can be found in the Indoor Routing API documentation.
+ * see: https://www.here.com/docs/bundle/indoor-routing-api-v1-api-reference/page/index.html
+ */
+async function calculateIndoorRouteFromAtoB(map) {
+
+  // Instantiate (and display) a map:
+  const origin = { lat: 47.45146718297871, lng: 8.56116163852909, levelId: "level-9050", venueId: "indoormap-00000000-0000-4000-a000-000000007348" };
+  const destination = { lat: 47.45264049318705, lng: 8.562764022046945, levelId: "level-9050", venueId: "indoormap-00000000-0000-4000-a000-000000007348" };
+
+  // Create the parameters for the indoor routing request:
+  const routingParameters = {
+    routingMode: "fast",
+    transportMode: "pedestrian",
+    // The start point of the route:
+    origin: `${origin.lat},${origin.lng},${origin.levelId},${origin.venueId}`,
+    // The end point of the route:
+    destination: `${destination.lat},${destination.lng},${destination.levelId},${destination.venueId}`,
+  };
+  try{
+    const res = await venuesService.calculateRoute(routingParameters);
+    if (res?.routes && res.routes.length > 0) {
+      // Create route objects using route response data
+      const route = new H.venues.Route2(res.routes[0]);
+      // Link route map objects with venue levels for automatic visibility updates:
+      const indoorObjects = route.getIndoorObjects();
+
+      for (let venueId in indoorObjects) {
+        for (let levelIndex in indoorObjects[venueId]) {
+          const venue = venuesProvider.getVenue(venueId);
+          const objectGroup = indoorObjects[venueId][levelIndex];
+          map.addObject(objectGroup);
+          venue.setMapObjects(objectGroup.getObjects(), levelIndex);
+        }
+      }
+    }
+  }catch(error){
+    console.log(error.message)
+  }
+}
+
+/**
+ * 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: yourApikey
+});
+var defaultLayers = platform.createDefaultLayers();
+
+// Step 2: initialize a map
+var map = new H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, {
+  zoom: 18,
+  center: { lat: 47.452353, lng: 8.562455 },
+  pixelRatio: window.devicePixelRatio || 1
+});
+
+// add a resize listener to make sure that the map occupies the whole container
+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 component, for displaying bubbles
+var ui = H.ui.UI.createDefault(map, defaultLayers);
+
+// Step 5: add the Indoor Map
+addVenueToMap(map, platform);
+
+// Step 6: add route to indoor map 
+calculateIndoorRouteFromAtoB(map)
diff --git a/meta.json b/meta.json
@@ -472,6 +472,12 @@
                             "title": "Indoor Map - Restrict map movement",
                             "shortDescription": "Indoor Map - Restrict map movement",
                             "published": true
+                        },
+                        {
+                            "uid": "indoor-map-with-route-from-a-to-b",
+                            "title": "Indoor Map with Route from A to B",
+                            "shortDescription": "Use Here Indoor Maps service to calculate route on a indoor map",
+                            "published": true
                         }
                     ]
                 }