Context Manu AngularJS Directive

http://angularjs.org/

by Yaprak Ayazoğlu

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>

JavaScript

var directives = angular.module("directives", []);

directives.directive("mapCanvas", function($http){
  var mapCanvas = {};
  mapCanvas.scope = {
    data: "@",
    rotateYaw: "@",
    rotatePitch: "@",
    centerLat: "@",
    centerLon: "@",
    scale: "@"
  };
  mapCanvas.restrict = "AE";
  mapCanvas.template =
    "<div class='map-form'>" +
       "<input ng-model='searchText' type='text'> </input>" +
       "<button ng-click='search()'>Search!</button>" +
    "</div>" ;

  mapCanvas.link = function(lScope, lElem, lAttr){
    lScope.render = function(data){ /* render function */};
    lScope.search = function(){ /* search function */};
      
    /* Begin - Create map */
    /* .. */
      
    // define projector for converting spherical coordinates into cartesian coordinates  
    var projection = d3.geo.mercator()
    .center([ parseFloat(lAttr["centerLon"]), parseFloat(lAttr["centerLat"]) ] )
    .scale(parseFloat(lAttr["scale"]))
    .rotate([parseFloat(lAttr["rotateYaw"]), parseFloat(lAttr["rotatePitch"]) ]);
      
    /* .. */
    /* End - Create map */
  };

  return mapCanvas;
});