Add additional marker colors and icons

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

@@ -201,7 +201,34 @@ export default Ember.Component.extend(ParentMixin, {
     });
   },
 
+  getMarkerIcon(marker){
+    let icon = {
+      point: {
+        blue: 'google-maps-markup/images/spotlight-poi-highlighted_hdpi.png',
+        green: 'google-maps-markup/images/spotlight-poi-highlighted_hdpi.png',
+        red: 'google-maps-markup/images/spotlight-poi-highlighted_hdpi.png',
+        yellow: 'google-maps-markup/images/spotlight-poi-highlighted_hdpi.png',
+      },
+      pin: {
+        blue: 'google-maps-markup/images/spotlight-poi-highlighted_hdpi.png',
+        green: 'google-maps-markup/images/spotlight-poi-highlighted_hdpi.png',
+        red: 'google-maps-markup/images/spotlight-poi-highlighted_hdpi.png',
+        yellow: 'google-maps-markup/images/spotlight-poi-highlighted_hdpi.png',
+      }
+    };
+
+    return {
+      url: icon[marker.icon][marker.color],
+    };
+  },
+
+
+
   actions: {
+    toggleDropdown(name) {
+      this.toggleProperty(name);
+    },
+
     updateOptionValue(tool, prop, value) {
       set(tool, prop, value);
     },
@@ -211,6 +238,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');
@@ -222,8 +252,7 @@ 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') {
@@ -260,6 +289,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) {
           activeLayer.data.setDrawingMode(tool.dataId);
           activeLayer.data.setStyle(tool.style);
@@ -680,7 +711,9 @@ 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;
@@ -689,7 +722,20 @@ export default Ember.Component.extend(ParentMixin, {
         if (mode === 'draw') {
           if (withinMap && toolId === 'freeFormPolygon') {
             this.enableFreeFormPolygon();
+          } else if (withinMap && toolId === 'marker') {
+            let style = {
+              icon: this.getMarkerIcon({
+                icon: tool.icon.id,
+              })
+            };
+
+            /*if (! isDefaultIcon || ! isDefaultColor) {
+              activeLayer.data.setStyle(style);
+            } else {
+              activeLayer.data.setStyle();
+            }*/
           }
+
           return;
         }
 

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

@@ -38,6 +38,23 @@
           {{color-palette selected=(get activeTool opt.id) onselect=(action 'updateOptionValue' activeTool opt.id)}}
         </div>
       {{/if}}
+      {{#if (is-equal opt.type 'icon')}}
+        <div class="form-group">
+          <label>{{opt.name}}</label>
+          {{#bs-dropdown as |dd|}}
+            {{#dd.button}}{{activeTool.icon.display}} <img src={{activeTool.icon.path}} height="10px" width="10px"/>{{/dd.button}}
+            {{#dd.menu as |ddm|}}
+              {{#each activeTool.icons as |icon|}}
+                <div {{action 'updateOptionValue' activeTool 'icon' icon}}>
+                  <img src={{icon.path}} height="10px" width="10px">
+                  {{#ddm.item}}{{icon.display}}{{/ddm.item}}
+                  {{ddm.divider}}
+                </div>
+              {{/each}}
+            {{/dd.menu}}
+          {{/bs-dropdown}}
+        </div>
+      {{/if}}
     {{/each}}
     </form>
   {{/if}}

addon/utils/tools.js

@@ -19,7 +19,32 @@ export default {
     id: 'marker',
     dataId: 'Point',
     name: 'Marker',
-    title: 'Marker Tool'
+    title: 'Marker Tool',
+    options: [
+      { name: 'Color', type: 'color', id: 'style.color' },
+      { name: 'Icon', type: 'icon', id: 'icon.id', display: 'icon.display' },
+    ],
+    style: {
+      color: '#374046'
+    },
+    icons: [{
+      id: 'default',
+      display: 'Default',
+      path: 'google-maps-markup/images/spotlight-poi-highlighted_hdpi.png'
+    },{
+      id: 'point',
+      display: 'Point',
+      path: 'google-maps-markup/images/spotlight-poi-highlighted_hdpi.png'
+    }, {
+      id: 'pin',
+      display: 'Pin',
+      path: 'google-maps-markup/images/ic_place_black_24px.svg'
+    }],
+    icon: {
+      id: 'default',
+      display: 'Default',
+      path: 'google-maps-markup/images/spotlight-poi-highlighted_hdpi.png'
+    },
   },
   polyline: {
     id: 'polyline',

app/styles/app.less

@@ -0,0 +1,2 @@
+
+@import "ember-bootstrap/bootstrap";

package.json

@@ -31,9 +31,11 @@
     "ember-uuid": "1.0.0"
   },
   "devDependencies": {
+    "bootstrap": "3.3.7",
     "broccoli-asset-rev": "^2.4.5",
     "broccoli-merge-trees": "^1.2.1",
     "broccoli-static-compiler": "^0.2.1",
+    "ember-bootstrap": "1.0.0-alpha.10",
     "ember-cli": "2.10.0",
     "ember-cli-app-version": "^2.0.0",
     "ember-cli-blanket": "^0.9.9",