zbeat/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Hat-tip to Ivan Sanchez's Leaflet.GridLayer.GoogleMutant.

  
## index.html
<!DOCTYPE html>
<html>

  <head>
    <title>Google Maps tiles w/ Leaflet JS (via GoogleMutant)</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="http://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
    <script src="http://unpkg.com/leaflet@1.0.1/dist/leaflet-src.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDm9FChxIfXD9i63TsTYmrkE8IBbzuyVTM" async defer></script>
    <script src="http://unpkg.com/leaflet.gridlayer.googlemutant@latest/Leaflet.GoogleMutant.js"></script>
    <style>
      #map {
        /*    margin: 32px; */
        /*    width: auto; */
        /*    overflow: visible; */
        width: calc( 100vw - 64px);
        height: calc( 100vh - 64px);
      }

      body {
        margin: 0
      }
    </style>
  </head>

  <body>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var mapopts = {
        // zoomSnap: 0.1
      };
	  var latLng = L.latLng(41.31, -72.93);
	  var zoom = 12;
      var map = L.map("map", mapopts).setView(latLng, zoom);

	    var styles = [];
	  var mutantMap = L.gridLayer.googleMutant({
        // minZoom: 10,
        // maxZoom: 20,
        type: "roadmap", // valid values: "roadmap", "satellite", "terrain", "hybrid",
		styles: styles
      })
	  mutantMap.addTo(map);

	  // create a rectangle from an array of two points (top left, bottom right)
	  var bounds = [[41.56, -73.03], [41.46, -72.83]];
	  var rectangle = L.rectangle(bounds);
	  rectangle.addTo(map);

	  // create a red polygon from an array of LatLng points
	  var latlngs = [[41.26, -73.23],[41.36, -73.23],[41.41, -73.13],[41.41, -72.73],[41.36, -72.63],[41.26, -72.63],[41.21, -72.73],[41.21, -73.13]];
	  var polygon = L.polygon(latlngs, { color: "red" }).addTo(map);

	  // zoom the map to the polygon
	  map.fitBounds(polygon.getBounds());
    </script>
  </body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Google Maps tiles w/ Leaflet JS (via GoogleMutant)</title>

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="http://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
	<script src="http://unpkg.com/leaflet@1.0.1/dist/leaflet-src.js"></script>
	<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDm9FChxIfXD9i63TsTYmrkE8IBbzuyVTM" async defer></script>
	<script src="http://unpkg.com/leaflet.gridlayer.googlemutant@latest/Leaflet.GoogleMutant.js"></script>
	<style>
	#map {
	/* margin: 32px; */
	/* width: auto; */
	/* overflow: visible; */
	width: calc( 100vw - 64px);
	height: calc( 100vh - 64px);
	}

	body {
	margin: 0
	}
	</style>
	</head>

	<body>
	<div id="map" class="map"></div>
	<script type="text/javascript">
	var mapopts = {
	// zoomSnap: 0.1
	};
	var latLng = L.latLng(41.31, -72.93);
	var zoom = 12;
	var map = L.map("map", mapopts).setView(latLng, zoom);

	var styles = [];
	var mutantMap = L.gridLayer.googleMutant({
	// minZoom: 10,
	// maxZoom: 20,
	type: "roadmap", // valid values: "roadmap", "satellite", "terrain", "hybrid",
	styles: styles
	})
	mutantMap.addTo(map);

	// create a rectangle from an array of two points (top left, bottom right)
	var bounds = [[41.56, -73.03], [41.46, -72.83]];
	var rectangle = L.rectangle(bounds);
	rectangle.addTo(map);

	// create a red polygon from an array of LatLng points
	var latlngs = [[41.26, -73.23],[41.36, -73.23],[41.41, -73.13],[41.41, -72.73],[41.36, -72.63],[41.26, -72.63],[41.21, -72.73],[41.21, -73.13]];
	var polygon = L.polygon(latlngs, { color: "red" }).addTo(map);

	// zoom the map to the polygon
	map.fitBounds(polygon.getBounds());
	</script>
	</body>

	</html>