@here/harp-examples
Version:
harp.gl Examples
117 lines (103 loc) • 3.89 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>harp.gl - map bundle example</title>
<style>
body {
background: #fff;
padding: 0;
margin: 0;
font-weight: bold;
overflow: hidden;
}
#mapCanvas {
position: absolute;
border: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}
#copyrightNotice {
position: absolute;
right: 0;
bottom: 0;
background-color: #f0fef1;
z-index: 100;
padding: 2px 5px;
font-family: sans-serif;
font-size: 0.8em;
font-weight: normal;
}
</style>
</head>
<body>
<canvas id="mapCanvas"></canvas>
<div id="app"></div>
<div id="copyrightNotice"></div>
<!--
These paths are to be used by clients, when using map bundle from CDN.
-->
<!--
<script src="https://unpkg.com/three/build/three.min.js"></script>
<script src="https://unpkg.com/@here/harp.gl/dist/harp.js"></script>
-->
<!--
These paths are used here to be compatible with harp.gl CI.
-->
<script src="credentials.js"></script>
<script src="three.min.js"></script>
<script src="harp.js"></script>
<script>
const canvas = document.getElementById("mapCanvas");
// Look at New York.
const NY = new harp.GeoCoordinates(40.707, -74.01);
const map = new harp.MapView({
canvas,
// This, is relative URL only to make example work in CI environment.
// Clients, may use CDN url like:
// https://unpkg.com/@here/harp-map-theme/resources/berlin_tilezen_base.json
theme: "resources/berlin_tilezen_base.json",
target: NY,
tilt: 50,
heading: -20,
zoomLevel: 16.1
});
harp.CopyrightElementHandler.install("copyrightNotice", map);
const mapControls = new harp.MapControls(map);
mapControls.maxTiltAngle = 50;
const ui = new harp.MapControlsUI(mapControls, { zoomLevel: "input" });
canvas.parentElement.appendChild(ui.domElement);
map.resize(window.innerWidth, window.innerHeight);
window.addEventListener("resize", () => {
map.resize(window.innerWidth, window.innerHeight);
});
const hereCopyrightInfo = {
id: "here.com",
year: new Date().getFullYear(),
label: "HERE",
link: "https://legal.here.com/terms"
};
const copyrights = [hereCopyrightInfo];
const omvDataSource = new harp.VectorTileDataSource({
baseUrl: "https://vector.hereapi.com/v2/vectortiles/base/mc",
apiFormat: harp.APIFormat.XYZOMV,
styleSetName: "tilezen",
authenticationCode: apikey,
authenticationMethod: {
method: harp.AuthenticationMethod.QueryString,
name: "apikey"
},
copyrightInfo: copyrights
});
map.addDataSource(omvDataSource);
</script>
</body>
</html>