Add appropriately-green map marker

Gemfile

@@ -83,6 +83,7 @@ gem 'acts-as-taggable-on', '2.4.1'
 gem 'jquery-rails', '1.0.19'
 gem 'progress_bar', '1.0.0'
 gem 'exception_notification', '2.6.1'
+gem 'font-awesome-rails', '3.2.1.3'
 
 # gem 'paper_trail_manager', :git => 'https://github.com/igal/paper_trail_manager.git'
 # gem 'paper_trail_manager', :path => '../paper_trail_manager'

app/assets/javascripts/application.js

@@ -1,5 +1,6 @@
 //= require jquery
 //= require jquery_ujs
+//= require leaflet.awesome-markers
 
 $(document).ready(function(){
   // Shows hidden section when a link is clicked, and hides the link.

app/assets/stylesheets/application.scss

@@ -2,4 +2,6 @@
  *= require reset
  *= require common
  *= require formtastic
+ *= require font-awesome
+ *= require leaflet.awesome-markers
  */

app/helpers/mapping_helper.rb

@@ -49,6 +49,11 @@ def map(locatable_items, options = {})
 
         map.addLayer(layer);
 
+        var venueIcon = L.AwesomeMarkers.icon({
+          icon: 'star',
+          color: 'green'
+        })
+
         var markers = [#{markers.join(", ")}];
         var markerGroup = L.featureGroup(markers);
         markerGroup.addTo(map);
@@ -82,7 +87,7 @@ def map_markers(locatable_items)
         title = locatable_item.title
         popup = link_to(locatable_item.title, locatable_item)
 
-        "L.marker([#{latitude}, #{longitude}], {title: '#{j title}'}).bindPopup('#{j popup}')"
+        "L.marker([#{latitude}, #{longitude}], {title: '#{j title}', icon: venueIcon}).bindPopup('#{j popup}')"
       end
     }.compact
   end

themes/default/views/layouts/application.html.erb

@@ -28,8 +28,8 @@
     <%= yield :css_insert %>
 
     <!-- JavaScripts, static -->
-    <%= javascript_include_tag 'application', 'theme' %>
     <%= javascript_include_tag *mapping_js_includes %>
+    <%= javascript_include_tag 'application', 'theme' %>
 
     <!-- JavaScripts, inserted -->
     <%= yield :javascript_insert %>

vendor/assets/javascripts/leaflet.awesome-markers.js

@@ -0,0 +1,104 @@
+/*
+  Leaflet.AwesomeMarkers, a plugin that adds colorful iconic markers for Leaflet, based on the Font Awesome icons
+  (c) 2012-2013, Lennard Voogdt
+
+  http://leafletjs.com
+  https://github.com/lvoogdt
+*/
+(function (window, document, undefined) {
+/*
+ * Leaflet.AwesomeMarkers assumes that you have already included the Leaflet library.
+ */
+
+L.AwesomeMarkers = {};
+
+L.AwesomeMarkers.version = '1.0';
+
+L.AwesomeMarkers.Icon = L.Icon.extend({
+  options: {
+    iconSize: [35, 45],
+    iconAnchor:   [17, 42],
+    popupAnchor: [1, -32],
+    shadowAnchor: [10, 12],
+    shadowSize: [36, 16],
+    className: 'awesome-marker',
+    icon: 'home',
+    color: 'blue',
+    iconColor: 'white'
+  },
+
+  initialize: function (options) {
+    options = L.setOptions(this, options);
+  },
+
+  createIcon: function () {
+    var div = document.createElement('div'),
+        options = this.options;
+
+    if (options.icon) {
+      div.innerHTML = this._createInner();
+    }
+
+    if (options.bgPos) {
+      div.style.backgroundPosition =
+              (-options.bgPos.x) + 'px ' + (-options.bgPos.y) + 'px';
+    }
+
+    this._setIconStyles(div, 'icon-' + options.color);
+    return div;
+  },
+
+  _createInner: function() {
+    var iconClass;
+    if(this.options.icon.slice(0,5)==="icon-"){
+      iconClass=this.options.icon;
+    }else{
+      iconClass="icon-"+this.options.icon;
+    }
+    return "<i class='" + iconClass
+    + (this.options.spin ? " icon-spin" :"")
+    + (this.options.iconColor ? " icon-" + this.options.iconColor :"") + "'></i>";
+  },
+
+  _setIconStyles: function (img, name) {
+    var options = this.options,
+        size = L.point(options[name == 'shadow' ? 'shadowSize' : 'iconSize']),
+        anchor;
+
+    if (name === 'shadow') {
+      anchor = L.point(options.shadowAnchor || options.iconAnchor);
+    } else {
+      anchor = L.point(options.iconAnchor);
+    }
+
+    if (!anchor && size) {
+      anchor = size.divideBy(2, true);
+    }
+
+    img.className = 'awesome-marker-' + name + ' ' + options.className;
+
+    if (anchor) {
+      img.style.marginLeft = (-anchor.x) + 'px';
+      img.style.marginTop  = (-anchor.y) + 'px';
+    }
+
+    if (size) {
+      img.style.width  = size.x + 'px';
+      img.style.height = size.y + 'px';
+    }
+  },
+
+  createShadow: function () {
+    var div = document.createElement('div'),
+        options = this.options;
+
+    this._setIconStyles(div, 'shadow');
+    return div;
+  }
+});
+
+L.AwesomeMarkers.icon = function (options) {
+  return new L.AwesomeMarkers.Icon(options);
+};
+
+}(this, document));

vendor/assets/stylesheets/leaflet.awesome-markers.css.scss

@@ -0,0 +1,88 @@
+/*
+Author: L. Voogdt
+License: MIT
+Version: 1.0
+*/
+
+/* Marker setup */
+.awesome-marker {
+  background: image-url('markers-soft.png') no-repeat 0 0;
+  width: 35px;
+  height: 46px;
+  position:absolute;
+  left:0;
+  top:0;
+  display: block;
+  text-align: center;
+}
+
+.awesome-marker-shadow {
+  background: image-url('markers-shadow.png') no-repeat 0 0;
+  width: 36px;
+  height: 16px;
+}
+
+/* Retina displays */
+@media (min--moz-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 3/2),
+(-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx) {
+ .awesome-marker {
+  background-image: image-url('markers-soft@2x.png');
+  background-size: 360px 46px;
+ }
+ .awesome-marker-shadow {
+  background-image: image-url('markers-shadow@2x.png');
+  background-size: 35px 16px;
+ }
+}
+
+.awesome-marker i {
+  color: #333;
+  margin-top: 10px;
+  display: inline-block;
+  font-size: 14px;
+}
+
+.awesome-marker .icon-white {
+  color: #fff;
+}
+
+/* Colors */
+.awesome-marker-icon-red {
+  background-position: 0 0;
+}
+
+.awesome-marker-icon-darkred {
+  background-position: -180px 0;
+}
+
+.awesome-marker-icon-orange {
+  background-position: -36px 0;
+}
+
+.awesome-marker-icon-green {
+  background-position: -72px 0;
+}
+
+.awesome-marker-icon-darkgreen {
+  background-position: -252px 0;
+}
+
+.awesome-marker-icon-blue {
+  background-position: -108px 0;
+}
+
+.awesome-marker-icon-darkblue {
+  background-position: -216px 0;
+}
+
+.awesome-marker-icon-purple {
+  background-position: -144px 0;
+}
+
+.awesome-marker-icon-darkpurple {
+  background-position: -288px 0;
+}
+
+.awesome-marker-icon-cadetblue {
+  background-position: -324px 0;
+}