Skip to content

Commit b77ff2e

Browse files
kplotnikkplotnik
authored
Merge pull request #94 from heremaps/example/venues-on-map
New venues on map example
2 parents 42302e4 + 0957635 commit b77ff2e

File tree

6 files changed

+151
-0
lines changed

6 files changed

+151
-0
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ All of the following examples use **version 3.1** of the API
2020
* [DOM Marker](https://heremaps.github.io/maps-api-for-javascript-examples/map-with-dom-marker/demo.html) - Display a marker that is capable of receiving DOM events
2121
* [DOM Marker rotation](https://heremaps.github.io/maps-api-for-javascript-examples/dom-marker-rotation/demo.html) - Rotate DOM Marker's content using CSS
2222
* [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
23+
* [Display Venues Data](https://heremaps.github.io/maps-api-for-javascript-examples/venues-on-map/demo.html) - Display Here Venues on a map
2324
* [Draggable Marker](https://heremaps.github.io/maps-api-for-javascript-examples/draggable-marker/demo.html) - Display a moveable marker on a map
2425
* [Draggable geo shapes](https://heremaps.github.io/maps-api-for-javascript-examples/draggable-shapes/demo.html) - Display moveable geometric shapes on a map
2526
* [Extruded geo shapes](https://heremaps.github.io/maps-api-for-javascript-examples/extruded-objects/demo.html) - 3D extrusion of the geometric shapes

‎meta.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,12 @@
9494
"title": "Example Template",
9595
"shortDescription": "Capture an area on the map",
9696
"published": false
97+
},
98+
{
99+
"uid": "venues-on-map",
100+
"title": "Display Venue data",
101+
"shortDescription": "Use Here Venues services to load and visualize an indoor data",
102+
"published": true
97103
}
98104

99105
]

‎venues-on-map/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+
}

‎venues-on-map/demo.details‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
name: Displaying Venues on map
3+
description: Use Here Venues services to load and visualize an indoor data
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+
...

‎venues-on-map/demo.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
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 Here Venues API ot load and visualize data on the map">
7+
<title>Display Venues on 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>Display Venues</h1>
42+
<p>Using the Venues module facilitates access to given indoor maps including full JSON models. The Venues APIs
43+
provide information about the indoor spaces, including buildings, level geometry and points of interest.
44+
</p>
45+
<p>More information about the use of Venues API can be found <a href="https://developer.here.com/documentation/maps/dev_guide/topics/venues.html" target="_blank">here</a>.</p>
46+
<p>This example shows a map of <b>Zurich Airport</b>.
47+
<div id="map"></div>
48+
<h3>Code</h3>
49+
<p>
50+
The example shows loading of indoor information using <code>H.venues.Service</code> and renders the indoor map
51+
using an instance of <code>H.venues.Provider</code>.<br> It also shows usage of venue related ui controls to
52+
change levels and buildings using respectively <code>H.venues.ui.LevelControl</code> and
53+
<code>H.venues.ui.DrawingControl</code>.
54+
</p>
55+
<script type="text/javascript" src='demo.js'></script>
56+
</body>
57+
</html>

‎venues-on-map/demo.js‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/**
2+
* Load and add venue data on the map.
3+
*
4+
* @param {H.Map} map A HERE Map instance
5+
*/
6+
function addVenueToMap(map) {
7+
// Get instance of venues service using valid apikey for venues
8+
const venuesService = platform.getVenuesService({ apikey: 'QICW7garcjxE7C7sSguJcNolMZXqYCJ9m5o6Qq3ygjg' });
9+
10+
// Venues provider interacts with tile layer to visualize and control the venue map
11+
const venuesProvider = new H.venues.Provider();
12+
13+
// Venues service provides a loadVenue method
14+
venuesService.loadVenue(7348).then((venue) => {
15+
// add venue data to venues provider
16+
venuesProvider.addVenue(venue);
17+
venuesProvider.setActiveVenue(venue);
18+
19+
// create a tile layer for the venues provider
20+
map.addLayer(new H.map.layer.TileLayer(venuesProvider));
21+
22+
// optionally select drawing/level
23+
venue.setActiveDrawing(7880);
24+
25+
// create level control
26+
const levelControl = new H.venues.ui.LevelControl(venue);
27+
ui.addControl('level-control', levelControl);
28+
29+
// create drawing control:
30+
const drawingControl = new H.venues.ui.DrawingControl(venue);
31+
ui.addControl('drawing-control', drawingControl);
32+
});
33+
}
34+
35+
/**
36+
* Boilerplate map initialization code starts below:
37+
*/
38+
39+
// Step 1: initialize communication with the platform
40+
// In your own code, replace variable window.apikey with your own apikey
41+
var platform = new H.service.Platform({
42+
apikey: window.apikey
43+
});
44+
var defaultLayers = platform.createDefaultLayers();
45+
46+
// Step 2: initialize a map
47+
var map = new H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, {
48+
zoom: 18,
49+
center: { lat: 47.452353, lng: 8.562455 },
50+
pixelRatio: window.devicePixelRatio || 1
51+
});
52+
53+
// add a resize listener to make sure that the map occupies the whole container
54+
window.addEventListener('resize', () => map.getViewPort().resize());
55+
56+
// Step 3: make the map interactive
57+
// MapEvents enables the event system
58+
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
59+
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
60+
61+
// Step 4: create the default UI component, for displaying bubbles
62+
var ui = H.ui.UI.createDefault(map, defaultLayers);
63+
64+
// Step 5: load venue data
65+
addVenueToMap(map);

0 commit comments

Comments
 (0)