Merge pull request getredash#2443 from deecay/choropleth-fullscreen

Choropleth: Add fullscreen control

client/app/visualizations/choropleth/index.js

@@ -2,6 +2,8 @@ import _ from 'underscore';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import { formatSimpleTemplate } from '@/lib/value-format';
+import 'leaflet-fullscreen';
+import 'leaflet-fullscreen/dist/leaflet.fullscreen.css';
 
 import {
   AdditionalColors,
@@ -152,6 +154,7 @@ function choroplethRenderer($sanitize, $http) {
           maxBounds: choroplethBounds,
           maxBoundsViscosity: 1,
           attributionControl: false,
+          fullscreenControl: true,
         });
 
         map.on('focus', () => { map.on('moveend', getBounds); });

client/app/visualizations/map/index.js

@@ -8,6 +8,8 @@ import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
 import markerIcon from 'leaflet/dist/images/marker-icon.png';
 import markerIconRetina from 'leaflet/dist/images/marker-icon-2x.png';
 import markerShadow from 'leaflet/dist/images/marker-shadow.png';
+import 'leaflet-fullscreen';
+import 'leaflet-fullscreen/dist/leaflet.fullscreen.css';
 
 import template from './map.html';
 import editorTemplate from './map-editor.html';
@@ -29,7 +31,10 @@ function mapRenderer() {
     template,
     link($scope, elm) {
       const colorScale = d3.scale.category10();
-      const map = L.map(elm[0].children[0].children[0], { scrollWheelZoom: false });
+      const map = L.map(elm[0].children[0].children[0], {
+        scrollWheelZoom: false,
+        fullscreenControl: true,
+      });
       const mapControls = L.control.layers().addTo(map);
       const layers = {};
       const tileLayer = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

package.json

@@ -52,6 +52,7 @@
     "jquery-ui": "^1.12.1",
     "leaflet": "^1.2.0",
     "leaflet.markercluster": "^1.1.0",
+    "leaflet-fullscreen": "^1.0.2",
     "markdown": "0.5.0",
     "material-design-iconic-font": "^2.2.0",
     "moment": "^2.19.3",