Skip to content

Commit 1322c19

Browse files
haifeng2013haifeng2013
committed
Added, example Interactive Map Layer.
Signed-off-by: Xue, Haifeng <[email protected]>
1 parent 431d43e commit 1322c19

File tree

6 files changed

+133
-0
lines changed

6 files changed

+133
-0
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ All of the following examples use **version 3.1** of the API
2727
* [Extruded geo shapes](https://heremaps.github.io/maps-api-for-javascript-examples/extruded-objects/demo.html) - 3D extrusion of the geometric shapes
2828
* [Finding the Nearest Marker](https://heremaps.github.io/maps-api-for-javascript-examples/finding-the-nearest-marker/demo.html) - Find a marker nearest to the click location
2929
* [Image overlay](https://heremaps.github.io/maps-api-for-javascript-examples/image-overlay/demo.html) - Display an animated weather radar
30+
* [Interactive Map Layer](https://heremaps.github.io/maps-api-for-javascript-examples/transit-mapsjs-iml/demo.html) - Visualize Data from Interactive Map Layer on Map
3031
* [Interleave vector and object layers](https://heremaps.github.io/maps-api-for-javascript-examples/interleave-layers/demo.html) - Display an object under the buildings
3132
* [Map Objects Event Delegation](https://heremaps.github.io/maps-api-for-javascript-examples/map-objects-event-delegation/demo.html) - Use event delegation on map objects
3233
* [Map Objects Events](https://heremaps.github.io/maps-api-for-javascript-examples/map-object-events-displayed/demo.html) - Handle events on various map objects

‎meta.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,12 @@
112112
"title": "Display Venue data",
113113
"shortDescription": "Use Here Venues services to load and visualize an indoor data",
114114
"published": true
115+
},
116+
{
117+
"uid": "transit-mapsjs-iml",
118+
"title": "Interactive Map Layer",
119+
"shortDescription": "Visualize Data from Interactive Map Layer on Map.",
120+
"published": true
115121
}
116122
]
117123
},

‎transit-mapsjs-iml/demo.css‎

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

‎transit-mapsjs-iml/demo.details‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
name: Interactive Map Layer
3+
description: Visualize Data from Interactive Map Layer on 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+
...

‎transit-mapsjs-iml/demo.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<html>
2+
<head>
3+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
4+
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
5+
<meta name="description" content="Visualize Data from Interactive Map Layer on Map">
6+
<title>Interactive Map Layer</title>
7+
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
8+
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
9+
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
10+
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
11+
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
12+
<link rel="stylesheet" type="text/css" href="../template.css" />
13+
<link rel="stylesheet" type="text/css" href="demo.css" />
14+
</head>
15+
<body>
16+
<div class="page-header">
17+
<h1>Interactive Map Layer</h1>
18+
<p>Visualize Data from Interactive Map Layer on Map</p>
19+
</div>
20+
<p>This examples adds dashed lines showing the 2030 <b>Washington D.C.</b> Proposed Transit.</p>
21+
<div id="map"></div>
22+
<h3>Code</h3>
23+
<p>
24+
The example uses <code>H.service.xyz.Service</code>
25+
class to fetch data from Interactive Map Layer, and visualizes the data with customized style.</p>
26+
<script type="text/javascript" src='demo.js'></script>
27+
</body>
28+
</html>

‎transit-mapsjs-iml/demo.js‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
// Define a valid apikey for Interactive Map Layer
2+
const apikey = "wuhhFoo3HHQ8Bxw68fCZe8iA_J9v4dBnRhSbkAlMup4";
3+
// HERE platform stores data in catalogs, define Here Resource Name (HRN) of the catalog
4+
const catalogHrn = "hrn:here:data::olp-here:dh-showcase-dc-transit";
5+
// A catalog is a collection of layers that managed as a single set, define the layer that stores data
6+
const layerId = "dc-transit";
7+
8+
function overlay(map) {
9+
// Get access to Interactive Map Layer
10+
const service = platform.getXYZService({
11+
// authenticate with apiKey instead of token
12+
toBypassToken: true,
13+
// host of Interactive Map Layer
14+
host: 'interactive.data.api.platform.here.com',
15+
// path to endpoint of getting features in tile
16+
path: 'interactive/v1/catalogs/' + catalogHrn + '/layers'
17+
});
18+
19+
// create a provider for the custom user defined data
20+
const imlProvider = new H.service.xyz.Provider(service, layerId);
21+
22+
// get the style object for interactive map layer
23+
var style = imlProvider.getStyle();
24+
// query the sub-section of the style configuration
25+
var styleConfig = style.extractConfig(['xyz']);
26+
27+
// set layer with Here Resource Name (HRN)
28+
styleConfig.layers.xyz.data.layer = catalogHrn + ':' + layerId;
29+
// change the color, for the description of the style section
30+
// see the Developer's guide
31+
styleConfig.layers.xyz.lines.draw.lines.color = '#0258AE';
32+
styleConfig.layers.xyz.lines.draw.lines.dash = [1, 1];
33+
styleConfig.layers.xyz.lines.draw.lines.width = [[5, 5000], [8, 800], [10, 200], [12, 160],[14, 60], [18, 20]]
34+
35+
// merge the configuration back to the base layer configuration
36+
style.mergeConfig(styleConfig);
37+
38+
const imlLayer = new H.map.layer.TileLayer(imlProvider);
39+
// add a layer to the map
40+
map.addLayer(imlLayer);
41+
}
42+
43+
/**
44+
* Boilerplate map initialization code starts below:
45+
*/
46+
47+
// Step 1: initialize communication with the platform
48+
// In your own code, replace variable apikey with your own apikey
49+
var platform = new H.service.Platform({
50+
"apikey": apikey
51+
});
52+
var defaultLayers = platform.createDefaultLayers();
53+
54+
// Step 2: initialize a map
55+
var map = new H.Map(
56+
document.getElementById('map'),
57+
defaultLayers.vector.normal.map,
58+
{
59+
center: new H.geo.Point(38.90192, -76.97605),
60+
zoom: 12
61+
}
62+
);
63+
// add a resize listener to make sure that the map occupies the whole container
64+
window.addEventListener('resize', () => map.getViewPort().resize());
65+
66+
// Step 3: make the map interactive
67+
// MapEvents enables the event system
68+
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
69+
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
70+
71+
// Step 4: create the default UI component, for displaying bubbles
72+
var ui = H.ui.UI.createDefault(map, defaultLayers);
73+
74+
// Step 5: Main logic goes here
75+
overlay(map);

0 commit comments

Comments
 (0)