Add support for Stylled Markers

jeperkins4 · Nov 24, 2010 · ca95d69 · ca95d69
1 parent 93516a8
commit ca95d69
Show file tree

Hide file tree

Showing 4 changed files with 332 additions and 22 deletions.
diff --git a/jquery.jmapping.js b/jquery.jmapping.js
@@ -114,16 +114,52 @@
         link.attr('href', ("#" + location_data.id));
       };
 
+      var chooseIconOptions = function(category){
+        if (settings.category_icon_options){
+          if ($.isFunction(settings.category_icon_options)){
+            return settings.category_icon_options(category);
+          } else {
+            return settings.category_icon_options[category] || settings.category_icon_options['default'];
+          }
+        } else {
+          return {};
+        }
+      };
+
       var createMarker = function(place_elm){
         var $place_elm = $(place_elm), place_data, point, marker, $info_window_elm, 
           info_window;
 
         place_data = $place_elm.metadata(settings.metadata_options);
         point = $.jMapping.makeGLatLng(place_data.point);
-        marker = new google.maps.Marker({
-          position: point,
-          map: map
-        });
+
+        if (settings.category_icon_options){
+          icon_options = chooseIconOptions(place_data.category);
+          if (typeof icon_options === "string"){
+            marker = new google.maps.Marker({
+              icon: icon_options,
+              position: point,
+              map: map
+            });
+          } else if (icon_options instanceof google.maps.MarkerImage){
+            marker = new google.maps.Marker({
+              icon: icon_options,
+              position: point,
+              map: map
+            });
+          } else {
+            marker = new StyledMarker({
+              styleIcon: new StyledIcon(StyledIconTypes.MARKER, icon_options),
+              position: point,
+              map: map
+            });
+          }
+        } else {
+          marker = new google.maps.Marker({
+            position: point,
+            map: map
+          });
+        }
 
         $info_window_elm = $place_elm.find(settings.info_window_selector);
         if ($info_window_elm.length > 0){

diff --git a/spec/jmapping_spec.js b/spec/jmapping_spec.js
@@ -355,7 +355,7 @@ Screw.Unit(function(){
     });
   });
 
-  describe("jMapping with no cateogies and 'category_icon_options'", function(){
+  describe("jMapping with no categories and 'category_icon_options'", function(){
     before(function(){
       // mock out Marker
       google.maps.InfoWindow = Smoke.MockFunction(function(options){}, 'InfoWindow');
@@ -366,7 +366,7 @@ Screw.Unit(function(){
         });
       });
 
-      mockGMaps();
+      mockGMaps(true);
       mockMarkerManager();
     });
     after(function(){
@@ -379,7 +379,7 @@ Screw.Unit(function(){
       $('#map').jMapping({
         side_bar_selector: 'ul#map-list', 
         location_selector: 'li.location',
-        category_icon_options: {'fun': {primaryColor: '#33FFFF'}, 'default': {primaryColor: '#CC0000'}},
+        category_icon_options: {'fun': {color: '#33FFFF'}, 'default': {color: '#CC0000'}},
         metadata_options: {type: 'html5'}
       });
       expect($('#map').data('jMapping')).to(be_true);
@@ -398,16 +398,16 @@ Screw.Unit(function(){
         });
       });
 
-      mockGMaps();
+      mockGMaps(true);
       mockMarkerManager();
 
       category_function = mock_function(function(category){
         if (category.charAt(0).match(/[a-m]/i)){
-          return {primaryColor: '#CC0000'};
+          return {color: '#CC0000'};
         } else if (category.charAt(0).match(/[n-z]/i)){
-          return {primaryColor: '#33FFFF'};
+          return {color: '#33FFFF'};
         } else {
-          return {primaryColor: '#00FFCC'};
+          return {color: '#00FFCC'};
         }
       }, 'category_icon_options_function');
       category_function.should_be_invoked().exactly('twice');
@@ -459,7 +459,7 @@ Screw.Unit(function(){
     });
   });
 
-  describe("setting a function to category_icon_options that returns a GIcon", function(){
+  describe("setting a function to category_icon_options that returns a MarkerImage", function(){
     var category_function;
     before(function(){
       google.maps.InfoWindow = Smoke.MockFunction(function(options){}, 'InfoWindow');
@@ -474,7 +474,7 @@ Screw.Unit(function(){
       mockMarkerManager();
 
       category_function = mock_function(function(category){
-        return 'GIcon';
+        return new google.maps.MarkerImage('/images/map_icons/icon1.jpg');
       }, 'category_icon_options_function');
       category_function.should_be_invoked().exactly('twice');
     });

diff --git a/spec/spec_helper.js b/spec/spec_helper.js
@@ -11,21 +11,24 @@ var google = {
     LatLngBounds: function(){},
     LatLng: function(){},
     Marker: function(){},
-    InfoWindow: function(){}
+    InfoWindow: function(){},
+    MarkerImage: function(){}
   }
-};
+},
+StyledIconTypes = {
+  MARKER: 'MARKER'
+},
+StyledIcon = function(){},
+StyledMarker = function(){};
 
-Screw.Specifications.mockGMaps = function(gmap_mock_setup){
+Screw.Specifications.mockGMaps = function(custom_markers){
   // mock out GLatLng
   google.maps.LatLng = Smoke.MockFunction(function(lat, lng){}, 'LatLng');
   google.maps.LatLng.should_be_invoked().at_least('once');
 
   // mock out GMap2
   var gmap_mock = Smoke.Mock();
   gmap_mock.should_receive('fitBounds').exactly('once');
-  if ($.isFunction(gmap_mock_setup)){
-    gmap_mock_setup(gmap_mock);
-  }
   $.extend(google.maps.Map.prototype, gmap_mock);
 
   // mock out Bounds
@@ -36,8 +39,15 @@ Screw.Specifications.mockGMaps = function(gmap_mock_setup){
   $.extend(google.maps.LatLngBounds.prototype, bounds_mock);
 
   // mock out Marker
-  google.maps.Marker = Smoke.MockFunction(function(point, options){}, 'Marker');
-  google.maps.Marker.should_be_invoked().exactly('twice');
+  if (custom_markers){
+    StyledIcon = Smoke.MockFunction(function(options){}, 'StyledIcon');
+    StyledIcon.should_be_invoked().exactly('twice');
+    StyledMarker = Smoke.MockFunction(function(options){}, 'StyledMarker');
+    StyledMarker.should_be_invoked().exactly('twice');
+  } else {
+    google.maps.Marker = Smoke.MockFunction(function(options){}, 'Marker');
+    google.maps.Marker.should_be_invoked().exactly('twice');
+  }
 
   google.maps.event = Smoke.Mock();
   google.maps.event.should_receive('addListener').at_least('once');
@@ -60,7 +70,7 @@ Screw.Specifications.mockGMapsUpdate = function(){
   $.extend(google.maps.LatLngBounds.prototype, bounds_mock);
 
   // mock out Marker
-  google.maps.Marker = Smoke.MockFunction(function(point, options){}, 'Marker');
+  google.maps.Marker = Smoke.MockFunction(function(options){}, 'Marker');
   google.maps.Marker.should_be_invoked().exactly(4, 'times');
 
   google.maps.event = Smoke.Mock();