Skip to content

Commit 6df7866

Browse files
kplotnikkplotnik
authored
Merge pull request #130 from heremaps/indoor-update
Update to indoor map examples, added more scenarios
2 parents a9cbd36 + 1b08ba2 commit 6df7866

File tree

12 files changed

+559
-25
lines changed

12 files changed

+559
-25
lines changed

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ All of the following examples use **version 3.1** of the API
2323
* [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
2424
* [Display GeoJSON Data](https://heremaps.github.io/maps-api-for-javascript-examples/display-geojson-on-map/demo.html) - Parse a GeoJSON file and display the data on a map
2525
* [Display an Indoor Map](https://heremaps.github.io/maps-api-for-javascript-examples/indoor-map/demo.html) - Use the HERE Indoor Maps API to load and visualize an indoor map
26+
* [UI interactions on Indoor Map](https://heremaps.github.io/maps-api-for-javascript-examples/indoor-map-ui-interaction/demo.html) - HERE Indoor Maps API with UI interactions on the map
27+
* [Restrict map movement with Indoor Map](https://heremaps.github.io/maps-api-for-javascript-examples/indoor-map-movement/demo.html) - Restrict the map movement within the indoor map bounds
2628
* [Draggable Marker](https://heremaps.github.io/maps-api-for-javascript-examples/draggable-marker/demo.html) - Display a moveable marker on a map
2729
* [Draggable geo shapes](https://heremaps.github.io/maps-api-for-javascript-examples/draggable-shapes/demo.html) - Display moveable geometric shapes on a map
2830
* [Extruded geo shapes](https://heremaps.github.io/maps-api-for-javascript-examples/extruded-objects/demo.html) - 3D extrusion of the geometric shapes

‎indoor-map-movement/demo.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
#map {
2+
width: 95%;
3+
height: 450px;
4+
background: grey;
5+
}
6+
7+
#panel {
8+
width: 100%;
9+
height: 400px;
10+
}

‎indoor-map-movement/demo.details

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
name: Restrict map movement with Indoor Map
3+
description: Restrict the map movement within the indoor map bounds
4+
resources:
5+
- https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js
6+
normalize_css: no
7+
dtd: html 5
8+
wrap: d
9+
panel_html: 0
10+
panel_js: 0
11+
panel_css: 0
12+
...

‎indoor-map-movement/demo.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
5+
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
6+
<meta name="description" content="Use the HERE Indoor Maps API to load and visualize an indoor map">
7+
<title>Display an Indoor Map</title>
8+
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
9+
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
10+
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
11+
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
12+
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
13+
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-venues.js"></script>
14+
<link rel="stylesheet" type="text/css" href="../template.css" />
15+
<link rel="stylesheet" type="text/css" href="demo.css" />
16+
<script type="text/javascript" src='../test-credentials.js'></script>
17+
<style type="text/css">
18+
.log {
19+
position: absolute;
20+
top: 5px;
21+
left: 5px;
22+
height: 150px;
23+
width: 250px;
24+
overflow: scroll;
25+
background: white;
26+
margin: 0;
27+
padding: 0;
28+
list-style: none;
29+
font-size: 12px;
30+
}
31+
.log-entry {
32+
padding: 5px;
33+
border-bottom: 1px solid #d0d9e9;
34+
}
35+
.log-entry:nth-child(odd) {
36+
background-color: #e1e7f1;
37+
}
38+
</style>
39+
</head>
40+
<body>
41+
<h1>Indoor Map - Restrict map movement</h1>
42+
<p>
43+
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>.
44+
</p>
45+
46+
<p>
47+
This example shows an Indoor Map of the <b>Tiefgarage Riem Arcaden APCOA parking garage (27158)</b>.
48+
This example also works with Mall of Berlin (22766) and Zurich Airport (7348)
49+
</p>
50+
51+
<div id="map"></div>
52+
<h3>Code</h3>
53+
<p>
54+
The example shows how to restrict the map movement within the indoor map bounds. Additionally, it shows how to rotate a map.<br>
55+
</p>
56+
<script type="text/javascript" src='demo.js'></script>
57+
</body>
58+
</html>

‎indoor-map-movement/demo.js

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
/**
2+
* Example for Indoor Map for JSMapsApi.
3+
*/
4+
5+
// Replace with your HERE platform app api key
6+
const yourApikey = 'ZKBUeAgkzH4JWhg93AA7cIE_kZotbMGhVI0_UYC0COY';
7+
8+
// Replace with your indoor map platform collection hrn
9+
const indoorMapHrn = 'hrn:here:data::org651595200:indoormap-ed6d5667-cfe0-4748-bbf5-88b00e7e3b21-collection';
10+
11+
// Replace with the venue id for your map. This example works for maps:
12+
// 7348 - Zurich Airport
13+
// 27158 - Tiefgarage Riem Arcaden APCOA Parking garage
14+
// 22766 - Mall of Berlin
15+
const venueId = '27158';
16+
17+
/**
18+
* Load and add indoor data on the map.
19+
*
20+
* @param {H.Map} map A HERE Map instance
21+
*/
22+
function addVenueToMap(map) {
23+
// Get an instance of the Indoor Maps service using a valid apikey for Indoor Maps
24+
const venuesService = platform.getVenuesService({ apikey: yourApikey, hrn: indoorMapHrn }, 2);
25+
26+
// Indoor Maps service provides a loadVenue method
27+
venuesService.loadVenue(venueId).then((venue) => {
28+
// add Indoor Maps data to the Indoor Maps provider
29+
venuesProvider.addVenue(venue);
30+
venuesProvider.setActiveVenue(venue);
31+
32+
// create a tile layer for the Indoor Maps provider
33+
const venueLayer = new H.map.layer.TileLayer(venuesProvider);
34+
map.addLayer(venueLayer);
35+
36+
// Set center of the map view to the center of the venue
37+
map.setCenter(venue.getCenter());
38+
39+
// Create a level control
40+
const levelControl = new H.venues.ui.LevelControl(venue);
41+
ui.addControl('level-control', levelControl);
42+
43+
// Create a drawing control:
44+
const drawingControl = new H.venues.ui.DrawingControl(venue);
45+
ui.addControl('drawing-control', drawingControl);
46+
47+
// Enable to restrict map movement within indoor map bounds
48+
restrictMap(map, venue);
49+
50+
// Rotate map
51+
rotateMap(map, 90);
52+
});
53+
}
54+
55+
/**
56+
* Boilerplate map initialization code starts below:
57+
*/
58+
59+
// Step 1: initialize communication with the platform
60+
// In your own code, replace variable window.apikey with your own apikey
61+
var platform = new H.service.Platform({
62+
apikey: window.apikey
63+
});
64+
var defaultLayers = platform.createDefaultLayers();
65+
66+
// Step 2: initialize a map
67+
var map = new H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, {
68+
zoom: 18,
69+
center: { lat: 47.452353, lng: 8.562455 },
70+
pixelRatio: window.devicePixelRatio || 1
71+
});
72+
73+
// add a resize listener to make sure that the map occupies the whole container
74+
window.addEventListener('resize', () => map.getViewPort().resize());
75+
76+
// Step 3: make the map interactive
77+
// MapEvents enables the event system
78+
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
79+
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
80+
81+
// Step 4: create the default UI component, for displaying bubbles
82+
var ui = H.ui.UI.createDefault(map, defaultLayers);
83+
84+
// Indoor Maps provider interacts with a tile layer to visualize and control the Indoor Map
85+
const venuesProvider = new H.venues.Provider();
86+
87+
// Step 5: add the Indoor Map
88+
addVenueToMap(map);
89+
90+
/**
91+
* Rotate the map
92+
*
93+
* @param {H.Map} map A HERE Map instance within the application
94+
* @param {number} angle in degrees
95+
*/
96+
function rotateMap(map, angle) {
97+
map.getViewModel().setLookAtData({
98+
tilt: 0,
99+
heading: angle
100+
});
101+
}
102+
103+
/**
104+
* Restricts a moveable map to a given rectangle.
105+
*
106+
* @param {H.Map} map A HERE Map instance within the application
107+
*/
108+
function restrictMap(map, venue) {
109+
110+
var bounds = venue.getBoundingBox(); // to get BBox for the indoor map
111+
112+
map.getViewModel().addEventListener('sync', function() {
113+
var center = map.getCenter();
114+
115+
if (!bounds.containsPoint(center)) {
116+
if (center.lat > bounds.getTop()) {
117+
center.lat = bounds.getTop();
118+
} else if (center.lat < bounds.getBottom()) {
119+
center.lat = bounds.getBottom();
120+
}
121+
if (center.lng < bounds.getLeft()) {
122+
center.lng = bounds.getLeft();
123+
} else if (center.lng > bounds.getRight()) {
124+
center.lng = bounds.getRight();
125+
}
126+
map.setCenter(center);
127+
}
128+
});
129+
130+
//Debug code to visualize where your restriction is
131+
map.addObject(new H.map.Rect(bounds, {
132+
style: {
133+
fillColor: 'rgba(55, 85, 170, 0.1)',
134+
strokeColor: 'rgba(55, 85, 170, 0.3)',
135+
lineWidth: 2
136+
}
137+
}
138+
));
139+
}

‎indoor-map-ui-interaction/demo.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
#map {
2+
width: 95%;
3+
height: 450px;
4+
background: grey;
5+
}
6+
7+
#panel {
8+
width: 100%;
9+
height: 400px;
10+
}

‎indoor-map-ui-interaction/demo.details

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
name: UI interactions on Indoor Map
3+
description: HERE Indoor Maps API with UI interactions on the map
4+
resources:
5+
- https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js
6+
normalize_css: no
7+
dtd: html 5
8+
wrap: d
9+
panel_html: 0
10+
panel_js: 0
11+
panel_css: 0
12+
...

‎indoor-map-ui-interaction/demo.html

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
5+
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
6+
<meta name="description" content="Use the HERE Indoor Maps API to load and visualize an indoor map">
7+
<title>Display an Indoor Map</title>
8+
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
9+
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
10+
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
11+
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
12+
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
13+
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-venues.js"></script>
14+
<link rel="stylesheet" type="text/css" href="../template.css" />
15+
<link rel="stylesheet" type="text/css" href="demo.css" />
16+
<script type="text/javascript" src='../test-credentials.js'></script>
17+
<style type="text/css">
18+
.log {
19+
position: absolute;
20+
top: 5px;
21+
left: 5px;
22+
height: 150px;
23+
width: 250px;
24+
overflow: scroll;
25+
background: white;
26+
margin: 0;
27+
padding: 0;
28+
list-style: none;
29+
font-size: 12px;
30+
}
31+
.log-entry {
32+
padding: 5px;
33+
border-bottom: 1px solid #d0d9e9;
34+
}
35+
.log-entry:nth-child(odd) {
36+
background-color: #e1e7f1;
37+
}
38+
</style>
39+
</head>
40+
<body>
41+
<h1>Indoor Map UI Interactions</h1>
42+
<p>
43+
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>.
44+
</p>
45+
46+
<p>
47+
This example shows an Indoor Map of the <b>Mall of Berlin (22766)</b>.
48+
This example also works with Tiefgarage Riem Arcaden APCOA parking garage (27158) and Zurich Airport (7348)
49+
</p>
50+
51+
<div id="map"></div>
52+
<h3>Code</h3>
53+
<p>
54+
The example shows UI interactions with the Indoor Map.<br>
55+
The example covers the below mentioned samples:
56+
<ul>
57+
<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>
58+
<li>displaying an info-bubble on click of a geometry</li>
59+
<li>searching geometries in an indoor map and highlighting them</li>
60+
</ul>
61+
</p>
62+
<script type="text/javascript" src='demo.js'></script>
63+
</body>
64+
</html>

0 commit comments

Comments
 (0)