TheMapSmith/index.html

## readme.md

      
    Raw
  

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

  
## index.html
<!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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>