source : drawing-manager.js 

  1. /**
  2.  * @ngdoc directive
  3.  * @name drawing-manager
  4.  * @param Attr2Options {service} convert html attribute to Google map api options
  5.  * @description
  6.  *   Requires:  map directive
  7.  *   Restrict To:  Element
  8.  *
  9.  * @example
  10.  * Example:
  11.  *
  12.  *  <map zoom="13" center="37.774546, -122.433523" map-type-id="SATELLITE">
  13.  *    <drawing-manager
  14.  *      on-overlaycomplete="onMapOverlayCompleted()"
  15.  *      position="ControlPosition.TOP_CENTER"
  16.  *      drawingModes="POLYGON,CIRCLE"
  17.  *      drawingControl="true"
  18.  *      circleOptions="fillColor: '#FFFF00';fillOpacity: 1;strokeWeight: 5;clickable: false;zIndex: 1;editable: true;" >
  19.  *    </drawing-manager>
  20.  *  </map>
  21.  *
  22.  *  TODO: Add remove button.
  23.  *  currently, for our solution, we have the shapes/markers in our own
  24.  *  controller, and we use some css classes to change the shape button
  25.  *  to a remove button (<div>X</div>) and have the remove operation in our own controller.
  26.  */
  27. (function() {
  28.   'use strict';
  29.   angular.module('ngMap').directive('drawingManager', [
  30.     'Attr2MapOptions', function(Attr2MapOptions) {
  31.     var parser = Attr2MapOptions;
  32.     return {
  33.       restrict: 'E',
  34.       require: ['?^map','?^ngMap'],
  35.       link: function(scope, element, attrs, mapController) {
  36.         mapController = mapController[0]||mapController[1];
  37.         var filtered = parser.filter(attrs);
  38.         var options = parser.getOptions(filtered, {scope: scope});
  39.         var controlOptions = parser.getControlOptions(filtered);
  40.         var events = parser.getEvents(scope, filtered);
  41.         /**
  42.          * set options
  43.          */
  44.         var drawingManager = new google.maps.drawing.DrawingManager({
  45.           drawingMode: options.drawingmode,
  46.           drawingControl: options.drawingcontrol,
  47.           drawingControlOptions: controlOptions.drawingControlOptions,
  48.           circleOptions:options.circleoptions,
  49.           markerOptions:options.markeroptions,
  50.           polygonOptions:options.polygonoptions,
  51.           polylineOptions:options.polylineoptions,
  52.           rectangleOptions:options.rectangleoptions
  53.         });
  54.         //Observers
  55.         attrs.$observe('drawingControlOptions', function (newValue) {
  56.           drawingManager.drawingControlOptions = parser.getControlOptions({drawingControlOptions: newValue}).drawingControlOptions;
  57.           drawingManager.setDrawingMode(null);
  58.           drawingManager.setMap(mapController.map);
  59.         });
  60.         /**
  61.          * set events
  62.          */
  63.         for (var eventName in events) {
  64.           google.maps.event.addListener(drawingManager, eventName, events[eventName]);
  65.         }
  66.         mapController.addObject('mapDrawingManager', drawingManager);
  67.         element.bind('$destroy', function() {
  68.           mapController.deleteObject('mapDrawingManager', drawingManager);
  69.         });
  70.       }
  71.     }; // return
  72.   }]);
  73. })();