Add fullscreen capability to world map

(and update examples to new format)

README.md

@@ -5,7 +5,7 @@ A <a href="http://nodered.org" target="_new">Node-RED</a> node to provide world
 map web page for plotting "things" on.
 
 ### Changes
- - v1.0.0 - now uses socket.io to connect to backend - means this node now has an input connection
+ - v1.0.x - now uses socket.io to connect to backend - means this node now has an input connection
  (like "proper" nodes should :-), and you no longer need a websocket node in parallel.
  Obviously this is a breaking change hence the major version number bump. Also thus adds a `worldmap in`
  node to handle events coming from the map interaction. (to be documented more fully but are fairly obvious).
@@ -50,6 +50,8 @@ However there are several specials...
  - **unknown** : pseudo Nato style yellow square.
  - **earthquake** : black circle - diameter proportional to magnitude.
 
+#### Areas
+
 If the payload contains an **area** property - that is an array of co-ordinates, e.g.
 
     [ [51.05, -0.08], [51.5, -1], [51.2, -0.047] ]
@@ -68,7 +70,7 @@ Right-clicking on an icon will allow you to delete it.
 
 If you select the **drawing** layer you can also add polylines, polygons and rectangles.
 
-All these events generate messages that can be received by using a **websocket in** node set to the same endpoint. For example:
+All these events generate messages that can be received by using a **worldmap in** node. For example:
 
     add:point,50.98523,-1.40625,joe,spot,test
     del:joe
@@ -79,7 +81,7 @@ All these events generate messages that can be received by using a **websocket i
 
 ### Control
 
-You can also control the map via the websocket, by sending in a msg.payload containing a **command** object.
+You can also control the map via the node, by sending in a msg.payload containing a **command** object.
 
 Optional properties include
 
@@ -110,10 +112,10 @@ Demo Flow
 ---------
 
 The following example gets recent earthquakes from USGS, parses the result,
-formats up the msg as per above and sends to the websocket to plot on the map.
+formats up the msg as per above and sends to the node to plot on the map.
 It also shows how to zoom and move the map or add a new layer.
 
-        [{"id":"f63d823.f09c28","type":"websocket-listener","path":"/ws/worldmap","wholemsg":null},{"id":"6caef267.93510c","type":"inject","name":"","topic":"","payload":"","payloadType":"none","repeat":"","crontab":"","once":false,"x":217,"y":398,"z":"f307b843.0cf848","wires":[["fb7109d5.048ef8"]]},{"id":"fb7109d5.048ef8","type":"function","name":"add new layer","func":"msg.payload = {};\nmsg.payload.command = {};\n\nvar u = 'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png';\nvar o = JSON.stringify({ maxZoom: 19, attribution: '&copy; OpenStreetMap'});\n\nmsg.payload.command.map = {name:\"OSMhot\", url:u, opt:o};\nmsg.payload.command.layer = \"OSMhot\";\n\nreturn msg;","outputs":1,"noerr":0,"x":454,"y":433,"z":"f307b843.0cf848","wires":[["e9c3a4cd.163c58"]]},{"id":"e9c3a4cd.163c58","type":"websocket out","name":"","server":"f63d823.f09c28","client":"","x":753.5,"y":540,"z":"f307b843.0cf848","wires":[]},{"id":"b68e0d77.4971f","type":"function","name":"USGS Quake monitor csv re-parse","func":"msg.payload.lat = msg.payload.latitude;\nmsg.payload.lon = msg.payload.longitude;\nmsg.payload.layer = \"earthquake\";\nmsg.payload.name = msg.payload.id;\nmsg.payload.icon = \"globe\";\nmsg.payload.iconColor = \"orange\";\n\ndelete msg.payload.latitude;\ndelete msg.payload.longitude;\t\nreturn msg;","outputs":1,"noerr":0,"x":416.5,"y":560,"z":"f307b843.0cf848","wires":[["e9c3a4cd.163c58"]]},{"id":"1a0508d4.e5faf7","type":"function","name":"move and zoom","func":"msg.payload = { command:{layer:\"Esri Terrain\",lat:0,lon:0,zoom:3} };\nreturn msg;","outputs":1,"noerr":0,"x":427,"y":476,"z":"f307b843.0cf848","wires":[["e9c3a4cd.163c58"]]},{"id":"8d1dcc2c.72e23","type":"csv","name":"","sep":",","hdrin":true,"hdrout":"","multi":"one","ret":"\\n","temp":"","x":250,"y":500,"z":"f307b843.0cf848","wires":[["b68e0d77.4971f"]]},{"id":"8fbd9df9.70426","type":"inject","name":"","topic":"","payload":"","payloadType":"none","repeat":"","crontab":"","once":false,"x":163,"y":440,"z":"f307b843.0cf848","wires":[["1a0508d4.e5faf7"]]},{"id":"b8f3fe3f.470c","type":"http request","name":"","method":"GET","url":"http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.csv","x":145.5,"y":560,"z":"f307b843.0cf848","wires":[["8d1dcc2c.72e23"]]},{"id":"47e1240c.b81edc","type":"inject","name":"Quakes","topic":"","payload":"","payloadType":"none","repeat":"900","crontab":"","once":false,"x":90,"y":500,"z":"f307b843.0cf848","wires":[["b8f3fe3f.470c"]]},{"id":"784ff2e9.87b00c","type":"worldmap","name":"","x":798,"y":499,"z":"f307b843.0cf848","wires":[]}]
+        [{"id":"f7950c21.019f5","type":"worldmap","z":"896b28a8.437658","name":"","x":670,"y":680,"wires":[]},{"id":"bb057b8a.4fe2c8","type":"inject","z":"896b28a8.437658","name":"","topic":"","payload":"","payloadType":"none","repeat":"","crontab":"","once":false,"x":110,"y":640,"wires":[["b8545e85.5ba4c"]]},{"id":"b8545e85.5ba4c","type":"function","z":"896b28a8.437658","name":"add new layer","func":"msg.payload = {};\nmsg.payload.command = {};\n\nvar u = 'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png';\nvar o = JSON.stringify({ maxZoom: 19, attribution: '&copy; OpenStreetMap'});\n\nmsg.payload.command.map = {name:\"OSMhot\", url:u, opt:o};\nmsg.payload.command.layer = \"OSMhot\";\n\nreturn msg;","outputs":1,"noerr":0,"x":340,"y":640,"wires":[["f7950c21.019f5"]]},{"id":"e6cc0a05.14edd8","type":"function","z":"896b28a8.437658","name":"USGS Quake monitor csv re-parse","func":"msg.payload.lat = msg.payload.latitude;\nmsg.payload.lon = msg.payload.longitude;\nmsg.payload.layer = \"earthquake\";\nmsg.payload.name = msg.payload.id;\nmsg.payload.icon = \"globe\";\nmsg.payload.iconColor = \"orange\";\n\ndelete msg.payload.latitude;\ndelete msg.payload.longitude;\t\nreturn msg;","outputs":1,"noerr":0,"x":460,"y":780,"wires":[["f7950c21.019f5"]]},{"id":"84b8388.5e943c8","type":"function","z":"896b28a8.437658","name":"move and zoom","func":"msg.payload = { command:{layer:\"Esri Terrain\",lat:0,lon:0,zoom:3} };\nreturn msg;","outputs":1,"noerr":0,"x":340,"y":680,"wires":[["f7950c21.019f5"]]},{"id":"5c317188.d2f31","type":"csv","z":"896b28a8.437658","name":"","sep":",","hdrin":true,"hdrout":"","multi":"one","ret":"\\n","temp":"","x":310,"y":720,"wires":[["e6cc0a05.14edd8"]]},{"id":"cfafad11.2f299","type":"inject","z":"896b28a8.437658","name":"","topic":"","payload":"","payloadType":"none","repeat":"","crontab":"","once":false,"x":110,"y":680,"wires":[["84b8388.5e943c8"]]},{"id":"f0d75b03.39d618","type":"http request","z":"896b28a8.437658","name":"","method":"GET","url":"http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.csv","x":190,"y":780,"wires":[["5c317188.d2f31"]]},{"id":"87da03a.eb8a3","type":"inject","z":"896b28a8.437658","name":"Quakes","topic":"","payload":"","payloadType":"none","repeat":"900","crontab":"","once":false,"x":120,"y":720,"wires":[["f0d75b03.39d618"]]}]
 
 
 Car icon made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>.</div>

examples/Basic Map.json

@@ -1 +1 @@
-[{"id":"8121855.018af78","type":"websocket-listener","z":"1262f4f5.eb742b","path":"/ws/worldmap","wholemsg":"false"},{"id":"51100e2e.29241","type":"worldmap","z":"1262f4f5.eb742b","name":"","x":620,"y":160,"wires":[]},{"id":"db3c792a.40f0b8","type":"inject","z":"1262f4f5.eb742b","name":"","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":false,"x":150,"y":220,"wires":[["600727dc.35b7d8"]]},{"id":"65c65456.04d1ec","type":"websocket out","z":"1262f4f5.eb742b","name":"","server":"8121855.018af78","client":"","x":580,"y":220,"wires":[]},{"id":"600727dc.35b7d8","type":"function","z":"1262f4f5.eb742b","name":"Add thing to map","func":"var thing = {\n    name:\"Wally\", \n    lat:51, \n    lon:-1.45,\n    icon:\"car\",\n    iconColor:\"darkred\",\n    extrainfo:\"Some extra information\"\n};\nmsg.payload = thing;\nreturn msg;","outputs":1,"noerr":0,"x":340,"y":220,"wires":[["65c65456.04d1ec"]]},{"id":"54ae7eea.a705b","type":"comment","z":"1262f4f5.eb742b","name":"Simple map - click inject to send thing to map.","info":"Adds a map at http://(your-server-ip):1880/worldmap. \n\nThe `function` node creates an object with some basic properties required to add to a map.","x":280,"y":160,"wires":[]}]
+[{"id":"a728c021.9969f","type":"worldmap","z":"896b28a8.437658","name":"","x":570,"y":940,"wires":[]},{"id":"ec9da974.051b48","type":"inject","z":"896b28a8.437658","name":"","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":false,"x":140,"y":940,"wires":[["f77a7ed4.f955d"]]},{"id":"f77a7ed4.f955d","type":"function","z":"896b28a8.437658","name":"Add thing to map","func":"var thing = {\n    name:\"Wally\", \n    lat:51, \n    lon:-1.45,\n    icon:\"car\",\n    iconColor:\"darkred\",\n    extrainfo:\"Some extra information\"\n};\nmsg.payload = thing;\nreturn msg;","outputs":1,"noerr":0,"x":330,"y":940,"wires":[["a728c021.9969f"]]},{"id":"cd09f7be.079518","type":"comment","z":"896b28a8.437658","name":"Simple map - click inject to send thing to map.","info":"Adds a map at http://(your-server-ip):1880/worldmap. \n\nThe `function` node creates an object with some basic properties required to add to a map.","x":270,"y":880,"wires":[]}]

examples/Earthquake.json

@@ -1 +1 @@
-[{"id":"f874f266.cc706","type":"websocket-listener","path":"/ws/worldmap","wholemsg":"false"},{"id":"586e15fc.0ed3ec","type":"function","z":"be2ce773.41d318","name":"remap property names","func":"msg.payload.lat = msg.payload.latitude;\nmsg.payload.lon = msg.payload.longitude;\nmsg.payload.layer = msg.payload.type;\nmsg.payload.icon = msg.payload.type;\nmsg.payload.name = msg.payload.id;\n\ndelete msg.payload.latitude;\ndelete msg.payload.longitude;\ndelete msg.payload.type;\nreturn msg;","outputs":1,"noerr":0,"x":460,"y":200,"wires":[["1b385a58.bb0c96","e4866a34.a611c8"]]},{"id":"1b385a58.bb0c96","type":"debug","z":"be2ce773.41d318","name":"","active":true,"console":"false","complete":"payload","x":690,"y":140,"wires":[]},{"id":"c2ed9e42.9aaa6","type":"csv","z":"be2ce773.41d318","name":"","sep":",","hdrin":true,"hdrout":"","multi":"one","ret":"\\n","temp":"","x":450,"y":120,"wires":[["586e15fc.0ed3ec"]]},{"id":"781d454f.ede9ac","type":"http request","z":"be2ce773.41d318","name":"","method":"GET","url":"http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.csv","x":290,"y":120,"wires":[["c2ed9e42.9aaa6"]]},{"id":"9afc700f.65ff8","type":"inject","z":"be2ce773.41d318","name":"quakes","topic":"","payload":"","payloadType":"str","repeat":"900","crontab":"","once":true,"x":130,"y":120,"wires":[["781d454f.ede9ac"]]},{"id":"c72fd4ec.7349d8","type":"comment","z":"be2ce773.41d318","name":"Earthquake !!!","info":"Press the button on the `inject` node to get the list of earthquakes from the USGS public API.\n\nThis returns a CSV - which we then parse using the `CSV` node into individual objects.\n\nThese are then passed through a `function` to remap the property names into ones \nsuitable for the map node, and passed to the `web-socket` out node.\n\nThe map will be served at http://localhost:1880/worldmap .\nYou will need to zoom out :-)","x":150,"y":60,"wires":[]},{"id":"884c0ba4.df3668","type":"worldmap","z":"be2ce773.41d318","name":"","x":680,"y":260,"wires":[]},{"id":"e4866a34.a611c8","type":"websocket out","z":"be2ce773.41d318","name":"","server":"f874f266.cc706","client":"","x":710,"y":200,"wires":[]}]
+[{"id":"5dc0977b.699a88","type":"function","z":"896b28a8.437658","name":"remap property names","func":"msg.payload.lat = msg.payload.latitude;\nmsg.payload.lon = msg.payload.longitude;\nmsg.payload.layer = msg.payload.type;\nmsg.payload.icon = msg.payload.type;\nmsg.payload.name = msg.payload.id;\n\ndelete msg.payload.latitude;\ndelete msg.payload.longitude;\ndelete msg.payload.type;\nreturn msg;","outputs":1,"noerr":0,"x":460,"y":700,"wires":[["847c1290.11a68","a733a03e.317f2"]]},{"id":"847c1290.11a68","type":"debug","z":"896b28a8.437658","name":"","active":true,"console":"false","complete":"payload","x":690,"y":640,"wires":[]},{"id":"827adf5c.4cff8","type":"csv","z":"896b28a8.437658","name":"","sep":",","hdrin":true,"hdrout":"","multi":"one","ret":"\\n","temp":"","x":450,"y":620,"wires":[["5dc0977b.699a88"]]},{"id":"3dcc8183.4e218e","type":"http request","z":"896b28a8.437658","name":"","method":"GET","url":"http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.csv","x":290,"y":620,"wires":[["827adf5c.4cff8"]]},{"id":"5b57c4b6.56a8fc","type":"inject","z":"896b28a8.437658","name":"quakes","topic":"","payload":"","payloadType":"str","repeat":"900","crontab":"","once":true,"x":130,"y":620,"wires":[["3dcc8183.4e218e"]]},{"id":"e41b836e.f0c66","type":"comment","z":"896b28a8.437658","name":"Earthquake !!!","info":"Press the button on the `inject` node to get the list of earthquakes from the USGS public API.\n\nThis returns a CSV - which we then parse using the `CSV` node into individual objects.\n\nThese are then passed through a `function` to remap the property names into ones \nsuitable for the map node, and passed to the `web-socket` out node.\n\nThe map will be served at http://localhost:1880/worldmap .\nYou will need to zoom out :-)","x":130,"y":560,"wires":[]},{"id":"a733a03e.317f2","type":"worldmap","z":"896b28a8.437658","name":"","x":690,"y":700,"wires":[]},{"id":"854a8d7f.2cbdf","type":"inject","z":"896b28a8.437658","name":"zoom out map","topic":"","payload":"{\"command\":{\"layer\":\"OSM\",\"lat\":20,\"lon\":0,\"zoom\":2}}","payloadType":"json","repeat":"","crontab":"","once":true,"x":460,"y":760,"wires":[["a733a03e.317f2"]]}]

package.json

@@ -1,6 +1,6 @@
 {
     "name"          : "node-red-contrib-web-worldmap",
-    "version"       : "1.0.4",
+    "version"       : "1.0.5",
     "description"   : "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies"  : {
         "express": "4.*",

worldmap.html

@@ -40,6 +40,7 @@
     <p>Any other sub-properties of <code>msg.payload</code> will be added to the icon popup text box as extra information.</p>
     <p>Icons of type <i>plane</i>, <i>ship</i> or <i>car</i> will use built in SVG icons that align to the
     <code>bearing</code> value.</p>
+    <p>There are some <a href="https://www.npmjs.com/package/node-red-contrib-web-worldmap" target="_new">extra commands</a> to control the map.</p>
 </script>
 
 <script type="text/javascript">

worldmap/index.html

@@ -28,6 +28,7 @@
     <link rel="stylesheet",type="text/css" href="leaflet/leaflet.draw.css">
     <link rel="stylesheet",type="text/css" href="leaflet/leaflet.measurecontrol.css">
     <link rel="stylesheet",type="text/css" href="leaflet/easy-button.css">
+    <link rel="stylesheet",type="text/css" href="leaflet/leaflet.fullscreen.css">
     <link rel="stylesheet" type="text/css" href="leaflet/leaflet-openweathermap.css"/>
 
     <link rel="shortcut icon" type="image/ico" href="favicon.ico"/>
@@ -42,6 +43,7 @@
     <script type="text/javascript" src="leaflet/leaflet.draw.js"></script>
     <script type="text/javascript" src="leaflet/leaflet.measurecontrol.js"></script>
     <script type="text/javascript" src="leaflet/easy-button.js"></script>
+    <script type="text/javascript" src="leaflet/leaflet.fullscreen.min.js"></script>
     <script type="text/javascript" src="leaflet/l.ellipse.min.js"></script>
     <script type="text/javascript" src="leaflet/leaflet-heat.js"></script>
     <script type="text/javascript" src="leaflet/TileLayer.Grayscale.js"></script>
@@ -161,15 +163,9 @@ if ( window.localStorage.hasOwnProperty("maxage") ) {
 // Create the Initial Map object.
 map = new L.map('map').setView(startpos, startzoom);
 
-// Add the locate my position button
+// Move some bits around if in an iframe
-L.easyButton( 'fa-crosshairs fa-lg', function() {
-    map.locate({setView: true, maxZoom: 15});
-}, "Locate me").addTo(map);
-
-L.Control.measureControl().addTo(map);
-
 if (window.self !== window.top) {
-    console.log("In an Iframe");
+    console.log("In an iframe");
     (document.getElementById("topbar").style.display="none");
     (document.getElementById("map").style.top="0px");
     (document.getElementById("results").style.right="50px");
@@ -183,12 +179,28 @@ if (window.self !== window.top) {
     L.easyButton( 'fa-bars fa-lg', function() { toggleMenu(); }, "Toggle menu", "topright").addTo(map);
 }
 else {
-    console.log("NOT in an Iframe");
+    console.log("NOT in an iframe")
     window.onbeforeunload = function(e) {
         return 'Reloading will delete all the local markers, including any drawing on the "drawing" layer';
     };
 }
 
+// Add the fullscreen button
+L.control.fullscreen().addTo(map);
+
+// map.on('fullscreenchange', function () {
+//     if (map.isFullscreen()) { console.log('entered fullscreen') }
+//     else { console.log('exited fullscreen'); }
+// });
+
+// Add the locate my position button
+L.easyButton( 'fa-crosshairs fa-lg', function() {
+    map.locate({setView: true, maxZoom: 15});
+}, "Locate me").addTo(map);
+
+// Add the measure/ruler button
+L.Control.measureControl().addTo(map);
+
 // Create the clear heatmap button
 var clrHeat = L.easyButton( '<b>Reset Heatmap</b>', function() {
     console.log("reset heatmap");

worldmap/leaflet/Leaflet.fullscreen.min.js

@@ -0,0 +1 @@
+L.Control.Fullscreen=L.Control.extend({options:{position:"topleft",title:{"false":"View Fullscreen","true":"Exit Fullscreen"}},onAdd:function(map){var container=L.DomUtil.create("div","leaflet-control-fullscreen leaflet-bar leaflet-control");this.link=L.DomUtil.create("a","leaflet-control-fullscreen-button leaflet-bar-part",container);this.link.href="#";this._map=map;this._map.on("fullscreenchange",this._toggleTitle,this);this._toggleTitle();L.DomEvent.on(this.link,"click",this._click,this);return container},_click:function(e){L.DomEvent.stopPropagation(e);L.DomEvent.preventDefault(e);this._map.toggleFullscreen(this.options)},_toggleTitle:function(){this.link.title=this.options.title[this._map.isFullscreen()]}});L.Map.include({isFullscreen:function(){return this._isFullscreen||false},toggleFullscreen:function(options){var container=this.getContainer();if(this.isFullscreen()){if(options&&options.pseudoFullscreen){this._disablePseudoFullscreen(container)}else if(document.exitFullscreen){document.exitFullscreen()}else if(document.mozCancelFullScreen){document.mozCancelFullScreen()}else if(document.webkitCancelFullScreen){document.webkitCancelFullScreen()}else if(document.msExitFullscreen){document.msExitFullscreen()}else{this._disablePseudoFullscreen(container)}}else{if(options&&options.pseudoFullscreen){this._enablePseudoFullscreen(container)}else if(container.requestFullscreen){container.requestFullscreen()}else if(container.mozRequestFullScreen){container.mozRequestFullScreen()}else if(container.webkitRequestFullscreen){container.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT)}else if(container.msRequestFullscreen){container.msRequestFullscreen()}else{this._enablePseudoFullscreen(container)}}},_enablePseudoFullscreen:function(container){L.DomUtil.addClass(container,"leaflet-pseudo-fullscreen");this._setFullscreen(true);this.invalidateSize();this.fire("fullscreenchange")},_disablePseudoFullscreen:function(container){L.DomUtil.removeClass(container,"leaflet-pseudo-fullscreen");this._setFullscreen(false);this.invalidateSize();this.fire("fullscreenchange")},_setFullscreen:function(fullscreen){this._isFullscreen=fullscreen;var container=this.getContainer();if(fullscreen){L.DomUtil.addClass(container,"leaflet-fullscreen-on")}else{L.DomUtil.removeClass(container,"leaflet-fullscreen-on")}},_onFullscreenChange:function(e){var fullscreenElement=document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement;if(fullscreenElement===this.getContainer()&&!this._isFullscreen){this._setFullscreen(true);this.fire("fullscreenchange")}else if(fullscreenElement!==this.getContainer()&&this._isFullscreen){this._setFullscreen(false);this.fire("fullscreenchange")}}});L.Map.mergeOptions({fullscreenControl:false});L.Map.addInitHook(function(){if(this.options.fullscreenControl){this.fullscreenControl=new L.Control.Fullscreen(this.options.fullscreenControl);this.addControl(this.fullscreenControl)}var fullscreenchange;if("onfullscreenchange"in document){fullscreenchange="fullscreenchange"}else if("onmozfullscreenchange"in document){fullscreenchange="mozfullscreenchange"}else if("onwebkitfullscreenchange"in document){fullscreenchange="webkitfullscreenchange"}else if("onmsfullscreenchange"in document){fullscreenchange="MSFullscreenChange"}if(fullscreenchange){var onFullscreenChange=L.bind(this._onFullscreenChange,this);this.whenReady(function(){L.DomEvent.on(document,fullscreenchange,onFullscreenChange)});this.on("unload",function(){L.DomEvent.off(document,fullscreenchange,onFullscreenChange)})}});L.control.fullscreen=function(options){return new L.Control.Fullscreen(options)};

worldmap/leaflet/leaflet.fullscreen.css

@@ -0,0 +1,40 @@
+.leaflet-control-fullscreen a {
+  background:#fff url(fullscreen.png) no-repeat 0 0;
+  background-size:26px 52px;
+  }
+  .leaflet-touch .leaflet-control-fullscreen a {
+    background-position: 2px 2px;
+    }
+  .leaflet-fullscreen-on .leaflet-control-fullscreen a {
+    background-position:0 -26px;
+    }
+  .leaflet-touch.leaflet-fullscreen-on .leaflet-control-fullscreen a {
+    background-position: 2px -24px;
+    }
+
+/* Do not combine these two rules; IE will break. */
+.leaflet-container:-webkit-full-screen {
+  width:100%!important;
+  height:100%!important;
+  }
+.leaflet-container.leaflet-fullscreen-on {
+  width:100%!important;
+  height:100%!important;
+  }
+
+.leaflet-pseudo-fullscreen {
+  position:fixed!important;
+  width:100%!important;
+  height:100%!important;
+  top:0!important;
+  left:0!important;
+  z-index:99999;
+  }
+
+@media
+  (-webkit-min-device-pixel-ratio:2),
+  (min-resolution:192dpi) {
+    .leaflet-control-fullscreen a {
+      background-image:url(fullscreen@2x.png);
+    }
+  }