Introducing – 3D Vector Maps for the Web

By Dylan Babbs | 21 June 2019

Try HERE Maps

Create a free API key to build location-aware apps and services.

Get Started

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, a new open source 3D web map renderer. is a full-fledged vector map renderer built on the latest web technologies. Combining's immersive visuals with industry-grade HERE map data will give you the best location visualization experience on the web.


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 was developed with three key principles in mind:

  • web first
  • open source
  • flexibility

Web first

Building from the ground, we wanted to take advantage of the latest and greatest capabilities of modern browsers. 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. 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, 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.


One of the design goals of was a flexible architecture to support a wide variety of use cases. Although we offer best in class location content, does not limit you to using only HERE data sources. 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, 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.



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

three.js user? You can interact with the 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.




Camera Options

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

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




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.




Custom styles

As a vector renderer, 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

You can add 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:

         body, html { border: 0; margin: 0; padding: 0 }
         #map { height: 100vh; width: 100vw; }
      <script src=""></script>
      <script src=""></script>
      <canvas id="map"></canvas>
      <script src="index.js"></script>

You can get set up your XYZ token here or if you already have xyz cli installed you can generate your token using here xyz token and then inside your JavaScript file, you initialize the map and then add the base map:

const map = new harp.MapView({
   canvas: document.getElementById('map'),
   theme: "",
map.setCameraGeolocationAndZoom(new harp.GeoCoordinates(1.278676, 103.850216),16);
const mapControls = new harp.MapControls(map);
const omvDataSource = new harp.OmvDataSource({
   baseUrl: "",
   apiFormat: harp.APIFormat.XYZOMV,
   styleSetName: "tilezen",
   authenticationCode: 'YOUR-XYZ-TOKEN',

What's coming next?

Expect plenty of new features and releases from 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 cinematic effects to a whole new level with-post processing effects such as depth of field and screen space ambient occlusion


Additional resources

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