Skip to content

Instantly share code, notes, and snippets.

@zbeat

zbeat/README.md

Created January 11, 2017 00:03
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zbeat/12bdc5336b881feb9b084ebe54c4a6ac to your computer and use it in GitHub Desktop.
Save zbeat/12bdc5336b881feb9b084ebe54c4a6ac to your computer and use it in GitHub Desktop.
Download ZIP
Google Maps tiles w/ Leaflet JS (via GoogleMutant) -- STYLED MAP
Raw
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 = [
{ elementType: "labels", stylers: [ { visibility: "on" } ] },
{ featureType: "water", stylers: [ { color: "#444444" } ] },
{ featureType: "landscape", stylers: [ { color: "#eeeeee" } ] },
{ featureType: "road", stylers: [ { visibility: "off" } ] },
{ featureType: "poi", stylers: [ { visibility: "off" } ] },
{ featureType: "transit", stylers: [ { visibility: "off" } ] },
{ featureType: "administrative", stylers: [ { visibility: "off" } ] },
{ featureType: "administrative.locality", stylers: [ { visibility: "on" } ] }
];
// var styles = [];
var mutantMap = L.gridLayer.googleMutant({
// minZoom: 10,
// maxZoom: 20,
type: "roadmap", // valid values: "roadmap", "satellite", "terrain", "hybrid",
styles: styles
})
mutantMap.addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment