import { Theme } from "@here/harp-datasource-protocol" ; import { ProjectionType } from "@here/harp-geoutils" ; import { MapControls , MapControlsUI } from "@here/harp-map-controls" ; import { CopyrightElementHandler , MapView } from "@here/harp-mapview" ; import { HereWebTileDataSource , WebTileDataSource } from "@here/harp-webtile-datasource" ; import { apikey } from "../config" ; const FLAT_THEME = { clearColor : "#f8fbfd" } ; const GLOBE_THEME = { clearColor : "#99ceff" , sky : { type : "cubemap" , positiveX : "./resources/Sky_px.png" , negativeX : "./resources/Sky_nx.png" , positiveY : "./resources/Sky_py.png" , negativeY : "./resources/Sky_ny.png" , positiveZ : "./resources/Sky_pz.png" , negativeZ : "./resources/Sky_nz.png" } , styles : { polar : [ { description : "North pole" , when : [ "==" , [ "get" , "kind" ] , "north_pole" ] , technique : "fill" , renderOrder : 5 , color : "#99ceff" } , { description : "South pole" , when : [ "==" , [ "get" , "kind" ] , "south_pole" ] , technique : "fill" , renderOrder : 5 , color : "#f5f8fa" } ] } } ; /**
 * A simple example using the herewebtile data source. Tiles are retrieved from
 * ```
 * https://1.base.maps.ls.hereapi.com/maptile/2.1/maptile/newest/normal.day/${level}/${column}/${row}/512/png8?apikey=${apikey}
 * ```
 *
 * A [[HereWebTileDataSource]] is created with specified applications' apikey passed
 * as [[WebTileDataSourceOptions]]
 * ```typescript
 * [[include:harp_gl_datasource_herewebtile_1.ts]]
 * ```
 * Then added to the [[MapView]]
 * ```typescript
 * [[include:harp_gl_datasource_herewebtile_2.ts]]
 * ```
 */ export namespace HereWebTileDataSourceExample { export function initializeMapView ( id ) { const canvas = document . getElementById ( id ) as HTMLCanvasElement ; const map = new MapView ( { canvas , theme : FLAT_THEME } ) ; const controls = new MapControls ( map ) ; const ui = new MapControlsUI ( controls , { zoomLevel : "input" , projectionSwitch : true } ) ; ui . projectionSwitchElement ?. addEventListener ( "click" , async ( ) => { await map . setTheme ( map . projection . type === ProjectionType . Spherical ? GLOBE_THEME : FLAT_THEME ) ; } ) ; canvas . parentElement ! . appendChild ( ui . domElement ) ; CopyrightElementHandler . install ( "copyrightNotice" , map ) ; map . resize ( window . innerWidth , window . innerHeight ) ; window . addEventListener ( "resize" , ( ) => { map . resize ( window . innerWidth , window . innerHeight ) ; } ) ; return map ; } const mapView = initializeMapView ( "mapCanvas" ) ; const hereWebTileDataSource = new HereWebTileDataSource ( { apikey , ppi : WebTileDataSource . ppiValue . ppi320 } ) ; mapView . addDataSource ( hereWebTileDataSource ) ; }