Update to indoor map examples, added more scenarios

Author: bernardmendonca

indoor-map/demo.html

@@ -56,7 +56,16 @@ <h1>Show an Indoor Map</h1>
     <h3>Code</h3>
     <p>
       The example shows loading the Indoor Map using <code>H.venues.Service</code> and renders the indoor map using an instance of <code>H.venues.Provider</code>.<br> 
-	  The example also shows the usage of the indoor map related UI controls to change levels and buildings using <code>H.venues.ui.LevelControl</code> and <code>H.venues.ui.DrawingControl</code> respectively.
+	  The example also shows:
+      <ul>
+        <li>the usage of the indoor map related UI controls to change levels and buildings using <code>H.venues.ui.LevelControl</code> and <code>H.venues.ui.DrawingControl</code> respectively.</li>
+        <li>disabling the base map while loading a indoor map</li>
+        <li>switching to an indoor map level other than the default</li>
+        <li>searching geometries in an indoor map and highlighting them</li>
+        <li>displaying an info-bubble on click of a geometry</li>
+        <li>restricting the map movement within the indoor map bounds</li>
+        <li>rotating the map</li>
+      </ul>
     </p>
     <script type="text/javascript" src='demo.js'></script>
   </body>

indoor-map/demo.js

@@ -1,42 +1,98 @@
+/**
+ * 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';
+
+// Replace with the venue id for your map. This example works for maps:
+// 7348 - Zurich Airport
+// 27158 - Tiefgarage Riem Arcaden APCOA Parking garage
+// 22766 - Mall of Berlin
+const venueId = '7348';
+
+// The value of the drawing id varies as per the venue being loaded. Replace with appropriate value.
+const drawingId = 7880;
+
+// Set to false if base map is not needed to be displayed.
+const showBaseMap = true;
+
+// Value of Level index to set other than the default
+const levelIndex = 1;
+
+// Set to true if map needs to be rotated
+const rotateMap = false;
+
+// Set to true if serched geometries need to be highlighted
+const searchHighlightGeometries = false;
+
+// Set to true to show info bubble with gemetry information on click of geometry
+const enableInfoBubble = false;
+var infoBubble;
+
+// Set to true to restrict a moveable indoor map to the bounds of the venue 
+const restrictMapWithinMapBounds = false;
+
 /**
  * Load and add indoor data on the map.
  *
  * @param  {H.Map} map A HERE Map instance
  */
 function addVenueToMap(map) {
   // Get an instance of the Indoor Maps service using a valid apikey for Indoor Maps
-  const venuesService = platform.getVenuesService({ apikey: 'ZKBUeAgkzH4JWhg93AA7cIE_kZotbMGhVI0_UYC0COY', 
-    hrn: 'hrn:here:data::org651595200:indoormap-ed6d5667-cfe0-4748-bbf5-88b00e7e3b21-collection' }, 2);
-
-  // Indoor Maps provider interacts with a tile layer to visualize and control the Indoor Map
-  const venuesProvider = new H.venues.Provider();
+  const venuesService = platform.getVenuesService({ apikey: yourApikey, hrn: indoorMapHrn }, 2);
 
   // Indoor Maps service provides a loadVenue method
-  // This example works for maps:
-  // 7348 - Zurich Airport
-  // 27158 - Tiefgarage Riem Arcaden APCOA Parking garage
-  // 22766 - Mall of Berlin
-  venuesService.loadVenue('7348').then((venue) => {
+  venuesService.loadVenue(venueId).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
-    map.addLayer(new H.map.layer.TileLayer(venuesProvider));
+    const venueLayer = new H.map.layer.TileLayer(venuesProvider);
+    map.addLayer(venueLayer);
+    if (!showBaseMap) {
+      map.setBaseLayer(venueLayer);
+    }
 
     // Set center of the map view to the center of the venue
     map.setCenter(venue.getCenter());
 
-    // optionally select a different level
-    venue.setActiveDrawing(7880);
+    // Optionally select a different active drawing.
+    if (venue.getDrawing(drawingId)) {
+      venue.setActiveDrawing(drawingId);
+    }
 
-    // create a level control
+    // Optionally set a different active level
+    if (venue.getLevels().length >= levelIndex) {
+      venue.setActiveLevelIndex(levelIndex);
+    }
+
+    // Create a level control
     const levelControl = new H.venues.ui.LevelControl(venue);
     ui.addControl('level-control', levelControl);
 
-    // create a drawing control:
+    // Create a drawing control:
     const drawingControl = new H.venues.ui.DrawingControl(venue);
     ui.addControl('drawing-control', drawingControl);
+
+    // Enable highlighting geometries based on geometry name
+    if (searchHighlightGeometries) {
+      highlightGeometries(venue, 'Duty Free Store');
+    }
+
+    // Enable info bubble on tap of geometry
+    if (enableInfoBubble) {
+      enableBubbleOnTap();
+    }
+
+    // Enable to restrict map movement within indoor map bounds
+    if (restrictMapWithinMapBounds) {
+      restrictMap(map, venue);
+    }
   });
 }
 
@@ -69,5 +125,134 @@ 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);
+
+// Other helpful steps for indoor maps
+
+// Rotate map
+if (rotateMap) {
+  map.getViewModel().setLookAtData({ 
+      tilt: 0,
+      heading: 90
+    });
+}
+
+/**
+ * Function to search and highlight geometries
+ * 
+ * @param {H.venues.Venue} venue 
+ * @param {H.venues.Provider} venuesProvider 
+ * @param {string} geometryForSearch - geometry name to be searched
+ */
+ function highlightGeometries (venue, geometryForSearch) {
+  const searchGeometries = venue.search(geometryForSearch);
+  const highlightStyle = {
+    fillColor: '#FF0000',
+    outlineColor: '#99cc00',
+    outlineWidth: 0.2,
+  };
+  
+  if (searchGeometries.length > 0) {
+    venuesProvider.activeVenue.setHighlightedGeometries(true, searchGeometries, highlightStyle);
+  // venuesProvider.activeVenue.setHighlightedGeometries(false, searchGeometries, highlightStyle); // If you need to remove the highlighting
+  }
+}
+
+/**
+ * For a given location open an information popup and highlight geometry.
+ * @param {mapsjs.geo.Point} position tapped on map
+ * @param {H.venues.Geometry} geometry which was tapped
+ * @param {boolean} highlight geometry or not
+ */
+ const onGeometryTap = (position, geometry, highlight = true) => {
+  // Hide existing infoBubble and remove existing highlight
+  if (infoBubble) {
+    const currentGeometry = infoBubble.getData();
+    if (currentGeometry) venuesProvider.getActiveVenue().setHighlightedGeometries(false, [currentGeometry]);
+    ui.removeBubble(infoBubble);
+  }
+
+  infoBubble = new H.ui.InfoBubble(position, {
+    onStateChange: () => {
+      // On closing the popup, removing highlight from the geometry
+      venuesProvider.getActiveVenue().setHighlightedGeometries(false, [infoBubble.getData()]);
+    },
+  });
+
+  ui.addBubble(infoBubble);
+
+  // Then set a new geometry at info bubble
+  infoBubble.setData(geometry);
+
+  if (highlight) {
+    venuesProvider.getActiveVenue().setHighlightedGeometries(true, [infoBubble.getData()]);
+  }
+
+  const popUpContent = `${geometry.getId()}: ${geometry.getName()} <br>`;
+
+  const domElement = document.createElement('div');
+  domElement.innerHTML = popUpContent;
+  domElement.setAttribute('style', 'width: max-content;');
+
+  infoBubble.setPosition(position);
+  infoBubble.setContent(domElement);
+
+  // if content is available, open the infoBubble
+  return popUpContent.length > 0 ? infoBubble.open() : infoBubble.close();
+};
+
+/**
+ * This function demonstrates how to add an event listener to the venue
+ */
+const enableBubbleOnTap = () => {
+  venuesProvider.addEventListener('tap', (e) => {
+    const geometry = e.target;
+
+    if (geometry) {
+      const position = map.screenToGeo(e.currentPointer.viewportX, e.currentPointer.viewportY);
+      setTimeout(() => onGeometryTap(position, geometry, true), 0);
+    }
+  });
+};
+
+/**
+ * Restricts a moveable map to a given rectangle.
+ *
+ * @param {H.Map} map A HERE Map instance within the application
+ */
+function restrictMap(map, venue){
+
+  var bounds = venue.getBoundingBox(); // to get BBox for the indoor map
+
+  map.getViewModel().addEventListener('sync', function() {
+    var center = map.getCenter();
+
+    if (!bounds.containsPoint(center)) {
+      if (center.lat > bounds.getTop()) {
+        center.lat = bounds.getTop();
+      } else if (center.lat < bounds.getBottom()) {
+        center.lat = bounds.getBottom();
+      }
+      if (center.lng < bounds.getLeft()) {
+        center.lng = bounds.getLeft();
+      } else if (center.lng > bounds.getRight()) {
+        center.lng = bounds.getRight();
+      }
+      map.setCenter(center);
+    }
+  });
+
+  //Debug code to visualize where your restriction is
+  map.addObject(new H.map.Rect(bounds, {
+    style: {
+        fillColor: 'rgba(55, 85, 170, 0.1)',
+        strokeColor: 'rgba(55, 85, 170, 0.6)',
+        lineWidth: 8
+      }
+    }
+  ));
+}