Zoom to certain point or resoluatin level

[jingyan-li]

Is it possible to zoom to a certain point by its coordinate or set the zoom-in or zoom-out level of the camera? When I try to add a globe to a storytelling website, I really hope the camera can move along some trajectories to help me tell the story.

[vasturiano]

@jingyan-li have you looked at the pointOfView method?

[tamegeek]

Hi @vasturiano I think I'm having a similar issue as this person. I have used pointOfView on my initial rendering of the globe, but I need to know the best way to change the pointOfView when clicking on a specific DOM element.

[vasturiano]

@tamegeek this is the method signature of pointOfView:

pointOfView({ lat, lng, altitude }, [ms])

You can invoke this method at any time, and all of the parameters are optional (though you should include at least one otherwise there's no change).

Which specific issue are you experiencing with it?

[tamegeek]

Hi @vasturiano thanks for coming back to me! I got the point of view resolved, however, the issue I now face is that I would like to be able to do a JS action when one of the hotspots is clicked. The action is outside of the of the globeViz div. I have an example Pen here, where you can see that the ID of the blue dot on the UK should be changing the text from demo to hello world at the top of the pen. Any advice on this would be greatly appreciated! CodePen: https://codepen.io/tamegeek/pen/vYJoOQR?editors=0011

[vasturiano]

@tamegeek have you looked at .onLabelClick(labelObj => ...)?

[tamegeek]

I have but i'm going to have multiple IDs (so each hotspot will trigger a different action) and I've not been able to find a working example in your doc (sorry if I have missed it)

[vasturiano]

The first argument in the callback gives you access to the label object itself, so you can use it to choose which action should be carried out.

[ishaiavrahami]

the proper way to get the globe transition to the selected/clicked dot is by having

 .onHexPolygonClick((data, clickData, coord) => {
      globe.pointOfView(coord, 300);
})

The third param coord exports {lat, lng, altitude} of where the polygon is placed on the globe.

Hope this helps!