Skip to content

Commit aa768c8

Browse files
author
Konstantin Plotnikov
committed
Added Interleave Layers example
Signed-off-by: Konstantin Plotnikov <[email protected]>
1 parent 949522d commit aa768c8

File tree

7 files changed

+156
-18
lines changed

7 files changed

+156
-18
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ All of the following examples use **version 3.1** of the API
2222
* [Extruded geoshapes](https://heremaps.github.io/maps-api-for-javascript-examples/extruded-objects/demo.html) - 3D extrusion of the geo shapes
2323
* [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
2424
* [Image overlay](https://heremaps.github.io/maps-api-for-javascript-examples/image-overlay/demo.html) - Display an animated weather radar
25+
* [Interleave vector and object layers](https://heremaps.github.io/maps-api-for-javascript-examples/interleave-layers/demo.html) - Display an object under the buildings
2526
* [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
2627
* [Map Objects Events](https://heremaps.github.io/maps-api-for-javascript-examples/map-object-events-displayed/demo.html) - Handle events on various map objects
2728
* [Map at a specified location](https://heremaps.github.io/maps-api-for-javascript-examples/map-at-specified-location/demo.html) - Display a map at a specified location and zoom level

‎interleave-layers/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+
}

‎interleave-layers/demo.details‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
name: Interleave vector and object layers"
3+
description: Insert an object layer between the two vector layers
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+
...

‎interleave-layers/demo.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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+
<title>Interleave vector and object layers</title>
7+
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
8+
<link rel="stylesheet" type="text/css" href="demo.css" />
9+
<link rel="stylesheet" type="text/css" href="styles.css" />
10+
<link rel="stylesheet" type="text/css" href="../template.css" />
11+
<script type="text/javascript" src='../test-credentials.js'></script>
12+
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
13+
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
14+
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
15+
</head>
16+
<body id="markers-on-the-map">
17+
<div class="page-header">
18+
<h1>Interleave vector and object layers</h1>
19+
<p>Insert an object layer between the two vector layers</p>
20+
</div>
21+
<p>This example shows how to interleave an object layer and the vector layer. It is possible to do it dynamically during the map runtime.
22+
The map is loaded with the deefault vector layer, after that the layer is split into two and the new object layer is inserted between them.
23+
</p>
24+
<div id="map"></div>
25+
<h3>Code</h3>
26+
<p>The code below extracts the <code>buildings</code> configuration from the base layer. After that it creates a new <code>object</code> and <code>vector</code> layers
27+
that are added sequentially to the map's layer collection. The layers are rendered in the order they are added and the default object layer remained
28+
on top of the layers collection.
29+
</p>
30+
<script type="text/javascript" src='demo.js'></script>
31+
</body>
32+
</html>

‎interleave-layers/demo.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
2+
/**
3+
* The function add the "change" event listener to the map's style
4+
* and modifies colors of the map features within that listener.
5+
* @param {H.Map} map A HERE Map instance within the application
6+
*/
7+
function interleave(map){
8+
var provider = map.getBaseLayer().getProvider();
9+
10+
// get the style object for the base layer
11+
var style = provider.getStyle();
12+
13+
var changeListener = () => {
14+
if (style.getState() === H.map.Style.State.READY) {
15+
style.removeEventListener('change', changeListener);
16+
17+
// create a provider and a layer that are placed under the buildings layer
18+
objectProvider = new H.map.provider.LocalObjectProvider();
19+
objectLayer = new H.map.layer.ObjectLayer(objectProvider);
20+
// add a circle to this provider the circle will appear under the buildings
21+
objectProvider.getRootGroup().addObject(new H.map.Circle(map.getCenter(), 500));
22+
// add the layer to the map
23+
map.addLayer(objectLayer);
24+
25+
// extract buildings from the base layer config
26+
// in order to inspect the config calling style.getConfig()
27+
buildings = new H.map.Style(style.extractConfig('buildings'));
28+
// create the new layer for the buildings
29+
buildingsLayer = platform.getOMVService().createLayer(buildings);
30+
// add the layer to the map
31+
map.addLayer(buildingsLayer);
32+
33+
// the default object layer and its objects will remain on top of the buildings layer
34+
map.addObject(new H.map.Marker(map.getCenter()));
35+
}
36+
}
37+
38+
style.addEventListener('change', changeListener);
39+
}
40+
41+
/**
42+
* Boilerplate map initialization code starts below:
43+
*/
44+
45+
//Step 1: initialize communication with the platform
46+
// In your own code, replace variable window.apikey with your own apikey
47+
var platform = new H.service.Platform({
48+
apikey: window.apikey
49+
});
50+
var defaultLayers = platform.createDefaultLayers();
51+
52+
//Step 2: initialize a map
53+
var map = new H.Map(document.getElementById('map'),
54+
defaultLayers.vector.normal.map, {
55+
center: {lat: 52.51477270923461, lng: 13.39846691425174},
56+
zoom: 16,
57+
pixelRatio: window.devicePixelRatio || 1
58+
});
59+
map.getViewModel().setLookAtData({tilt: 45});
60+
61+
// add a resize listener to make sure that the map occupies the whole container
62+
window.addEventListener('resize', () => map.getViewPort().resize());
63+
64+
//Step 3: make the map interactive
65+
// MapEvents enables the event system
66+
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
67+
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
68+
69+
// Now use the map as required...
70+
interleave(map);

‎interleave-layers/styles.css‎

Whitespace-only changes.

‎meta.json‎

Lines changed: 30 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -23,24 +23,6 @@
2323
"shortDescription": "Display a map at a specified location and zoom level",
2424
"published": true
2525
},
26-
{
27-
"uid": "change-style-at-runtime",
28-
"title": "Change map style at runtime",
29-
"shortDescription": "Change a style of the map feature when map is instantiated",
30-
"published": true
31-
},
32-
{
33-
"uid": "change-style-at-load",
34-
"title": "Set a map style at the load time",
35-
"shortDescription": "Set a style of the whole map during the map instantiation",
36-
"published": true
37-
},
38-
{
39-
"uid": "interactive-basemap",
40-
"title": "Interactive base map",
41-
"shortDescription": "Retrieve information associated with the map features",
42-
"published": true
43-
},
4426
{
4527
"uid": "tilted-map-bounds",
4628
"title": "View bounds of the tilted map",
@@ -122,6 +104,36 @@
122104

123105
]
124106
},
107+
{
108+
"uid": "styles",
109+
"title": "Styles and Layers",
110+
"examples": [
111+
{
112+
"uid": "change-style-at-runtime",
113+
"title": "Change map style at runtime",
114+
"shortDescription": "Change a style of the map feature when map is instantiated",
115+
"published": true
116+
},
117+
{
118+
"uid": "change-style-at-load",
119+
"title": "Set a map style at the load time",
120+
"shortDescription": "Set a style of the whole map during the map instantiation",
121+
"published": true
122+
},
123+
{
124+
"uid": "interactive-basemap",
125+
"title": "Interactive base map",
126+
"shortDescription": "Retrieve information associated with the map features",
127+
"published": true
128+
},
129+
{
130+
"uid": "interleave-layers",
131+
"title": "Interleave vector and object layers",
132+
"shortDescription": "Insert an object layer between the two vector layers",
133+
"published": true
134+
}
135+
]
136+
},
125137
{
126138
"uid": "markers",
127139
"title": "Markers",

0 commit comments

Comments
 (0)