Giter VIP home page Giter VIP logo

harp.gl's Introduction

HERE is stopping its engagement on Harp.gl starting 03/01/2022 in favour of a fully productised and production-grade integration of the harp.gl rendering engine into HERE Maps API for JavaScript (https://developer.here.com/develop/javascript-api) All 3D features and many more will be offered via HERE Maps API for JavaScript moving forward.

harp.gl

CI codecov twitter

harp.gl is an experimental and work in progress open-source 3D map rendering engine written in TypeScript.

harp.gl Slack channel Registration available here.

Overview

You can use this engine to:

  • Develop visually appealing 3D maps
  • Create highly animated and dynamic map visualization with WebGL, using the popular three.js library.
  • Create themeable maps, with themes that can change on the fly.
  • Create a smooth map experience with highly performant map rendering and decoding. Web workers parallelize the CPU intensive tasks, for optimal responsiveness.
  • Design your maps modularly, where you can swap out modules and data providers as required.

With that in mind, we have included some modules that let's you get started with some simple web applications that can display a map using our default style. You can get results like the one shown below:

New York City rendered with our default style

Getting started with harp.gl

There are three methods to get up and running with harp.gl quickly, in order of difficulty:

  1. Using the yeoman generator.
  2. linking a simple bundle as a <script> tag in your html
  3. installing a set of node modules from npm

If you want to learn more about the applications you can create, please check the Getting Started Guide.

Authentication

Regardless of how you structure your project, you need some means to authenticate, please see the following guide to generate a token.

About This Repository

This repository is a monorepo containing the core components of harp.gl, organized in a yarn workspace.

All components can be used stand-alone and are in the @here subdirectory.

Installation

In Node.js

All harp.gl modules are installable via yarn (or npm):

yarn add @here/harp-mapview
npm install @here/harp-mapview

In Browser

Since harp.gl consists of a set of modules, there are no ready-made bundles available. Take a look at the examples on information on how to use tools like webpack to create a bundle for the browser.

Development

Prerequisites

  • Node.js - Please see nodejs.org for installation instructions
  • Yarn - Please see yarnpkg.com for installation instructions.

Download dependencies

Run:

yarn install

to download and install all required packages and set up the yarn workspace.

Launch development server for harp.gl examples

Run:

yarn start

To launch webpack-dev-server. Open http://localhost:8080/ in your favorite browser.

Launch development server for unit tests

Run:

yarn start-tests

Open http://localhost:8080/ in your favorite browser to run the tests.

Run unit & integration tests in Browser environment

Run:

yarn run start-tests
>: Project is running at http://localhost:8080/

Note the URL and invoke tests using mocha-webdriver-runner. Example:

npx mocha-webdriver-runner http://localhost:8081/ --chrome
npx mocha-webdriver-runner http://localhost:8081/ --headless-firefox

Run performance tests in Node.js environment

As for now, there is no baseline for performance tests results, so before examining performance one have to establish baseline:

Performance test steps

  1. Establish baseline results.
$ git checkout master
PROFILEHELPER_COMMAND=baseline yarn performance-test-node # create baseline of measurements for your particular platform

Note, that performance test suite is very limited, so it is highly possible that you have to write new dedicated performance test for code that is about to be optimized. See tests/performance for examples.

  1. Go back to your branch, change stuff and

  2. Rerun tests with your changes

yarn performance-test-node --grep lines # assuming you're playing with lines
  1. Examine output:
...

performance createLineGeometry segments=2
  min=0.0014ms (-2.44% vs 0.0014ms) sum=999.16ms (0% vs 999.12ms) repeats=499568.00 (-6.47% vs 534131.00) throughput=499988.43/s (-6.47% vs 534600.13/s)
  avg=0.002ms (6.92% vs 0.0019ms) med=0.0015ms (0.2% vs 0.0015ms) med95=0.0031ms (17.6% vs 0.0026ms)
  gcTime=39.6195ms (-3.39% vs 41.011ms) sumNoGc=959.54ms (0.15% vs 958.11ms) throughputNoGc=520633.00/s (-6.61% vs 557461.83/s)

Debug Tests with VSCode

Run

   yarn test-debug

Add and start this configuration to your launch.json :

 {
            "type": "chrome",
            "request": "attach",
            "name": "Karma Tests",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/test",
            "address": "localhost",
            "port": 9333,
            "pathMapping": {
                "/": "${workspaceRoot}",
                "/base/": "${workspaceRoot}/"
            },
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*",
                "webpack:///src/*": "${webRoot}/*",
                "webpack:///*": "*",
                "webpack:///./~/*": "${webRoot}/node_modules/*",
                "meteor://app/*": "${webRoot}/*"
            }
        }

Generate documentation

Run:

yarn run typedoc

It will output all documentation under /dist/doc.

License

Copyright (C) 2017-2021 HERE Europe B.V.

See the LICENSE file in the root of this project for license details about using harp.gl.

In addition, please note that the fonts are under a different set of licenses.

For other use cases not listed in the license terms, please contact us.

harp.gl's People

Contributors

andriiheonia avatar arekspiewak1991 avatar astrak avatar atomicsulfate avatar bande-here avatar blazejkroll avatar craigberlin avatar dbacarel avatar dependabot[bot] avatar dimitryrd avatar fraukef avatar gairik avatar germanz avatar haraldf avatar keaukraine avatar kkostecki avatar mpursche avatar musculman avatar ninok avatar nzjony avatar okanishchev avatar pit-rpg avatar robertoraggi avatar sasha240100 avatar sergiikulakovskyi avatar stefandachwitz avatar tsteenbe avatar valerii-zinchenko avatar zbigg avatar zellm avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

harp.gl's Issues

Make it easier to use MapAnchors with objects that need to update.

Is your feature request related to a problem? Please describe.
See issue: #1369 Adding something to a MapAnchor requires a separate call to update the object. It should be possible to do some reflection on the objects in the MapAnchors and update them if they have this method.

Describe alternatives you've considered
The alternative is to have some sort of method:

map.addEventListener(MapViewEventNames.Render, () => { box.update(); });

Spike artifacts when zoomed out over GeoJSON datasource

When zoomed out over the attached GeoJSON data source there are spike-like artifacts everywhere.

To reproduce:

  1. Load GeoJSON data source onto then map.
  2. Zoom out high over the data source.

image

  • OS: Windows 10 (64-bit)
  • Browser: Brave Browser - Version 1.5.123 Chromium: 80.0.3987.163 (Official Build) (64-bit)
  • Version: 0.14

Here is the geojson.
countours.zip

Here is the style used.
style.txt

map.intersectMapObjects(e.pageX, e.pageY) notWork

Describe the bug
after adding litener for click to examle
map.addDataSource(featuresDataSource).then(() => { map.canvas.addEventListener("click", (e: MouseEvent) => { const intersectionResults = map.intersectMapObjects(e.pageX, e.pageY); const usableResults = intersectionResults.filter(result => result.userData !== undefined); console.log(intersectionResults, usableResults) }); });
has error in console

Tutorial is outdated. What's the new way to do things?

Hello, the docs aren't aligned with what's release. The tutorial mentions several times to use the XYZ API which is deprecated and I had no luck getting it to work.

Additionally the tutorial mentions we can do things like

    mapControls.maxPitchAngle = 90;
    mapControls.setRotation(6.3, 50);

but those APIs do not exist in the current release (TypeScript has a type error on the missing property and method).

It'd be great to keep the docs aligned with whatever is the current release, otherwise people may try to do things that simply won't work.

What should we write instead of

    mapControls.maxPitchAngle = 90;
    mapControls.setRotation(6.3, 50);

?

Android SDK

Hi Guys,

How can I add a custom map to an android project?

Is there an SDK or is only a WebView supported now?

Would really love to replace my google 3D maps with this?

Thank you.

3D city models & landmarks data

Where can I find HERE's advanced city models data? I am specifically interested in the textured buildings asset.

Is it available for public consumption?

coming-soon

Type Definition (.d.ts) for TypeScript

Is your feature request related to a problem? Please describe.
We'd like to integrate the library usage into our TypeScript project.

Describe the solution you'd like
We'd like to have a Type Definition file (.d.ts) that corresponds to the public types in the HarpGL library.

Describe alternatives you've considered
We've been developing our own but its both laborious, hard to maintain and not fully respective of the actual API as an official Type Definition.

Support terrain

Is your feature request related to a problem? Please describe.
Support terrain

Default styling for OmvDataSource

When adding a new OmvDataSource to the map, nothing will appear unless style rules are also passed with setStyleSet(). Provide default styling rules for data that does not have a style set passed.

Use case

  1. As a developer who would quickly like to visualize the shape of my data, I want harp to display my data as easily as possible. I do not care about the style or colors
  2. As a developer who is new to harp.gl and does not know about the detailed styling syntax, I would like to visualize my data as easily as possible

Benefits
Adding default styling rules removes the amount of code and understanding of harp.gl syntax required for basic visualization use cases.

Suggested implementation / example

const traffic = new OmvDataSource({
   name: "traffic",
   baseUrl: "https://xyz.api.here.com/hub/spaces/" + config.space + "/tile/web",
   apiFormat: harp.APIFormat.XYZSpace,
   authenticationCode: config.token,
});
map.addDataSource(traffic) //Nothing more!

Default styles:

  • point: 5px #48dad0 (HERE Aqua)
  • polyline: 3px #48dad0
  • polygon: 3px #48dad0 outline, #48dad0 fill w/ 0.3 opacity

[question] Making map markers

I saw the blog posts, for example, but it didn't go into much depth beyond making a geojson provider.

I'm wondering how to make and manage map markers on a global scale.

This video shows a more complicated harp.gl example, but no link to any source code example: https://www.youtube.com/watch?v=9jB-3AyqkoE

Suppose we want:

  • custom geometry for map markers
  • billboard the markers
  • clustering when zooming out
  • showing the same amount of markers at any zoom level, but which markers are shown depends on importance at that zoom level (like a regular Google Maps type of a thing).
  • tool tips for the markers showing information (images/text)
  • to manage all the markers efficiently (for example instead of creating a new GeoJsonDataProvider for every update when we want to show a new set of markers)
  • fading them in and out

Any thoughts or ideas on those points? Correct me if I'm wrong, but this stuff still needs to be implemented on top of harp.gl, and there's no such tools yet, right?

[bug] Surfaces culled although they should be in view

Describe the bug

Looks like after certain interactions with the globe, the surfaces get erroneously culled at the edges of the screen.

To Reproduce

Steps to reproduce the behavior:

  1. Zoom all the way in, out, in
  2. Eventually it happens.

Expected behavior

There should be no culling at the edge of the viewport.

Screenshots

Here's a screen recording: https://youtu.be/Bv1pBGnFvuU

In the video, as I zoom in, you can see the black space come in from the edge of viewport.

Desktop (please complete the following information):

  • OS: [e.g. iOS] - Linux
  • Browser [e.g. chrome, safari] - Firefox
  • Version [e.g. 22] -

support es module?

Is your feature request related to a problem? Please describe.

import { TextCanvas } from '@here/harp-text-canvas';
Error: 'TextCanvas' is not exported by node_modules\@here\harp-text-canvas\index.js

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

XYZSpace as data source module

New data source module for easy interaction with XYZ Space modules. To extend OmvDataSource with a few simple modifications.

Use case
As a developer, I would like to easily interact with XYZ Spaces in my harp.gl application:

  1. Add XYZ Space to harp.gl application by specifying XYZ Space parameters in constructor.
  2. Filter data in my application by employing XYZ Space's server-side filtering capabilities.

Benefits

  1. Increase advertising for XYZ Spaces within harp.gl. Separate data source module, ideally, leads to increased exposure for XYZ Space (and harp integration).
  2. Exposure of XYZ Space server-side filtering through harp.gl APIs, leading to a more simple development experience.

Suggested implementation / example
Constructor:

const myCustomTiledData = new XYZDataSource({
   name: "traffic",
   spaceId: "xyz-id-here",
   authenticationCode: "xyz-token-here",
   filters: ["height>=30", "city=Berlin"]
});

Add a filter:

myCustomTiledData.addFilter("height<40");

Remove a filter:

myCustomTiledData.removeFilter("height<40");

Get filters:

myCustomTiledData.getFilters();
//["height>=30", "city=Berlin"]

(HARP-7391)

There are two black holes in the Antarctic and the North Pole.

Describe the bug
There are two black holes in the Antarctic and the North Pole.

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

Update @here/generator-harp.gl npm package to fix mismatched map div ids in CSS and HTML

Just ran through the getting started instructions and used the npx -p yo -p @here/generator-harp.gl yo @here/harp.gl generator.

In index.html, the map ids do not match.
The CSS uses mapCanvas:

#mapCanvas {
   position: absolute;
   border: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   overflow: hidden;
    z-index: -1
}

while the html uses map:

<canvas id="map"></canvas>

This causes a map that is approximately 2x the size of the screen that is cut off. Since the body and map both have overflow: none, it is not clear what is going on, there is somewhat pixelated map and labels.

This repository's @here/generator-harp.gl appears to be updated with matching ids for the map: see file

I assume the npm packages need to be updated?

What is the correct way to manage situations where a datasource fails to connect?

Under poor network conditions attempting to add a datasource often results in the following error being returned

Failed to connect to datasource anonymous-datasource#x: Timeout exceeded when waiting for first message from worker

I would assume that removing the bad datasource and trying to add another would be the way to continue, but every time I've caused the above error to happen, every following attempt to add another datasource to replace the bad one instantly fails with the same message.

To be more exact in what I did, I used the DataSourceConnect event to tell when the error occurred and removed the bad datasource using MapView.removeDataSource(), then created a new OmvDataSource and added it using MapView.addDataSource()

I though maybe there is some kind of worker that needs to be reset when this happens, but I couldn't find anything relevant in the documentation. Any help would be appreciated, thanks

Rendering error

Describe the bug
A clear and concise description of what the bug is.

Video_2019-12-25_100242

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

Fix TomTom datasource

The TomTom API to fetch vector tiles is defined in harp-omv-datasource/OmvRestClient.ts
But it is not used in any example, mainly because they use a different scheme for they data. The current datasources we have in the examples are using HERE data that uses tilezen scheme.
The class harp-omv-datasource/OmvTomTomFeatureModifier.ts contains some no-longer-working code that tries to remap on the fly the TomTom data to a different scheme.
This ticket is to track the task to fix this so that the TomTom data is remaped to tilezen schema on-the-fly and therefore all the examples and code that exists today can be used out of the box but with a different datasource.
Of course it would need to be done in such a way that a token could be provided to be used, as there are no official public free tokens to be used with TomTom data.

How are mapAnchors positioned?

I have a question about the mapAnchor node, specifically how are they positioned? I have positioned a building on the map using the .geoPosition property and wanted to set it as the target for an orbit camera. However, I am facing an issue where getting it's position is not at the visible location of the building. I added a box helper to visualise the boundaries and in-fact the helper is showing me another location up in the sky. I feel like I am doing something wrong here.

Inkedharp-issue_LI

Here on the left you can see the building positioned on the map. And on the right you can see the box helper set to encapsulate the building.

Rendering of mapAnchors' objects "inside" 3d buildings

I'm trying to make custom added objects visible behind or when intersecting the 3d buildings meshes. Now I know they are not transparent but I don't understand how are the other map features visible behind them and custom objects not. Can anyone point me in the right direction on how to achieve this:
Annotation 2019-11-21 181518

[question] HTTP 401 error when following the examples and guides

I'm fairly certain I'm following the examples correctly, but I get 401 errors so tiles don't load.

This is my code:

    // import OmvTileDecoderService inside a web Worker with vanilla JS, thanks to
    // the JSPM ES Module CDN (https://jspm.io).
    const workerCode = `
        async function main() {
            const { OmvTileDecoderService } = (
                await import('https://dev.jspm.io/@here/harp-omv-datasource/index-worker')
            ).default

            OmvTileDecoderService.start()
        }

        main()
    `;
    const blob = new Blob([workerCode], { type: "application/javascript" });
    // const worker = new Worker(URL.createObjectURL(blob), { type: "module" });

    const canvas = document.getElementById("harpCanvas");
    const map = new MapView({
        canvas,

        // theme:
        //     "https://unpkg.com/@here/harp-map-theme@latest/resources/berlin_tilezen_night_reduced.json",
        theme:
            "https://unpkg.com/@here/[email protected]/resources/berlin_tilezen_base.json",

        decoderUrl: URL.createObjectURL(blob),

        //For tile cache optimization:
        maxVisibleDataSourceTiles: 40,
        tileCacheSize: 100
    });

    map.setCameraGeolocationAndZoom(
        new GeoCoordinates(1.278676, 103.850216),
        16
    );

    const mapControls = new MapControls(map);
    const ui = new MapControlsUI(mapControls);
    canvas.parentElement.appendChild(ui.domElement);

    mapControls.maxPitchAngle = 90;
    // mapControls.setRotation(6.3, 50);
    // mapControls.camera.rotation

    map.resize(window.innerWidth, window.innerHeight);
    window.onresize = () => map.resize(window.innerWidth, window.innerHeight);

    const omvDataSource = new OmvDataSource({
        baseUrl: "https://xyz.api.here.com/tiles/herebase.02",
        apiFormat: APIFormat.XYZOMV,
        styleSetName: "tilezen",
        authenticationCode: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
    });

    map.addDataSource(omvDataSource);

where XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX is my API key that I created by first making a new JavaScript App ID, then for that app making an API key and pasting that key in my Harp example.

Any ideas why?

Improve lookAt() method

UX improvement and duration / transition options for MapView's lookAt() method.

Use Case

  1. I would like to easily set camera options without having to remember lookAt()'s parameter order.
  2. I would like to use lookAt() with zoom level options.
  3. I would like to perform camera durations (flys) between views
  4. I would like to access the current map view's look at settings.

Requirements

  1. Prefer zoom level instead of distance for vertical camera value. Option (please comment your opinion): allow both zoom level and distance in meters? If developer passes both, default to one?
  2. Transform function parameters into single object. This is a preferable UX, as the developer doesn't have no remember which order each parameter is.
  3. Enable camera transitions. Developer can specify duration and timing functions. Normal CSS timing functions should be supported.
  4. New .getLookAt() method to return map view's look at settings. This method will return center, zoom or distance, tilt, and azimuth). Please comment with naming suggestion of this method.

Example

map.lookAt({
   center: new GeoCoordinates(47, -122),
   zoom: 13,
   tilt: 40,
   azimuth: 20,
   options: { animate: true, duration: 400, timingFunction: 'ease-in-out' }
})
map.getLookAt()
/* Returns:
{
   center: new GeoCoordinates(47, -122),
   zoom: 13,
   tilt: 40,
   azimuth: 20,
}
*/

Allow absolute URLs in OmvDataSource

Enable any absolute url to be passed in OmvDataSource. Currently, the developer is limited to a set of choices in OmvRestClient.ts
. This means that, unless the developer builds harp.gl from github source and adds their own APIFormat, harp.gl does not let you use a custom vector tile source.

Use case:
As a developer with a custom vector data source of:
https://my-base-url.com/vector-tiles/{z}/{x}/{y}.mvt

I would like to easily visualize it in harp.gl without having to modify harp.gl source code.

Requirements

  1. Pass absolute URL when creating OmvDataSource. No need to specify APIFormat.
  2. Pass query parameters in key value format. These will be appended and aded onto the url request. (optional)
  3. Pass headers to the request. These will be sent with the request

Example implementation

const vector = new OmvDataSource({
   url: "https://my-base-url.com/vector-tiles/{z}/{x}/{y}.mvt",
   styleSetName: "tilezen",
   params: {
      "apikey": "adavadv",
      "param2": "berlin"
   }
});

(HARP-7392)

Fix Mapbox datasource

The Mapbox API to fetch vector tiles is defined in harp-omv-datasource/OmvRestClient.ts
But it is not used in any example, mainly because they use a different scheme for they data. The current datasources we have in the examples are using HERE data that uses tilezen scheme.

This ticket is to track the task to fix this so that the Mapbox data is remapped to tilezen schema on-the-fly and therefore all the examples and code that exists today can be used out of the box but with a different datasource.
Of course it would need to be done in such a way that a token could be provided to be used, as there are no official public free tokens to be used with Mapbox data.

See #768 for a similar issue to fix TomTom datasource

MapView scene's up direction appears to be parallel to the map (tiles)

I've noticed that the MapView.scene is rotated perpendicular relative to the map (tiles). In a test, I positioned two cubes two units apart on the Z axis (these cubes exist in the MapView.scene). I believe the expected result here is to see two cubes parallel to the map (tiles) 2 units apart. In fact the result shows two cubes positioned two units apart going up, perpendicular to the map (tiles) .

Here I've added a grid helper & axis helper to the MapView scene
81de421bfff8d7c864c7da6bd484e0bf

Is this normal behaviour?

Support mixed level of detail (LOD)

Is your feature request related to a problem? Please describe.
Currently the whole view is filled with tiles coming from the same data-level. This leads to a lot of tiny tiles rendered at the horizon with a bad impact in performance. This also forces us to keep the horizon quite close to the camera.

Describe the solution you'd like
It should be possible to mix tiles from different data-levels in one view so that the size of the tiles on the screen are more or less equal.

Pass camera options when constructing `MapView`

Use Case
As a developer, I would like to get a map with a specific view up and running as quickly as possible. This removes the need to use map.setCameraLocationAndZoom().

Requirements
Enable center, zoom, tilt, and azimuth as MapView constructor parameters.

Example

const map = new MapView({
   canvas: document.querySelector('.map'),
   theme: "https://assets.vector.hereapi.com/styles/berlin/base/harp.gl/tilezen",
   center: new GeoCoordinates(47, -122),
   zoom: 12,
   tilt: 10,
   azimuth: 10,
});

Instructions for adding local harp.gl modules into project

I've come across a few people (including myself) asking about configuration instructions on how to use the harp.gl modules from the github source. This way one can use the most recent features committed to master, but not yet available in the npm packages. Can we add a quick guide in this repository on how to do this?

cc @tomasberkeley

Clustering

Is it possible make clustering in harp.gl like google maps or other?

ESNext support

Hi,

I would like to use harp.gl in my embedded web project. Unfortunately, the project is running on typescript transpiled to esnext as target.
This means I cannot use harp.gl at the moment.

I tried to port it but it seems to be a lot more work than expected.
Are there any plans to support it in the future or can you suggest an alternative?

I really love what you have done with this library and being able to use harp.gl would be awesome.

[feature] remove reliance on Webpack (or update docs to show how)

Is your feature request related to a problem? Please describe.

I have project that use build systems other than webpack. It'd be great if Harp wasn't coupled to Webpack (or if the docs showed how to set up plain JS projects (with ES Module format is fine as most tools handle that part).

Describe the solution you'd like

Non-webpack users would want to follow a getting started guide for plain JS. This should include how to set up the WebWorker in plain JS, etc, without relying on hidden Webpack settings to do the magic.

Describe alternatives you've considered

Additional context
Add any other context or screenshots about the feature request here.

Simplify authentication with the OmvDataSource via apikey

Is your feature request related to a problem? Please describe.
See the following comment on issue #1383: #1383 (comment)

The question is, if the api format is specified, and there is a method: getDefaultAuthMethod on the OmvRestClient which specifies which is the default authentication method, and the GettingStartGuide.md shows an example with the apikey, should this now be the default method? It would at least make the OmvDataSource easier to create.

Describe the solution you'd like
Change the getDefaultAuthMethod to return a default authentication method using the apikey.

@musculman, what do you think? Have I missed something?

Failed assertion in text rendering

Hello harp team! The current master sometimes stalls when failing an assertion:

Uncaught Error: ASSERTION failed
    at Object.assert (assert.js:24)
    at TextElementStateCache.replaceElement (TextElementStateCache.js:257)
    at TextElementGroupState.traverseVisibleElements (TextElementGroupState.js:76)
    at TextElementStateCache.update (TextElementStateCache.js:186)
    at TextElementsRenderer.placeText (TextElementsRenderer.js:306)
    at MapView.prepareRenderTextElements (MapView.js:1974)
    at MapView.render (MapView.js:1864)
    at MapView.renderFunc (MapView.js:1724)

The corresponding code in TextElementStateCache.ts is:

replaceElement(zoomLevel, elementState) {
        assert(elementState.visible);
        const cacheResult = this.findDuplicate(elementState, zoomLevel);
        if (cacheResult === undefined || cacheResult.index === -1) {
            // No replacement found;
            return;
        }
        const replacement = cacheResult.entries[cacheResult.index];
        assert(!replacement.visible); // This is the assertion that sometimes fails.
        replacement.replace(elementState);
    }

Beyond the actual problem in the text rendering process, does the condition need an assertion that stops the app? Couldn't it just skip the following line instead?

why does not work on github pages

I uploaded it to github pages but the map is not coming. There are appear only keys.

1

Github pages are not running Python. Can problem relevant it?
thanks in advance.

When zooming in or out, it isn't clear if anything is loading.

Is your feature request related to a problem? Please describe.

When zooming in or out, especially on low bandwidth internet, the old tiles disappear, and there is some time until the new tiles are loaded.

During this time, the whole screen is blank, and it isn't apparent if anything is happening.

Describe the solution you'd like

Maybe the map should show a loading animation, or some placeholder tiles, or keep the old tiles in place until the new ones load (like Google Maps and Mapbox do).

In Google Maps, for example, when you zoom in or out, you still see the old content in place. If you continue to zoom in or out, you get immediate response even if the new content is not loaded yet.

With harp.gl, when the screen is empty (after a zoom), if we try to zoom or pan some more, we can not tell that anything is happening because even the old content is gone so we can not see the old content being animated.

For reference, here are two videos. In both of them, I do the exact same user interaction. I'll start with the Google Maps video first to clearly show what I will do:

gmaps

As you can see, I jiggle the zoom after zooming out, to show that I can still perceive my interaction with the map.

Now with harp.gl, I will zoom and then jiggle, but it will seem like nothing happens until finally content loads:

harpgl

Time dynamic data?

Hi! I am currently using Cesium on a project but have been running into some limitations when trying to visualize large quantities of polygons over time. Harp has peaked my interest as it appears it may be able to handle such a use-case.

With that said, I was curious if harp supports a similar concept to Cesium's time-dynamic functionality.

https://cesium.com/blog/2018/03/21/czml-time-animation/

If not, would you have a recommendation on how this may be accomplished using harp?

Thanks!

Question: Render harp.gl earth in a-frame or threejs.

Hello!
Very awesome project!! I really like it!

I have been trying to get the globe of harp.gl and use it in a-frame (is also using threejs).
Part of the project I am prototyping is a webvr with a globe with markers on it.

So far I found the threejs objects in mapView.worldRootObject. I saw a really big number for the size (something like 30000). I tried importing it into a a-frame component. Sort of works but I never see any object, but in the inspector it shows up.

I am wondering what I should do to import it into a-frame.

If this question is out of scope I would understand.
Thank you

3D mode can change the angle of view

Is your feature request related to a problem? Please describe.
3D Earth mode can change the angle of view

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.