noruka-google-vector-tiles
Version:
A vector map tiler for google map
109 lines (95 loc) • 4.48 kB
HTML
<html>
<head>
<title>Styles</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>Styles</h2>
<p>
Update style by setting the canvas properties:
</p>
<p>
<label for="fillStyle">fillStyle: </label>
<input type="color" value="#0000ff" id="fillStyle" name="input" /><br />
<label for="strokeStyle">strokeStyle: </label>
<input type="color" value="#ffff00" id="strokeStyle" name="input" /><br />
<label for="lineWidth">lineWidth: </label>
<input type="number" min="0" value="1" id="lineWidth" name="input" /><br />
<label for="shadowColor">shadowColor: </label>
<input type="color" value="#BF3FBF" id="shadowColor" name="input" /><br />
<label for="shadowBlur">shadowBlur: </label>
<input type="number" min="0" value="1" id="shadowBlur" name="input" /><br />
<label for="globalAlpha">globalAlpha: </label>
<input type="number" min="0" max="1" value="0.7" step="0.1" id="globalAlpha" name="input" /><br />
<label for="lineCap">lineCap: </label>
<select id="lineCap" name="input">
<option value="butt" selected="selected">butt</option>
<option value="round">round</option>
<option value="square">square</option>
</select><br />
<label for="lineJoin">lineJoin: </label>
<select id="lineJoin" name="input">
<option value="bevel" selected="selected">bevel</option>
<option value="round">round</option>
<option value="miter">miter</option>
</select>
</p>
</div>
</div>
<script src="../dist/vector-tiles-google-maps.js"></script>
<script type="text/javascript">
var map;
var mvtSource;
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 GetStyle() {
return {
fillStyle: document.getElementById("fillStyle").value,
strokeStyle: document.getElementById("strokeStyle").value,
lineWidth: document.getElementById("lineWidth").value,
shadowColor: document.getElementById("shadowColor").value,
shadowBlur: document.getElementById("shadowBlur").value,
globalAlpha: document.getElementById("globalAlpha").value,
lineCap: document.getElementById("lineCap").value,
lineJoin: document.getElementById("lineJoin").value
};
}
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,
visibleLayers: ["provinces"],
style: GetStyle()
};
mvtSource = new MVTSource(map, options);
map.overlayMapTypes.insertAt(0, mvtSource);
var inputs = document.getElementsByName("input");
inputs.forEach(function (input) {
input.addEventListener("change", UpdateStyle);
});
}
function UpdateStyle() {
var style = GetStyle();
mvtSource.setStyle(style);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA_bDL3sglTy8HGoiAU9JsLtayEkQakE7c&callback=InitGoogleMap&libraries=&v=weekly"
defer></script>
</body>
</html>