import { GeoCoordinates } from "@here/harp-geoutils" ; import { MapControls , MapControlsUI } from "@here/harp-map-controls" ; import { CopyrightElementHandler , MapView } from "@here/harp-mapview" ; import { APIFormat , AuthenticationMethod , GeoJsonDataProvider , VectorTileDataSource } from "@here/harp-vectortile-datasource" ; import { apikey , copyrightInfo } from "../config" ; /**
 * This examples is a stress-test of tiled GeoJson perfomance, which consist of rendering 10000
 * [[TextElement]]s read from GeoJson on top of [[MapView]].
 */ export namespace TiledGeoJsonPointExample { document . body . innerHTML += `
        <style>
            #mapCanvas {
              top: 0;
            }
        </style>
    ` ; const imageString = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiIHZlcnNpb249IjEuMSIgaWQ9Imx1aS1pY29uLWRlc3RpbmF0aW9ucGluLW9uZGFyay1zb2xpZC1sYXJnZSIKCSB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4IDQ4IgoJIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDQ4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0ibHVpLWljb24tZGVzdGluYXRpb25waW4tb25kYXJrLXNvbGlkLWxhcmdlLWJvdW5kaW5nLWJveCIgb3BhY2l0eT0iMCI+CgkJPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTQ3LDF2NDZIMVYxSDQ3IE00OCwwSDB2NDhoNDhWMEw0OCwweiIvPgoJPC9nPgoJPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNmZmZmZmYiIGQ9Ik0yNCwyQzEzLjg3MDgsMiw1LjY2NjcsMTAuMTU4NCw1LjY2NjcsMjAuMjIzMwoJCWMwLDUuMDMyNSwyLjA1MzMsOS41ODg0LDUuMzcxNywxMi44ODgzTDI0LDQ2bDEyLjk2MTctMTIuODg4M2MzLjMxODMtMy4zLDUuMzcxNy03Ljg1NTgsNS4zNzE3LTEyLjg4ODMKCQlDNDIuMzMzMywxMC4xNTg0LDM0LjEyOTIsMiwyNCwyeiBNMjQsMjVjLTIuNzY1LDAtNS0yLjIzNS01LTVzMi4yMzUtNSw1LTVzNSwyLjIzNSw1LDVTMjYuNzY1LDI1LDI0LDI1eiIvPgo8L2c+Cjwvc3ZnPgo=" ; const mapView = initializeMapView ( "mapCanvas" ) ; const omvDataSource = new VectorTileDataSource ( { baseUrl : "https://vector.hereapi.com/v2/vectortiles/base/mc" , apiFormat : APIFormat . XYZOMV , styleSetName : "tilezen" , maxDataLevel : 17 , authenticationCode : apikey , authenticationMethod : { method : AuthenticationMethod . QueryString , name : "apikey" } , copyrightInfo } ) ; mapView . addDataSource ( omvDataSource ) ; /**
     * Creates a new MapView for the HTMLCanvasElement of the given id.
     */ function initializeMapView ( id ) { const canvas = document . getElementById ( id ) as HTMLCanvasElement ; const map = new MapView ( { canvas , theme : { extends : "resources/berlin_tilezen_night_reduced.json" , styles : { geojson : [ { when : [ "==" , [ "geometry-type" ] , "Point" ] , technique : "labeled-icon" , text : [ "get" , "text" ] , priority : 10000 , size : 14 , imageTexture : "custom-icon" , screenHeight : 32 , iconScale : 0.5 , distanceScale : 1 , iconYOffset : 20 } ] } , images : { "custom-icon" : { url : imageString , preload : true } } , imageTextures : [ { name : "custom-icon" , image : "custom-icon" } ] } , target : new GeoCoordinates ( 41.9028 , 12.4964 ) , zoomLevel : 5.5 } ) ; CopyrightElementHandler . install ( "copyrightNotice" ) . attach ( map ) ; const controls = new MapControls ( map ) ; const ui = new MapControlsUI ( controls , { projectionSwitch : true } ) ; canvas . parentElement ! . appendChild ( ui . domElement ) ; window . addEventListener ( "resize" , ( ) => { map . resize ( window . innerWidth , window . innerHeight ) ; } ) ; const geoJsonDataProvider = new GeoJsonDataProvider ( "points" , new URL ( "resources/points.json" , window . location . href ) ) ; const geoJsonDataSource = new VectorTileDataSource ( { dataProvider : geoJsonDataProvider , name : "geojson" , styleSetName : "geojson" , addGroundPlane : false } ) ; map . addDataSource ( geoJsonDataSource ) ; map . update ( ) ; return map ; } }