title: How to make MarkerClusterGroup cluster polygons
body: <p>I am trying to show clusters using markerclustergroups with Polygons. Right now the polygons are shown but the clusters aren't. I have been trying to use center of mass for the polygons because it seems like markerclustergroup doesn't like polygons but that doesn't really work since the animation of markerclustergroup will be set on the centroids and not the actual polygon.</p>
  
  <p>My polygons all vary in amount of coordinates. Some have +10 sets others have 3.
  How would I use markerclustergroup for polygons? </p>
  
  <p>Below my code can be seen:</p>
  
  <pre><code>        // Create variable to hold map element, give initial settings to map
          var map = L.map('map', {
              center: [23.70489, 43.90137],
              zoom: 5
          });
  
          L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          }).addTo(map);
  
          var ojStyle = {
              "color": "#ff7800",
              "weight": 5,
              "opacity": 0.65
          };
          // Hardcoded polygons as GeoJSON
          var polygons = {
              "type": "FeatureCollection",
              "features": [{
                  "type": "Feature",
                  "properties": {},
                  "geometry": {
                      "type": "Polygon",
                      "coordinates": [
                          [
                              [37.99896240234376, 21.55017532555692],
                              [39.39422607421876, 21.476073444092435],
                              [38.88336181640626, 22.56582956966297],
                              [38.023681640625, 22.611475436593366],
                              [37.43591308593751, 21.99908185836153],
                              [37.28485107421876, 21.624239377938288],
                              [37.28485107421876, 21.624239377938288],
                              [37.99896240234376, 21.55017532555692]
                          ]
                      ]
                  }
              }, {
                  "type": "Feature",
                  "properties": {},
                  "geometry": {
                      "type": "Polygon",
                      "coordinates": [
                          [
                              [38.50708007812501, 21.453068633086783],
                              [39.20745849609376, 21.37124437061832],
                              [39.10858154296876, 20.876776727727016],
                              [38.80920410156251, 20.912700155617568],
                              [38.49884033203126, 20.94604992010052],
                              [38.50708007812501, 21.453068633086783]
                          ]
                      ]
                  }
              }, {
                  "type": "Feature",
                  "properties": {},
                  "geometry": {
                      "type": "Polygon",
                      "coordinates": [
                          [
                              [50.57830810546875, 25.980268007469803],
                              [50.77606201171876, 25.956809920555312],
                              [50.780181884765625, 25.69970044378398],
                              [50.56457519531251, 25.822144306879686],
                              [50.56182861328126, 25.945696562830516],
                              [50.57830810546875, 25.980268007469803]
                          ]
                      ]
                  }
              }, {
                  "type": "Feature",
                  "properties": {},
                  "geometry": {
                      "type": "Polygon",
                      "coordinates": [
                          [
                              [54.37408447265626, 24.51963836811676],
                              [54.29443359375001, 24.40963901896311],
                              [54.25872802734375, 24.449649897759667],
                              [54.32739257812501, 24.539627918861232],
                              [54.37133789062501, 24.559614286039903],
                              [54.37408447265626, 24.51963836811676]
                          ]
                      ]
                  }
              }, {
                  "type": "Feature",
                  "properties": {},
                  "geometry": {
                      "type": "Polygon",
                      "coordinates": [
                          [
                              [54.40155029296876, 24.463400705082282],
                              [54.41940307617188, 24.489648077028683],
                              [54.45785522460938, 24.462150693715266],
                              [54.43450927734376, 24.43839812102505],
                              [54.40155029296876, 24.463400705082282]
                          ]
                      ]
                  }
              }]
          }
          var polygonArray = []
          for (i = 0; i &lt; polygons.features.length; i++) {
              polygonArray.push(polygons.features[i]);
          }
  
          var markers = L.markerClusterGroup().addTo(map);
          var geoJsonLayer = L.geoJson(polygonArray);
          markers.addLayer(geoJsonLayer);
          map.fitBounds(markers.getBounds());
  </code></pre>
  
  <p><a href="http://js.do/code/165930" rel="nofollow noreferrer">http://js.do/code/165930</a> - Shows how clustering doesn't work for the polygons</p>
  
  <p>I am looking for a solution like this: <a href="http://jsfiddle.net/ve2huzxw/237/" rel="nofollow noreferrer">http://jsfiddle.net/ve2huzxw/237/</a></p>