noruka-google-vector-tiles
Version:
A vector map tiler for google map
89 lines (86 loc) • 3.4 kB
HTML
<html>
<head>
<title>Point, linestring and polygon</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>Point, linestring and polygon</h2>
<p>
This example loads the types of geometries.
</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: 41.39, lng: 2.14 },
zoom: 15,
styles: [
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
}
]
});
google.maps.event.addListenerOnce(map, 'tilesloaded', function () {
InitVectorTiles();
});
}
function InitVectorTiles() {
// Links obtained from https://www.icgc.cat/es/Innovacion/Recursos-para-desarrolladores/Teselas-vectoriales-y-estilos-para-hacer-mapas-ligeros-y-apps
var options = {
url: "https://betaserver.icgc.cat/tileserver3/tileserver.php/bt5m_stpropi/{z}/{x}/{y}.pbf",
sourceMaxZoom: 16,
visibleLayers: [
"ILL01_pol", // polygon
"EDI01_lin", // linestring
"TOR02_poi", "CNS03_poi", "VER01_poi" // Points
],
style: function (feature) {
switch (feature.type) {
case 1: { // Point
return {
fillStyle: 'rgba(115, 255, 0, 1)',
strokeStyle: 'rgba(2, 0, 255, 1)',
lineWidth: 3,
radius: 10
}
} break;
case 2: { //LineString
return {
strokeStyle: 'rgba(120, 47, 144, 1)',
lineWidth: 1
}
} break;
case 3: { // Polygon
return {
fillStyle: 'rgba(251, 251, 12, 1)',
shadowColor: 'rgba(54, 54, 38, 1)'
}
} break;
}
}
};
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>