javascriptgoogle-mapsgoogle-maps-drawing

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.


Solution

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