focusOnLocation doesn't work in some locations.

[wwajerowicz]

Describe the bug
In some locations, when using focusOnLocation, the camera is placed in correct position, but is facing away from the location.

To Reproduce
In the Overlay editor, enter the following geojson:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "color": "white",
        "padding": 10,
        "name": "Example",
        "background": "green",
        "icon": "star"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          21.884765625,
          53.01
        ]
      }
    }
  ]
}

Expected behavior
Camera should point towards the location. It works for this example:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "color": "white",
        "padding": 10,
        "name": "Example",
        "background": "green",
        "icon": "star"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          21.884765625,
          53.0
        ]
      }
    }
  ]
}

The only difference between those two examples is the latitude (53.0N vs 53.01N).

Desktop (please complete the following information):

• OS: Mac OS catalina
• Browser: Chrome, Safari, Firefox

[wwajerowicz]

I've looked a bit more it more into this issue and I think that it's not directly related to the point being 53N. It seems that there are other locations where it happends.
It seems that the point in the issue description ([21.884765625, 53.0]) is just a point where the issue starts. The further north the marker is moved, the further away from the marker the camera is place(still facing the opposite direction.)
At [21.884765625, 53.3], the camera is so far away that it's not possible to see the marker by rotating the camera.
Another point where I found the issue happen is [4.55, 44.01 ]. Anything west from 4.55E, is affected.

[wwajerowicz]

It seems that focusOnLocation, experiences the issue outside the rectangle in the picture:

The coordinates defining the rectangle are [22.53,53.001], [4.57, 53.001], [4.57, 40.8] and [22.53, 40.8 ].
I tried quite a few points outside that area in Overlay editor and I wasn't able to find one for which focusOnLocation would work correctly.

displayLocation seems to work correctly everywhere on the other hand.

[felixpalmer]

Thanks for the bug report. I haven't managed to track down the issue in the overlay editor, however if you just use the library to load your overlay and focus on the location using Procedural.focusOnLocation( center ) then it works fine. Could you instead try to modify the example app in index.html and see if that works for you?

I will look at fixing the overlay editor as soon as possible

[wwajerowicz]

When I modified index.html, and replaced displayLocation withfocusOnLocation, I get a black screen (everything works correctly with unmodified index.html)

There is an error in the console with the following stacktrace (in Chrome)

    at Object.project (procedural-gl.js:32277)
    at e.CameraStore.focusOnLocation (procedural-gl.js:35828)
    at Object.ID_8 (procedural-gl.js:62)
    at o.$Dispatcher_invokeCallback (procedural-gl.js:62)
    at o.dispatch (procedural-gl.js:62)
    at t.value (procedural-gl.js:62)
    at t.value (procedural-gl.js:62)
    at t.n.dispatchIdentity (procedural-gl.js:62)
    at procedural-gl.js:36244

I get a different stacktrace in Firefox:

Uncaught TypeError: geoproject.projector is null
    project file:///(...)/procedural-gl-js/build/procedural-gl.js:32277
    focusOnLocation file:///(...)/procedural-gl-js/build/procedural-gl.js:35828
    dispatchToken file:///(...)/procedural-gl-js/build/procedural-gl.js:62
    $Dispatcher_invokeCallback file:///(...)/procedural-gl-js/build/procedural-gl.js:62
    dispatch file:///(...)/procedural-gl-js/build/procedural-gl.js:62
    value file:///(...)/procedural-gl-js/build/procedural-gl.js:62
    value file:///(...)/procedural-gl-js/build/procedural-gl.js:62
    dispatchIdentity file:///(...)/procedural-gl-js/build/procedural-gl.js:62
    focusOnLocation file:///(...)/procedural-gl-js/build/procedural-gl.js:36244
    setTimeout handler*Procedural.focusOnLocation file:///(...)/procedural-gl-js/build/procedural-gl.js:36244
    <anonymous> file:///(...)/procedural-gl-js/index.html:64
procedural-gl.js:32277:22

[felixpalmer]

You need to call displayLocation before adding overlays or moving the camera. Try this:

Procedural.init( { container, datasource } );
Procedural.displayLocation({longitude: 21.884765625, latitude: 53.01});
Procedural.addOverlay({
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "color": "white",
        "padding": 10,
        "name": "Example",
        "background": "green",
        "icon": "star"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          21.884765625,
          53.01
        ]
      }
    }
  ]
});

You can also invoke displayLocation and then later focusOnLocation to move the camera

[wwajerowicz]

I didn't realise that you need to call dipslayLocation before any other action(focusOnLocation, etc.)

I think I've found out why focusOnLocation wasn't working for me and in the overlay editor.
It seems that after you call displayLocation with a certain location, focusOnLocation works only on coordinates within certain distance of that location,
e.g. for { latitude: 47.25, longitude: 13.55} in the overlay editor, it only works in the area I mentioned in the previous comment.

A potential solution seems to be to call displayLocation, before every call to focusOnLocation.