Union function using Greiner-Hormann and Leaflet Geodesy

HTML

<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css">
<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-geodesy/v0.1.0/leaflet-geodesy.js"></script>
<script src="https://rawgit.com/w8r/GreinerHormann/master/dist/greiner-hormann.leaflet.min.js"></script>
<div id="map"></div>

CSS

#map {
  height: 500px;
}

JavaScript

var map = L.map("map").setView([38, -96], 4);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var cradius = 100000
var copts = {
  parts: 144
};

var cities = new L.LayerGroup();

var chicago = LGeo.circle([41.84, -87.68], cradius, copts).addTo(cities);
var newOrleans = LGeo.circle([29.95, -90.07], cradius, copts).addTo(cities);
var denver = LGeo.circle([39.74, -104.99], cradius, copts).addTo(cities);

function unify(polyList) {
  for (var i = 0; i < polyList.length; ++i) {
    if (i == 0) {
      var unionTemp = polyList[i];
    } else {
      unionTemp = L.polygon(greinerHormann.union(unionTemp, polyList[i]));
    }
  }
  return unionTemp;
}

var cityUnion = unify(cities.getLayers()).addTo(map);