Skip to content

WEBSDK-639 Update public examples to use HARP engine #176

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 9 commits into
base: master
Choose a base branch
from
Draft

WEBSDK-639 Update public examples to use HARP engine #176

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
40bbe09
WEBSDK-639 Update public examples to use HARP engine
mandarwagh94 Sep 26, 2025
9ccb54d
Copied changes from zoomin repo
mandarwagh94 Sep 30, 2025
0d426ae
Keep original file at same location as it has been referenced in zoom…
mandarwagh94 Sep 30, 2025
3f977d6
Updated routing calls
mandarwagh94 Oct 6, 2025
5350a57
remove unpublished exampels
mandarwagh94 Oct 6, 2025
ee06b29
simplified interactive basemap example
mandarwagh94 Oct 6, 2025
8ec0949
removed dead image marker
mandarwagh94 Oct 6, 2025
7a0ef7c
fixed an issue
mandarwagh94 Oct 8, 2025
3ca6a2b
removed redundant style
mandarwagh94 Oct 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions capture-map-area/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta name="description" content="Capture an area on the map">
<title>Take a Snapshot of the Map</title>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.2/mapsjs-ui.css" />
<link rel="stylesheet" type="text/css" href="../template.css" />
<link rel="stylesheet" type="text/css" href="demo.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src='../test-credentials.js'></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-mapevents.js"></script>
</head>
<body id="capture-map-area">
<div class="page-header">
Expand Down
56 changes: 31 additions & 25 deletions capture-map-area/demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
);
}

/**
Expand All @@ -31,46 +38,45 @@ 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
// 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 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);
};
};
11 changes: 0 additions & 11 deletions change-harp-style-at-load/demo.css
View file
Open in desktop

This file was deleted.

12 changes: 0 additions & 12 deletions change-harp-style-at-load/demo.details
View file
Open in desktop

This file was deleted.

32 changes: 0 additions & 32 deletions change-harp-style-at-load/demo.html
View file
Open in desktop

This file was deleted.

39 changes: 0 additions & 39 deletions change-harp-style-at-load/demo.js
View file
Open in desktop

This file was deleted.

Empty file removed change-harp-style-at-load/styles.css
View file
Open in desktop
Empty file.
Loading