Zoom map to location

CesiumJS
1

Hi,

I use this demo from the Sandcastle here:

How can I make it so that the location of the browser is transmitted and so that the map zooms to the location?

Are there any examples of this?
Unfortunately I haven’t found one.

I thank you in advance.

Many greetings

2

Hi @Mr.Lion ,

Here is a Sandcastle example: click me

The example uses the Geolocation API to get coordinates of your browser/device (if the user allows it, and the site is https) and methods of the Cesium “camera”.

Best, Lennart

1 Like
3

Hi Lennart,

thank you for the answer and for the example.
Sorry that I answer very late. I was sick in bed for a few days, almost a week, and unfortunately couldn’t answer any earlier.

The example on Sandcastle helped me a lot and was able to adopt it so far.
However, I have a few additions with which I have unfortunately not been successful and would be very happy if I could get help.

I did it that way, when I click on the “Show Location” button, the camera flies there. This works so far, but if I set the angle of the camera by -45 degrees, then the location is no longer in the view of the camera. It’s postponed. I can fix that manually by setting the (Latitude - 0.100), but normally the script would have to do this itself, so the more precise calculation now, or not?

I have set a PIN for the location with “Cesium.pinBuilder()”. To better illustrate the location. From this I can see that the location is definitely shifted at “viewer.camera.flyTo()”. How can I improve this?

I still have the problem that when I scroll into it, the pin disappears in the background. I have a problem with that and don’t know how to fix it.

I also have a question about the location.
With the Geolocation API I get the “longitude” and “langitude” great, but how do I get the height of the location?
Couldn’t I have this calculated using the “langitude” and “longitude”? Unfortunately, I couldn’t find a solution on the Internet.

Here is the code:

image
image815×961 51.1 KB

From line 378 I commented out an attempt. If I try it out like in the comment, then the globe turns crazy 200 times around until it has reached the location.
Here I couldn’t define the height either :frowning:

Here I have another function as I set the pin:

image
image823×970 62.9 KB

Here the pin is at 10,000. But when I scroll through it now, the pin disappears more and more in the background:
image

image
image724×355 53.3 KB

Shouldn’t the height be adjusted automatically when scrolling, or not?

I ask for help on these few individual points.
Thank you in advance.

Many greetings

4

because of depthTest,

you can use this for all objects

viewer.scene.globe.depthTestAgainstTerrain = true;

or I see you add bilboard so bilboard has this property : disableDepthTestDistance

https://cesium.com/learn/cesiumjs/ref-doc/Billboard.html?classFilter=bill#disableDepthTestDistance

5

Hi,

thank you for the hints.

I’m already using this and it’s still buggy.

According to the documentation, I don’t know what number value has to come in.
I played around with some fictional numbers but the bilboard is still flawed as described above.

When I scroll in or out, the bilboard sinks until it is completely gone. That also happens when I turn the globe.