Skip to content

Commit a474779

Browse files
authored
Indoor map example update (#148)
Signed-off-by: Daniele Bacarella <[email protected]>
1 parent 279379a commit a474779

File tree

2 files changed

+19
-15
lines changed

2 files changed

+19
-15
lines changed

indoor-map/demo.html

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,20 +42,20 @@ <h1>Show an Indoor Map</h1>
4242
<p>
4343
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.
4444
</p>
45-
45+
4646
<p>
47-
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>.
47+
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>.
4848
</p>
49-
49+
5050
<p>
51-
This example shows an Indoor Map of the <b>Zurich Airport (7348)</b>.
51+
This example shows an Indoor Map of the <b>Zurich Airport (7348)</b>.
5252
This example also works with Tiefgarage Riem Arcaden APCOA parking garage (27158) and Mall of Berlin (22766)
5353
</p>
54-
54+
5555
<div id="map"></div>
5656
<h3>Code</h3>
5757
<p>
58-
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>
58+
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>
5959
The example also shows how to:
6060
<ul>
6161
<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>
6464
<li>override default indoor map label text preferences using <code>H.venues.Service2.LABEL_TEXT_PREFERENCE_OVERRIDE</code></li>
6565
</ul>
6666
</p>
67+
<p>
68+
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>.
69+
</p>
6770
<script type="text/javascript" src='demo.js'></script>
6871
</body>
6972
</html>

indoor-map/demo.js

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* Example for Indoor Map for JSMapsApi.
33
*/
44

5-
// Replace with your HERE platform app api key
5+
// Replace with your HERE platform app api key
66
const yourApikey = 'ZKBUeAgkzH4JWhg93AA7cIE_kZotbMGhVI0_UYC0COY';
77

88
// Replace with your indoor map platform collection hrn
@@ -14,7 +14,7 @@ const indoorMapHrn = 'hrn:here:data::org651595200:indoormap-ed6d5667-cfe0-4748-b
1414
// 22766 - Mall of Berlin
1515
const venueId = '7348';
1616

17-
// The value of the drawing id varies as per the venue being loaded. Replace with appropriate value.
17+
// Optionally, the value of the drawing id varies as per the venue being loaded. Replace with appropriate value.
1818
const drawingId = 'structure-7880';
1919

2020
// Set to false if base map is not needed to be displayed.
@@ -33,8 +33,12 @@ const labelTextPreferenceOverride = [
3333
* Load and add indoor data on the map.
3434
*
3535
* @param {H.Map} map A HERE Map instance
36+
* @param {H.service.Platform} platform A HERE Platform instance
3637
*/
37-
function addVenueToMap(map) {
38+
function addVenueToMap(map, platform) {
39+
// Indoor Maps provider interacts with a tile layer to visualize and control the Indoor Map
40+
const venuesProvider = new H.venues.Provider();
41+
3842
// Get an instance of the Indoor Maps service using a valid apikey for Indoor Maps
3943
const venuesService = platform.getVenuesService({ apikey: yourApikey, hrn: indoorMapHrn }, 2);
4044

@@ -52,7 +56,7 @@ function addVenueToMap(map) {
5256
venuesProvider.setActiveVenue(venue);
5357

5458
// create a tile layer for the Indoor Maps provider
55-
const venueLayer = new H.map.layer.TileLayer(venuesProvider);
59+
const venueLayer = new H.map.layer.TileLayer(venuesProvider);
5660
if (showBaseMap) {
5761
// Add venueLayer to the base layer
5862
map.addLayer(venueLayer);
@@ -91,7 +95,7 @@ function addVenueToMap(map) {
9195
// Step 1: initialize communication with the platform
9296
// In your own code, replace variable window.apikey with your own apikey
9397
var platform = new H.service.Platform({
94-
apikey: window.apikey
98+
apikey: yourApikey
9599
});
96100
var defaultLayers = platform.createDefaultLayers();
97101

@@ -113,8 +117,5 @@ var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
113117
// Step 4: create the default UI component, for displaying bubbles
114118
var ui = H.ui.UI.createDefault(map, defaultLayers);
115119

116-
// Indoor Maps provider interacts with a tile layer to visualize and control the Indoor Map
117-
const venuesProvider = new H.venues.Provider();
118-
119120
// Step 5: add the Indoor Map
120-
addVenueToMap(map);
121+
addVenueToMap(map, platform);

0 commit comments

Comments
 (0)