Getting Started Guide is broken

[psociety]

Describe the bug
Following "Getting Started Guide" leads to a broken example.

Info

{
  "name": "test",
  "private": true,
  "devDependencies": {
    "@here/harp-webpack-utils": "^0.26.0",
    "ts-loader": "^9.2.5",
    "typescript": "^4.3.5",
    "webpack": "^5.50.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^4.0.0"
  },
  "dependencies": {
    "@here/harp-map-theme": "^0.26.0",
    "@here/harp-mapview": "^0.26.0",
    "@here/harp-vectortile-datasource": "^0.26.0",
    "@types/box2d": "0.0.35",
    "@types/google.maps": "^3.45.6",
    "@types/leaflet": "^1.7.4",
    "@types/three": "^0.131.0",
    "leaflet": "^1.7.1",
    "three": "^0.129.0"
  }
}

To Reproduce
Steps to reproduce the behavior:

1. Go to https://github.com/heremaps/harp.gl/blob/master/docs/GettingStartedGuide.md#integrate
2. Try to follow it and get a working example.
   Example:

import {
    APIFormat,
    AuthenticationTypeMapboxV4,
    VectorDataSource
} from "@here/harp-vectortile-datasource";

const dataSource = new VectorDataSource({
    baseUrl: "https://vector.hereapi.com/v2/vectortiles/base/mc",
    authenticationCode: "YOUR-APIKEY"
});
mapView.addDataSource(dataSource);

AuthenticationTypeMapboxV4 nor VectorDataSource do actually exist.
Even if you fix that by copying other examples, no harp-gl-decoders.bundle.js is being generated despite following the guide:

 module.exports = addHarpWebpackConfig(myConfig, {
  mainEntry: "./src/index.ts",
  decoderEntry: "./src/harp-gl-decoders.js",
  htmlTemplate: "./test/index.html"
});

npx webpack doesn't explode, but doesnt create the bundle file.
three.min.js is also generated but not automatically moved to dist directory, so you end up with another 404 unless you manually copy it.

import { MapView } from "@here/harp-mapview";


const mapCanvas = document.getElementById("mapCanvas");

// @ts-ignore
const mapView = new MapView({canvas: mapCanvas,
    theme: "resources/berlin_tilezen_base.json",
    // note, this URL may vary depending on configuration of webpack
    // for this example, it is assumed that app is server from project root
    decoderUrl: "decoder.bundle.js"
    // note, this URL may vary depending on configuration of webpack
    // for this example, it is assumed that webpack emits bundles to project root
});

import { GeoCoordinates } from "@here/harp-geoutils";

// ...
mapView.camera.position.set(0, 0, 800);
mapView.geoCenter = new GeoCoordinates(40.70398928, -74.01319808, 0);
mapView.resize(mapCanvas.clientWidth, mapCanvas.clientHeight);

import * as DataSource from "@here/harp-vectortile-datasource";

const dataSource = new DataSource.VectorTileDataSource({
    baseUrl: "https://vector.hereapi.com/v2/vectortiles/base/mc",
    authenticationCode: "554y4ddddd"
});
mapView.addDataSource(dataSource);

Seems to ignore the given element as tries to setup the map over another canvas with map id.

And you also get a
Uncaught ReferenceError: THREE is not defined in http://localhost:8080/decoder.bundle.js:25447
Which i fixed manually copy &pasting three.min inside decoder.bundle.js.

At the end all i get is:

With no errors in console.

https://developer.here.com/tutorials/harpgl/#install-harp.gl
This example is also broken:

[nzjony]

@psociety , thank you for the issue and I apologise for the issues you are having.

Please use: https://developer.here.com/tutorials/harpgl

I will remove the offending items so that no one else in future has any issues, thank you!!!

[nzjony]

@psociety , please see: #2296

[psociety]

@nzjony please notice that https://developer.here.com/tutorials/harpgl/#install-harp.gl also doesn't work unless Move Control related lines are removed : o

[nzjony]

@psociety , sorry, I missed that, I didn't read your entire message. I take a look now.

[nzjony]

@psociety , the problem is with:

const mapControls = new harp.MapControls(map);

It should be

const mapControls = new harp.MapControls(mapView);

I.e. notice map is incorrect and mapView is correct.

[nzjony]

@psociety, it is now up to date. Thanks a lot!

[nzjony]

I will close @psociety , but please reopen if there is any issue I have missed.

[LukeParky]

@nzjony The GettingStartedGuide page now links to the tutorial online. On the tutorial, under the section for installing NPM the only info is a link to the GettingStartedGuide, which immediately links back to the tutorial. There is no instructions for installing via NPM anymore

[nzjony]

@LukeParky , thank you, see: #2343