This repository contains examples for
You can find all of these examples live on the harp.gl site. Just navigate to it and click on
Building and running
You can build and run the examples running the following commands from the root path of the project:
yarn installyarn run buildyarn start
http://localhost:8080 in a web browser to try the examples.
We can group the examples by several categories, looking at what kind of features and capabilities they showcase.
- 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.
- The HTML hello world example similar to the former but showing how to use harp in an HTML page with inline JS scripts.
- Globe projection shows the setup to use a globe projection.
- Camera with free movement, that demonstrates how the camera works in
- Orbit camera, showcases the
lookAtmethod and how to use it to orbit around a point.
- Themes examples features the various themes open sourced with Harp.
- OMV Data with our default map style.
- Webtiles with the mercator projection and with globe.
- Satellite tiles using the webtile-datasource, along with a globe version.
- OSM MVT Data with our default map style.
- User based map features (lines and points) using the featuresDataSource. Polygons are also demonstrated here
- 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.
- Playground for the post effects.
- Additional themes and post effects configuration files, showcasing available setups for fancier renderings.
- Add a ThreeJS object shows how to add a custom object to the map.
- Integrate a ThreeJS animation.
- Raycast into map scene that shows how to raycast into the scene and add points at the intersected locations.
- A GeoJSON viewer allows to view and edit
- Elevation provider shows how to handle scene height given a user input.
- Showcase of the dynamic text rendering capabilities of our text rendering library.
- 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.