create fullscreen example and control

mapbox · Oct 7, 2016 · 4c5aff4 · 4c5aff4
1 parent be80bec
commit 4c5aff4
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 1 deletion.
diff --git a/debug/index.html b/debug/index.html
@@ -65,6 +65,7 @@
 map.addControl(new mapboxgl.Navigation());
 map.addControl(new mapboxgl.Geolocate());
 map.addControl(new mapboxgl.Scale());
+map.addControl(new mapboxgl.Fullscreen());
 
 map.on('load', function() {
     map.addSource('geojson', {

diff --git a/dist/mapbox-gl.css b/dist/mapbox-gl.css
@@ -82,7 +82,10 @@
     padding: 5px;
     background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgdmVyc2lvbj0iMS4xIj48cGF0aCBkPSJNMTAgNEM5IDQgOSA1IDkgNUw5IDUuMUE1IDUgMCAwIDAgNS4xIDlMNSA5QzUgOSA0IDkgNCAxMCA0IDExIDUgMTEgNSAxMUw1LjEgMTFBNSA1IDAgMCAwIDkgMTQuOUw5IDE1QzkgMTUgOSAxNiAxMCAxNiAxMSAxNiAxMSAxNSAxMSAxNUwxMSAxNC45QTUgNSAwIDAgMCAxNC45IDExTDE1IDExQzE1IDExIDE2IDExIDE2IDEwIDE2IDkgMTUgOSAxNSA5TDE0LjkgOUE1IDUgMCAwIDAgMTEgNS4xTDExIDVDMTEgNSAxMSA0IDEwIDR6TTEwIDYuNUEzLjUgMy41IDAgMCAxIDEzLjUgMTAgMy41IDMuNSAwIDAgMSAxMCAxMy41IDMuNSAzLjUgMCAwIDEgNi41IDEwIDMuNSAzLjUgMCAwIDEgMTAgNi41ek0xMCA4LjNBMS44IDEuOCAwIDAgMCA4LjMgMTAgMS44IDEuOCAwIDAgMCAxMCAxMS44IDEuOCAxLjggMCAwIDAgMTEuOCAxMCAxLjggMS44IDAgMCAwIDEwIDguM3oiIGZpbGw9IiMzMzMiLz48L3N2Zz4=");
 }
-
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-fullscreen  {
+    padding: 5px;
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%%3Cpath%20d=%27M%205%204%20C%204.5%204%204%204.5%204%205%20L%204%206%20L%204%209%20L%204.5%209%20L%205.7773438%207.296875%20C%206.7771319%208.0602131%207.835765%208.9565728%208.890625%2010%20C%207.8257121%2011.0633%206.7761791%2011.951675%205.78125%2012.707031%20L%204.5%2011%20L%204%2011%20L%204%2015%20C%204%2015.5%204.5%2016%205%2016%20L%209%2016%20L%209%2015.5%20L%207.2734375%2014.205078%20C%208.0428931%2013.187886%208.9395441%2012.133481%209.9609375%2011.068359%20C%2011.042371%2012.14699%2011.942093%2013.2112%2012.707031%2014.21875%20L%2011%2015.5%20L%2011%2016%20L%2014%2016%20L%2015%2016%20C%2015.5%2016%2016%2015.5%2016%2015%20L%2016%2014%20L%2016%2011%20L%2015.5%2011%20L%2014.205078%2012.726562%20C%2013.177985%2011.949617%2012.112718%2011.043577%2011.037109%2010.009766%20C%2012.151856%208.981061%2013.224345%208.0798624%2014.228516%207.3046875%20L%2015.5%209%20L%2016%209%20L%2016%205%20C%2016%204.5%2015.5%204%2015%204%20L%2011%204%20L%2011%204.5%20L%2012.703125%205.7773438%20C%2011.932647%206.7864834%2011.026693%207.8554712%209.9707031%208.9199219%20C%208.9584739%207.8204943%208.0698767%206.7627188%207.3046875%205.7714844%20L%209%204.5%20L%209%204%20L%206%204%20L%205%204%20z%20%27%2F%3E%3C%2Fsvg%3E");
+}
 .mapboxgl-ctrl-icon.mapboxgl-ctrl-compass > span.arrow {
     width: 20px;
     height: 20px;

diff --git a/docs/_posts/examples/3400-01-28-fullscreen.html b/docs/_posts/examples/3400-01-28-fullscreen.html
@@ -0,0 +1,22 @@
+---
+layout: example
+category: example
+title: View a fullscreen map
+description: Toggle between current view and fullscreen mode
+tags:
+  - controls-and-overlays
+---
+
+<div id='map'></div>
+
+<script>
+var map = new mapboxgl.Map({
+    container: 'map', // container id
+    style: 'mapbox://styles/mapbox/outdoors-v9', //stylesheet location
+    center: [11.294,43.807], // starting position
+    zoom: 12 // starting zoom
+});
+
+var fullscreen = new mapboxgl.Fullscreen({position: 'top-left' });
+map.addControl(fullscreen);
+</script>
diff --git a/docs/api/assets/site.js b/docs/api/assets/site.js
@@ -39,6 +39,7 @@ function showHashTarget(hash) {
   var targetId = hash && hash.substring(1);
   if (!targetId) return;
   var hashTarget = document.getElementById(targetId);
+  if (!hashTarget) return;
   var toggleInside = hashTarget.querySelector('.hidden.toggle-target');
   var toggleSibling = hashTarget.querySelector('.toggle-sibling');
   if (toggleInside && toggleSibling) {

diff --git a/js/mapbox-gl.js b/js/mapbox-gl.js
@@ -17,6 +17,7 @@ mapboxgl.Attribution = require('./ui/control/attribution');
 mapboxgl.Scale = require('./ui/control/scale');
 mapboxgl.Popup = require('./ui/popup');
 mapboxgl.Marker = require('./ui/marker');
+mapboxgl.Fullscreen = require('./ui/control/fullscreen');
 
 mapboxgl.Style = require('./style/style');
 

diff --git a/js/ui/control/fullscreen.js b/js/ui/control/fullscreen.js
@@ -0,0 +1,41 @@
+'use strict';
+
+var Control = require('./control');
+var browser = require('../../util/browser');
+var DOM = require('../../util/dom');
+var util = require('../../util/util');
+var window = require('../../util/window');
+
+module.exports = Fullscreen;
+
+function Fullscreen(options) {
+    util.setOptions(this, options);
+}
+
+Fullscreen.prototype = util.inherit(Control, {
+    options: {
+        position: 'top-left'
+    },
+
+    onAdd: function(map) {
+        var className = 'mapboxgl-ctrl';
+        var container = this._container = DOM.create('div', className + '-group', map.getContainer());
+
+        this._fullscreenButton = DOM.create('button', (className + '-icon ' + className + '-fullscreen'), this._container);
+        this._fullscreenButton.type = 'button';
+        this._fullscreenButton.addEventListener('click', this._onClickFullscreen.bind(this));
+        return container;
+    },
+
+    _onClickFullscreen: function() {
+        var mapContainer = map.getContainer();
+        if (mapContainer.requestFullscreen) {
+            mapContainer.requestFullscreen();
+        } else if (mapContainer.mozRequestFullScreen) {
+            mapContainer.mozRequestFullScreen();
+        } else if (mapContainer.webkitRequestFullscreen) {
+            mapContainer.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+        } else {
+        }
+    }
+});