An example of a leaflet map set to full screen using appropriate styles.
-
-
Save TheMapSmith/9e124e3bf6bf25880bc07780532f0fe3 to your computer and use it in GitHub Desktop.
A full screen leaflet.js map
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Full Screen Leaflet Map</title> | |
| <meta charset="utf-8" /> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" /> | |
| <style> | |
| body { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| html, | |
| body, | |
| #map { | |
| height: 100%; | |
| width: 100%; | |
| } | |
| .leaflet-container { | |
| background: white | |
| } | |
| </style> | |
| <!-- <script src="https://rawgithub.com/mylen/leaflet.TileLayer.WMTS/master/leaflet-tilelayer-wmts.js"></script> --> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"> | |
| </script> | |
| <script> | |
| var map = L.map('map').setView([39.164141,-99.052734], 5); | |
| var basemaps = { | |
| Satellite: L.tileLayer.wms('https://geo.fcc.gov/gwc/service/wms?', { | |
| layers: 'fcc:bpr_apr2017_county_layer_fixed' | |
| }), | |
| 'No Satellite': L.tileLayer.wms('https://geo.fcc.gov/gwc/service/wms?', { | |
| layers: 'fcc:bpr_county_layer_1' | |
| }) | |
| }; | |
| // basemaps.Base.addTo(map); | |
| L.control.layers(basemaps).addTo(map); | |
| var BingLayer = L.TileLayer.extend({ | |
| getTileUrl: function(tilePoint) { | |
| this._adjustTilePoint(tilePoint); | |
| return L.Util.template(this._url, { | |
| s: this._getSubdomain(tilePoint), | |
| q: this._quadKey(tilePoint.x, tilePoint.y, this._getZoomForUrl()) | |
| }); | |
| }, | |
| _quadKey: function(x, y, z) { | |
| var quadKey = []; | |
| for (var i = z; i > 0; i--) { | |
| var digit = '0'; | |
| var mask = 1 << (i - 1); | |
| if ((x & mask) != 0) { | |
| digit++; | |
| } | |
| if ((y & mask) != 0) { | |
| digit++; | |
| digit++; | |
| } | |
| quadKey.push(digit); | |
| } | |
| return quadKey.join(''); | |
| } | |
| }); | |
| var layer = new BingLayer( | |
| 'https://onemap.att.com/gla6/OneMap/OneMap.Web/Home/TileService?returnType=png&csLayerIds=Coverage_4GLTE_Data&quadKey={q}', {} | |
| ); | |
| layer.addTo(map); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment