Full Screen Functionality

[tuneis]

I added in some custom full screen functionality.

It doesn't work off of the built in mapbox full screen button but if you add your own custom fullscreen button to the map and bind the click event and run the following code it will put the maps in full screen div using css but not in a browser specific full screen mode:

HTML

<div id="originId" style="width: 100%; height: 400px; position:relative;">
    <div id="leftMap"></div>
    <div id="rightMap"></div>
</div>

JS

// create left map
var leftMap= new Map({
      container: 'leftMap',
      style: 'mapbox://styles/mapbox/dark-v9',
      center: [0, 0],
      zoom: 0
});

// create right map
var rightMap = new Map({
      container: 'rightMap',
      style: 'mapbox://styles/mapbox/light-v9',
      center: [0, 0],
      zoom: 0
});

// create compare
var compare = new Compare(leftMap, rightMap);

// set maps to full screen
compare.fullscreen(leftMap, rightMap, 'originId');

'originId' is a containing div that houses the 2 maps so when we append a full screen element to the screen and the maps to it, we can move them back to the div they were originally in.

The CSS code in the pull request was graciously borrowed from @Pantoeflou.

[daltonpearson]

+1 Needed this

[andrewharvey]

hi @tuneis sorry it's taken so long for someone to review this. I'm 👍 to the idea here. If you're able to rebase please I can take a more fine grained look.