CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Dusan
Dusan

Reputation: 3478

Google maps custom panes/layers

I would like to display polylines on 2 separate layers. I couldn't find a way to create a custom pane.

Ideally I would love to create 2 custom panes. Place my polylines on one of them and then place other polylines on the second pane. After thet I need to toogle the second pane to be visible/invisible. Only way I can place polylines now is:

var polyline = new google.maps.Polyline({
    path: line_points,
    strokeColor: '#cdcdc4',
    strokeOpacity: 1.0,
    strokeWeight: 2.0,
});
polyline.setMap(map);

This way, my polyline is placed to the default pane: overlayLayer. This layer I can show/hide, but I need another one. Maybe even 3-4 more layers in the future.

Is there some workaround to create my own custom panes? Thank you.

Upvotes: 0

Views: 317

Answers (1)

MrUpsidown
MrUpsidown

Reputation: 22486

You can use the Data Layer and toggle the visibility of features separately. Below is a simple example where I add some points into a feature with ID my_points and a Polygon as my_polygon. You can then use getFeatureById to register event listeners, etc.

function initMap() {

  var myLatLng = new google.maps.LatLng(-24, 123);
  var mapOptions = {
    zoom: 3,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  var fc = {
    "type": "FeatureCollection",
    "features": [{
      "type": "Feature",
      "id": "my_points",
      "geometry": {
        "type": "MultiPoint",
        "coordinates": [
          [129.0, -22.0],
          [131.0, -22.0],
          [133.0, -22.0],
          [135.0, -22.0],
          [137.0, -22.0]
        ]
      }
    }, {
      "type": "Feature",
      "id": "my_polygon",
      "properties": {
        "letter": "G",
        "polygon-bg-color": "blue",
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [123.61, -22.14],
            [122.38, -21.73],
            [121.06, -21.69],
            [119.66, -22.22],
            [119.00, -23.40],
            [118.65, -24.76],
            [118.43, -26.07],
            [118.78, -27.56],
            [119.22, -28.57],
            [120.23, -29.49],
            [121.77, -29.87],
            [123.57, -29.64],
            [124.45, -29.03],
            [124.71, -27.95],
            [124.80, -26.70],
            [124.80, -25.60],
            [123.61, -25.64],
            [122.56, -25.64],
            [121.72, -25.72],
            [121.81, -26.62],
            [121.86, -26.98],
            [122.60, -26.90],
            [123.57, -27.05],
            [123.57, -27.68],
            [123.35, -28.18],
            [122.51, -28.38],
            [121.77, -28.26],
            [121.02, -27.91],
            [120.49, -27.21],
            [120.14, -26.50],
            [120.10, -25.64],
            [120.27, -24.52],
            [120.67, -23.68],
            [121.72, -23.32],
            [122.43, -23.48],
            [123.04, -24.04],
            [124.54, -24.28],
            [124.58, -23.20],
            [123.61, -22.14]
          ]
        ]
      }
    }, {
      "type": "Feature",
      "id": "my_other_polygon",
      "properties": {
        "polygon-bg-color": "yellow",
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [115.61, -22.14],
            [114.38, -21.73],
            [113.06, -21.69],
            [111.66, -22.22],
            [111.00, -23.40],
            [110.65, -24.76],
            [110.43, -26.07],
            [110.78, -27.56],
            [111.22, -28.57],
            [112.23, -29.49],
            [113.77, -29.87],
            [115.57, -29.64],
            [116.45, -29.03],
            [116.71, -27.95],
            [116.80, -26.70],
            [116.80, -25.60],
            [115.61, -25.64],
            [114.56, -25.64],
            [113.72, -25.72],
            [113.81, -26.62],
            [113.86, -26.98],
            [114.60, -26.90],
            [115.57, -27.05],
            [115.57, -27.68],
            [115.35, -28.18],
            [114.51, -28.38],
            [113.77, -28.26],
            [113.02, -27.91],
            [112.49, -27.21],
            [112.14, -26.50],
            [112.10, -25.64],
            [112.27, -24.52],
            [112.67, -23.68],
            [113.72, -23.32],
            [114.43, -23.48],
            [115.04, -24.04],
            [116.54, -24.28],
            [116.58, -23.20],
            [115.61, -22.14]
          ]
        ]
      }
    }]
  };

  map.data.addGeoJson(fc);

  var my_points = map.data.getFeatureById('my_points');
  var my_polygon = map.data.getFeatureById('my_polygon');

  // Updated to show setStyle method
  map.data.setStyle(function(feature) {
    var color;
    if (feature.getProperty('polygon-bg-color')) {
      color = feature.getProperty('polygon-bg-color');
    }
    return /** @type {!google.maps.Data.StyleOptions} */ ({
      fillColor: color,
    });
  });

  google.maps.event.addDomListener(document.getElementById('button1'), 'click', function() {

    map.data.overrideStyle(my_points, {
      visible: false
    });
  });

  google.maps.event.addDomListener(document.getElementById('button2'), 'click', function() {

    map.data.overrideStyle(my_points, {
      visible: true
    });
  });

  google.maps.event.addDomListener(document.getElementById('button3'), 'click', function() {

    map.data.overrideStyle(my_polygon, {
      visible: false
    });
  });

  google.maps.event.addDomListener(document.getElementById('button4'), 'click', function() {

    map.data.overrideStyle(my_polygon, {
      visible: true
    });
  });
}
#map-canvas {
  height: 110px;
}
<div id="map-canvas"></div>

<hr>

<button id="button1">
Hide points
</button>
<button id="button2">
Show points
</button>

<hr>

<button id="button3">
Hide G
</button>
<button id="button4">
Show G
</button>

<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Documentation: https://developers.google.com/maps/documentation/javascript/reference/data

Upvotes: 1

Related Questions