diff --git a/README.md b/README.md
index 0459604..d65bea5 100644
--- a/README.md
+++ b/README.md
@@ -11,13 +11,14 @@ See the [LICENSE](LICENSE) file in the root of this project for license details.
## Maps API for JavaScript
-All of the following examples use **version 3.1** of the API
+All of the following examples use **version 3.2** of the API
* [Adding an Overlay to the Map](https://heremaps.github.io/maps-api-for-javascript-examples/custom-tile-overlay/demo.html) - Display custom map tiles as an overlay
* [Animated Markers](https://heremaps.github.io/maps-api-for-javascript-examples/markers-update-position-with-animation/demo.html) - Update marker position with animation
* [Calculating a Location from a Mouse Click](https://heremaps.github.io/maps-api-for-javascript-examples/position-on-mouse-click/demo.html) - Obtain the latitude and longitude of a location within the map
* [Changing from the Metric System](https://heremaps.github.io/maps-api-for-javascript-examples/map-scale-bar-changing-from-the-metric-system/demo.html) - Display a map including a scale bar in miles or yards
* [Circle on the Map](https://heremaps.github.io/maps-api-for-javascript-examples/circle-on-the-map/demo.html) - Display a map highlighting a circular region
+* [Context Menu](https://heremaps.github.io/maps-api-for-javascript-examples/context-menu/demo.html) - Adding a context menu to map objects
* [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
* [DOM Marker rotation](https://heremaps.github.io/maps-api-for-javascript-examples/dom-marker-rotation/demo.html) - Rotate DOM Marker's content using CSS
* [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
@@ -62,7 +63,6 @@ All of the following examples use **version 3.1** of the API
* [Search for a Location based on an Address](https://heremaps.github.io/maps-api-for-javascript-examples/geocode-a-location-from-address/demo.html) - Request a location using a free-form text input and display it on the map.
* [Search for a Location given a Structured Address](https://heremaps.github.io/maps-api-for-javascript-examples/geocode-a-location-from-structured-address/demo.html) - Request a location from a structured address and display it on the map.
* [Search for the Address of a Known Location](https://heremaps.github.io/maps-api-for-javascript-examples/reverse-geocode-an-address-from-location/demo.html) - Request address details for a given location and display it on the map.
-* [Set a map style at the load time](https://heremaps.github.io/maps-api-for-javascript-examples/change-style-at-load/demo.html) - Set a style of the whole map during the map instantiation
* [Set a map style exported from the HERE Style Editor](https://heremaps.github.io/maps-api-for-javascript-examples/change-harp-style-at-load/demo.html) - Set a style exported from the [HERE Style Editor](https://platform.here.com/style-editor) during the map instantiation
* [Synchronising Two Maps](https://heremaps.github.io/maps-api-for-javascript-examples/synchronising-two-maps/demo.html) - Synchronise a static map with an interactive map
* [Take a Snapshot of the Map](https://heremaps.github.io/maps-api-for-javascript-examples/capture-map-area/demo.html) - Capture an area on the map
diff --git a/capture-map-area/demo.html b/capture-map-area/demo.html
index fd42cf0..a5dfda8 100644
--- a/capture-map-area/demo.html
+++ b/capture-map-area/demo.html
@@ -5,15 +5,15 @@
Take a Snapshot of the Map
-
+
-
-
-
-
+
+
+
+
diff --git a/capture-map-area/demo.js b/capture-map-area/demo.js
index ea71428..5a0a497 100644
--- a/capture-map-area/demo.js
+++ b/capture-map-area/demo.js
@@ -9,16 +9,23 @@ function capture(resultContainer, map, ui) {
// Capturing area of the map is asynchronous, callback function receives HTML5 canvas
// element with desired map area rendered on it.
// We also pass an H.ui.UI reference in order to see the ScaleBar in the output.
- // If dimensions are omitted, whole veiw port will be captured
- map.capture(function(canvas) {
- if (canvas) {
- resultContainer.innerHTML = '';
- resultContainer.appendChild(canvas);
- } else {
- // For example when map is in Panorama mode
- resultContainer.innerHTML = 'Capturing is not supported';
- }
- }, [ui], 50, 50, 500, 200);
+ // If dimensions are omitted, whole view port will be captured
+ map.capture(
+ function (canvas) {
+ if (canvas) {
+ resultContainer.innerHTML = "";
+ resultContainer.appendChild(canvas);
+ } else {
+ // For example when map is in Panorama mode
+ resultContainer.innerHTML = "Capturing is not supported";
+ }
+ },
+ [ui],
+ 50,
+ 50,
+ 500,
+ 200
+ );
}
/**
@@ -31,18 +38,18 @@ var platform = new H.service.Platform({
});
var defaultLayers = platform.createDefaultLayers();
-var mapContainer = document.getElementById('map');
+var mapContainer = document.getElementById("map");
// Step 2: initialize a map
var map = new H.Map(mapContainer, defaultLayers.vector.normal.map, {
// initial center and zoom level of the map
zoom: 16,
// Champs-Elysees
- center: {lat: 48.869145, lng: 2.314298},
- pixelRatio: window.devicePixelRatio || 1
+ center: { lat: 48.869145, lng: 2.314298 },
+ pixelRatio: window.devicePixelRatio || 1,
});
// add a resize listener to make sure that the map occupies the whole container
-window.addEventListener('resize', () => map.getViewPort().resize());
+window.addEventListener("resize", () => map.getViewPort().resize());
// Step 3: make the map interactive
// MapEvents enables the event system
@@ -50,27 +57,26 @@ window.addEventListener('resize', () => map.getViewPort().resize());
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Step 4: Create the default UI
-var ui = H.ui.UI.createDefault(map, defaultLayers, 'en-US');
-
+var ui = H.ui.UI.createDefault(map, defaultLayers, "en-US");
// Step 6: Create "Capture" button and place for showing the captured area
-var resultContainer = document.getElementById('panel');
+var resultContainer = document.getElementById("panel");
// Create container for the "Capture" button
-var containerNode = document.createElement('div');
-containerNode.className = 'btn-group';
+var containerNode = document.createElement("div");
+containerNode.className = "btn-group";
// Create the "Capture" button
-var captureBtn = document.createElement('input');
-captureBtn.value = 'Capture';
-captureBtn.type = 'button';
-captureBtn.className = 'btn btn-sm btn-default';
+var captureBtn = document.createElement("input");
+captureBtn.value = "Capture";
+captureBtn.type = "button";
+captureBtn.className = "btn btn-sm btn-default";
// Add both button and container to the DOM
containerNode.appendChild(captureBtn);
mapContainer.appendChild(containerNode);
// Step 7: Handle capture button click event
-captureBtn.onclick = function() {
+captureBtn.onclick = function () {
capture(resultContainer, map, ui);
-};
\ No newline at end of file
+};
diff --git a/change-harp-style-at-load/demo.html b/change-harp-style-at-load/demo.html
index f6673c4..4ee669b 100644
--- a/change-harp-style-at-load/demo.html
+++ b/change-harp-style-at-load/demo.html
@@ -4,16 +4,16 @@
Set a map style exported from the HERE Style Editor
-
+
-
-
-
-
-
+
+
+
+
+
Set a style of the whole map during the map instantiation
-
-
This example shows how to set a map style during the map loading. The vector layer uses the 'normal.day' style by default, the style
- can be changed to the user defined while the map is loading.
-
-
-
Code
-
The code below created a new H.map.Style instance that loads and parses the user's style 'dark.yaml'. After that
- the style is set on the current vector provider.
-
-
-
-
diff --git a/change-style-at-load/demo.js b/change-style-at-load/demo.js
deleted file mode 100644
index 81f47af..0000000
--- a/change-style-at-load/demo.js
+++ /dev/null
@@ -1,46 +0,0 @@
-
-/**
- * @param {H.Map} map A HERE Map instance within the application
- */
-function setStyle(map){
- // get the vector provider from the base layer
- var provider = map.getBaseLayer().getProvider();
- // Create the style object from the YAML configuration.
- // First argument is the style path and the second is the base URL to use for
- // resolving relative URLs in the style like textures, fonts.
- // all referenced resources relative to the base path https://js.api.here.com/v3/3.1/styles/omv.
- var style = new H.map.Style('https://heremaps.github.io/maps-api-for-javascript-examples/change-style-at-load/data/dark.yaml',
- 'https://js.api.here.com/v3/3.1/styles/omv/');
- // set the style on the existing layer
- provider.setStyle(style);
-}
-
-/**
- * Boilerplate map initialization code starts below:
- */
-
-//Step 1: initialize communication with the platform
-// In your own code, replace variable window.apikey with your own apikey
-
-var platform = new H.service.Platform({
- apikey: window.apikey
-});
-var defaultLayers = platform.createDefaultLayers();
-
-//Step 2: initialize a map
-var map = new H.Map(document.getElementById('map'),
- defaultLayers.vector.normal.map, {
- center: {lat: 52.51477270923461, lng: 13.39846691425174},
- zoom: 13,
- pixelRatio: window.devicePixelRatio || 1
-});
-// add a resize listener to make sure that the map occupies the whole container
-window.addEventListener('resize', () => map.getViewPort().resize());
-
-//Step 3: make the map interactive
-// MapEvents enables the event system
-// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
-var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
-
-// Now use the map as required...
-setStyle(map);
diff --git a/change-style-at-load/styles.css b/change-style-at-load/styles.css
deleted file mode 100644
index e69de29..0000000
diff --git a/change-style-at-runtime/demo.css b/change-style-at-runtime/demo.css
deleted file mode 100644
index 15af666..0000000
--- a/change-style-at-runtime/demo.css
+++ /dev/null
@@ -1,11 +0,0 @@
-
-#map {
- width: 95%;
- height: 450px;
- background: grey;
-}
-
-#panel {
- width: 100%;
- height: 400px;
-}
\ No newline at end of file
diff --git a/change-style-at-runtime/demo.details b/change-style-at-runtime/demo.details
deleted file mode 100644
index 6ad8f52..0000000
--- a/change-style-at-runtime/demo.details
+++ /dev/null
@@ -1,12 +0,0 @@
----
- name: Change map style at runtime
- description: Change a style of the map feature when map is instantiated
- resources:
- - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js
- normalize_css: no
- dtd: html 5
- wrap: d
- panel_html: 0
- panel_js: 0
- panel_css: 0
-...
\ No newline at end of file
diff --git a/change-style-at-runtime/demo.html b/change-style-at-runtime/demo.html
deleted file mode 100644
index 99249be..0000000
--- a/change-style-at-runtime/demo.html
+++ /dev/null
@@ -1,33 +0,0 @@
-
-
-
-
-
- Change map style at runtime
-
-
-
-
-
-
-
-
-
-
-
-
-
Change map style at runtime
-
Change a style of the map feature when map is instantiated
-
-
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
- the color of the features "landuse.park" and "landuse.builtup" is changed to the dark green and the dark grey accordingly.
-
-
-
Code
-
The code below adds a change event listener to the instence of the H.map.Style associated with the
- layer's provider. Within this listener the section of the map style is extracted and modified and merged back to the original style.
- That results in the changed colors for the "landuse.park" and "landuse.builtup" map features.
-
-
-
-
diff --git a/change-style-at-runtime/demo.js b/change-style-at-runtime/demo.js
deleted file mode 100644
index 2f93d15..0000000
--- a/change-style-at-runtime/demo.js
+++ /dev/null
@@ -1,65 +0,0 @@
-
-/**
- * The function add the "change" event listener to the map's style
- * and modifies colors of the map features within that listener.
- * @param {H.Map} map A HERE Map instance within the application
- */
-function changeFeatureStyle(map){
- // get the vector provider from the base layer
- var provider = map.getBaseLayer().getProvider();
-
- // get the style object for the base layer
- var parkStyle = provider.getStyle();
-
- var changeListener = (evt) => {
- if (parkStyle.getState() === H.map.Style.State.READY) {
- parkStyle.removeEventListener('change', changeListener);
-
- // query the sub-section of the style configuration
- // the call removes the subsection from the original configuration
- var parkConfig = parkStyle.extractConfig(['landuse.park', 'landuse.builtup']);
- // change the color, for the description of the style section
- // see the Developer's guide
- parkConfig.layers.landuse.park.draw.polygons.color = '#2ba815'
- parkConfig.layers.landuse.builtup.draw.polygons.color = '#676d67'
-
- // merge the configuration back to the base layer configuration
- parkStyle.mergeConfig(parkConfig);
- }
- };
-
- parkStyle.addEventListener('change', changeListener);
-}
-
-/**
- * Boilerplate map initialization code starts below:
- */
-
-//Step 1: initialize communication with the platform
-// In your own code, replace variable window.apikey with your own apikey
-
-var platform = new H.service.Platform({
- apikey: window.apikey
-});
-var defaultLayers = platform.createDefaultLayers();
-
-//Step 2: initialize a map
-var map = new H.Map(document.getElementById('map'),
- defaultLayers.vector.normal.map, {
- center: {lat: 52.51477270923461, lng: 13.39846691425174},
- zoom: 13,
- pixelRatio: window.devicePixelRatio || 1
-});
-// add a resize listener to make sure that the map occupies the whole container
-window.addEventListener('resize', () => map.getViewPort().resize());
-
-//Step 3: make the map interactive
-// MapEvents enables the event system
-// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
-var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
-
-// Create the default UI components
-var ui = H.ui.UI.createDefault(map, defaultLayers);
-
-// Now use the map as required...
-changeFeatureStyle(map);
\ No newline at end of file
diff --git a/change-style-at-runtime/styles.css b/change-style-at-runtime/styles.css
deleted file mode 100644
index e69de29..0000000
diff --git a/circle-on-the-map/demo.html b/circle-on-the-map/demo.html
index 285e8d3..68ed0d3 100644
--- a/circle-on-the-map/demo.html
+++ b/circle-on-the-map/demo.html
@@ -4,15 +4,15 @@
Circle on the Map
-
+
-
-
-
-
+
+
+
+
diff --git a/circle-on-the-map/demo.js b/circle-on-the-map/demo.js
index 7d44aa3..e0b4ff0 100644
--- a/circle-on-the-map/demo.js
+++ b/circle-on-the-map/demo.js
@@ -1,29 +1,3 @@
-
-/**
- * Adds a circle over New Delhi with a radius of 1000 metres onto the map
- *
- * @param {H.Map} map A HERE Map instance within the application
- */
-function addCircleToMap(map){
- map.addObject(new H.map.Circle(
- // The central point of the circle
- {lat:28.6071, lng:77.2127},
- // The radius of the circle in meters
- 1000,
- {
- style: {
- strokeColor: 'rgba(55, 85, 170, 0.6)', // Color of the perimeter
- lineWidth: 2,
- fillColor: 'rgba(0, 128, 0, 0.7)' // Color of the circle
- }
- }
- ));
-}
-
-
-
-
-
/**
* Boilerplate map initialization code starts below:
*/
@@ -36,14 +10,17 @@ var platform = new H.service.Platform({
var defaultLayers = platform.createDefaultLayers();
//Step 2: initialize a map - this map is centered over New Delhi
-var map = new H.Map(document.getElementById('map'),
- defaultLayers.vector.normal.map, {
- center: {lat:28.6071, lng:77.2127},
- zoom: 13,
- pixelRatio: window.devicePixelRatio || 1
-});
+var map = new H.Map(
+ document.getElementById("map"),
+ defaultLayers.vector.normal.map,
+ {
+ center: { lat: 28.6071, lng: 77.2127 },
+ zoom: 13,
+ pixelRatio: window.devicePixelRatio || 1,
+ }
+);
// add a resize listener to make sure that the map occupies the whole container
-window.addEventListener('resize', () => map.getViewPort().resize());
+window.addEventListener("resize", () => map.getViewPort().resize());
//Step 3: make the map interactive
// MapEvents enables the event system
@@ -54,4 +31,27 @@ var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
// Now use the map as required...
-addCircleToMap(map);
\ No newline at end of file
+addCircleToMap(map);
+
+/**
+ * Adds a circle over New Delhi with a radius of 1000 metres onto the map
+ *
+ * @param {H.Map} map A HERE Map instance within the application
+ */
+function addCircleToMap(map) {
+ map.addObject(
+ new H.map.Circle(
+ // The central point of the circle
+ { lat: 28.6071, lng: 77.2127 },
+ // The radius of the circle in meters
+ 1000,
+ {
+ style: {
+ strokeColor: "rgba(55, 85, 170, 0.6)", // Color of the perimeter
+ lineWidth: 2,
+ fillColor: "rgba(0, 128, 0, 0.7)", // Color of the circle
+ },
+ }
+ )
+ );
+}
diff --git a/context-menu/demo.html b/context-menu/demo.html
index ea2c1e9..85feae3 100644
--- a/context-menu/demo.html
+++ b/context-menu/demo.html
@@ -5,16 +5,15 @@
Context menu
-
+
-
-
-
-
-
+
+
+
+
diff --git a/context-menu/demo.js b/context-menu/demo.js
index 2d3ad2c..726fe7d 100644
--- a/context-menu/demo.js
+++ b/context-menu/demo.js
@@ -1,3 +1,36 @@
+/**
+ * Boilerplate map initialization code starts below:
+ */
+
+// Step 1: initialize communication with the platform
+var platform = new H.service.Platform({
+ apikey: window.apikey
+});
+var defaultLayers = platform.createDefaultLayers();
+
+// Step 2: initialize a map
+var map = new H.Map(
+ document.getElementById("map"),
+ defaultLayers.vector.normal.map,
+ {
+ center: { lat: 52.55006203880433, lng: 13.27548854220585 },
+ zoom: 9,
+ pixelRatio: window.devicePixelRatio || 1,
+ }
+);
+
+// Step 3: make the map interactive
+// MapEvents enables the event system. Without it "contextmenu" event will not be triggered
+// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
+var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
+
+// Step 4: create default UI with layers provided by the platform.
+// Without this step a default context menu ui component will not be displayed.
+var ui = H.ui.UI.createDefault(map, defaultLayers);
+
+// Step 5: main logic
+addContextMenus(map);
+
/**
* Adds context menus for the map and the created objects.
* Context menu items can be different depending on the target.
@@ -50,7 +83,7 @@ function addContextMenus(map) {
map.setCenter(coord, true);
}
}),
- // It is possible to add a seperator between items in order to logically group them.
+ // It is possible to add a separator between items in order to logically group them.
H.util.ContextItem.SEPARATOR,
// This menu item will add a new circle to the map
new H.util.ContextItem({
@@ -62,36 +95,5 @@ function addContextMenus(map) {
})
);
}
-
});
-}
-
-
-/**
- * Boilerplate map initialization code starts below:
- */
-
-// Step 1: initialize communication with the platform
-var platform = new H.service.Platform({
- apikey: apikey
-});
-var defaultLayers = platform.createDefaultLayers();
-
-// Step 2: initialize a map
-var map = new H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, {
- center: { lat: 52.55006203880433, lng: 13.27548854220585 },
- zoom: 9,
- pixelRatio: window.devicePixelRatio || 1
-});
-
-// Step 3: make the map interactive
-// MapEvents enables the event system. Without it "contextmenu" event will not be triggered
-// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
-var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
-
-// Step 4: create default UI with layers provided by the platform.
-// Without this step a default context menu ui component will not be displayed.
-var ui = H.ui.UI.createDefault(map, defaultLayers);
-
-// Step 5: main logic
-addContextMenus(map);
+}
\ No newline at end of file
diff --git a/custom-cluster-theme/demo.html b/custom-cluster-theme/demo.html
index c237a9b..d8fd8e5 100644
--- a/custom-cluster-theme/demo.html
+++ b/custom-cluster-theme/demo.html
@@ -4,16 +4,16 @@
Marker Clustering with Custom Theme
-
+
-
-
-
-
-
+
+
+
+
+