@galihrivanto/google-vector-tiles
Version:
A vector map tiler for google map
72 lines (66 loc) • 2.71 kB
HTML
<html>
<head>
<title>Spanish Parcels</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 id="map"></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.50, lng: -3.89 },
zoom: 16,
styles: [
{
featureType: "poi",
elementType: "labels",
stylers: [{ visibility: "off" }]
}
]
});
// if tiles have not been loaded, GetTile will trigger twice.
google.maps.event.addListenerOnce(map, 'tilesloaded', function () {
InitVectorTiles();
});
}
function InitVectorTiles() {
var options = {
url: "https://api.mapbox.com/v4/techjb.9o01nh3m/{z}/{x}/{y}.vector.pbf?sku=101D1qzcYDQhj&access_token=pk.eyJ1IjoidGVjaGpiIiwiYSI6ImNqZnAxdGprYTB3a2EzM3JxN3ozazE1a3kifQ.WTzyyZbmKbyehCBm9HNhbg",
sourceMaxZoom: 16,
//getIDForLayerFeature: function (feature) { // Unique identifier for each feature
// return feature.properties.id
//},
style: function (feature) {
return {
fillStyle: 'rgba(0,0,0, 0.0)',
strokeStyle: 'rgba(0,0,0, 1)',
lineWidth: 1,
selected: {
fillStyle: 'rgba(0,0,0, 0.5)',
strokeStyle: 'rgba(0,0,0, 1)',
lineWidth: 2,
}
};
}
};
var mvtSource = new MVTSource(map, options);
map.overlayMapTypes.insertAt(0, mvtSource);
//map.addListener("click", function (event) {
// mvtSource.onClick(event, function (event) {
// if (!event.feature) {
// return mvtSource.deselectAllFeatures();
// }
// console.log(event.feature.properties)
// });
//});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA_bDL3sglTy8HGoiAU9JsLtayEkQakE7c&callback=InitGoogleMap&libraries=&v=weekly"
defer></script>
</body>
</html>