@galihrivanto/google-vector-tiles
Version:
A vector map tiler for google map
130 lines (120 loc) • 5.01 kB
HTML
<html>
<head>
<title>Custom draw</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>Custom Draw</h2>
<p>
Custom draw function for each feature. In the example, points are drawed as triangles.
</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: 'rgb(255, 0, 0)',
strokeStyle: 'rgba(2, 0, 255, 1)',
lineWidth: 1,
radius: 30
}
} 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;
}
},
customDraw: customDraw
};
function customDraw(tileContext, tile, style, mVTFeature) {
switch (mVTFeature.type) {
case 1: //Point
DrawTriangle(tileContext, tile, style, mVTFeature);
break;
default: break;
}
}
function DrawTriangle(tileContext, tile, style, mVTFeature) {
var coordinates = tile.vectorTileFeature.coordinates[0][0];
var point = mVTFeature.getPoint(coordinates, tileContext, tile.divisor);
var context2d = mVTFeature.getContext2d(tileContext.canvas, style);
var radius = style.radius;
var angle = Math.atan2(-1, 0);
var point1 = Vertice(radius, angle, point);
angle += (1 / 3) * (2 * Math.PI);
var point2 = Vertice(radius, angle, point);
angle += (1 / 3) * (2 * Math.PI);
var point3 = Vertice(radius, angle, point);
context2d.beginPath();
context2d.moveTo(point1.x, point1.y);
context2d.lineTo(point2.x, point2.y);
context2d.lineTo(point3.x, point3.y);
context2d.closePath();
context2d.fill();
context2d.stroke();
}
function Vertice(radius, angle, point) {
return {
x: radius * Math.cos(angle) + point.x,
y: radius * Math.sin(angle) + point.y
}
}
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>