JS Bundle containing all the functionality needed to render a map with harp.gl

Usage no npm install needed!

<script type="module">
  import hereHarpGl from 'https://cdn.skypack.dev/@here/harp.gl';




This is convienience module that provides harp.gl as JS-friendly bundle, with whole harp.gl API exposed in harp namespace.

Usage example with unpkg.com CDN:

<script src="https://unpkg.com/three/build/three.min.js"></script>
<!-- harp.gl bundle requires specific threejs version to be already loaded in runtime -->
<script src="https://unpkg.com/@here/harp.gl/dist/harp.js"></script>
<!-- latest version of harp.gl bundle -->
    const canvas = document.getElementById("mapCanvas");

    const map = new harp.MapView({

This snippets loads all required scripts and creates MapView with theme loaded from unpkg.com CDN.


@here/harp.gl provides following bundles:

Technical notes

  • harp.js bundle depends on Three.JS being already loaded in Javascript Runtime.
  • harp.gl uses Web Workers from harp-decoders.js to offload CPU intensive work from main thread (in particular for OmvDataSource and GeoJsonDataProvider. Web Workers.
  • For convienience harp.gl detects URL from which is loaded and by default detects location of harp-decoders.js which is distributed together. That may cause problems with same-origin policy that mandates that Web Workers can be loaded only from same origin that main page. To overcome this issue, we attempt to load harp-decoders.js by converting it to Blob. This requires, that CSP policy of your page allows loading workers from blob: URLs.


  • harp.js: Unable to determine location of three(.min).js

    As noted above, harp.gl tries to find URL of three.js so URL can loaded in web-workers. If for some reason you don't have three.js script in your DOM, you can tell harp.gl where to find like this:

    harp.WorkerLoader.dependencyUrlMapping.three = "https://unpkg.com/three/build/three.min.js";
  • Refused to create a worker from 'blob:http://...' because it violates the following Content Security Policy ...

    As noted above, if harp.js and harp-decoders.js is loaded from other domain (like CDN), we try to load script into Blob and then execute worker from blob-url. For this mechanism to work, your CSP policy for worker-src and/or child-src should allow blob: origin. blob: origin is enabled by default, but if for some reason it's not the case, you can re-enable it with following snippet:

    <meta http-equiv="Content-Security-Policy" content="worker-src 'self' blob:" />

    If for some reason, you cannot change CSP policy of your app to allow blob: worker-source, you have to load harp-decoders.js (and possibly harp.js) from same origin as your main page.

More info