import { MapControls , MapControlsUI } from "@here/harp-map-controls" ; import { CopyrightElementHandler , CopyrightInfo , MapView , TextureLoader , Tile } from "@here/harp-mapview" ; import { WebTileDataSource } from "@here/harp-webtile-datasource" ; import * as THREE from "three" ; /**
 * A simple example using the webtile data source. Tiles are generated from a
 * texture
 *
 * A [[WebTileDataSource]] is created with specified getTexture function
 * ```typescript
 * [[include:harp_gl_datasource_webtile_1.ts]]
 * ```
 * Then added to the [[MapView]]
 * ```typescript
 * [[include:harp_gl_datasource_webtile_2.ts]]
 * ```
 */ export namespace CustomTextureTileDatasourceExample { export function initializeMapView ( id ) { const canvas = document . getElementById ( id ) as HTMLCanvasElement ; const map = new MapView ( { canvas , theme : "resources/berlin_tilezen_base_globe.json" } ) ; const controls = new MapControls ( map ) ; const ui = new MapControlsUI ( controls , { zoomLevel : "input" , projectionSwitch : true } ) ; 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" ) ; function getTexture ( tile ) { return Promise . all ( [ new TextureLoader ( ) . load ( "resources/wests_textures/clover.png" ) , [ ] ] ) ; } const webTileDataSource = new WebTileDataSource ( { dataProvider : { getTexture } } ) ; mapView . addDataSource ( webTileDataSource ) ; }