@galihrivanto/google-vector-tiles
Version:
A vector map tiler for google map
58 lines (55 loc) • 1.95 kB
HTML
<html>
<head>
<title>Basic</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container-left">
<div id="map"></div>
</div>
<div class="container-right">
<div>
<h2>Basic</h2>
<p>
Basic example loading vector tiles in Google Maps. Debug mode enabled.
</p>
</div>
</div>
<script src="../dist/vector-tiles-google-maps.js"></script>
<script type="text/javascript">
var map;
function InitGoogleMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: {
lat: 40.4972973098,
lng: -3.8561586490 },
zoom: 14
});
// if tiles have not been loaded, GetTile will trigger twice.
google.maps.event.addListenerOnce(map, 'tilesloaded', function () {
InitVectorTiles();
});
}
function InitVectorTiles() {
var tilesetsApiKey = "dAKEORo2ZL1YSwzNQeyEF4Ktf1KsqEKM8cumMco1";
var layer = "sectores-parcels";
var options = {
url: "https://tilesets.goolzoom.com/v1/urban-planning-" + layer + "/{z}/{x}/{y}.pbf",
xhrHeaders: {
"x-api-key": tilesetsApiKey,
"Accept": "application/x-protobuf"
},
debug: true,
sourceMaxZoom: 14
};
var mvtSource = new MVTSource(map, options);
map.overlayMapTypes.insertAt(0, mvtSource);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA_bDL3sglTy8HGoiAU9JsLtayEkQakE7c&callback=InitGoogleMap&libraries=&v=weekly"
defer></script>
</body>
</html>