import { sphereProjection } from "@here/harp-geoutils" ; import { MapControls , MapControlsUI } from "@here/harp-map-controls" ; import { CopyrightElementHandler , MapView } from "@here/harp-mapview" ; import { VectorTileDataSource } from "@here/harp-vectortile-datasource" ; import { apikey } from "../config" ; export namespace GlobeExample { function initializeMapView ( id ) { const canvas = document . getElementById ( id ) as HTMLCanvasElement ; const mapView = new MapView ( { canvas , projection : sphereProjection , theme : "resources/berlin_tilezen_base_globe.json" } ) ; 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 omvDataSource = new VectorTileDataSource ( { baseUrl : "https://vector.hereapi.com/v2/vectortiles/base/mc" , authenticationCode : apikey } ) ; map . addDataSource ( omvDataSource ) ; const mapControls = new MapControls ( map ) ; mapControls . maxTiltAngle = 90 ; const ui = new MapControlsUI ( mapControls , { zoomLevel : "input" } ) ; map . canvas . parentElement ! . appendChild ( ui . domElement ) ; } main ( ) ; }