JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://bl.ocks.org/christophermanning/raw/4450188/javascript.util.min.js"></script>
<script src="https://bl.ocks.org/christophermanning/raw/4450188/jsts.min.js"></script>
<script src="https://arthur-e.github.io/Wicket/wicket.js"></script>
<script src="https://arthur-e.github.io/Wicket/wicket-gmap3.js"></script>
<body>
<div id="map_canvas"></div>
</body>
CSS
body {
margin: 20px;
padding: 20px;
}
#map_canvas {
width: 500px;
height: 400px;
border: solid 1px;
border-color: #008900;
}
JavaScript
$(document).ready(function() {
function UseWicketToGoFromGooglePolysToWKT(poly1, poly2) {
var wicket = new Wkt.Wkt();
wicket.fromObject(poly1);
var wkt1 = wicket.write();
wicket.fromObject(poly2);
var wkt2 = wicket.write();
return [wkt1, wkt2];
}
function UseJstsToTestForIntersection(wkt1, wkt2) {
// Instantiate JSTS WKTReader and get two JSTS geometry objects
var wktReader = new jsts.io.WKTReader();
var geom1 = wktReader.read(wkt1);
var geom2 = wktReader.read(wkt2);
if (geom2.intersects(geom1)) {
alert('intersection confirmed!');
} else {
alert('..no intersection.');
}
}
function UseJstsToDissolveGeometries(wkt1, wkt2) {
// Instantiate JSTS WKTReader and get two JSTS geometry objects
var wktReader = new jsts.io.WKTReader();
var geom1 = wktReader.read(wkt1);
var geom2 = wktReader.read(wkt2);
// In JSTS, "union" is synonymous with "dissolve"
var dissolvedGeometry = geom1.union(geom2);
// Instantiate JSTS WKTWriter and get new geometry's WKT
var wktWriter = new jsts.io.WKTWriter();
var wkt = wktWriter.write(dissolvedGeometry);
// Use Wicket to ingest the new geometry's WKT
var wicket = new Wkt.Wkt();
wicket.read(wkt);
// Assemble your new polygon's options, I used object notation
var polyOptions = {
strokeColor: '#1E90FF',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#1E90FF',
fillOpacity: 0.35
};
// Let wicket return a Google Polygon with the options you set above
var newPoly = wicket.toObject(polyOptions);
polygon1.setMap(null);
polygon2.setMap(null);
newPoly.setMap(map);
}
var mapOptions = {
center: new google.maps.LatLng(37.086172, -121),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var coords = [
new google.maps.LatLng(37.686172, -122.20929),
...