Getting Started Guide is broken
Closed this issue · 9 comments
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:
- Go to https://github.com/heremaps/harp.gl/blob/master/docs/GettingStartedGuide.md#integrate
- 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.
With no errors in console.
https://developer.here.com/tutorials/harpgl/#install-harp.gl
This example is also broken:
@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 please notice that https://developer.here.com/tutorials/harpgl/#install-harp.gl also doesn't work unless Move Control related lines are removed : o
@psociety , sorry, I missed that, I didn't read your entire message. I take a look now.
@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 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
@LukeParky , thank you, see: #2343