Announcements

Introducing harp.gl – 3D Vector Maps for the Web

By Dylan Babbs | 21 June 2019

When we build products at HERE, we don't want to just provide you with advanced tools, but also let you make them your own. Today we’re excited to launch the beta release of harp.gl, a new open source 3D web map renderer. harp.gl is a full-fledged vector map renderer built on the latest web technologies. Combining harp.gl's immersive visuals with industry-grade HERE map data will give you the best location visualization experience on the web.

Why harp.gl?

At HERE, we work with a wide variety of data sources and types, many of which include 3D elements. Building products like high-definition maps with lane-level detail and venue maps with multiple levels requires advanced visualization tools to help accelerate the development process. In addition, we wanted to build a tool on a technology that many of our internal teams could adopt. For this reason, we chose the web as our platform.

Key principles

harp.gl was developed with three key principles in mind:

  • web first
  • open source
  • flexibility

Web first

Building harp.gl from the ground, we wanted to take advantage of the latest and greatest capabilities of modern browsers. harp.gl was written with web technologies such as WebGL, three.js, and TypeScript. WebGL enables us to draw geometries with blazing fast speed on the GPU, delivering an efficient and smooth rendering experience. We decided to use three.js as a base and added mapping specific capabilities on top of it. harp.gl supports any standard three.js APIs. TypeScript gives us the extra support needed around strong typing and additional compilation checks.

Open Source

It goes without saying that the best software gets developed when the engineering team has a direct connection to the customer. Being open source, harp.gl is developed with transparency to the community. Become part of the conversation and interact with the developers by opening an issue or creating a pull request on GitHub.

Flexibility

One of the design goals of harp.gl was a flexible architecture to support a wide variety of use cases. Although we offer best in class location content, harp.gl does not limit you to using only HERE data sources. harp.gl works with several data providers such as Mapbox, Nextzen, or any other vector tile service.

However, the flexibility isn't just with data providers. In addition to vector tiles, harp.gl can work with multiple data types. Enhance your map with static GeoJSON, raster tiles, three.js objects, or any custom source by writing a few lines of code.

Features

3D

Don't limit yourself to 2.5D and extruded polygons. harp.gl can render true 3d objects, including advanced textures and geometries.

three.js user? You can interact with the harp.gl API the same way as you would with three.js. Just assign the object a position with coordinates to add it to the map.

Below, an animating three.js object imported from a fbx file.

 

threed

 

Camera Options

Start with the standard top-down view or customize the map's tilt and angle to create realistic POV views. harp.gl's camera angle can be set between 0 and 90 degrees.

With harp.gl's camera animations, fly between cities or perform slow rotating pans to create a cinematic experience.

 

camera

 

Map Projections

When it comes to map projections, choose between the standard mercator projection or the realistic spherical earth.

The spherical earth bypasses the distortion and scaling problems arising from projecting the earth onto a plane and displays a 3D globe.

 

globe

 

Custom styles

As a vector renderer, harp.gl gives you the options to customize any and all map features with a styling language. Apply your brand's look and feel to the map or simply have fun creating some ludicrous themes.

Screen Shot 2019-06-21 at 9.17.26 PM

 

Getting started with harp.gl

You can add harp.gl to your app in two different ways:

  • a set of TypeScript node modules, allowing you to pick and choose the exact components you need for you application
  • a simple JavaScript bundle api that can be imported into your html page with a script tag

Here’s how to get started with the simple api:


<html>
   <head>
      <style>
         body, html { border: 0; margin: 0; padding: 0 }
         #map { height: 100vh; width: 100vw; }
      </style>
      <script src="https://unpkg.com/three/build/three.min.js"></script>
      <script src="https://unpkg.com/@here/harp.gl/dist/harp.js"></script>
   </head>
   <body>
      <canvas id="map"></canvas>
      <script src="index.js"></script>
   </body>
</html>

Inside your JavaScript file, you initialize the map and then add the base map:


const map = new harp.MapView({
   canvas: document.getElementById('map'),
   theme: "https://unpkg.com/@here/harp-map-theme@latest/resources/berlin_tilezen_night_reduced.json",
});
map.setCameraGeolocationAndZoom(new harp.GeoCoordinates(1.278676, 103.850216),16);
const mapControls = new harp.MapControls(map);
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);

What's coming next?

Expect plenty of new features and releases from harp.gl in the upcoming months. Some of the new features we're particularly excited about:

  • 3D city models & landmarks: easily import HERE's advanced city models as a data source
  • 3D terrain: Visualize the real earth surface instead of the sea-level surface to better understand where your data is located
  • Advanced post-processing: take harp.gl cinematic effects to a whole new level with-post processing effects such as depth of field and screen space ambient occlusion

coming-soon

Additional resources

We encourage you to give harp.gl a try. Make something cool with harp.gl? Share your maps with us on Twitter by tagging @heredev.