GoogleMarkerClusterer: inject cluster styles when strategy module is …

…loaded

examples/css/example.css

@@ -144,32 +144,3 @@ html, body {
     border: 1px solid rgba(255,255,255, .2);
     border-bottom: none;
   }
-
-
-.aeris-cluster:after {
-  content: '';
-  position: absolute;
-  top: -11px;
-  right: -14px;
-  width: 21px;
-  height: 18px;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a90329), color-stop(44%, #8f0222), color-stop(100%, #6d0019));
-  background-image: -webkit-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
-  background-image: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
-  background-image: -o-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
-  background-image: linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  -ms-border-radius: 5px;
-  -o-border-radius: 5px;
-  border-radius: 5px;
-  border: 1px solid rgba(0, 0, 0, 0.5);
-}
-
-.aeris-cluster.aeris-leaflet:after {
-  left: 16px;
-}
-
-.aeris-cluster div {
-  z-index: 2;
-}

src/maps/gmaps/markers/markercluster.js

@@ -2,8 +2,16 @@ define([
   'aeris/util',
   'aeris/maps/strategy/abstractstrategy',
   'gmaps-markerclusterer-plus',
-  'aeris/util/gmaps'
-], function(_, AbstractStrategy, MarkerClusterer, mapUtil) {
+  'aeris/util/gmaps',
+  'aeris/maps/strategy/markers/markerclusterstyletemplate'
+], function(_, AbstractStrategy, MarkerClusterer, mapUtil, markerClusterStyleTemplate) {
+  // Include styles for marker clusters.
+  // Injects a <style> object into the DOM.
+  var node = document.createElement('style');
+  node.innerHTML = markerClusterStyleTemplate();
+  document.body.appendChild(node);
+
+
   /**
    * Strategy for rendering a collection of markers in a cluster.
    *

src/maps/gmaps/markers/markerclusterstyletemplate.js

@@ -0,0 +1,38 @@
+define(function() {
+  var styleString = '' +
+    '.aeris-cluster:after {' +
+    '  content: "";' +
+    '  position: absolute;' +
+    '  top: -11px;' +
+    '  right: -14px;' +
+    '  width: 21px;' +
+    '  height: 18px;' +
+    '  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a90329), color-stop(44%, #8f0222), color-stop(100%, #6d0019));' +
+    '  background-image: -webkit-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);' +
+    '  background-image: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);' +
+    '  background-image: -o-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);' +
+    '  background-image: linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);' +
+    '  -webkit-border-radius: 5px;' +
+    '  -moz-border-radius: 5px;' +
+    '  -ms-border-radius: 5px;' +
+    '  -o-border-radius: 5px;' +
+    '  border-radius: 5px;' +
+    '  border: 1px solid rgba(0, 0, 0, 0.5);' +
+    '}' +
+    '' +
+    '.aeris-cluster div {' +
+    '  z-index: 2;' +
+    '}';
+
+  /**
+   * Returns CSS style rules for gmaps
+   * marker clusters.
+   *
+   * @for aeris.maps.gmaps.markers
+   * @method markerClusterStyleTemplate
+   * @return {String}
+   */
+  return function markerClusterStyleTemplate() {
+    return styleString;
+  }
+});

tests/spec/aeris/maps/gmaps/markers/markercluster.js

@@ -83,6 +83,11 @@ define([
 
   describe('A MarkerClustererStrategy', function() {
 
+    it('should append cluster styles to the DOM', function() {
+      // Note that this happens only once, on loading the strategy module.
+      expect($('style').text()).toMatch('.aeris-cluster');
+    });
+
     describe('constructor', function() {
 
       describe('createView', function() {