Skip to content

Commit 8000c44

Browse files
greenred123greenred123
committed
update to js 3.1
Signed-off-by: Langford, Chloe <[email protected]>
1 parent 962a080 commit 8000c44

File tree

108 files changed

+1838
-801
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

108 files changed

+1838
-801
lines changed

‎README.md

+1-3
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22

33
This repository holds a series of JavaScript based examples using the **HERE Maps API for JavaScript**. More information about the API can be found on [developer.here.com](https://developer.here.com/javascript-apis/) under the JavaScript APIs section.
44

5-
This set of self-contained, use-case based examples is designed to be cloned by developers for their own use.
6-
7-
> **Note:** In order to get the sample code to work, you **must** replace all instances of `window.app_id` and `window.app_code` within the code and use your own **HERE** credentials.
5+
> **Note:** In order to get the sample code to work, you **must** replace all instances of `window.apikey` within the code and use your own **HERE** credentials.
86
97
> You can obtain a set of credentials from the [Plans Page](https://developer.here.com/plans) on developer.here.com.
108

‎capture-map-area/demo.html

+6-7
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,15 @@
55
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
66
<meta name="description" content="Capture an area on the map">
77
<title>Take a Snapshot of the Map</title>
8-
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css" />
8+
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
99
<link rel="stylesheet" type="text/css" href="../template.css" />
1010
<link rel="stylesheet" type="text/css" href="demo.css" />
1111
<link rel="stylesheet" type="text/css" href="styles.css" />
12-
<script type="text/javascript" src='../test-credentials.js'></script>
13-
14-
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
15-
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
16-
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
17-
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
12+
<script type="text/javascript" src='../test-credentials.js'></script>
13+
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
14+
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
15+
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
16+
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
1817
</head>
1918
<body id="capture-map-area">
2019
<div class="page-header">

‎capture-map-area/demo.js

+3-9
Original file line numberDiff line numberDiff line change
@@ -21,26 +21,20 @@ function capture(resultContainer, map, ui) {
2121
}, [ui], 50, 50, 500, 200);
2222
}
2323

24-
25-
2624
/**
2725
* Boilerplate map initialization code starts below:
2826
*/
2927
// Step 1: initialize communication with the platform
30-
// In your own code, replace window.app_id with your own app_id
31-
// and window.app_code with your own app_code
28+
// In your own code, replace variable window.apikey with your own apikey
3229
var platform = new H.service.Platform({
33-
app_id: window.app_id,
34-
app_code: window.app_code,
35-
useHTTPS: true,
36-
useCIT: true
30+
apikey: window.apikey
3731
});
3832
var defaultLayers = platform.createDefaultLayers();
3933

4034
var mapContainer = document.getElementById('map');
4135

4236
// Step 2: initialize a map
43-
var map = new H.Map(mapContainer, defaultLayers.normal.map, {
37+
var map = new H.Map(mapContainer, defaultLayers.vector.normal.map, {
4438
// initial center and zoom level of the map
4539
zoom: 16,
4640
// Champs-Elysees

‎change-style-at-runtime/demo.css

+11
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+
}

‎change-style-at-runtime/demo.details

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
name: Change map style at runtime
3+
description: Change a style of the map feature when map is instantiated
4+
resources:
5+
- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/master/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+
...

‎change-style-at-runtime/demo.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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>Change map style at runtime</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-ui.js"></script>
15+
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
16+
</head>
17+
<body id="markers-on-the-map">
18+
<div class="page-header">
19+
<h1>Change map style at runtime</h1>
20+
<p>Change a style of the map feature when map is instantiated</p>
21+
</div>
22+
<p>This example shows how to change map feature style during the map runtime. The map is loaded with the default "normal.map" style, after that
23+
the color of the features "landuse.park" and "landuse.builtup" is changed to the dark green and the dark grey accordingly.
24+
</p>
25+
<div id="map"></div>
26+
<h3>Code</h3>
27+
<p>The code below adds a <codeph>change</codeph> event listener to the instence of the <code>H.map.Style</code> associated with the
28+
layer's provider. Within this listener the section of the map style is extracted and modified and merged back to the original style.
29+
That results in the changed colors for the "landuse.park" and "landuse.builtup" map features.
30+
</p>
31+
<script type="text/javascript" src='demo.js'></script>
32+
</body>
33+
</html>

‎change-style-at-runtime/demo.js

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
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 changeFeatureStyle(map){
8+
// get the vector provider from the base layer
9+
var provider = map.getBaseLayer().getProvider();
10+
11+
// get the style object for the base layer
12+
var parkStyle = provider.getStyle();
13+
14+
var changeListener = (evt) => {
15+
if (parkStyle.getState() === H.map.Style.State.READY) {
16+
parkStyle.removeEventListener('change', changeListener);
17+
18+
// query the sub-section of the style configuration
19+
// the call removes the subsection from the original configuration
20+
var parkConfig = parkStyle.extractConfig(['landuse.park', 'landuse.builtup']);
21+
// change the color, for the description of the style section
22+
// see the Developer's guide
23+
parkConfig.layers.landuse.park.draw.polygons.color = '#2ba815'
24+
parkConfig.layers.landuse.builtup.draw.polygons.color = '#676d67'
25+
26+
// merge the configuration back to the base layer configuration
27+
parkStyle.mergeConfig(parkConfig);
28+
}
29+
};
30+
31+
parkStyle.addEventListener('change', changeListener);
32+
}
33+
34+
/**
35+
* Boilerplate map initialization code starts below:
36+
*/
37+
38+
//Step 1: initialize communication with the platform
39+
// In your own code, replace variable window.apikey with your own apikey
40+
41+
var platform = new H.service.Platform({
42+
apikey: window.apikey
43+
});
44+
var pixelRatio = window.devicePixelRatio || 1;
45+
var defaultLayers = platform.createDefaultLayers({
46+
tileSize: pixelRatio === 1 ? 256 : 512,
47+
ppi: pixelRatio === 1 ? undefined : 320
48+
});
49+
50+
//Step 2: initialize a map
51+
var map = new H.Map(document.getElementById('map'),
52+
defaultLayers.vector.normal.map, {
53+
center: {lat: 52.51477270923461, lng: 13.39846691425174},
54+
zoom: 13,
55+
pixelRatio: pixelRatio
56+
});
57+
// add a resize listener to make sure that the map occupies the whole container
58+
window.addEventListener('resize', () => map.getViewPort().resize());
59+
60+
//Step 3: make the map interactive
61+
// MapEvents enables the event system
62+
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
63+
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
64+
65+
// Create the default UI components
66+
var ui = H.ui.UI.createDefault(map, defaultLayers);
67+
68+
// Now use the map as required...
69+
changeFeatureStyle(map);

‎change-style-at-runtime/styles.css

Whitespace-only changes.

‎circle-on-the-map/demo.html

+6-7
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,15 @@
44
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
55
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
66
<title>Circle on the Map</title>
7-
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css" />
7+
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
88
<link rel="stylesheet" type="text/css" href="demo.css" />
99
<link rel="stylesheet" type="text/css" href="styles.css" />
1010
<link rel="stylesheet" type="text/css" href="../template.css" />
11-
<script type="text/javascript" src='../test-credentials.js'></script>
12-
13-
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
14-
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
15-
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
16-
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
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-ui.js"></script>
15+
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
1716
</head>
1817
<body id="markers-on-the-map">
1918
<div class="page-header">

‎circle-on-the-map/demo.js

+5-7
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,11 @@ function addCircleToMap(map){
2727
/**
2828
* Boilerplate map initialization code starts below:
2929
*/
30-
// Step 1: initialize communication with the platform
31-
// In your own code, replace window.app_id with your own app_id
32-
// and window.app_code with your own app_code
30+
31+
//Step 1: initialize communication with the platform
32+
// In your own code, replace variable window.apikey with your own apikey
3333
var platform = new H.service.Platform({
34-
app_id: window.app_id,
35-
app_code: window.app_code,
36-
useHTTPS: true
34+
apikey: window.apikey
3735
});
3836
var pixelRatio = window.devicePixelRatio || 1;
3937
var defaultLayers = platform.createDefaultLayers({
@@ -43,7 +41,7 @@ var defaultLayers = platform.createDefaultLayers({
4341

4442
//Step 2: initialize a map - this map is centered over New Delhi
4543
var map = new H.Map(document.getElementById('map'),
46-
defaultLayers.normal.map,{
44+
defaultLayers.vector.normal.map, {
4745
center: {lat:28.6071, lng:77.2127},
4846
zoom: 13,
4947
pixelRatio: pixelRatio

‎context_menu/demo.css

+11
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+
}

‎context_menu/demo.details

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
name: Context Menu
3+
description: Adding a context menu to map objects
4+
resources:
5+
- https://raw.githubusercontent.com/heremaps/maps-api-for-javascript-examples/master/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+
...

‎context_menu/demo.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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+
7+
<title>Context menu</title>
8+
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
9+
<link rel="stylesheet" type="text/css" href="demo.css" />
10+
<link rel="stylesheet" type="text/css" href="styles.css" />
11+
<link rel="stylesheet" type="text/css" href="../template.css" />
12+
<script type="text/javascript" src='../test-credentials.js'></script>
13+
<script type="text/javascript" src='../js-examples-rendering-helpers/iframe-height.js'></script>
14+
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
15+
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
16+
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
17+
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
18+
</head>
19+
<body id="markers-on-the-map">
20+
<div class="page-header">
21+
<h1>Context menu</h1>
22+
<p>Adding a context menu to map objects</p>
23+
</div>
24+
<p>This example shows how to add a context menu for the map and map objects. Map has a default context items to show the click position, centring the map and creating a circle. Circles have their own context menu item to remove them.
25+
</p>
26+
<div id="map"></div>
27+
<h3>Code</h3>
28+
<p>In order to add context menu items, first you need to subscribe to contextmenu event. ContextMenuEvent has a special items property, where menu items are stored. Each menu item is an instance of H.util.ContextItem class.
29+
</p>
30+
<p>By default new menu items does not replace the previous ones, instead all items are collected and displayed together. However you can easily modify the items array to change this behaviour. </p>
31+
<p>Context items can be visually separated from each other by using the H.util.ContextItem.SEPARATOR.
32+
</p>
33+
<script type="text/javascript" src='demo.js'></script>
34+
</body>
35+
</html>

0 commit comments

Comments
 (0)