CODEWITHSUNDEEP
canvasmapbox-gl-jsmapbox-gl
yanot
yanot

Reputation: 353

How to change/offset camera center point in the Mapbox GL JS?

I need to flyTo() specific location with a bit of offset and then start camera rotation animation around that point.

The problem is that the camera doesn't take this offset into account. This results in camera rotating around the map center point, but not around the point with offset, specified in the flyTo() call.

map.flyTo({
  zoom:    point.zoom,
  center:  point.coords,
  bearing: point.bearing,
  pitch:   point.pitch,
  offset:  point.offset
});

map.once('moveend', () => rotateCamera(map.getBearing()));

There is a property in the CameraOptions named "around", but I didn't get it's purpose... Documentation doesn't have an example and experiments didn't make it it clear.

Is there any way to solve this problem?

Upvotes: 1

Views: 1206

Answers (1)

yanot
yanot

Reputation: 353

It is possible to workaround with CSS:

#map {
  /* ... */
  padding-left: 200px;
  margin-left: -200px;

  padding-top: 200px;
  margin-top: -200px;
  overflow: hidden;
}

But this "solution" seems hacky...

Upvotes: 1

Related Questions