mapbox / mapbox/mapbox-gl-compare
Fullscreen map
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 152
- Forks
- 43
- PR merge metrics
- No merged PRs in 30d
Description
Hi Guys,
I am using the mapbox-gl-compare plugin on top of a map that displays inside a container.
I am now trying to add a 'fullscreen button', but to no avail
Using: after.addControl(new mapboxgl.FullscreenControl()); displays the the button, but only makes the 'after' map full screen
I then tried creating my own function where I do the following on click:
-
make panel fullscreen [css below]
-
call resize() function on before, after and map objects
This sort of works, the fullscreen view renders the map (ans slider) at what seems just over 200% height
Any possibility of adding support for the FullscreenControl() function
.panel-fullscreen {
display: block;
z-index: 9999;
position: fixed;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow: auto;
}
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue with mapboxgl.FullscreenControl() on the after map and the provided .panel-fullscreen CSS. Check how the before and after maps and the comparison slider respond when the panel changes size. Done means fullscreen applies to the comparison view rather than only one map, with correct map and slider dimensions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100