Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

updating viewState in v8.0.0 #4172

Closed
SymbolixAU opened this issue Jan 20, 2020 · 2 comments
Closed

updating viewState in v8.0.0 #4172

SymbolixAU opened this issue Jan 20, 2020 · 2 comments

Comments

@SymbolixAU
Copy link
Contributor

SymbolixAU commented Jan 20, 2020 •
edited
Loading

Description

I'm updating my codes to use v8.* of the scripting API, and in particular I'm now setting the InitialViewState.

However, since v8 I am no longer able to change the viewState dynamically. The map correctly changes location, but it becomes unresponsive to any drag or pan events.

Reproducible example

jsfiddle here

Here is a contrived example, but it shows the issue I'm having

In this example I'm using v7.0.0 to show the desired beharviour. The map correctly loads to Melbourne, then changes to San Francisco, and the map is still responsive.

If you swap the dist.min.js for "https://unpkg.com/deck.gl@8.0.9/dist.min.js", it will correctly change location, but it won't be responsive.

<html>
  <head>
    <!--<script src="https://unpkg.com/deck.gl@8.0.9/dist.min.js"></script> -->
     <script src="https://unpkg.com/deck.gl@7.0.0/dist.min.js"></script>
    <!-- only if base map is needed -->
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.css' rel='stylesheet' />

<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>

  </head>
  <body>
    <div id="map"></div>
  </body>
  <script type="text/javascript">
  
  // token from: https://docs.mapbox.com/mapbox-gl-js/example/simple-map/
  
  const deckgl = new deck.DeckGL({
    mapboxApiAccessToken: 'pk.eyJ1Ijoic3ltYm9saXgiLCJhIjoiY2prM2dqNWhiMTMwYzNrcnRmY2NnajI1cCJ9.g8-mLbubDPgqUv-CBx65Xg',
    container: 'map',
    initialViewState: {
      longitude: 144,
      latitude: -37,
      zoom: 6
    },
    controller: true
  })

  deckgl.setProps({
    viewState: {
      longitude: -122,
      latitude: 37,
      zoom: 9,
      transitionInterpolator: new deck.FlyToInterpolator()
      }
    });
  
  </script>
</html>

Given the updates to v8.*, how should I now change the location of the view?
@SymbolixAU SymbolixAU added the bug label Jan 20, 2020
@SymbolixAU SymbolixAU mentioned this issue Jan 20, 2020
Closed
9 tasks
@Pessimistress
Copy link
Collaborator

The v7 behavior was technically a bug (i.e. not consistent with the documentation). This breaking change is explained in the upgrade guide. As of 8.0, if you want to control the view state externally, you have to listen to onViewStateChange and update viewState yourself.

I acknowledge that this is rather inconvenient, given that you only want to manipulate the view state sometimes. We are adding a feature in 8.1 that allows apps to update the initialViewState, see updated example. The feature is available for preview in 8.1.0-alpha.1.

@Pessimistress Pessimistress removed the bug label Jan 20, 2020
@dcooley
Copy link

dcooley commented Jan 20, 2020

8.1.0-alpha.1 works nicely - updated fiddle

  const deckgl = new deck.DeckGL({
    mapboxApiAccessToken: 'pk.eyJ1Ijoic3ltYm9saXgiLCJhIjoiY2prM2dqNWhiMTMwYzNrcnRmY2NnajI1cCJ9.g8-mLbubDPgqUv-CBx65Xg',
    container: 'map',
    initialViewState: {
      longitude: 144,
      latitude: -37,
      zoom: 6
    },
    controller: true
  })

  deckgl.setProps({
    initialViewState: {
      longitude: -122,
      latitude: 37,
      zoom: 9,
      transitionInterpolator: new deck.FlyToInterpolator()
      }
    });

@SymbolixAU SymbolixAU mentioned this issue Jan 20, 2020
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Pessimistress @dcooley