Skip to content

Instantly share code, notes, and snippets.

@TheMapSmith
Forked from d3noob/index.html
Last active November 26, 2019 01:15
Show Gist options
  • Save TheMapSmith/9e124e3bf6bf25880bc07780532f0fe3 to your computer and use it in GitHub Desktop.
Save TheMapSmith/9e124e3bf6bf25880bc07780532f0fe3 to your computer and use it in GitHub Desktop.
A full screen leaflet.js map

An example of a leaflet map set to full screen using appropriate styles.

<!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