import { GeoCoordinates } from "@here/harp-geoutils" ; import { MapControls , MapControlsUI } from "@here/harp-map-controls" ; import { CopyrightElementHandler , MapView } from "@here/harp-mapview" ; import { APIFormat , AuthenticationMethod , VectorTileDataSource } from "@here/harp-vectortile-datasource" ; import { apikey , copyrightInfo } from "../config" ; /**
 * This example shows how to customize builtin `Berlin` theme using [Theme] `definition` mechanism.
 *
 * > NOTE:
 * > This example focuses on [[Theme]] customization. Please refer to [[HelloWorldExample]] for
 * > introduction how to use [[MapView]]
 *
 * [Theme]s can inherit from another theme by using `extends: URL` property:
 *
 * ```typescript
 * [[include:harp_gl_hello_custom_theme_0.ts]]
 * ```
 *
 * To override features of base theme, properties must be specified as `definition` in base `Theme`
 * like this. For example, _park color_ is defined as `parkColor` definition like below:
 *
 * ```json
 * "definitions": {
 *   "parkColor": {
 *     "type": "color",
 *     "value": "#6C9478"
 *   }
 * }
 * ```
 *
 * This definition, is later used in base theme as reference to definition:
 *
 * ```json
 * "technique": "fill",
 * "attrs": {
 *   "color": {
 *     "$ref": "parkColor"
 *   },
 *   ...
 * }
 * ```
 */ export namespace HelloCustomThemeExample { document . body . innerHTML += `
    <style>
        #mapCanvas {
          top: 0;
        }
        #info{
            color: #fff;
            width: 80%;
            left: 50%;
            position: relative;
            margin: 10px 0 0 -40%;
            font-size: 15px;
        }
        @media screen and (max-width: 700px) {
            #info{
                font-size:11px;
            }
        }
    </style>
    <p id=info>This example shows the theme extension mechanism: the styles for the parks ` + `and the buildings are overwritten from an original theme to make them respectively green` + ` and brown.</p>
` ; function initializeMapView ( id ) { const canvas = document . getElementById ( id ) as HTMLCanvasElement ; const map = new MapView ( { canvas , theme : { extends : "resources/berlin_tilezen_base.json" , definitions : { parkColor : { type : "color" , value : "#00aa33" } } , styles : { tilezen : [ { id : "extrudedBuildings" , technique : "fill" , when : [ "ref" , "extrudedBuildingsCondition" ] , color : [ "ref" , "defaultBuildingColor" ] } ] } } } ) ; CopyrightElementHandler . install ( "copyrightNotice" , map ) ; const mapControls = new MapControls ( map ) ; mapControls . maxTiltAngle = 50 ; const rome = new GeoCoordinates ( 41.9005332 , 12.494249 ) ; map . lookAt ( { target : rome , zoomLevel : 16.1 , tilt : 50 , heading : 200 } ) ; map . zoomLevel = 16.1 ; const ui = new MapControlsUI ( mapControls ) ; canvas . parentElement ! . appendChild ( ui . domElement ) ; map . resize ( window . innerWidth , window . innerHeight ) ; window . addEventListener ( "resize" , ( ) => { map . resize ( window . innerWidth , window . innerHeight ) ; } ) ; addVectorTileDataSource ( map ) ; return map ; } function addVectorTileDataSource ( map ) { const omvDataSource = new VectorTileDataSource ( { baseUrl : "https://vector.hereapi.com/v2/vectortiles/base/mc" , apiFormat : APIFormat . XYZOMV , styleSetName : "tilezen" , authenticationCode : apikey , authenticationMethod : { method : AuthenticationMethod . QueryString , name : "apikey" } , copyrightInfo } ) ; map . addDataSource ( omvDataSource ) ; return map ; } initializeMapView ( "mapCanvas" ) ; }