Tutorial doesn't work

Question

Tutorial doesn't work

Closed this issue 4 years ago · 17 comments

Hello, Thank you for creating this wonderful app.

I wanted to use this map in a static HTML + CSS file and did a tutorial.

I added index.html and index.js in VS Code and pasted the API key. I then ran python -m SimpleHTTPServer 8888 and it doesn't work. (API key is pasted)

Specifically, when I open localhost: 8888, I see a page with just a gray background.

The console displays UncaughtReferenceError: mapView is not defined at index.js: 9.

The operating environment is Mac OS 10.15.6 and Google Chrome 86.0.4240.198.

I'm sorry if it's the problem already mentioned.

Answer 1 · 2020-11-19T06:59:48.000Z

@takuto0515 , thanks for creating the issue!

I see the problem, sorry about that!

You need to change mapView to map. I will fix the tutorial.

All the best!

Answer 2 · 2020-11-19T07:15:47.000Z

@nzjony Thank you for your reply! I succeeded in resolving the error by changing mapView to map.

But there is another problem. It looks like this:

Uncaught ReferenceError: GeoCoordinates is not defined

Is this also a related issue?

Answer 3 · 2020-11-19T07:18:21.000Z

Yes, you need to change it to harp.GeoCoordinates

I am speaking with the guy to update the tutorial so that others don't have the same issue, thanks for your help!

Answer 4 · 2020-11-19T07:36:37.000Z

@nzjony

Thank you for your prompt reply!

However, there seem to be a lot of dependencies in fixing this bug.

When I changed GeoCoordinates to harp.GeoCoordinates, I saw a panel such as a zoom button and a compass, but the console turned red.

I'm starting to wonder if you should fix this problem and wait for the tutorial to be updated.

I hope the problem is resolved !

Answer 5 · 2020-11-19T08:05:37.000Z

What issue did you have in the console?

Answer 6 · 2020-11-19T08:08:18.000Z

All going well you should see:

Answer 7 · 2020-11-19T08:09:44.000Z

const canvas = document.getElementById("map");
const map = new harp.MapView({
  canvas,
  theme:
    "https://unpkg.com/@here/harp-map-theme@latest/resources/berlin_tilezen_night_reduced.json",
});

// center the camera to New York
map.lookAt({
  target: new harp.GeoCoordinates(40.70398928, -74.01319808),
  zoomLevel: 17,
  tilt: 40,
});

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

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

const omvDataSource = new harp.OmvDataSource({
  authenticationCode: "<TOKEN>",
});
map.addDataSource(omvDataSource);

Is what I used to generate the image (you need your own token though).