This repository has been archived by the owner on Mar 8, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 196
/
getting-started_globe-projection.ts
67 lines (52 loc) · 2.17 KB
/
getting-started_globe-projection.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
/*
* Copyright (C) 2017-2019 HERE Europe B.V.
* Licensed under Apache 2.0, see full license in LICENSE
* SPDX-License-Identifier: Apache-2.0
*/
import { GeoCoordinates, sphereProjection } from "@here/harp-geoutils";
import { MapControls, MapControlsUI } from "@here/harp-map-controls";
import { CopyrightElementHandler, CopyrightInfo, MapView } from "@here/harp-mapview";
import { APIFormat, OmvDataSource } from "@here/harp-omv-datasource";
import { accessToken } from "../config";
export namespace GlobeExample {
// Create a new MapView for the HTMLCanvasElement of the given id.
function initializeMapView(id: string): MapView {
const canvas = document.getElementById(id) as HTMLCanvasElement;
const mapView = new MapView({
canvas,
theme: "resources/berlin_tilezen_base_globe.json",
maxVisibleDataSourceTiles: 360,
projection: sphereProjection
});
CopyrightElementHandler.install("copyrightNotice", mapView);
mapView.resize(window.innerWidth, window.innerHeight);
window.addEventListener("resize", () => {
mapView.resize(window.innerWidth, window.innerHeight);
});
return mapView;
}
function main() {
const map = initializeMapView("mapCanvas");
const hereCopyrightInfo: CopyrightInfo = {
id: "here.com",
year: new Date().getFullYear(),
label: "HERE",
link: "https://legal.here.com/terms"
};
const copyrights: CopyrightInfo[] = [hereCopyrightInfo];
const omvDataSource = new OmvDataSource({
baseUrl: "https://xyz.api.here.com/tiles/herebase.02",
apiFormat: APIFormat.XYZOMV,
styleSetName: "tilezen",
maxZoomLevel: 17,
authenticationCode: accessToken,
copyrightInfo: copyrights
});
map.addDataSource(omvDataSource);
const mapControls = new MapControls(map);
const ui = new MapControlsUI(mapControls);
map.canvas.parentElement!.appendChild(ui.domElement);
map.setCameraGeolocationAndZoom(new GeoCoordinates(40.6935, -74.009), 4);
}
main();
}