Add fullscreen capability to world map
(and update examples to new format)
This commit is contained in:
parent
ce9a554d39
commit
a2a8ff1316
12
README.md
12
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: '© 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: '© 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>
|
||||
|
@ -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":[]}]
|
||||
|
@ -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"]]}]
|
||||
|
@ -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.*",
|
||||
|
@ -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">
|
||||
|
@ -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
|
||||
L.easyButton( 'fa-crosshairs fa-lg', function() {
|
||||
map.locate({setView: true, maxZoom: 15});
|
||||
}, "Locate me").addTo(map);
|
||||
|
||||
L.Control.measureControl().addTo(map);
|
||||
|
||||
// Move some bits around if in an iframe
|
||||
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");
|
||||
|
1
worldmap/leaflet/Leaflet.fullscreen.min.js
vendored
Executable file
1
worldmap/leaflet/Leaflet.fullscreen.min.js
vendored
Executable file
@ -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)};
|
BIN
worldmap/leaflet/fullscreen.png
Executable file
BIN
worldmap/leaflet/fullscreen.png
Executable file
Binary file not shown.
After Width: | Height: | Size: 299 B |
BIN
worldmap/leaflet/fullscreen@2x.png
Executable file
BIN
worldmap/leaflet/fullscreen@2x.png
Executable file
Binary file not shown.
After Width: | Height: | Size: 420 B |
40
worldmap/leaflet/leaflet.fullscreen.css
Executable file
40
worldmap/leaflet/leaflet.fullscreen.css
Executable file
@ -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);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user