@here/harp-examples

Overview

This repository contains examples for harp.gl. You can find all of these examples live on the harp.gl site. Just navigate to it and click on examples.

Building and running

You can build and run the examples running the following commands from the root path of the project:

yarn install
yarn run build
yarn start

Open http://localhost:8080 in a web browser to try the examples.

Examples

We can group the examples by several categories, looking at what kind of features and capabilities they showcase.

Getting Started

1. The modular hello world example that displays a map in an HTML element with our default map style and default data source, using NPM packages.
2. The HTML hello world example similar to the former but showing how to use harp in an HTML page with inline JS scripts.
3. Globe projection shows the setup to use a globe projection.
4. Camera with free movement, that demonstrates how the camera works in harp.gl.
5. Orbit camera, showcases the lookAt method and how to use it to orbit around a point.
6. Themes examples features the various themes open sourced with Harp.

Data sources

1. OMV Data with our default map style.
2. Webtiles with the mercator projection and with globe.
3. Satellite tiles using the webtile-datasource, along with a globe version.
4. OSM MVT Data with our default map style.
5. User based map features (lines and points) using the featuresDataSource. Polygons are also demonstrated here
6. Advanced custom data source demonstrating the implementation of a custom data source that uses the harp.gl styling engine, offloads CPU intense work to web-workers and uses three.js to create objects.

Rendering

1. Playground for the post effects.
2. Additional themes and post effects configuration files, showcasing available setups for fancier renderings.

Styling

1. Style interpolations depending on the zoom level.
2. Textured areas.

three.js

1. Add a ThreeJS object shows how to add a custom object to the map.
2. Integrate a ThreeJS animation.
3. Raycast into map scene that shows how to raycast into the scene and add points at the intersected locations.

Others

1. A GeoJSON viewer allows to view and edit GeoJSON with the FeaturesDataSource.
2. Elevation provider shows how to handle scene height given a user input.
3. Showcase of the dynamic text rendering capabilities of our text rendering library.
4. Display three map views, side by side, in which we show the a map with three different styles at the same time, using OMV Data.