import { GeoCoordinates } 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" ; /**
 * A small example using the {@links SquaresTechnique} to add a pink suqare to
 * each place in the map.
 *
 * The {@links MapView} will be initialized with a theme that extends the
 * default theme with a style that overrides the places with a square
 * ```typescript
 * [[include:squares_technique_example.ts]]
 * ```
 */ export namespace SquaresTechniqueExample { function initializeMapView ( id ) { const canvas = document . getElementById ( id ) as HTMLCanvasElement ; const NY = new GeoCoordinates ( 40.707 , - 74.01 ) ; const map = new MapView ( { canvas , theme : { extends : "resources/berlin_tilezen_base.json" , styles : { tilezen : [ { layer : "places" , technique : "squares" , when : [ "==" , [ "geometry-type" ] , "Point" ] , color : "#ff00ff" , size : 500 } ] } } , target : NY , tilt : 50 , heading : - 20 , zoomLevel : 15.1 } ) ; CopyrightElementHandler . install ( "copyrightNotice" , map ) ; const mapControls = new MapControls ( map ) ; mapControls . maxTiltAngle = 50 ; const ui = new MapControlsUI ( mapControls , { zoomLevel : "input" } ) ; 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" , authenticationCode : apikey } ) ; map . addDataSource ( omvDataSource ) ; return map ; } export const mapView = initializeMapView ( "mapCanvas" ) ; }