I'm creating a Google Map in my React application, where I would like the user to be able to draw shapes, with an additional functionality being that once a user finishes drawing a shape, an additional shape must be added to it as an outline, as shown in the images below:
User drawn shape:
Functionality I'm aiming to add, right after the user finishes drawing the shape:
I'm using the drawing library of Google Maps as shown here: https://developers.google.com/maps/documentation/javascript/examples/drawing-tools
Here is the relevant code I'm using:
// When a circle is drawn
google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
let tempCirc = new google.maps.Circle({
radius: circle.getRadius()*2,
center: circle.getCenter(),
editable: true,
map: map
})
});
// When a rectangle is drawn
google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(rect) {
let tempRect = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
editable: true,
draggable: true
})
rectangle.setBounds(
new google.maps.LatLngBounds(
new google.maps.LatLng(
rect.getBounds().getSouthWest().lat() - .005,
rect.getBounds().getSouthWest().lng() - .005*2
),
new google.maps.LatLng(
rect.getBounds().getNorthEast().lat() + .005,
rect.getBounds().getNorthEast().lng() + .005*2
),
)
)
});
// When a polygon is drawn
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(poly) {
// What can I do here?
});
If there is any other way to do this on a Google map, please let me know too.
Thanks to the suggestion by @MrUpsidown, I was able to use the interpolate()
method from google.maps.geometry.spherical
namespace.
By providing a fraction greater than 1, I was able to get points to form an outer polygon. The method works for fairly simple polygons without holes. Hope it helps someone.
// getCenter() for Polygon
google.maps.Polygon.prototype.getCenter = function(){
var arr = this.getPath().getArray()
, distX = 0, distY = 0
, len = arr.length
arr.forEach(function (element, index) {
distX+= element.lat()
distY+= element.lng()
});
return new google.maps.LatLng(distX/len, distY/len);
}
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(poly) {
let polyCenter = poly.getCenter()
, innerShapePoints = poly.getPath().getArray()
, outerShapePoints = []
outerShapePoints = innerShapePoints.map(point => {
return google.maps.geometry.spherical.interpolate(polyCenter, point, 1.5)
})
let outerPolygon = new google.maps.Polygon({
strokeColor: '#0000FF',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#0000FF',
fillOpacity: 0.35,
map: map,
editable: true,
suppressUndo: true,
draggable: true,
path: outerShapePoints
})
})