let user draw only one circle as source but some circles for destination

Question

I have a very simple application (only one page) on which user draw polygons on the map and it also get lat, long, centre and radius of the circle that user drew.

I would like to limit user to draw only one circle as a source (Which I did and works fine), and then let him/her to select one or more destinations on the map. So, the first circle could be "source" and the next circles are "destinations"..

My question: how can I assign different variables to these circles in order to differentiate source place from destinations?

Here is my code (I used google api, Drawing library: https://developers.google.com/maps/documentation/javascript/examples/drawing-tools):

<script type="text/javascript">

 (function () {
     var circle;

   function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8
   };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE
      ]
    },
    markerOptions: {
      icon: 'images/beachflag.png'
    },
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
  google.maps.event.addListener(drawingManager, 'circlecomplete', onCircleComplete);
 }

 function onCircleComplete(shape) {
        if (shape == null || (!(shape instanceof google.maps.Circle))) return;

        if (circle != null) {
            circle.setMap(null);
            circle = null;
        }
        circle = shape;
        var radius = circle.getRadius();
        center = circle.getCenter();
        var latitude = circle.getCenter().lat();
        var longitude = circle.getCenter().lng();
    }

   google.maps.event.addDomListener(window, 'load', initialize);
 })();
</script>

how do you know what the user want's to draw(source or destination)? — Dr.Molle
@Dr.Molle: what I was thinking is to ask user "please select your source by drawing on the map", then the first circle that user draw is the source.. after that I can show a message that you selected your source, "now you can select one or more destinations again by drawing circle on the map".. this is what I thought! I am not sure :( — mOna
So you want the first circle always to be the source and further circles the destinations? — Dr.Molle

Dr.Molle Dr.Molle · Accepted Answer · 2015-02-24T14:42:44

A simple approach:

Store all the circles, e.g. in an array, based on the length of the array you'll know if it's the first circle(source) or not(destination).

Setting different properties also isn't complicated, a google.maps.Circle is a MVCObject(and also a native JS-object), you may store custom properties e.g. via:

//vanilla javascript   
shape.customProperty='customValue';

//MVCObject-specific, single property
shape.set('customProperty','customValue');

//MVCObject-specific, multiple properties
shape.setValues({customProperty :'customValue',
                 anotherProperty:'anotherValue'});

//shape-specific, multiple properties
shape.setOptions({customProperty :'customValue',
                  anotherProperty:'anotherValue'});

( Be sure that your custom property-names not compete with built-in names, e.g. center, radius etc.)

Possible implementation(stores a custom type-property for the circles, set to either source or destination):

function onCircleComplete(shape) {
  var map=shape.getMap();
   //create an array where we store the circles
   if(!map.get('circles')){
     map.set('circles',[]); 
   }
   shape.setOptions(
                      (!map.get('circles').length)
                        ?//first circle
                         {type:'source',
                          //a different fill when you want to
                          fillColor:'#ff0000'
                         }
                        ://other circles
                         {type:'destination'}
                    );

    //push the circles onto the array 
    map.get('circles').push(shape);
}

let user draw only one circle as source but some circles for destination

1 Answers