The maps' items now have proper markers and different colors. Refs #71

app/assets/javascripts/application.js.coffee

@@ -22,6 +22,7 @@
 #= require select2_locale_fr
 #= require leaflet
 #= require leaflet.markercluster
+#= require leaflet.awesome-markers
 #= require_tree .
 
 # Setup polyfills, so that older browsers can also take advantage of html5!

app/assets/javascripts/maps.js.coffee

 # Setting up OpenStreeMap from a generic #map element
 $(document).ready ->
+  markerColors = ['blue', 'red', 'darkred', 'orange', 'green', 'darkgreen', 'purple', 'darkpuple', 'cadetblue']
+  idx = 0
   $('#map.list').each ->
     map = L.map 'map'
 
@@ -12,6 +14,7 @@ $(document).ready ->
     $('li a', this).each ->
       url = $(this).attr 'href'
       text = $(this).html()
+      markerColor = markerColors[idx++ %% markerColors.length]
       if location.search && url.indexOf('?') >= 0
         url += '&' + location.search.substr 1
       else
@@ -19,16 +22,22 @@ $(document).ready ->
 
       $.getJSON url, (json) ->
         if json
-          count = 0
           layer = L.markerClusterGroup(maxClusterRadius: 30).addLayer L.geoJson json,
+            pointToLayer: (feature, latlng) ->
+              # Marker with the proper icon
+              marker = L.AwesomeMarkers.icon
+                prefix: 'fa',
+                icon: feature.properties.icon || 'calendar',
+                markerColor: markerColor
+              L.marker latlng, icon: marker
+            ,
             onEachFeature: (feature, layer) ->
               # Does this feature have a property named popupContent?
               if (feature.properties && feature.properties.popupContent)
                 layer.bindPopup feature.properties.popupContent
-                count++
 
           map.addLayer layer
-          controls.addOverlay layer, text + ' - ' + count
+          controls.addOverlay layer, text + ' - ' + json.length
 
           if (location.href.contains('maps/') || url.contains('maps.json')) && layer.getBounds()._northEast && layer.getBounds()._southWest
             # Automatic focus to all displayed events

app/assets/stylesheets/all.sass

 @import compass
 @import font-awesome-sprockets
 @import font-awesome
+@import font-awesome
+@import leaflet.awesome-markers
 
 *
   height: auto

app/models/orga.rb

@@ -71,7 +71,7 @@ class Orga < ActiveRecord::Base
 
   def as_json(_options = {})
     { type: 'Feature', properties: {
-      id: id, name: name,
+      id: id, icon: kind.icon, name: name,
       place_name: place_name, address: address, city: city,
       tags: tags,
       popupContent: "<a href=\"/orgas/#{id}\">#{self}</a>"

public/assets/tinymce-851b4961ce4c9997bc39867507ab34eb00de363cb3aab1b32a6b1c91ebf6733b.js

+(function() {
+  $(document).ready(function() {
+    return tinyMCE.init({
+      schema: 'html5',
+      menubar: false,
+      language: 'fr_FR',
+      selector: 'textarea.description',
+      content_css: '/dev-assets/application-ee82c1c962333e87dcfc9a0eb1abbc739ed57ba7b77732ece49ab08b6cedf706.css',
+      entity_encoding: 'raw',
+      add_unload_trigger: true,
+      browser_spellcheck: true,
+      toolbar: [' bold italic strikethrough | bullist numlist outdent indent | alignleft aligncenter alignright alignjustify | link image media insertdatetime charmap table | undo redo | searchreplace | code visualblocks preview fullscreen'],
+      plugins: 'lists, advlist, autolink, link, image, charmap, paste, print, preview, table, fullscreen, searchreplace, media, insertdatetime, visualblocks, visualchars, wordcount, contextmenu, code'
+    });
+  });
+
+  $(document).on('page:receive', function() {
+    return tinymce.remove();
+  });
+
+}).call(this);

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

+/*
+  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
+*/
+
+/*global L*/
+
+(function (window, document, undefined) {
+    "use strict";
+    /*
+     * Leaflet.AwesomeMarkers assumes that you have already included the Leaflet library.
+     */
+
+    L.AwesomeMarkers = {};
+
+    L.AwesomeMarkers.version = '2.0.1';
+
+    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',
+            prefix: 'glyphicon',
+            spinClass: 'fa-spin',
+            extraClasses: '',
+            icon: 'home',
+            markerColor: 'blue',
+            iconColor: 'white'
+        },
+
+        initialize: function (options) {
+            options = L.Util.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.markerColor);
+            return div;
+        },
+
+        _createInner: function() {
+            var iconClass, iconSpinClass = "", iconColorClass = "", iconColorStyle = "", options = this.options;
+
+            if(options.icon.slice(0,options.prefix.length+1) === options.prefix + "-") {
+                iconClass = options.icon;
+            } else {
+                iconClass = options.prefix + "-" + options.icon;
+            }
+
+            if(options.spin && typeof options.spinClass === "string") {
+                iconSpinClass = options.spinClass;
+            }
+
+            if(options.iconColor) {
+                if(options.iconColor === 'white' || options.iconColor === 'black') {
+                    iconColorClass = "icon-" + options.iconColor;
+                } else {
+                    iconColorStyle = "style='color: " + options.iconColor + "' ";
+                }
+            }
+
+            return "<i " + iconColorStyle + "class='" + options.extraClasses + " " + options.prefix + " " + iconClass + " " + iconSpinClass + " " + iconColorClass + "'></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');
+
+            this._setIconStyles(div, 'shadow');
+            return div;
+      }
+    });
+        
+    L.AwesomeMarkers.icon = function (options) {
+        return new L.AwesomeMarkers.Icon(options);
+    };
+
+}(this, document));
+
+
+