Add additional marker colors and icons

addon/components/google-maps-markup/component.js

@@ -8,8 +8,10 @@ import overlayToFeature from '../../utils/overlay-to-feature';
 import featureCenter from '../../utils/feature-center';
 import initMeasureLabel from '../../utils/init-measure-label';
 import MapLabel from '../../utils/map-label';
+import Marker from '../../utils/marker';
 import DynamicLabel from '../../utils/dynamic-label';
 import labelPlotter from '../../utils/label-plotter';
+import hoverColor from '../../utils/hover-color';
 
 if (!window.google) {
   throw new Error('Sorry, but `google` defined globally is required for this addon');
@@ -191,7 +193,7 @@ export default Ember.Component.extend(ParentMixin, {
       poly.getPath().push(e.latLng);
     });
 
-    google.maps.event.addListenerOnce(map, 'mouseup', (e) => {
+    google.maps.event.addListenerOnce(map, 'mouseup', () => {
       google.maps.event.removeListener(move);
       poly.setMap(null);
 
@@ -214,6 +216,7 @@ export default Ember.Component.extend(ParentMixin, {
   },
 
   actions: {
+
     updateOptionValue(tool, prop, value) {
       set(tool, prop, value);
     },
@@ -233,6 +236,9 @@ export default Ember.Component.extend(ParentMixin, {
     },
 
     changeTool(toolId) {
+      this.resetAllLayers();
+      this.clearListeners();
+
       let markupDataService = this.get('markupData');
       let activeLayer = this.get('activeLayer');
       let map = this.get('map');
@@ -244,9 +250,6 @@ export default Ember.Component.extend(ParentMixin, {
       this.set('drawFinished', false);
       markupDataService.set('activeTool', tool.id);
 
-      this.resetAllLayers();
-      this.clearListeners();
-
       if (activeLayer) {
         if (tool.id === 'pan') {
           activeLayer.data.setDrawingMode(null);
@@ -255,7 +258,6 @@ export default Ember.Component.extend(ParentMixin, {
 
           let clickListener = activeLayer.data.addListener('click', event => {
             let childComponents = this.get('childComponents');
-            let results = this.get('results');
             let found = childComponents.find(function (comp) {
               return comp.get('data').feature.getId() === event.feature.getId();
             });
@@ -282,6 +284,8 @@ export default Ember.Component.extend(ParentMixin, {
             event.stop();
           });
           listeners.pushObjects([ mapListener, dataListener ]);
+        } else if (tool.dataId === 'Point') {
+          activeLayer.data.setDrawingMode(tool.dataId);
         } else if (tool.dataId) {
           let style = Ember.copy(tool.style);
 
@@ -332,6 +336,8 @@ export default Ember.Component.extend(ParentMixin, {
             if (result.type === 'text') {
               textGeoJson.removeObject(result.geojson);
             }
+          } else if (result.markerData) {
+              result.markerData.setMap(null);
           }
         });
 
@@ -352,6 +358,9 @@ export default Ember.Component.extend(ParentMixin, {
       if (result.type === 'text') {
         result.feature.setMap(null);
         textGeoJson.removeObject(result.geojson);
+      } else if (result.type === 'marker') {
+        result.markerData.setMap(null);
+        layer.data.remove(result.feature);
       } else {
         layer.data.remove(result.feature);
       }
@@ -462,6 +471,11 @@ export default Ember.Component.extend(ParentMixin, {
             scaledSize: new google.maps.Size(22, 40),
           }
         };
+
+        if(data.hoverStyle){
+          style = data.hoverStyle;
+        }
+
       } else if (data.type === 'text') {
         data.feature.highlight();
       } else {
@@ -707,16 +721,85 @@ export default Ember.Component.extend(ParentMixin, {
       let plotter;
 
       let onClick = run.bind(this, (event) => {
+        let activeLayer = this.get('activeLayer');
         let toolId = this.get('toolId');
+        let tool = this.getTool(toolId);
         let mode = this.get('mode');
         let mapDiv = map.getDiv();
         let target = event.target;
         let withinMap = mapDiv.contains(target);
+        let results = this.get('results');
 
         if (mode === 'draw') {
           if (withinMap && toolId === 'freeFormPolygon') {
             this.enableFreeFormPolygon();
+          } else if (withinMap && toolId === 'marker') {
+            let length = results.get('length');
+            let arrayIndexOffSet = 1;
+            let lastObjectIndex = length - arrayIndexOffSet;
+            let data = results.get('lastObject');
+
+            let iconObj = tool.icons.find(function(iconObj){
+              return iconObj.id === tool.icon.id;
+            });
+
+             let markerObj = tool.markers.find(function(markerObj){
+              return markerObj.id === tool.marker.id;
+            });
+
+            if (markerObj.id !== 'default') {
+
+              let style = {
+                icon: {
+                  path: markerObj.path,
+                  fillColor: tool.style.color,
+                  fillOpacity: 1,
+                  strokeColor: '',
+                  strokeWeight: 0,
+                  scaledSize: new google.maps.Size(22, 40)
+                },
+                map_icon_label: '<i class="material-icons">' + markerObj.id + '</i>'
+              };
+
+              let hoverStyle = {
+                icon: {
+                  path: markerObj.path,
+                  fillColor: hoverColor(tool.style.color),
+                  fillOpacity: 1,
+                  strokeColor: '',
+                  strokeWeight: 0,
+                  scaledSize: new google.maps.Size(22, 40)
+                }
+              };
+
+              if (tool.icon.id !== 'default') {
+                var marker = new Marker({
+                  position: calculateLatLng(map, event),
+                  map: map,
+                  icon: {
+                    path: markerObj.path,
+                    fillColor: tool.style.color,
+                    fillOpacity: 1,
+                    strokeColor: '',
+                    strokeWeight: 0,
+                    scaledSize: new google.maps.Size(22, 40)
+                  },
+                  map_icon_label: '<i class="material-icons">' + iconObj.id + '</i>'
+                })
+
+                data.markerData = marker;
+
+                // To add the marker to the map, call setMap();
+                marker.setMap(map);
+              }
+
+              data.hoverStyle = hoverStyle;
+              data.style = style;
+              results[lastObjectIndex] = data;
+              activeLayer.data.overrideStyle(data.feature, style);
+            }
           }
+
           return;
         }
 

addon/components/google-maps-markup/template.hbs

@@ -34,15 +34,50 @@
       {{#each activeTool.options as |opt|}}
         {{#if (is-equal opt.type 'color')}}
           <div class="form-group">
+        {{#unless (is-equal activeTool.icon 'default')}}
             <label>
               {{#if opt.fillOptional}}
                 {{input type="checkbox" click=(action "fillColorTransparent") checked=(get activeTool opt.id)}}
               {{/if}}
               {{opt.name}}
             </label>
             {{color-palette selected=(get activeTool opt.id) onselect=(action 'updateOptionValue' activeTool opt.id)}}
+        {{/unless}}
+        </div>
+      {{/if}}
+      {{#if (is-equal opt.type 'Marker')}}
+        <div class="form-group drop_down">
+          <div><label>{{opt.name}}</label></div>
+          {{#power-select
+            options=activeTool.markers
+            selected=activeTool.marker
+            searchEnabled=false
+            onchange=(action "updateOptionValue" activeTool opt.id)
+            as |marker|
+          }}
+            <span>{{marker.display}}</span>
+            <svg baseProfile="basic" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 48 48"><path d="{{marker.pathDropdown}}"></path></svg>
+          {{/power-select}}
           </div>
+      {{/if}}
+      {{#unless (is-equal activeTool.marker.id 'default')}}
+        {{#if (is-equal opt.type 'icon')}}
+          <div class="form-group drop_down">
+            <div><label>{{opt.name}}</label></div>
+            {{#power-select
+              options=activeTool.icons
+              selected=activeTool.icon
+              searchEnabled=false
+              onchange=(action "updateOptionValue" activeTool opt.id)
+              as |icon|
+            }}
+            <span>{{icon.display}}</span>
+            <i class="material-icons">{{ icon.id }}</i>
+            {{/power-select}}
+            </div>
         {{/if}}
+      {{/unless}}
+
       {{/each}}
     </form>
   {{/if}}

addon/components/markup-result-item/component.js

@@ -8,7 +8,6 @@ import featureCenter from '../../utils/feature-center';
 const {
   on,
   run,
-  set,
   computed
 } = Ember;
 

addon/utils/hover-color.js

@@ -0,0 +1,87 @@
+
+/* hexToComplimentary : Converts hex value to HSL, shifts
+ * hue by 180 degrees and then converts hex, giving complimentary color
+ * as a hex value
+ * @param  [String] hex : hex value  
+ * @return [String] : complimentary color as hex value
+ */
+export default function hoverColor(hex) {
+    // Convert hex to rgb
+    var rgb = 'rgb(' + (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16); }).join(',') + ')';
+
+    // Get array of RGB values
+    rgb = rgb.replace(/[^\d,]/g, '').split(',');
+
+    var r = rgb[0], g = rgb[1], b = rgb[2];
+
+    // Convert RGB to HSL
+    r /= 255.0;
+    g /= 255.0;
+    b /= 255.0;
+    var max = Math.max(r, g, b);
+    var min = Math.min(r, g, b);
+    var h, s, l = (max + min) / 2.0;
+
+    if(max === min) {
+        h = s = 0;  //achromatic
+    } else {
+        var d = max - min;
+        s = (l > 0.5 ? d / (2.0 - max - min) : d / (max + min));
+
+        if(max === r && g >= b) {
+            h = 1.0472 * (g - b) / d ;
+        } else if(max === r && g < b) {
+            h = 1.0472 * (g - b) / d + 6.2832;
+        } else if(max === g) {
+            h = 1.0472 * (b - r) / d + 2.0944;
+        } else if(max === b) {
+            h = 1.0472 * (r - g) / d + 4.1888;
+        }
+    }
+
+    h = h / 6.2832 * 360.0 + 0;
+
+    // Shift hue to opposite side of wheel and convert to [0-1] value
+    h+= 180;
+    if (h > 360) { h -= 360; }
+    h /= 360;
+
+    // Convert h s and l values into r g and b values
+    if(s === 0){
+        r = g = b = l; // achromatic
+    } else {
+        var hue2rgb = function hue2rgb(p, q, t){
+            if(t < 0) {
+                t += 1;
+            }
+            if(t > 1){
+                t -= 1;
+            }
+            if(t < 1/6) {
+                return p + (q - p) * 6 * t;
+            }
+            if(t < 1/2) {
+                return q;
+            }
+            if(t < 2/3) {
+            return p + (q - p) * (2/3 - t) * 6;
+            }
+            return p;
+        };
+
+        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        var p = 2 * l - q;
+
+        r = hue2rgb(p, q, h + 1/3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1/3);
+    }
+
+    r = Math.round(r * 255);
+    g = Math.round(g * 255); 
+    b = Math.round(b * 255);
+
+    // Convert r b and g values to hex
+    rgb = b | (g << 8) | (r << 16); 
+    return "#" + (0x1000000 | rgb).toString(16).substring(1);
+}  

addon/utils/marker-label.js

@@ -0,0 +1,65 @@
+class MarkerLabel extends google.maps.OverlayView {
+  constructor(options) {
+    super(...arguments);
+
+    var self = this;
+    this.setValues(options);
+
+    this.position = options.position;
+
+    // Create the label container
+    this.div = document.createElement('div');
+    this.div.className = '';
+
+    // Trigger the marker click handler if clicking on the label
+    google.maps.event.addDomListener(this.div, 'click', function(e){
+      (e.stopPropagation) && e.stopPropagation();
+      google.maps.event.trigger(self.marker, 'click');
+    });
+  }
+
+  onAdd() {
+    var pane = this.getPanes().overlayImage.appendChild(this.div);
+    var self = this;
+
+    this.listeners = [
+      google.maps.event.addListener(this, 'position_changed', function() { self.draw(); }),
+      google.maps.event.addListener(this, 'text_changed', function() { self.draw(); }),
+      google.maps.event.addListener(this, 'zindex_changed', function() { self.draw(); })
+    ];
+  }
+
+  // Marker Label onRemove
+  onRemove() {
+    this.div.parentNode.removeChild(this.div);
+
+    for (var i = 0, I = this.listeners.length; i < I; ++i) {
+      google.maps.event.removeListener(this.listeners[i]);
+    }
+  }
+
+  // Implement draw
+  draw() {
+    var projection = this.getProjection();
+    var position = projection.fromLatLngToDivPixel(this.get('position'));
+    var div = this.div;
+
+    this.div.innerHTML = this.get('text').toString();
+
+    div.style.zIndex = this.get('zIndex'); // Allow label to overlay marker
+    div.style.position = 'absolute';
+    div.style.display = 'block';
+    div.style.left = (position.x - (div.offsetWidth / 2) + 12) + 'px';
+    div.style.top = (position.y - (div.offsetHeight/2) - 24) + 'px';
+  }
+
+  set position(value) {
+    this.latlng = value;
+  }
+
+  get position() {
+    return this.latlng;
+  }
+}
+
+export default MarkerLabel;