google maps + vector tiles

by John Doe

HTML

<script src="https://techjb.github.io/Vector-Tiles-Google-Maps/dist/vector-tiles-google-maps.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>Point, linestring and polygon</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="container-left">
        <div id="map"></div>
    </div>
    <script type="text/javascript">
      var map;
      function InitGoogleMap() {
        map = new google.maps.Map(document.getElementById("map"), {
          center: { lat: 55.65, lng: 37.73 },
          zoom: 15,
          styles: [
            {
              "featureType": "poi",
              "elementType": "all",
              "stylers": [{ "visibility": "off" }]
            }
          ]
        });

        google.maps.event.addListenerOnce(map, 'tilesloaded', function () {
          InitVectorTiles();
        });
      }

      function InitVectorTiles() {
        var options = {
          url: "https://betaserver.icgc.cat/tileserver3/tileserver.php/bt5m_stpropi/{z}/{x}/{y}.pbf",
          sourceMaxZoom: 16,
          visibleLayers: ["TOR02_poi", "CNS03_poi", "VER01_poi"],
          clickableLayers: ["TOR02_poi", "CNS03_poi", "VER01_poi"],
          getIDForLayerFeature: function(feature) {
              return feature.properties.id;
          },
          style: function (feature) {
            switch (feature.type) {
              case 1: { // Point
                return {
                  fillStyle: 'rgba(115, 255, 0, 1)',
                  strokeStyle: 'rgba(2, 0, 255, 1)',
                  lineWidth: 3,
                  radio: 10
                }
              } break;
            }
          }
        };

        var mvtSource = new MVTSource(map, options);
        map.overlayMapTypes.insertAt(0, mvtSource);
        
        

        map.addListener("rightclick", function (event) {
          mvtSource.onClick(event, ShowSelectedFeatures, {
          	multipleSelection:...

CSS

html, body {
    padding: 0;
    margin: 0;
}

.container-left {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%
}

#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

JavaScript

MVTFeature.prototype._drawPoint = function(tileContext, tile, style) {
  var context2d = this._getContext2d(tileContext.canvas, style);
  var img = new Image();
  context2d.beginPath();
  img.onload = () => { context2d.drawImage(img, 0, 0); };
  img.src = 'https://recyclemap.ru/images/markers/1_2_3_4_5_7_8_9_10_12_13.png';
}