[r1-dev] Adding label directive to marker

Gruntfile.js

@@ -57,13 +57,15 @@ module.exports = function(grunt) {
       dist: {
         src: ['src/js/module.js',
               'tmp/output_coffee.js',
+              'src/js/controllers/polyline-display.js',
               'src/js/utils/markerclusterer-r438.js',
+              'src/js/utils/markerwithlabel-r1.1.9.js',
               'src/js/utils/LatLngArraySync.js', 
               'src/js/utils/MapEvents.js', 
-              'src/js/controllers/polyline-display.js',
               'src/js/directives/map.js',
               'src/js/directives/marker.js',
               'src/js/directives/markers.js',
+              'src/js/directives/label.js',
               'src/js/directives/polygon.js',
               'src/js/directives/polyline.js',
               'src/js/directives/window.js',
@@ -100,7 +102,7 @@ module.exports = function(grunt) {
 
     jshint: {
       all: ['Gruntfile.js', 'src/js/**/*.js', 'test/js/**/*.js'],
-      options: {ignores: ['src/js/utils/markerclusterer-r438.js']}
+      options: {ignores: ['src/js/utils/markerclusterer-r438.js', 'src/js/utils/markerwithlabel-r1.1.9.js']}
     },
 
     test: {

example/example-controller.js

@@ -51,18 +51,21 @@ function ExampleController ($scope, $timeout, $log) {
                 {
                     latitude: 45,
                     longitude: -74,
-                    showWindow: false
+                    showWindow: false,
+                    title: 'Marker 2'
                 },
                 {
                     latitude: 15,
                     longitude: 30,
-                    showWindow: false
+                    showWindow: false,
+                    title: 'Marker 2'
                 },
                 {
                     icon: 'plane.png',
                     latitude: 37,
                     longitude: -122,
-                    showWindow: false
+                    showWindow: false,
+                    title: 'Plane'
                 }
             ],
             markers2: [
@@ -86,6 +89,7 @@ function ExampleController ($scope, $timeout, $log) {
             dynamicMarkers: [],
             randomMarkers: [],
             clickedMarker: {
+                title: 'You clicked here',
                 latitude: null,
                 longitude: null
             },
@@ -98,6 +102,7 @@ function ExampleController ($scope, $timeout, $log) {
 
                     if (!$scope.map.clickedMarker) {
                         $scope.map.clickedMarker = {
+                            title: 'You clicked here',
                             latitude: e.latLng.lat(),
                             longitude: e.latLng.lng()
                         };

example/example.html

@@ -76,6 +76,7 @@ <h1>angular-google-maps example</h1>
 				bounds="map.bounds"
 				events="map.events"
         		options="map.options">
+
 				<trafficlayer show="map.showTraffic" />
 
 				<markers models="map.randomMarkers" coords="'self'" icon="'icon'" click="'onClicked'" doCluster="true">
@@ -100,6 +101,7 @@ <h1>angular-google-maps example</h1>
 				<!-- prefedined markers -->
 				<!-- rendering via ng-repear, HIGH OVERHEAD via DOM Manipulation -->
 				<marker ng-repeat="m in map.markers" coords="m" icon="m.icon" click="onMarkerClicked(m)">
+					<marker-label content="m.title" anchor="24 40" class="marker-labels" />
 					<window show="m.showWindow" closeClick="m.closeClick()">
 						<p>This is an info window at {{ m.latitude | number:4 }}, {{ m.longitude | number:4 }}!</p>
 						<p class="muted">My marker will stay open when the window is popped up!</p>
@@ -110,6 +112,7 @@ <h1>angular-google-maps example</h1>
 				<!-- can not put google.map.animations.BOUNCE , since it is not initiaized yet -->
 				<div ng-init="opts = {animation:1}" >
 					<marker coords="map.clickedMarker" options="opts" >
+						<marker-label content="map.clickedMarker.title" anchor="24 40" class="marker-labels" />
 						<window isIconVisibleOnClick="false">This is my clicked marker!
 							<p class="muted">My marker will reappear when you close me.</p>
 						</window>

src/coffee/directives/api/i-label.coffee

@@ -0,0 +1,27 @@
+###
+	- interface for all labels to derrive from
+ 	- to enforce a minimum set of requirements
+ 		- attributes
+ 			- content
+ 			- anchor
+		- implementation needed on watches
+###	
+@ngGmapModule "directives.api", ->
+	class @ILabel extends oo.BaseObject
+		constructor: ($timeout) ->
+			self = @
+			@restrict= 'ECMA'
+			@template= undefined
+			@require= undefined
+			@transclude= true
+			@priority= -100
+			@scope= {
+				labelContent: '=content',
+				labelAnchor: '@anchor',
+				labelClass: '@class',
+				labelStyle: '=style'
+			}
+			@$log = directives.api.utils.Logger
+			@$timeout = $timeout
+		link: (scope, element, attrs, ctrl) =>
+			throw new Exception("Not Implemented!!")

src/coffee/directives/api/label.coffee

@@ -0,0 +1,21 @@
+###
+	Basic Directive api for a label. Basic in the sense that this directive contains 1:1 on scope and model. 
+	Thus there will be one html element per marker within the directive.
+###
+@ngGmapModule "directives.api", ->
+	class @Label extends directives.api.ILabel
+		constructor: ($timeout) ->
+			super($timeout)
+			self = @
+			@require = '^marker'
+			@template = '<span class="angular-google-maps-marker-label" ng-transclude></span>'
+			@$log.info(@)
+		link: (scope, element, attrs, ctrl) =>
+			@$timeout( =>
+				markerCtrl = ctrl.getMarker()
+				if markerCtrl?
+					label = new directives.api.models.child.MarkerLabelChildModel(markerCtrl, scope)
+				scope.$on("$destroy", => 
+					label.destroy()
+				)
+			,50)

src/coffee/directives/api/models/child/label-child-model.coffee

@@ -0,0 +1,65 @@
+@ngGmapModule "directives.api.models.child", ->
+	class @MarkerLabelChildModel extends oo.BaseObject
+		@include directives.api.utils.GmapUtil
+		constructor: (gMarker,opt_options) ->
+			super()
+			self = @
+			@marker = gMarker
+			@marker.set("labelContent" , opt_options.labelContent)
+			@marker.set("labelAnchor" , @getLabelPositionPoint( opt_options.labelAnchor ))
+			@marker.set("labelClass" , opt_options.labelClass || 'labels' )
+			@marker.set("labelStyle" , opt_options.labelStyle || { opacity: 100 })
+			@marker.set("labelInBackground" , opt_options.labelInBackground || false;)
+
+			if !opt_options.labelVisible
+				@marker.set("labelVisible" , true)
+
+			if !opt_options.raiseOnDrag
+				@marker.set("raiseOnDrag" , true)
+
+			if !opt_options.clickable
+				@marker.set("clickable" , true)
+
+			if !opt_options.draggable
+				@marker.set("draggable" , false)
+
+			if !opt_options.optimized
+				@marker.set("optimized" , false)
+
+
+			opt_options.crossImage = opt_options.crossImage ? document.location.protocol + "//maps.gstatic.com/intl/en_us/mapfiles/drag_cross_67_16.png";
+			opt_options.handCursor = opt_options.handCursor ? document.location.protocol + "//maps.gstatic.com/intl/en_us/mapfiles/closedhand_8_8.cur";
+
+			@markerLabel = new MarkerLabel_( @marker, opt_options.crossImage, opt_options.handCursor )
+
+			@marker.set("setMap", ( theMap )->
+				google.maps.Marker.prototype.setMap.apply(this, arguments);
+				self.markerLabel.setMap(theMap)
+			)
+
+			@marker.setMap( @marker.getMap() )
+
+			@$log = directives.api.utils.Logger
+			@$log.info(@)
+		getSharedCross:(crossUrl)=>
+			@markerLabel.getSharedCross(crossUrl)
+		setTitle:()=>
+			@markerLabel.setTitle()
+		setContent:()=>
+			@markerLabel.setContent()
+		setStyles:()=>
+			@markerLabel.setStyles()
+		setMandatoryStyles:()=>
+			@markerLabel.setMandatoryStyles()
+		setAnchor:()=>
+			@markerLabel.setAnchor()
+		setVisible:()=>
+			@markerLabel.setVisible()
+		setZIndex:()=>
+			@markerLabel.setZIndex()
+		setPosition:()=>
+			@markerLabel.setPosition()
+		draw:()=>
+			@markerLabel.draw()
+		destroy:()=>
+			@markerLabel.onRemove()

src/coffee/directives/api/utils/gmap-util.coffee

@@ -1,5 +1,12 @@
 @ngGmapModule "directives.api.utils", ->
 	@GmapUtil =
+		getLabelPositionPoint:(anchor) ->
+			anchor = /^([\d\.]+)\s([\d\.]+)$/.exec(anchor)
+			xPos = anchor[1]
+			yPos = anchor[2]
+			if xPos && yPos
+				new google.maps.Point(xPos,yPos)
+
 		createMarkerOptions:(coords,icon,defaults,map = undefined) ->
 			opts = angular.extend({}, defaults, {
 				position: new google.maps.LatLng(coords.latitude, coords.longitude),

src/js/directives/label.js

@@ -0,0 +1,43 @@
+/**!
+ * The MIT License
+ *
+ * Copyright (c) 2010-2012 Google, Inc. http://angularjs.org
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ * angular-google-maps
+ * https://github.com/nlaplante/angular-google-maps
+ *
+ * @authors Bruno Queiroz, creativelikeadog@gmail.com
+ */
+
+/**
+ * Marker label directive
+ *
+ * This directive is used to create a marker label on an existing map.
+ *
+ * {attribute content required}  content of the label
+ * {attribute anchor required}	string that contains the x and y point position of the label
+ * {attribute class optional} class to DOM object
+ * {attribute style optional} style for the label
+ */
+
+angular.module('google-maps').directive('markerLabel', ['$log', '$timeout', function ($log, $timeout) {
+    return new directives.api.Label($timeout);
+}]);