Harp.gl

Pre-requirements

Live Demo

You can see this demo live here.

Code

You can create your demo with harp.gl either directly in TypeScript or using the JavaScript bundle. In this example, we will follow the JavaScript bundle approach. The following snippets are based on the example called hello_js-bundle.html

Make sure the right libraries are linked:


<script src="https://unpkg.com/three/build/three.min.js"></script>
<script src="https://unpkg.com/@here/harp.gl/dist/harp.js"></script>

The CSS for this example would be similar to this:

        body {
            background: #fff;
            padding: 0;
            margin: 0;
            font-weight: bold;
            overflow: hidden;
        }
        #mapCanvas {
            position: absolute;
            border: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1;
        }
        #copyrightNotice {
            position: absolute;
            right: 0;
            bottom: 0;
            background-color: #f0fef1;
            z-index: 100;
            padding: 2px 5px;
            font-family: sans-serif;
            font-size: 0.8em;
            font-weight: normal;
        }

Then, write the js code:

Bearer token
| Apikey
<body>
        <canvas id="mapCanvas"></canvas>
        <div id="app"></div>
        <div id="copyrightNotice"></div>
        <script>
            const canvas = document.getElementById("mapCanvas");

            const map = new harp.MapView({
                canvas,
                theme: "https://unpkg.com/@here/harp-map-theme@latest/resources/berlin_tilezen_day_reduced.json"
            });
            const omvDataSource = new harp.OmvDataSource({
                baseUrl: "https://vector.hereapi.com/v2/vectortiles/base/mc",
                apiFormat: harp.APIFormat.HereV1,
                styleSetName: "tilezen",
                maxZoomLevel: 17,
                authenticationMethod: AuthenticationTypeBearer,
                authenticationCode: "TOKEN_HERE",
                copyrightInfo: copyrights,
            });
            map.addDataSource(omvDataSource);
        </script>
    </body>
<body>
        <canvas id="mapCanvas"></canvas>
        <div id="app"></div>
        <div id="copyrightNotice"></div>
        <script>
            const canvas = document.getElementById("mapCanvas");

            const map = new harp.MapView({
                canvas,
                theme: "https://unpkg.com/@here/harp-map-theme@latest/resources/berlin_tilezen_base.json"
            });
            const omvDataSource = new harp.OmvDataSource({
                baseUrl: "{{book.standard.warpUrl}}{{book.standard.pathForRenderer}}",
                apiFormat: harp.APIFormat.HereV1,
                styleSetName: "tilezen",
                maxZoomLevel: 17,
                authenticationMethod: {
                    method: harp.AuthenticationMethod.QueryString,
                    name: "apikey"
                },
                authenticationCode: "APIKEY_HERE"
            });
            map.addDataSource(omvDataSource);
        </script>
    </body>

results matching ""

    No results matching ""