Questions tagged [harp.gl]

Harp.gl's documentation and examples are located at https://heremaps.github.io/harp.gl/.

Harp.gl supports:

• tailored map themes
• style transitions across zoom levels
• spherical and planar projections
• terrain
• addition of custom ThreeJS objects, including animated objects

Harp.gl is developed by Here.com, a company that also aggregates and serves map data, and whose main clients are automakers.

To get started:

1. Get your example token at developer.here.com
2. Replace "YOUR-XYZ-TOKEN" in the following code chunk and copy it in an empty index.html file.
3. Open the file with a browser, it should display a map:

<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
<style>
    body { padding: 0; margin: 0; overflow: hidden; }
    #map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<canvas id="map"></canvas>
<script src="https://unpkg.com/three/build/three.min.js"></script>
<script src="https://unpkg.com/@here/harp.gl/dist/harp.js"></script>
<script>
    const map = new harp.MapView({
       canvas: document.getElementById('map'),
       theme: "https://unpkg.com/@here/harp-map-theme@latest/resources/berlin_tilezen_night_reduced.json",
    });

    const omvDataSource = new harp.OmvDataSource({
       baseUrl: "https://xyz.api.here.com/tiles/herebase.02",
       apiFormat: harp.APIFormat.XYZOMV,
       styleSetName: "tilezen",
       authenticationCode: 'YOUR-XYZ-TOKEN',
    });
    map.addDataSource(omvDataSource);

    const controls = new harp.MapControls(map);
    const ui = new harp.MapControlsUI(mapControls);
    canvas.parentElement.appendChild(ui.domElement);

    const newYork = new harp.GeoCoordinates(40.707, -74.01);
    map.lookAt(newYork, 4000, 50);
</script>