re-sizing with browser window

[jparish3]

I am finding that the map-gl element does not re-size with the browser window. The css used is: mapbox-gl { height: 900px; width: 100%; } I use a similar layout for the google-map element and it resizes with changes to the browser window. Is there an additional step with mapbox-gl?

[eterna2]

Nope. It should be working by default. You might want to try 100vw instead of 100% as the latter is dependent on the size of the parentNode (aka if ur parentNode does not resize, the mapbox-gl will not resize either), while the former is based on the viewport.

mapbox-gl {
  height: 900px;
  width: 100vw;
}

You can look at this example, it should resize when browser window is changed. https://www.webcomponents.org/element/PolymerVis/mapbox-gl/demo/demo/centered.html

[jparish3]

Thanks. I tried that example before posting, but get the same map-gl re-size to smaller dimensions after browser window re-sizing. I should clarify that it only occurs when the browser re-size occurs while another page within the app is in view. Navigating back to the map-gl page gets the small dimensions...then re-sizing again snaps it back, but this occur anytime re-sizing occurs on other pages. I hope this makes sense

[eterna2]

I don't quite understand you. If you can provide a code snippet or a link to the page?

But I am suspecting the 2 possibilities:

• the mapboxgl did not resize because it was hidden (display: none) when the browser resized.

• something wrong with ur css for the layout of the page.

A possible hack is to call map.resize() whenever the browser resizes, to force it to resize.

[jparish3]

I have tested the re-size issue within the polymer-2-starter-kit with these steps:

1. Mkdir file & polymer init CLI command; then bower install --save PolymerVis/mapbox-gl

2. Add the Element from the basic demo to my-view1.html: mapbox-gl { height: 400px; width: 100%; }
   <mapbox-gl id="map" interactive map="{{map}}" map-style-url="mapbox://styles/mapbox/dark-v9" script-src="https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js" access-token="pk.eyJ1IjoiZXRlcm5hMiIsImEiOiJjaXppZjRoaTIwMmYxMndsNHJ4dzR1eWJsIn0.MvJ5fsV47RHlSAt2fBEKLg" zoom=10 pitch=45 bearing=0>

3. Open App; View One page displays map to correct dimensions

4. Navigate to View Two page (my-view2.html) resize browser window

5. Return to View One page and map displays returns to smaller default dimension

6. The Map will return to the correct re-size with another browser re-size while in view but does not stay in the correct display with any subsequent navigations within the app.

I am not sure how implement the hack. I assume this is a fundamental issue withe the element as most use cases would be within an application. I can send the starter kit file if that helps, but it is easy to replicate as there are no other dependancies other than the default configuration and mapbox-gl. We find many uses for this element and are hopeful to include it in our app. Thanks

[jparish3]

This issue is pretty fundamental, but has remained open for a while. If you do not expect a fix, then can you explain how to implement the hack you suggested in 2017 (A possible hack is to call map.resize() whenever the browser resizes, to force it to resize.)? Thanks

[eterna2]

Sorry @jparish3

This issue is a bit more tricky. Was quite bz to really look at it. Give me a couple of days to look at it again.

Although the easiest for me is if u can provide a GitHub repo with the example bug, then I can debug it directly.

Otherwise I need to rig the entire setup before debugging.

[jparish3]

Thanks: The repo below has a Polymer Starter template with PolymerViz/mapbox-gl components on the first two pages. my-view1.html has a demo map that will resize if the user navigates to another page, resizes the browser window and returns to this page. my-view2 has a map with a radius element that I included to see if you have any advice. Further explanations are contained in the page card content. Thanks

https://github.com/jparish3/mapbox-resize-issue

Joe Parish Managing Partner SPATIALytx 101 South Tryon St Suite 2700 Charlotte, NC 28280 704.458.4798

On Sun, Mar 25, 2018 at 9:33 AM, Eterna2 notifications@github.com wrote:

Sorry @jparish3 https://github.com/jparish3

This issue is a bit more tricky. Was quite bz to really look at it. Give me a couple of days to look at it again.

Although the easiest for me is if u can provide a GitHub repo with the example bug, then I can debug it directly.

Otherwise I need to rig the entire setup before debugging.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/PolymerVis/mapbox-gl/issues/22#issuecomment-375970896, or mute the thread https://github.com/notifications/unsubscribe-auth/AFwNqrWz3CzEJXe1X7Pj9T_2ymLTHWwnks5th5y2gaJpZM4Q2sRb .

[eterna2]

@jparish3

I have found out what is the main issue. This is something I cannot fix for the moment.

Origin of bug

What happened is mapbox automatically try to resize the mapbox canvas whenever there is a resize event.

However, if the mapbox canvas is not visible when the window resize. It will incorrectly resize the mapbox canvas - the size will fall back to the default size.

And when the mapbox canvas is visible again. It will be displaying the incorrect size.

Solution

This is something I cannot fix from the component itself as there are no efficient way of observing the "visibility" of the mapbox-gl element.

Workaround

Instead, when every time the mapbox-gl element is going to be visible, you can manually trigger resize - this will correctly recalculate the size of the map when the map is visible.

Example: HTML

<iron-pages
    selected="[[page]]"
    selected-item="{{pageElement}}"
    attr-for-selected="name"
    fallback-selection="view404"
    role="main">
  <my-view1 name="view1"></my-view1>
  <mapbox-gl name="view2"></mapbox-gl>
  <my-view404 name="view404"></my-view404>
</iron-pages>

JS

_pageElementChanged(ele) {
  if (!ele) return;
  // call resize if function exist
  ele.resize && ele.resize();
}

[eterna2]

@jparish3

As for the geojson-source, it is a bug which I introduced in my other patches.

I have fixed it now. There should be no issue now.

You can see the sample codes here:

https://www.webcomponents.org/element/PolymerVis/mapbox-gl/demo/demo/data-driven.html

[jparish3]

Thanks. I added those changes (plus a 'pageElement' property) but do not get the re-size behavior resolved. Please take a look at the updated files to see if I am missing anything.

On a separate matter, do you do ant work on: PolymerVis/papa-parse ? I would like to parse json to csv and then download, but am having trouble with the download step. Let me know if you can direct me to the right place for any assistance. I really like the components developed by this team. Thanks

Joe Parish Managing Partner SPATIALytx 101 South Tryon St Suite 2700 Charlotte, NC 28280 704.458.4798

On Fri, Mar 30, 2018 at 5:37 AM, Eterna2 notifications@github.com wrote:

@jparish3 https://github.com/jparish3

As for the geojson-source, it is a bug which I introduced in my other patches.

I have fixed it now. There should be no issue now.

You can see the sample codes here:

https://www.webcomponents.org/element/PolymerVis/mapbox-gl/ demo/demo/data-driven.html

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/PolymerVis/mapbox-gl/issues/22#issuecomment-377489141, or mute the thread https://github.com/notifications/unsubscribe-auth/AFwNqkVQE92e6Uz_A9bKwYRv-99waU2bks5tjfzbgaJpZM4Q2sRb .

[jparish3]

Hi: I have integrated your mapbox element into a polymer 2.0 app. I am concerned that the project will be stranded with the move to 3.0. I would appreciate your thoughts if that is appropriate. Thanks

Joe Parish Managing Partner SPATIALytx 101 South Tryon St Suite 2700 Charlotte, NC 28280 704.458.4798

On Wed, Apr 11, 2018 at 2:29 PM, Joseph Parish jparish@spatialytx.com wrote:

Thanks. I added those changes (plus a 'pageElement' property) but do not get the re-size behavior resolved. Please take a look at the updated files to see if I am missing anything.

On a separate matter, do you do ant work on: PolymerVis/papa-parse ? I would like to parse json to csv and then download, but am having trouble with the download step. Let me know if you can direct me to the right place for any assistance. I really like the components developed by this team. Thanks

Joe Parish Managing Partner SPATIALytx 101 South Tryon St Suite 2700 Charlotte, NC 28280 704.458.4798

On Fri, Mar 30, 2018 at 5:37 AM, Eterna2 notifications@github.com wrote:

@jparish3 https://github.com/jparish3

As for the geojson-source, it is a bug which I introduced in my other patches.

I have fixed it now. There should be no issue now.

You can see the sample codes here:

https://www.webcomponents.org/element/PolymerVis/mapbox-gl/d emo/demo/data-driven.html

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/PolymerVis/mapbox-gl/issues/22#issuecomment-377489141, or mute the thread https://github.com/notifications/unsubscribe-auth/AFwNqkVQE92e6Uz_A9bKwYRv-99waU2bks5tjfzbgaJpZM4Q2sRb .