leaflet.gridlayer.googlemutant
Version:
A plugin for LeafletJS to use Google maps basemaps.
146 lines (113 loc) • 3.54 kB
HTML
<html>
<head>
<title>Leaflet debug page</title>
<!-- <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer></script> -->
<script src="https://maps.googleapis.com/maps/api/js" async defer></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="../Leaflet/dist/leaflet.css" />
<script type="text/javascript" src="../Leaflet/dist/leaflet-src.js"></script>-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet-src.js"></script>
<script type="text/javascript" src="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>
Leaflet's Google Mutant demo
<div id="map" class="map"></div>
<script type="text/javascript">
var mapopts = {
// zoomSnap: 0.1
};
var map = L.map('map', mapopts).setView([0,0],0);
var roadMutant = L.gridLayer.googleMutant({
maxZoom: 24,
type:'roadmap'
}).addTo(map);
var satMutant = L.gridLayer.googleMutant({
maxZoom: 24,
type:'satellite'
});
var terrainMutant = L.gridLayer.googleMutant({
maxZoom: 24,
type:'terrain'
});
var hybridMutant = L.gridLayer.googleMutant({
maxZoom: 24,
type:'hybrid'
});
var styleMutant = L.gridLayer.googleMutant({
styles: [
{elementType: 'labels', stylers: [{visibility: 'off'}]},
{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: 'off'}]}
],
maxZoom: 24,
type:'roadmap'
});
var trafficMutant = L.gridLayer.googleMutant({
maxZoom: 24,
type:'roadmap'
});
trafficMutant.addGoogleLayer('TrafficLayer');
var transitMutant = L.gridLayer.googleMutant({
maxZoom: 24,
type:'roadmap'
});
transitMutant.addGoogleLayer('TransitLayer');
L.control.layers({
Roadmap: roadMutant,
Aerial: satMutant,
Terrain: terrainMutant,
Hybrid: hybridMutant,
Styles: styleMutant,
Traffic: trafficMutant,
Transit: transitMutant
}, {}, {
collapsed: false
}).addTo(map);
var kyiv = [50.5, 30.5],
lnd = [51.51, -0.12],
sf = [37.77, -122.42],
dc = [38.91, -77.04],
trd = [63.41, 10.41],
madBounds = [[40.70, -4.19], [40.12, -3.31]],
mad = [40.40, -3.7];
var marker1 = L.marker(kyiv).addTo(map),
marker2 = L.marker(lnd).addTo(map),
marker3 = L.marker(dc).addTo(map),
marker4 = L.marker(sf).addTo(map),
marker5 = L.marker(trd).addTo(map),
marker6 = L.marker(mad).addTo(map);
var rectangle = L.rectangle(madBounds).addTo(map);
// map.addLayer(osm);
// map.addLayer(kittens);
// map.addLayer(debug);
var grid = L.gridLayer({
attribution: 'Grid Layer',
// tileSize: L.point(150, 80),
// tileSize: tileSize
});
grid.createTile = function (coords) {
var tile = L.DomUtil.create('div', 'tile-coords');
tile.innerHTML = [coords.x, coords.y, coords.z].join(', ');
return tile;
};
map.addLayer(grid);
</script>
</body>
</html>