The maps' items now have proper markers and different colors. Refs #71
|
@ -22,6 +22,7 @@
|
||||||
#= require select2_locale_fr
|
#= require select2_locale_fr
|
||||||
#= require leaflet
|
#= require leaflet
|
||||||
#= require leaflet.markercluster
|
#= require leaflet.markercluster
|
||||||
|
#= require leaflet.awesome-markers
|
||||||
#= require_tree .
|
#= require_tree .
|
||||||
|
|
||||||
# Setup polyfills, so that older browsers can also take advantage of html5!
|
# Setup polyfills, so that older browsers can also take advantage of html5!
|
||||||
|
|
|
@ -1,5 +1,7 @@
|
||||||
# Setting up OpenStreeMap from a generic #map element
|
# Setting up OpenStreeMap from a generic #map element
|
||||||
$(document).ready ->
|
$(document).ready ->
|
||||||
|
markerColors = ['blue', 'red', 'darkred', 'orange', 'green', 'darkgreen', 'purple', 'darkpuple', 'cadetblue']
|
||||||
|
idx = 0
|
||||||
$('#map.list').each ->
|
$('#map.list').each ->
|
||||||
map = L.map 'map'
|
map = L.map 'map'
|
||||||
|
|
||||||
|
@ -12,6 +14,7 @@ $(document).ready ->
|
||||||
$('li a', this).each ->
|
$('li a', this).each ->
|
||||||
url = $(this).attr 'href'
|
url = $(this).attr 'href'
|
||||||
text = $(this).html()
|
text = $(this).html()
|
||||||
|
markerColor = markerColors[idx++ %% markerColors.length]
|
||||||
if location.search && url.indexOf('?') >= 0
|
if location.search && url.indexOf('?') >= 0
|
||||||
url += '&' + location.search.substr 1
|
url += '&' + location.search.substr 1
|
||||||
else
|
else
|
||||||
|
@ -19,16 +22,22 @@ $(document).ready ->
|
||||||
|
|
||||||
$.getJSON url, (json) ->
|
$.getJSON url, (json) ->
|
||||||
if json
|
if json
|
||||||
count = 0
|
|
||||||
layer = L.markerClusterGroup(maxClusterRadius: 30).addLayer L.geoJson json,
|
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) ->
|
onEachFeature: (feature, layer) ->
|
||||||
# Does this feature have a property named popupContent?
|
# Does this feature have a property named popupContent?
|
||||||
if (feature.properties && feature.properties.popupContent)
|
if (feature.properties && feature.properties.popupContent)
|
||||||
layer.bindPopup feature.properties.popupContent
|
layer.bindPopup feature.properties.popupContent
|
||||||
count++
|
|
||||||
|
|
||||||
map.addLayer layer
|
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
|
if (location.href.contains('maps/') || url.contains('maps.json')) && layer.getBounds()._northEast && layer.getBounds()._southWest
|
||||||
# Automatic focus to all displayed events
|
# Automatic focus to all displayed events
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
@import compass
|
@import compass
|
||||||
@import font-awesome-sprockets
|
@import font-awesome-sprockets
|
||||||
@import font-awesome
|
@import font-awesome
|
||||||
|
@import font-awesome
|
||||||
|
@import leaflet.awesome-markers
|
||||||
|
|
||||||
*
|
*
|
||||||
height: auto
|
height: auto
|
||||||
|
|
|
@ -71,7 +71,7 @@ class Orga < ActiveRecord::Base
|
||||||
|
|
||||||
def as_json(_options = {})
|
def as_json(_options = {})
|
||||||
{ type: 'Feature', properties: {
|
{ type: 'Feature', properties: {
|
||||||
id: id, name: name,
|
id: id, icon: kind.icon, name: name,
|
||||||
place_name: place_name, address: address, city: city,
|
place_name: place_name, address: address, city: city,
|
||||||
tags: tags,
|
tags: tags,
|
||||||
popupContent: "<a href=\"/orgas/#{id}\">#{self}</a>"
|
popupContent: "<a href=\"/orgas/#{id}\">#{self}</a>"
|
||||||
|
|
|
@ -0,0 +1,21 @@
|
||||||
|
(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);
|
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 30 KiB |
After Width: | Height: | Size: 7.8 KiB |
After Width: | Height: | Size: 535 B |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 40 KiB |
After Width: | Height: | Size: 65 KiB |
|
@ -0,0 +1,125 @@
|
||||||
|
/*
|
||||||
|
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));
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,7 @@
|
||||||
|
/*
|
||||||
|
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(e,t,n){"use strict";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",icon:"home",markerColor:"blue",iconColor:"white"},initialize:function(e){e=L.Util.setOptions(this,e)},createIcon:function(){var e=t.createElement("div"),n=this.options;n.icon&&(e.innerHTML=this._createInner());n.bgPos&&(e.style.backgroundPosition=-n.bgPos.x+"px "+ -n.bgPos.y+"px");this._setIconStyles(e,"icon-"+n.markerColor);return e},_createInner:function(){var e,t="",n="",r="",i=this.options;i.icon.slice(0,i.prefix.length+1)===i.prefix+"-"?e=i.icon:e=i.prefix+"-"+i.icon;i.spin&&typeof i.spinClass=="string"&&(t=i.spinClass);i.iconColor&&(i.iconColor==="white"||i.iconColor==="black"?n="icon-"+i.iconColor:r="style='color: "+i.iconColor+"' ");return"<i "+r+"class='"+i.prefix+" "+e+" "+t+" "+n+"'></i>"},_setIconStyles:function(e,t){var n=this.options,r=L.point(n[t==="shadow"?"shadowSize":"iconSize"]),i;t==="shadow"?i=L.point(n.shadowAnchor||n.iconAnchor):i=L.point(n.iconAnchor);!i&&r&&(i=r.divideBy(2,!0));e.className="awesome-marker-"+t+" "+n.className;if(i){e.style.marginLeft=-i.x+"px";e.style.marginTop=-i.y+"px"}if(r){e.style.width=r.x+"px";e.style.height=r.y+"px"}},createShadow:function(){var e=t.createElement("div");this._setIconStyles(e,"shadow");return e}});L.AwesomeMarkers.icon=function(e){return new L.AwesomeMarkers.Icon(e)}})(this,document);
|
|
@ -0,0 +1,124 @@
|
||||||
|
/*
|
||||||
|
Author: L. Voogdt
|
||||||
|
License: MIT
|
||||||
|
Version: 1.0
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Marker setup */
|
||||||
|
.awesome-marker {
|
||||||
|
background: 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: 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: url('markers-soft@2x.png');
|
||||||
|
background-size: 720px 46px;
|
||||||
|
}
|
||||||
|
.awesome-marker-shadow {
|
||||||
|
background-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-lightred {
|
||||||
|
background-position: -360px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.awesome-marker-icon-orange {
|
||||||
|
background-position: -36px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.awesome-marker-icon-beige {
|
||||||
|
background-position: -396px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.awesome-marker-icon-green {
|
||||||
|
background-position: -72px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.awesome-marker-icon-darkgreen {
|
||||||
|
background-position: -252px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.awesome-marker-icon-lightgreen {
|
||||||
|
background-position: -432px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.awesome-marker-icon-blue {
|
||||||
|
background-position: -108px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.awesome-marker-icon-darkblue {
|
||||||
|
background-position: -216px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.awesome-marker-icon-lightblue {
|
||||||
|
background-position: -468px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.awesome-marker-icon-purple {
|
||||||
|
background-position: -144px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.awesome-marker-icon-darkpurple {
|
||||||
|
background-position: -288px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.awesome-marker-icon-pink {
|
||||||
|
background-position: -504px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.awesome-marker-icon-cadetblue {
|
||||||
|
background-position: -324px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.awesome-marker-icon-white {
|
||||||
|
background-position: -574px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.awesome-marker-icon-gray {
|
||||||
|
background-position: -648px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.awesome-marker-icon-lightgray {
|
||||||
|
background-position: -612px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.awesome-marker-icon-black {
|
||||||
|
background-position: -682px 0;
|
||||||
|
}
|