diff --git a/@here/harp-examples/src/markers_screen-anchor.ts b/@here/harp-examples/src/markers_screen-anchor.ts
index 944e37334e..4e899e0a1d 100644
--- a/@here/harp-examples/src/markers_screen-anchor.ts
+++ b/@here/harp-examples/src/markers_screen-anchor.ts
@@ -13,11 +13,28 @@ import THREE = require("three");
import { apikey } from "../config";
export namespace GeoToScreenExample {
+ document.body.innerHTML += `
+
+ `;
const BERLIN = new GeoCoordinates(52.5186234, 13.373993);
const geoPosition = {
- lat: BERLIN.lat,
- lng: BERLIN.lng,
- alt: BERLIN.altitude ?? 0
+ latitude: BERLIN.lat,
+ longitude: BERLIN.lng,
+ altitude: BERLIN.altitude ?? 0
};
// Create a new MapView for the HTMLCanvasElement of the given id.
@@ -58,9 +75,9 @@ export namespace GeoToScreenExample {
function addGuiElements() {
const gui = new GUI({ width: 300 });
- gui.add(geoPosition, "lat").step(0.0001).onChange(updateAnchors);
- gui.add(geoPosition, "lng").step(0.0001).onChange(updateAnchors);
- gui.add(geoPosition, "alt").step(0.0001).onChange(updateAnchors);
+ gui.add(geoPosition, "latitude").step(0.0001).onChange(updateAnchors);
+ gui.add(geoPosition, "longitude").step(0.0001).onChange(updateAnchors);
+ gui.add(geoPosition, "altitude").step(0.0001).onChange(updateAnchors);
gui.add(mapView, "tileWrappingEnabled").onChange((value: boolean) => {
mapView.tileWrappingEnabled = value;
});
@@ -105,20 +122,14 @@ export namespace GeoToScreenExample {
}
}
function updateMapAnchor() {
- if (mapAnchor !== undefined && mapAnchor.geoPosition !== undefined) {
+ if (mapAnchor !== undefined && mapAnchor.anchor !== undefined) {
const scaleFactor = mapView.targetDistance / 10000;
if (mapAnchor.scale.x !== scaleFactor) {
mapAnchor.scale.set(scaleFactor, scaleFactor, scaleFactor);
mapView.update();
}
- if (
- mapAnchor.geoPosition.latitude !== geoPosition.lat ||
- mapAnchor.geoPosition.longitude !== geoPosition.lng ||
- mapAnchor.geoPosition.altitude !== geoPosition.alt
- ) {
- mapAnchor.geoPosition.latitude = geoPosition.lat;
- mapAnchor.geoPosition.longitude = geoPosition.lng;
- mapAnchor.geoPosition.altitude = geoPosition.alt;
+ if (!(mapAnchor.anchor as GeoCoordinates).equals(geoPosition)) {
+ mapAnchor.anchor = GeoCoordinates.fromObject(geoPosition);
mapView.update();
}
}
@@ -127,9 +138,9 @@ export namespace GeoToScreenExample {
function updateAnchors() {
gui.updateDisplay();
const screenpos = mapView.getScreenPosition({
- latitude: geoPosition.lat,
- longitude: geoPosition.lng,
- altitude: geoPosition.alt
+ latitude: geoPosition.latitude,
+ longitude: geoPosition.longitude,
+ altitude: geoPosition.altitude
});
updateScreenAnchor(screenpos);
updateScreenAnchorValues(screenpos);
@@ -141,7 +152,7 @@ export namespace GeoToScreenExample {
new THREE.BoxBufferGeometry(100, 100, 100),
new THREE.MeshBasicMaterial({ color: "green" })
) as MapAnchor;
- mapAnchor.geoPosition = BERLIN;
+ mapAnchor.anchor = BERLIN;
mapAnchor.overlay = true;
mapAnchor.renderOrder = Number.MAX_SAFE_INTEGER;
mapView.mapAnchors.add(mapAnchor);
@@ -152,6 +163,7 @@ export namespace GeoToScreenExample {
const screenAnchor = document.createElement("div");
screenAnchor.id = "screenAnchor";
screenAnchor.style.position = "absolute";
+ screenAnchor.style.zIndex = "-1"; // move it below GUI controls
screenAnchor.style.backgroundColor = "red";
screenAnchor.style.width = "10px";
screenAnchor.style.height = "10px";
@@ -162,19 +174,18 @@ export namespace GeoToScreenExample {
function addInfoMessage() {
const message = document.createElement("div");
+ message.className = "message";
message.innerHTML = `
-
This example shows how MapView.getScreenPosition works for various cases
-
the red square is painted on the screen in screen coordinates, whereas the green cube
-
lives in the world.
-
Use the arrow keys or the gui to change the geoPosition
-
Jump to next worlds with "j" and "l"
- `;
- message.style.position = "absolute";
- message.style.cssFloat = "right";
- message.style.top = "10px";
- message.style.left = "100px";
- message.style.textAlign = "left";
- message.style.textShadow = "0px 0px 2px gray";
+
+ This example shows how MapView.getScreenPosition works for various cases + the red square is painted on the screen in screen coordinates, whereas the green cube + lives in the world. +
++ Use the arrow keys or the GUI to change the position. + Jump to next worlds with "j" and "l" +
+ `; document.body.appendChild(message); } @@ -209,16 +220,16 @@ export namespace GeoToScreenExample { const step = 1 / Math.pow(mapView.zoomLevel, 2); switch (direction) { case "ArrowLeft": - geoPosition.lng -= step; + geoPosition.longitude -= step; break; case "ArrowRight": - geoPosition.lng += step; + geoPosition.longitude += step; break; case "ArrowUp": - geoPosition.lat += step; + geoPosition.latitude += step; break; case "ArrowDown": - geoPosition.lat -= step; + geoPosition.latitude -= step; break; default: stopAnchorUpdate();