clean up the directive and add more options to make it a more complete directive

xajhqffl · xajhqffl · commit 8bfc147c0e04 · 2015-02-07T09:31:19.000-06:00
diff --git a/app/scripts/directives/drawing-manager.js b/app/scripts/directives/drawing-manager.js
@@ -12,19 +12,15 @@
  *  <map zoom="13" center="37.774546, -122.433523" map-type-id="SATELLITE">
  *      <drawing-manager  on-overlaycomplete="onMapOverlayCompleted()" position="ControlPosition.TOP_CENTER" drawingModes="POLYGON,CIRCLE" drawingControl="true" circleOptions="fillColor: '#FFFF00';fillOpacity: 1;strokeWeight: 5;clickable: false;zIndex: 1;editable: true;" ></drawing-manager>
  *  </map>
+ *
+ *  TODO: Add remove button.
+ *  currently, for out solution, we have the shapes/markers in our own controller, and we use some css classes to change the shape button
+ *  to a remove button (<div>X</div>) and have the remove operation in our own controller.
  */
 /*jshint -W089*/
 ngMap.directive('drawingManager', ['Attr2Options', function(Attr2Options) {
     var parser = Attr2Options;
 
-
-    var getShape = function(shapeName){
-        var supportShapes = ["marker","circle","polygon","polyline","rectangle"];
-        if(supportShapes.indexOf(shapeName.trim().toLowerCase()) !== -1){
-            return google.maps.drawing.OverlayType[shapeName.trim().toUpperCase()];
-        }
-    }
-
     return {
         restrict: 'E',
         require: '^map',
@@ -36,14 +32,20 @@ ngMap.directive('drawingManager', ['Attr2Options', function(Attr2Options) {
             var controlOptions = parser.getControlOptions(filtered);
             var events = parser.getEvents(scope, filtered);
 
+            console.log("filtered", filtered, "options", options, 'controlOptions', controlOptions, 'events', events);
+
             /**
              * set options
              */
             var drawingManager = new google.maps.drawing.DrawingManager({
                 drawingMode: options.drawingmode,
                 drawingControl: options.drawingcontrol,
                 drawingControlOptions: controlOptions.drawingControlOptions,
-                circleOptions:options.circleoptions
+                circleOptions:options.circleoptions,
+                markerOptions:options.markeroptions,
+                polygonOptions:options.polygonoptions,
+                polylineOptions:options.polylineoptions,
+                rectangleOptions:options.rectangleoptions
             });
 
 
diff --git a/testapp/drawing-manager.html b/testapp/drawing-manager.html
@@ -27,7 +27,7 @@
 <body>
 <div ng-controller="DrawingManagerCtrl">
     <map zoom="13" center="37.774546, -122.433523" map-type-id="ROADMAP" street-view-control-options="{position: 'LEFT_CENTER'}">
-        <drawing-manager  on-overlaycomplete="onMapOverlayCompleted()" drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon']}" drawingControl="true" drawingMode="null"  circleOptions="{fillColor: '#FFFF00',fillOpacity: 1,strokeWeight: 5,clickable: false,zIndex: 1,editable: true}" ></drawing-manager>
+        <drawing-manager  on-overlaycomplete="onMapOverlayCompleted()" drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon','rectangle','circle']}" drawingControl="true" drawingMode="null"  markerOptions="{icon:'www.example.com/icon'}" rectangleOptions="{fillColor:'red'}" circleOptions="{fillColor: '#FFFF00',fillOpacity: 1,strokeWeight: 5,clickable: false,zIndex: 1,editable: true}" ></drawing-manager>
     </map>
 </div>
 </body>
