Как сделать отверстия в многоугольниках, чтобы отображать каждый из них чистыми цветами на карте Google? - PullRequest
Новая
       41

Как сделать отверстия в многоугольниках, чтобы отображать каждый из них чистыми цветами на карте Google?

0 голосов
/ 13 декабря 2018

У меня есть 4 наложенных многоугольника, и мне нужно иметь несколько чистых цветов, чтобы различать их, например:

screenshot of resulting map

Цвета чистые и хорошоотделены!

Мой код: 

<!DOCTYPE html>
<html>
  <head>
    <style>

      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>

  <div id="map"></div>

  <script>

     var map;
     var GeoJson;

     function initMap() {

        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 13,
          center: new google.maps.LatLng(-8.044474,-34.884578),
        });
        map.data.addGeoJson(mygeojson);
        map.data.setStyle(function(feature) {
            var pvalue = feature.getProperty('value');

            if (pvalue == 120) {
                color = 'Blue';
            }
            if (pvalue == 240) {
                color = '#ff5050';
            }
            if (pvalue == 480) {
                color = '#ff9933';
            }
            if (pvalue == 600) {
                color = 'yellow';
            }
    return {
      fillColor: color,
      strokeWeight: 1
    }
  });

}

var mygeojson = {"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-34.915172,-8.049481],[-34.914707,-8.055378],[-34.91162,-8.060598],[-34.910063,-8.061326],[-34.90985,-8.061371],[-34.90802,-8.060531],[-34.905952,-8.056527],[-34.903001,-8.050196],[-34.902767,-8.04958],[-34.902568,-8.045435],[-34.902587,-8.045258],[-34.906566,-8.041764],[-34.908749,-8.0408],[-34.908813,-8.040815],[-34.909764,-8.041281],[-34.90979,-8.041321],[-34.915152,-8.049235],[-34.915172,-8.049481]]]},"properties":{"group_index":0,"value":120,"center":[-34.909916,-8.05]}},{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-34.929988,-8.047497],[-34.926252,-8.054765],[-34.924748,-8.062501],[-34.917848,-8.067531],[-34.910711,-8.074744],[-34.907147,-8.074238],[-34.902147,-8.067023],[-34.898236,-8.064276],[-34.896426,-8.063107],[-34.895983,-8.062843],[-34.896042,-8.062316],[-34.895973,-8.051555],[-34.893041,-8.048618],[-34.891768,-8.04525],[-34.891211,-8.043531],[-34.891541,-8.042554],[-34.891747,-8.042396],[-34.892397,-8.041901],[-34.893149,-8.041424],[-34.895814,-8.039872],[-34.902685,-8.032683],[-34.904729,-8.031778],[-34.906,-8.031939],[-34.913661,-8.035535],[-34.915638,-8.038325],[-34.920721,-8.043953],[-34.928257,-8.044341],[-34.929209,-8.045448],[-34.929379,-8.045746],[-34.929988,-8.047497]]]},"properties":{"group_index":0,"value":240,"center":[-34.909916,-8.05]}},{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-34.956063,-8.033059],[-34.955041,-8.033829],[-34.954587,-8.034079],[-34.948183,-8.0401],[-34.947163,-8.044392],[-34.947272,-8.047986],[-34.948019,-8.05595],[-34.948103,-8.056254],[-34.948084,-8.056901],[-34.946187,-8.059355],[-34.952109,-8.068439],[-34.952839,-8.068665],[-34.952829,-8.070174],[-34.952796,-8.070289],[-34.951771,-8.072104],[-34.951041,-8.071877],[-34.940532,-8.072531],[-34.937183,-8.077114],[-34.936484,-8.078185],[-34.934712,-8.082695],[-34.934542,-8.08374],[-34.934408,-8.08414],[-34.931548,-8.087205],[-34.929387,-8.087655],[-34.925758,-8.087245],[-34.917409,-8.090498],[-34.915368,-8.097388],[-34.914401,-8.099923],[-34.912478,-8.102227],[-34.908953,-8.102959],[-34.908757,-8.102013],[-34.904896,-8.092322],[-34.904582,-8.089398],[-34.90457,-8.089352],[-34.898932,-8.081687],[-34.892253,-8.084787],[-34.889729,-8.086645],[-34.88728,-8.0867],[-34.887252,-8.086673],[-34.887112,-8.084173],[-34.881451,-8.074375],[-34.877403,-8.066542],[-34.877357,-8.066449],[-34.876976,-8.060774],[-34.875231,-8.051236],[-34.873014,-8.0484],[-34.873907,-8.03785],[-34.872542,-8.030814],[-34.87267,-8.030475],[-34.873901,-8.029557],[-34.881458,-8.022556],[-34.887505,-8.012962],[-34.888584,-8.012166],[-34.888918,-8.012105],[-34.897461,-8.012019],[-34.897505,-8.012052],[-34.907112,-8.01783],[-34.915999,-8.019938],[-34.920063,-8.022551],[-34.930189,-8.020902],[-34.94101,-8.025031],[-34.944608,-8.024917],[-34.954314,-8.029913],[-34.956063,-8.033059]]]},"properties":{"group_index":0,"value":480,"center":[-34.909916,-8.05]}},{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-34.967875,-8.022124],[-34.967032,-8.022491],[-34.962219,-8.027052],[-34.965092,-8.03679],[-34.965569,-8.037422],[-34.964933,-8.039161],[-34.960129,-8.048242],[-34.95918,-8.050267],[-34.957693,-8.053731],[-34.956616,-8.054331],[-34.953751,-8.063539],[-34.958475,-8.066552],[-34.96713,-8.073047],[-34.966185,-8.076521],[-34.964619,-8.076095],[-34.962336,-8.075392],[-34.958578,-8.072295],[-34.951771,-8.072104],[-34.947239,-8.076907],[-34.945128,-8.081491],[-34.944516,-8.092605],[-34.944491,-8.09299],[-34.942463,-8.094713],[-34.936203,-8.099609],[-34.936156,-8.099611],[-34.930332,-8.098121],[-34.928104,-8.097671],[-34.926769,-8.097602],[-34.919303,-8.105374],[-34.920486,-8.107928],[-34.921611,-8.110473],[-34.921267,-8.11224],[-34.921107,-8.112423],[-34.921099,-8.112432],[-34.920937,-8.112614],[-34.915398,-8.116855],[-34.914727,-8.117221],[-34.911887,-8.117649],[-34.904949,-8.112587],[-34.904891,-8.112337],[-34.905136,-8.111096],[-34.905752,-8.109837],[-34.906527,-8.105314],[-34.906546,-8.105024],[-34.90736,-8.102336],[-34.907636,-8.101151],[-34.907492,-8.097309],[-34.904896,-8.092322],[-34.895762,-8.09403],[-34.892507,-8.099182],[-34.892333,-8.099679],[-34.888095,-8.101449],[-34.887966,-8.101505],[-34.885749,-8.101456],[-34.883164,-8.096974],[-34.879828,-8.088927],[-34.879867,-8.088719],[-34.880591,-8.087133],[-34.881121,-8.086439],[-34.880567,-8.074973],[-34.874867,-8.072386],[-34.870276,-8.064982],[-34.870159,-8.064823],[-34.869519,-8.056238],[-34.868117,-8.04922],[-34.869572,-8.042614],[-34.863881,-8.032346],[-34.862718,-8.03064],[-34.864656,-8.026769],[-34.865011,-8.026182],[-34.871422,-8.017997],[-34.872082,-8.015905],[-34.872426,-8.015001],[-34.872539,-8.014982],[-34.873295,-8.014922],[-34.881793,-8.006885],[-34.881807,-8.004915],[-34.883463,-8.002759],[-34.883552,-8.002686],[-34.884165,-8.002354],[-34.889202,-8.000715],[-34.89597,-8.002288],[-34.896938,-8.002808],[-34.899093,-8.004078],[-34.904905,-8.009364],[-34.914814,-8.009358],[-34.920314,-8.010243],[-34.92932,-8.014936],[-34.940385,-8.012928],[-34.943945,-8.0141],[-34.944,-8.017238],[-34.955462,-8.018325],[-34.966437,-8.018824],[-34.96753,-8.019999],[-34.967655,-8.020305],[-34.967875,-8.022124]]]},"properties":{"group_index":0,"value":600,"center":[-34.909916,-8.05]}}],"bbox":[-34.967875,-8.117649,0,0],"info":{"engine":{"version":"4.7.0","build_date":"2018-10-31T12:15:39Z"},"service":"isochrones","query":{"ranges":"120.0,240.0,480.0,600.0","profile":"driving-car","locations":[[-34.909916,-8.05]],"range_type":"time","location_type":"start"},"attribution":"openrouteservice.org | OpenStreetMap contributors","timestamp":1544700367108}};
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js&libraries=geometry&callback=initMap">
    </script>

  </body>
</html>

Результат: цвета совмещены, и результат выглядит ужасно:

enter image description here

Любое решение, чтобы просто заполнить видимую часть каждого многоугольника чистыми цветами?

1 Ответ

0 голосов
/ 13 декабря 2018

Вам нужно сделать отверстия в полигонах.Есть два варианта:

  1. отредактировать ваш GeoJSON, чтобы добавить следующий наименьший многоугольник в виде отверстия в каждом многоугольнике
  2. написать код для создания многоугольников с отверстиями в них из вашего ввода GeoJSON

отредактировано GeoJSON: 

var mygeojson = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": [ // innermost polygon
        [
          [-34.915172, -8.049481],
          [-34.914707, -8.055378],
          [-34.91162, -8.060598],
          [-34.910063, -8.061326],
          [-34.90985, -8.061371],
          [-34.90802, -8.060531],
          [-34.905952, -8.056527],
          [-34.903001, -8.050196],
          [-34.902767, -8.04958],
          [-34.902568, -8.045435],
          [-34.902587, -8.045258],
          [-34.906566, -8.041764],
          [-34.908749, -8.0408],
          [-34.908813, -8.040815],
          [-34.909764, -8.041281],
          [-34.90979, -8.041321],
          [-34.915152, -8.049235],
          [-34.915172, -8.049481]
        ]
      ]
    },
    "properties": {
      "group_index": 0,
      "value": 120,
      "center": [-34.909916, -8.05]
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [-34.929988, -8.047497],
          [-34.926252, -8.054765],
          [-34.924748, -8.062501],
          [-34.917848, -8.067531],
          [-34.910711, -8.074744],
          [-34.907147, -8.074238],
          [-34.902147, -8.067023],
          [-34.898236, -8.064276],
          [-34.896426, -8.063107],
          [-34.895983, -8.062843],
          [-34.896042, -8.062316],
          [-34.895973, -8.051555],
          [-34.893041, -8.048618],
          [-34.891768, -8.04525],
          [-34.891211, -8.043531],
          [-34.891541, -8.042554],
          [-34.891747, -8.042396],
          [-34.892397, -8.041901],
          [-34.893149, -8.041424],
          [-34.895814, -8.039872],
          [-34.902685, -8.032683],
          [-34.904729, -8.031778],
          [-34.906, -8.031939],
          [-34.913661, -8.035535],
          [-34.915638, -8.038325],
          [-34.920721, -8.043953],
          [-34.928257, -8.044341],
          [-34.929209, -8.045448],
          [-34.929379, -8.045746],
          [-34.929988, -8.047497]
        ],
        [ // innermost polygon, hole inside next level polygon
          [-34.915172, -8.049481],
          [-34.914707, -8.055378],
          [-34.91162, -8.060598],
          [-34.910063, -8.061326],
          [-34.90985, -8.061371],
          [-34.90802, -8.060531],
          [-34.905952, -8.056527],
          [-34.903001, -8.050196],
          [-34.902767, -8.04958],
          [-34.902568, -8.045435],
          [-34.902587, -8.045258],
          [-34.906566, -8.041764],
          [-34.908749, -8.0408],
          [-34.908813, -8.040815],
          [-34.909764, -8.041281],
          [-34.90979, -8.041321],
          [-34.915152, -8.049235],
          [-34.915172, -8.049481]
        ]
      ]
    },
    "properties": {
      "group_index": 0,
      "value": 240,
      "center": [-34.909916, -8.05]
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [-34.956063, -8.033059],
          [-34.955041, -8.033829],
          [-34.954587, -8.034079],
          [-34.948183, -8.0401],
          [-34.947163, -8.044392],
          [-34.947272, -8.047986],
          [-34.948019, -8.05595],
          [-34.948103, -8.056254],
          [-34.948084, -8.056901],
          [-34.946187, -8.059355],
          [-34.952109, -8.068439],
          [-34.952839, -8.068665],
          [-34.952829, -8.070174],
          [-34.952796, -8.070289],
          [-34.951771, -8.072104],
          [-34.951041, -8.071877],
          [-34.940532, -8.072531],
          [-34.937183, -8.077114],
          [-34.936484, -8.078185],
          [-34.934712, -8.082695],
          [-34.934542, -8.08374],
          [-34.934408, -8.08414],
          [-34.931548, -8.087205],
          [-34.929387, -8.087655],
          [-34.925758, -8.087245],
          [-34.917409, -8.090498],
          [-34.915368, -8.097388],
          [-34.914401, -8.099923],
          [-34.912478, -8.102227],
          [-34.908953, -8.102959],
          [-34.908757, -8.102013],
          [-34.904896, -8.092322],
          [-34.904582, -8.089398],
          [-34.90457, -8.089352],
          [-34.898932, -8.081687],
          [-34.892253, -8.084787],
          [-34.889729, -8.086645],
          [-34.88728, -8.0867],
          [-34.887252, -8.086673],
          [-34.887112, -8.084173],
          [-34.881451, -8.074375],
          [-34.877403, -8.066542],
          [-34.877357, -8.066449],
          [-34.876976, -8.060774],
          [-34.875231, -8.051236],
          [-34.873014, -8.0484],
          [-34.873907, -8.03785],
          [-34.872542, -8.030814],
          [-34.87267, -8.030475],
          [-34.873901, -8.029557],
          [-34.881458, -8.022556],
          [-34.887505, -8.012962],
          [-34.888584, -8.012166],
          [-34.888918, -8.012105],
          [-34.897461, -8.012019],
          [-34.897505, -8.012052],
          [-34.907112, -8.01783],
          [-34.915999, -8.019938],
          [-34.920063, -8.022551],
          [-34.930189, -8.020902],
          [-34.94101, -8.025031],
          [-34.944608, -8.024917],
          [-34.954314, -8.029913],
          [-34.956063, -8.033059]
        ],
                [
          [-34.929988, -8.047497],
          [-34.926252, -8.054765],
          [-34.924748, -8.062501],
          [-34.917848, -8.067531],
          [-34.910711, -8.074744],
          [-34.907147, -8.074238],
          [-34.902147, -8.067023],
          [-34.898236, -8.064276],
          [-34.896426, -8.063107],
          [-34.895983, -8.062843],
          [-34.896042, -8.062316],
          [-34.895973, -8.051555],
          [-34.893041, -8.048618],
          [-34.891768, -8.04525],
          [-34.891211, -8.043531],
          [-34.891541, -8.042554],
          [-34.891747, -8.042396],
          [-34.892397, -8.041901],
          [-34.893149, -8.041424],
          [-34.895814, -8.039872],
          [-34.902685, -8.032683],
          [-34.904729, -8.031778],
          [-34.906, -8.031939],
          [-34.913661, -8.035535],
          [-34.915638, -8.038325],
          [-34.920721, -8.043953],
          [-34.928257, -8.044341],
          [-34.929209, -8.045448],
          [-34.929379, -8.045746],
          [-34.929988, -8.047497]
        ]
      ]
    },
    "properties": {
      "group_index": 0,
      "value": 480,
      "center": [-34.909916, -8.05]
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [-34.967875, -8.022124],
          [-34.967032, -8.022491],
          [-34.962219, -8.027052],
          [-34.965092, -8.03679],
          [-34.965569, -8.037422],
          [-34.964933, -8.039161],
          [-34.960129, -8.048242],
          [-34.95918, -8.050267],
          [-34.957693, -8.053731],
          [-34.956616, -8.054331],
          [-34.953751, -8.063539],
          [-34.958475, -8.066552],
          [-34.96713, -8.073047],
          [-34.966185, -8.076521],
          [-34.964619, -8.076095],
          [-34.962336, -8.075392],
          [-34.958578, -8.072295],
          [-34.951771, -8.072104],
          [-34.947239, -8.076907],
          [-34.945128, -8.081491],
          [-34.944516, -8.092605],
          [-34.944491, -8.09299],
          [-34.942463, -8.094713],
          [-34.936203, -8.099609],
          [-34.936156, -8.099611],
          [-34.930332, -8.098121],
          [-34.928104, -8.097671],
          [-34.926769, -8.097602],
          [-34.919303, -8.105374],
          [-34.920486, -8.107928],
          [-34.921611, -8.110473],
          [-34.921267, -8.11224],
          [-34.921107, -8.112423],
          [-34.921099, -8.112432],
          [-34.920937, -8.112614],
          [-34.915398, -8.116855],
          [-34.914727, -8.117221],
          [-34.911887, -8.117649],
          [-34.904949, -8.112587],
          [-34.904891, -8.112337],
          [-34.905136, -8.111096],
          [-34.905752, -8.109837],
          [-34.906527, -8.105314],
          [-34.906546, -8.105024],
          [-34.90736, -8.102336],
          [-34.907636, -8.101151],
          [-34.907492, -8.097309],
          [-34.904896, -8.092322],
          [-34.895762, -8.09403],
          [-34.892507, -8.099182],
          [-34.892333, -8.099679],
          [-34.888095, -8.101449],
          [-34.887966, -8.101505],
          [-34.885749, -8.101456],
          [-34.883164, -8.096974],
          [-34.879828, -8.088927],
          [-34.879867, -8.088719],
          [-34.880591, -8.087133],
          [-34.881121, -8.086439],
          [-34.880567, -8.074973],
          [-34.874867, -8.072386],
          [-34.870276, -8.064982],
          [-34.870159, -8.064823],
          [-34.869519, -8.056238],
          [-34.868117, -8.04922],
          [-34.869572, -8.042614],
          [-34.863881, -8.032346],
          [-34.862718, -8.03064],
          [-34.864656, -8.026769],
          [-34.865011, -8.026182],
          [-34.871422, -8.017997],
          [-34.872082, -8.015905],
          [-34.872426, -8.015001],
          [-34.872539, -8.014982],
          [-34.873295, -8.014922],
          [-34.881793, -8.006885],
          [-34.881807, -8.004915],
          [-34.883463, -8.002759],
          [-34.883552, -8.002686],
          [-34.884165, -8.002354],
          [-34.889202, -8.000715],
          [-34.89597, -8.002288],
          [-34.896938, -8.002808],
          [-34.899093, -8.004078],
          [-34.904905, -8.009364],
          [-34.914814, -8.009358],
          [-34.920314, -8.010243],
          [-34.92932, -8.014936],
          [-34.940385, -8.012928],
          [-34.943945, -8.0141],
          [-34.944, -8.017238],
          [-34.955462, -8.018325],
          [-34.966437, -8.018824],
          [-34.96753, -8.019999],
          [-34.967655, -8.020305],
          [-34.967875, -8.022124]
        ],
                [
          [-34.956063, -8.033059],
          [-34.955041, -8.033829],
          [-34.954587, -8.034079],
          [-34.948183, -8.0401],
          [-34.947163, -8.044392],
          [-34.947272, -8.047986],
          [-34.948019, -8.05595],
          [-34.948103, -8.056254],
          [-34.948084, -8.056901],
          [-34.946187, -8.059355],
          [-34.952109, -8.068439],
          [-34.952839, -8.068665],
          [-34.952829, -8.070174],
          [-34.952796, -8.070289],
          [-34.951771, -8.072104],
          [-34.951041, -8.071877],
          [-34.940532, -8.072531],
          [-34.937183, -8.077114],
          [-34.936484, -8.078185],
          [-34.934712, -8.082695],
          [-34.934542, -8.08374],
          [-34.934408, -8.08414],
          [-34.931548, -8.087205],
          [-34.929387, -8.087655],
          [-34.925758, -8.087245],
          [-34.917409, -8.090498],
          [-34.915368, -8.097388],
          [-34.914401, -8.099923],
          [-34.912478, -8.102227],
          [-34.908953, -8.102959],
          [-34.908757, -8.102013],
          [-34.904896, -8.092322],
          [-34.904582, -8.089398],
          [-34.90457, -8.089352],
          [-34.898932, -8.081687],
          [-34.892253, -8.084787],
          [-34.889729, -8.086645],
          [-34.88728, -8.0867],
          [-34.887252, -8.086673],
          [-34.887112, -8.084173],
          [-34.881451, -8.074375],
          [-34.877403, -8.066542],
          [-34.877357, -8.066449],
          [-34.876976, -8.060774],
          [-34.875231, -8.051236],
          [-34.873014, -8.0484],
          [-34.873907, -8.03785],
          [-34.872542, -8.030814],
          [-34.87267, -8.030475],
          [-34.873901, -8.029557],
          [-34.881458, -8.022556],
          [-34.887505, -8.012962],
          [-34.888584, -8.012166],
          [-34.888918, -8.012105],
          [-34.897461, -8.012019],
          [-34.897505, -8.012052],
          [-34.907112, -8.01783],
          [-34.915999, -8.019938],
          [-34.920063, -8.022551],
          [-34.930189, -8.020902],
          [-34.94101, -8.025031],
          [-34.944608, -8.024917],
          [-34.954314, -8.029913],
          [-34.956063, -8.033059]
        ]
      ]
    },
    "properties": {
      "group_index": 0,
      "value": 600,
      "center": [-34.909916, -8.05]
    }
  }],
  "bbox": [-34.967875, -8.117649, 0, 0],
  "info": {
    "engine": {
      "version": "4.7.0",
      "build_date": "2018-10-31T12:15:39Z"
    },
    "service": "isochrones",
    "query": {
      "ranges": "120.0,240.0,480.0,600.0",
      "profile": "driving-car",
      "locations": [
        [-34.909916, -8.05]
      ],
      "range_type": "time",
      "location_type": "start"
    },
    "attribution": "openrouteservice.org | OpenStreetMap contributors",
    "timestamp": 1544700367108
  }
};

подтверждение концепции скрипта

screenshot of resulting map

фрагмент кода: (удален самый внешний многоугольник, чтобы он подходил для ответа 

var map;
var GeoJson;

function initMap() {

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: new google.maps.LatLng(-8.044474, -34.884578),
  });
  map.data.addGeoJson(mygeojson);
  map.data.setStyle(function(feature) {
    var pvalue = feature.getProperty('value');

    if (pvalue == 120) {
      color = 'Blue';
    }
    if (pvalue == 240) {
      color = '#ff5050';
    }
    if (pvalue == 480) {
      color = '#ff9933';
    }
    if (pvalue == 600) {
      color = 'yellow';
    }
    return {
      fillColor: color,
      strokeWeight: 1
    }
  });

}

var mygeojson = {
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [-34.915172, -8.049481],
            [-34.914707, -8.055378],
            [-34.91162, -8.060598],
            [-34.910063, -8.061326],
            [-34.90985, -8.061371],
            [-34.90802, -8.060531],
            [-34.905952, -8.056527],
            [-34.903001, -8.050196],
            [-34.902767, -8.04958],
            [-34.902568, -8.045435],
            [-34.902587, -8.045258],
            [-34.906566, -8.041764],
            [-34.908749, -8.0408],
            [-34.908813, -8.040815],
            [-34.909764, -8.041281],
            [-34.90979, -8.041321],
            [-34.915152, -8.049235],
            [-34.915172, -8.049481]
          ]
        ]
      },
      "properties": {
        "group_index": 0,
        "value": 120,
        "center": [-34.909916, -8.05]
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [-34.929988, -8.047497],
            [-34.926252, -8.054765],
            [-34.924748, -8.062501],
            [-34.917848, -8.067531],
            [-34.910711, -8.074744],
            [-34.907147, -8.074238],
            [-34.902147, -8.067023],
            [-34.898236, -8.064276],
            [-34.896426, -8.063107],
            [-34.895983, -8.062843],
            [-34.896042, -8.062316],
            [-34.895973, -8.051555],
            [-34.893041, -8.048618],
            [-34.891768, -8.04525],
            [-34.891211, -8.043531],
            [-34.891541, -8.042554],
            [-34.891747, -8.042396],
            [-34.892397, -8.041901],
            [-34.893149, -8.041424],
            [-34.895814, -8.039872],
            [-34.902685, -8.032683],
            [-34.904729, -8.031778],
            [-34.906, -8.031939],
            [-34.913661, -8.035535],
            [-34.915638, -8.038325],
            [-34.920721, -8.043953],
            [-34.928257, -8.044341],
            [-34.929209, -8.045448],
            [-34.929379, -8.045746],
            [-34.929988, -8.047497]
          ],
          [
            [-34.915172, -8.049481],
            [-34.914707, -8.055378],
            [-34.91162, -8.060598],
            [-34.910063, -8.061326],
            [-34.90985, -8.061371],
            [-34.90802, -8.060531],
            [-34.905952, -8.056527],
            [-34.903001, -8.050196],
            [-34.902767, -8.04958],
            [-34.902568, -8.045435],
            [-34.902587, -8.045258],
            [-34.906566, -8.041764],
            [-34.908749, -8.0408],
            [-34.908813, -8.040815],
            [-34.909764, -8.041281],
            [-34.90979, -8.041321],
            [-34.915152, -8.049235],
            [-34.915172, -8.049481]
          ]
        ]
      },
      "properties": {
        "group_index": 0,
        "value": 240,
        "center": [-34.909916, -8.05]
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [-34.956063, -8.033059],
            [-34.955041, -8.033829],
            [-34.954587, -8.034079],
            [-34.948183, -8.0401],
            [-34.947163, -8.044392],
            [-34.947272, -8.047986],
            [-34.948019, -8.05595],
            [-34.948103, -8.056254],
            [-34.948084, -8.056901],
            [-34.946187, -8.059355],
            [-34.952109, -8.068439],
            [-34.952839, -8.068665],
            [-34.952829, -8.070174],
            [-34.952796, -8.070289],
            [-34.951771, -8.072104],
            [-34.951041, -8.071877],
            [-34.940532, -8.072531],
            [-34.937183, -8.077114],
            [-34.936484, -8.078185],
            [-34.934712, -8.082695],
            [-34.934542, -8.08374],
            [-34.934408, -8.08414],
            [-34.931548, -8.087205],
            [-34.929387, -8.087655],
            [-34.925758, -8.087245],
            [-34.917409, -8.090498],
            [-34.915368, -8.097388],
            [-34.914401, -8.099923],
            [-34.912478, -8.102227],
            [-34.908953, -8.102959],
            [-34.908757, -8.102013],
            [-34.904896, -8.092322],
            [-34.904582, -8.089398],
            [-34.90457, -8.089352],
            [-34.898932, -8.081687],
            [-34.892253, -8.084787],
            [-34.889729, -8.086645],
            [-34.88728, -8.0867],
            [-34.887252, -8.086673],
            [-34.887112, -8.084173],
            [-34.881451, -8.074375],
            [-34.877403, -8.066542],
            [-34.877357, -8.066449],
            [-34.876976, -8.060774],
            [-34.875231, -8.051236],
            [-34.873014, -8.0484],
            [-34.873907, -8.03785],
            [-34.872542, -8.030814],
            [-34.87267, -8.030475],
            [-34.873901, -8.029557],
            [-34.881458, -8.022556],
            [-34.887505, -8.012962],
            [-34.888584, -8.012166],
            [-34.888918, -8.012105],
            [-34.897461, -8.012019],
            [-34.897505, -8.012052],
            [-34.907112, -8.01783],
            [-34.915999, -8.019938],
            [-34.920063, -8.022551],
            [-34.930189, -8.020902],
            [-34.94101, -8.025031],
            [-34.944608, -8.024917],
            [-34.954314, -8.029913],
            [-34.956063, -8.033059]
          ],
          [
            [-34.929988, -8.047497],
            [-34.926252, -8.054765],
            [-34.924748, -8.062501],
            [-34.917848, -8.067531],
            [-34.910711, -8.074744],
            [-34.907147, -8.074238],
            [-34.902147, -8.067023],
            [-34.898236, -8.064276],
            [-34.896426, -8.063107],
            [-34.895983, -8.062843],
            [-34.896042, -8.062316],
            [-34.895973, -8.051555],
            [-34.893041, -8.048618],
            [-34.891768, -8.04525],
            [-34.891211, -8.043531],
            [-34.891541, -8.042554],
            [-34.891747, -8.042396],
            [-34.892397, -8.041901],
            [-34.893149, -8.041424],
            [-34.895814, -8.039872],
            [-34.902685, -8.032683],
            [-34.904729, -8.031778],
            [-34.906, -8.031939],
            [-34.913661, -8.035535],
            [-34.915638, -8.038325],
            [-34.920721, -8.043953],
            [-34.928257, -8.044341],
            [-34.929209, -8.045448],
            [-34.929379, -8.045746],
            [-34.929988, -8.047497]
          ]
        ]
      },
      "properties": {
        "group_index": 0,
        "value": 480,
        "center": [-34.909916, -8.05]
      }
    } // remove outermost polygon so fits in answer
  ],
  "bbox": [-34.967875, -8.117649, 0, 0],
  "info": {
    "engine": {
      "version": "4.7.0",
      "build_date": "2018-10-31T12:15:39Z"
    },
    "service": "isochrones",
    "query": {
      "ranges": "120.0,240.0,480.0,600.0",
      "profile": "driving-car",
      "locations": [
        [-34.909916, -8.05]
      ],
      "range_type": "time",
      "location_type": "start"
    },
    "attribution": "openrouteservice.org | OpenStreetMap contributors",
    "timestamp": 1544700367108
  }
};
#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap" async defer></script>
...