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

Retrieving bounds and zoom of map 2 #4184

Closed
SymbolixAU opened this issue Jan 22, 2020 · 4 comments
Closed

Retrieving bounds and zoom of map 2 #4184

SymbolixAU opened this issue Jan 22, 2020 · 4 comments
Labels
question

Comments

@SymbolixAU
Copy link
Contributor

Since v8.0 and the updates to viewport, the solution to retrieve the north-west and south-east bounds of the map in this issue no longer works. From what I can see this is because the width and height are static, they now are always (-180, -85)

What would the new calculations now be to get the bounds of the map in the current viewport?

I have a reproducible jsfiddle here, and have copied the code below.

<html>
  <head>
    <!--<script src="https://unpkg.com/deck.gl@8.0.9/dist.min.js"></script> -->
     <script src="https://unpkg.com/deck.gl@8.1.0-alpha.1/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 id="viewState" class="mapViewStateContainer"></div>
    </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,
    onViewStateChange: ({viewId, viewState}) => {
      var jsDiv = document.getElementById("viewState");
      var vs;
      
      const viewport = new deck.WebMercatorViewport({viewState});
      
      const nw = viewport.unprojectFlat([0,0]);
      const se = viewport.unprojectFlat([viewport.width, viewport.height]);
      
      vs = {
        nw: nw,
        se: se
      }
      jsDiv.innerHTML = JSON.stringify( vs );
    }
  })
  </script>
</html>
@SymbolixAU SymbolixAU mentioned this issue Jan 22, 2020
Open
@Pessimistress
Copy link
Collaborator

WebMercatorViewport should be constructed from viewState, not {viewState}.

@SymbolixAU
Copy link
Contributor Author

SymbolixAU commented Jan 23, 2020 •
edited
Loading

this has no impact

@SymbolixAU
Copy link
Contributor Author

oh, I think I should be using unproject(), not unprojectFlat()

@SymbolixAU
Copy link
Contributor Author

yeah ok, I think I made a simple mistake. It's working again now.

@mikeldn mikeldn mentioned this issue Feb 17, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Pessimistress