CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-drawing
Anurag Srivastava
Anurag Srivastava

Reputation: 14413

How to copy and scale a Shape using the Google Maps Javascript API drawing library?

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:

enter image description here

Functionality I'm aiming to add, right after the user finishes drawing the shape:

enter image description here

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.

Upvotes: -1

Views: 2126

Answers (1)

Anurag Srivastava
Anurag Srivastava

Reputation: 14413

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
  })
})

Upvotes: 2

Related Questions