noruka-google-vector-tiles
Version:
A vector map tiler for google map
91 lines (86 loc) • 3.86 kB
HTML
<html>
<head>
<title>Style filter and layer</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>Style filter and layer</h2>
<p>
Set style, filter and visible layers simultaneously. Redraw is triggered only once.
</p>
<p>
<input type="radio" id="status1" name="status" value="status1" onclick="handleClick(this)">
<label for="status1">status1</label><br>
<input type="radio" id="status2" name="status" value="status2" onclick="handleClick(this)">
<label for="status2">status2</label><br>
<input type="radio" id="status3" name="status" value="status3" onclick="handleClick(this)">
<label for="status3">status3</label><br>
</p>
</div>
</div>
<script src="../dist/vector-tiles-google-maps.js"></script>
<script type="text/javascript">
var map;
var mvtSource;
var input = document.getElementsByName("census");
function InitGoogleMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 37.08, lng: -6.84 },
zoom: 5
});
// if tiles have not been loaded, GetTile will trigger twice.
google.maps.event.addListenerOnce(map, 'tilesloaded', function () {
InitVectorTiles();
});
}
function handleClick(radio) {
var style = {
strokeStyle: '#000000',
lineWidth: 1
}
switch (radio.value) {
case 'status1':
mvtSource.setVisibleLayers(["country"], false);
mvtSource.setFilter(function () { return true }, false);
style.fillStyle = '#ff00bf';
mvtSource.setStyle(style); // redrawTiles at the end (true by default)
break;
case 'status2':
mvtSource.setFilter(function (feature) {
return parseInt(feature.properties.Id) > 20;
}, false);
style.fillStyle = '#bfff00';
mvtSource.setStyle(style, false);
mvtSource.setVisibleLayers(["provinces"]); // redrawTiles at the end (true by default)
break;
case 'status3':
mvtSource.setVisibleLayers(["municipalities"], false);
style.fillStyle = '#4F86F7';
mvtSource.setStyle(style, false);
mvtSource.setFilter(function (feature) {
return parseInt(feature.properties.Value) > 20000;
}); // redrawTiles at the end (true by default)
break;
}
}
function InitVectorTiles() {
var options = {
url: "https://api.mapbox.com/v4/techjb.bwtby589/{z}/{x}/{y}.vector.pbf?sku=101D1qzcYDQhj&access_token=pk.eyJ1IjoidGVjaGpiIiwiYSI6ImNrbzFuMDV6MzBhYXQycWxwaG4ydGozZTgifQ.hCgIvpwnfw93KFcWaR5WBA",
sourceMaxZoom: 14,
};
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>