foliage 0.1.0

data/app/assets/stylesheets/leaflet/label.scss

@@ -0,0 +1,40 @@
+.leaflet-label {
+  color: black;
+  font-size: 14px;
+  display: block;
+  padding: 0.5*10px 10px;
+  position: absolute;
+  pointer-events: none;
+  white-space: nowrap;
+  z-index: 1;
+  text-shadow: 0 0 2px white;
+  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
+  &.leaflet-clickable {
+    cursor: pointer;
+    pointer-events: auto;
+  }
+
+  &:before, &:after {
+    border-top: 6px solid transparent;
+    border-bottom: 6px solid transparent;
+    content: none;
+    position: absolute;
+    top: 5px;
+  }
+
+  &:before {
+    border-right: 6px solid black;
+    border-right-color: inherit;
+    left: -10px;
+  }
+
+  &:after {
+    border-left: 6px solid black;
+    border-left-color: inherit;
+    right: -10px;
+  }
+}
+
+.leaflet-label-right:before, .leaflet-label-left:after {
+  content: "";
+}

data/app/assets/stylesheets/leaflet/tooltip.scss

@@ -0,0 +1,42 @@
+.leaflet-draw-tooltip-left {
+  background: rgb(54, 54, 54);
+  background: rgba(0, 0, 0, 0.5);
+  border: 1px solid transparent;
+  position: absolute;
+  visibility: hidden;
+  white-space: nowrap;
+  z-index: 6;
+  &:before {
+    border: none !important;
+  }
+  &:after {
+    border-left: 6px solid black;
+    border-left-color: rgba(0, 0, 0, 0.5);
+    border-top: 6px solid transparent;
+    border-bottom: 6px solid transparent;
+    content: "";
+    position: absolute;
+    top: 7px;
+    left: 100%;
+  }
+  span {
+    color: inherit;
+  }
+}
+
+.leaflet-draw-tooltip-measure {
+  &.perimeter {
+  }
+  &.area {
+    padding-left: 10px
+  }
+}
+
+.reactive-measure-control {
+  background: rgba(255,255,255, 0.6);
+  padding: 0 10px;
+
+  &.selection {
+    background: rgba(mix(white, red), 0.5);
+  }
+}

data/app/assets/stylesheets/mixins.scss

@@ -0,0 +1,131 @@
+@import "bootstrap/mixins";
+
+@mixin calc($property, $expression) {
+  #{$property}: -webkit-calc(#{$expression});
+  #{$property}: -khtml-calc(#{$expression});
+  #{$property}: -moz-calc(#{$expression});
+  #{$property}: -ms-calc(#{$expression});
+  #{$property}: -o-calc(#{$expression});
+  #{$property}: calc(#{$expression});
+}
+
+@mixin prefixed-property($property, $value) {
+  -webkit-#{$property}: $value;
+  -khtml-#{$property}: $value;
+  -moz-#{$property}: $value;
+  -ms-#{$property}: $value;
+  -o-#{$property}: $value;
+  #{$property}: $value;
+}
+
+@mixin border-radius($radius) {
+  @include prefixed-property(border-radius, $radius);
+}
+
+@mixin inline-block($alignment: middle) {
+  display: -moz-inline-stack;
+  display: inline-block;
+  @if $alignment and $alignment != none {
+    vertical-align: $alignment;
+  }
+}
+
+
+@mixin basic-icon($font-size: null) {
+  font-family: Agric;
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  -webkit-font-smoothing: antialiased;
+  width: auto;
+  height: auto;
+  background-image: none;
+  background-position: 0% 0%;
+  background-repeat: repeat;
+  margin-top: 0;
+  @if $font-size != null {
+    font-size: $font-size;
+  }
+}
+
+@mixin is-icon($font-size: round(1.2 * $fs-normal)) {
+  @include basic-icon($font-size);
+  vertical-align: middle;
+}
+
+@mixin use-icon($name) {
+  &::before { content: icon-character($name); }
+}
+
+
+@mixin define-right-property($base-name, $value) {
+  html & { #{$base-name}-right: $value; }
+  html[dir="ltr"] & { #{$base-name}-right: $value; }
+  html[dir="rtl"] & { #{$base-name}-left: $value; }
+}
+
+@mixin define-left-property($base-name, $value) {
+  html & { #{$base-name}-left: $value; }
+  html[dir="ltr"] & { #{$base-name}-left: $value; }
+  html[dir="rtl"] & { #{$base-name}-right: $value; }
+}
+
+@mixin margin-right($value) { @include define-right-property(margin, $value); }
+@mixin margin-left($value)  { @include define-left-property(margin, $value); }
+
+@mixin text-align($dir) {
+  @if $dir == right {
+    html & { text-align: right; }
+    html[dir="ltr"] & { text-align: right; }
+    html[dir="rtl"] & { text-align: left; }
+  } @else if $dir == left {
+    html & { text-align: left; }
+    html[dir="ltr"] & { text-align: left; }
+    html[dir="rtl"] & { text-align: right; }
+  } @else {
+    html &, html[dir="ltr"] &, html[dir="rtl"] & { text-align: $dir; }
+  }
+}
+
+@mixin float($dir) {
+  @if $dir == right {
+    html & { float: right; }
+    html[dir="ltr"] & { float: right; }
+    html[dir="rtl"] & { float: left; }
+  } @else if $dir == left {
+    html & { float: left; }
+    html[dir="ltr"] & { float: left; }
+    html[dir="rtl"] & { float: right; }
+  } @else {
+    html & html[dir="ltr"] &, html[dir="rtl"] & { float: $dir; }
+  }
+}
+
+@mixin menu-box {
+  background: $menu-background;
+  @include menu-shadow;
+  border: $menu-border;
+}
+
+@mixin menu-shadow {
+  @include box-shadow(0 0 ($fs-normal/4) rgba(0, 0, 0, 0.3));
+}
+
+@mixin menu {
+  @include menu-box;
+  &, li a {
+    font-weight: normal;
+    color: $text-color;
+  }
+}
+
+@mixin legend-label {
+  &, * {
+    color: $neutral-color;
+    text-transform: uppercase;
+    font-size: $fs-small;
+    line-height: $lh-small;
+    font-weight: bold;
+  }
+}
+

data/app/assets/stylesheets/reset.scss

@@ -0,0 +1,89 @@
+@import "compass/reset";
+
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input, textarea, select, options, button {
+  margin:  0;
+  padding: 0;
+  font-family: $base-font-family;
+  vertical-align: middle;
+  font-size: $fs-normal;
+  line-height: $lh-normal;
+  color: $text-color;
+}
+
+html {
+  &, * {
+    @include text-align(left);
+  }
+}
+
+mark {
+  background-color: $highlight-color;
+}
+
+td, th, a, p, input, textarea, select, div {
+  font-size: $fs-normal;
+}
+small, sup, sub {
+  font-size: $fs-small;
+}
+a:link,
+a:visited,
+a:focus {
+  &, * {
+    color: $active-link-color;
+    text-decoration: none;
+  }
+  .label {
+    color: $base-font-reversed-color;
+  }
+}
+
+/*
+  Other input types are: color, date, datetime, datetime-local, email, month,
+  number, range, search, tel, time, url, week, button, checkbox, color, date,
+  datetime, datetime-local, email, file, hidden, image, month, number, password,
+  radio, range, reset, search, submit, tel, text, time, url, week and file
+*/
+
+input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="image"], input[type="month"], input[type="number"], input[type="password"], input[type="range"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input[type="search"], textarea, select {
+  border: $menu-border;
+  padding: round($fs-normal * 0.2);
+  @include box-sizing(content-box);
+  @include border-radius($default-border-radius);
+  background: #FFF; //$desktop-background;
+  font-size: $fs-normal;
+  line-height: $lh-normal;
+  height: $lh-normal;
+  vertical-align: middle;
+  // @include box-shadow(0 2px round($fs-normal/2) rgba(black, 0.1) inset, 0 0 round($fs-normal*0.6) rgba(white, 0.6));
+  // @include box-shadow(0 2px round($fs-normal/2) rgba(black, 0.1) inset);
+  @include box-shadow(0 0 0 rgba(black, 0.1));
+  @include transition(box-shadow 0.2s, border-color 0.2s);
+  &:focus {
+    // background: #FFF;
+    border-color: $base-color;
+    @include box-shadow(0 0 round($fs-normal*0.6) rgba($base-color, 0.6));
+  }
+  &:disabled, &[disabled] {
+    background: #EEE;
+    color: #777;
+    cursor: not-allowed;
+  }
+}
+input[type="number"] {
+  @include text-align(right);
+}
+input[type="date"], input[type="datetime"] {
+  @include text-align(center);
+}
+input[type="date"] {
+  width: 12ex;
+}
+input[type="datetime"] {
+  width: 20ex;
+}
+
+
+textarea {
+  min-height: 3em;
+}

data/app/assets/stylesheets/variables.scss

@@ -0,0 +1,47 @@
+// Basic colors
+$white: #FFFFFF !default;
+$black: #000000 !default;
+
+// Font sizes
+$fs-ratio:   1.2 !default;
+$fs-small:     11px !default;
+$fs-normal:    13px !default;
+
+// Line heights
+$lh-ratio: 1.61803398875 !default;
+$lh-small:     round($lh-ratio * $fs-small);
+$lh-normal:    round($lh-ratio * $fs-normal);
+
+// Colors
+$base-color:         #688ED8 !default;
+$highlight-color:    #FFEE80 !default;
+$neutral-color:      mix($black, $white, 45%) !default;
+$active-color:       $base-color !default;
+$active-link-color:  darken($base-color, 10%) !default;
+$title-color:        darken($base-color, 40%) !default;
+$text-color:        darken($base-color, 40%) !default;
+$base-font-reversed-color: $white !default;
+
+$hover-transparency: 0.92 !default;
+$hover-mask: transparentize($neutral-color, $hover-transparency);
+
+$neutral-background: change-color($neutral-color, $lightness: 94%) !default;
+
+// Menu colors
+$menu-background: mix($neutral-background, $white, 55%) !default;
+$menu-border-color: mix($menu-background, $black, 90%);
+$menu-border-width: floor($fs-normal / 10);
+$menu-border: $menu-border-width solid $menu-border-color;
+
+
+$default-border-radius: round($fs-normal * 0.2);
+$default-gap: round($fs-normal * 0.55);
+
+// Map
+$map-button-size: round(2 * $fs-normal);
+
+// Font families
+$sans-font-family:   'Open Sans', 'Droid Sans', 'Liberation Sans', Helvetica, sans-serif !default;
+$base-font-family:   $sans-font-family !default;
+
+@import "bootstrap/variables"

data/app/helpers/foliage_helper.rb

@@ -0,0 +1,23 @@
+require 'foliage'
+
+module FoliageHelper
+  # Example of how to use in HAML view:
+  #
+  #   = foliage do |leaf|
+  #     - leaf.serie :data, <data>
+  #     - leaf.background "openstreetmap.hot"
+  #     - leaf.background "openweather.precipitations"
+  #     - leaf.background "openweather.heat"
+  #     - leaf.choropleth :<property>, :data
+  #     - leaf.control :fullscreen
+  #     - leaf.control :layer_selector
+  #     - leaf.control :background_selector
+  #     - leaf.control :search
+  #
+  def foliage(options = {}, html_options = {})
+    theme_colors = ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a']
+    leaf = Foliage::Leaf.new({ categories_colors: theme_colors }.merge(options))
+    yield leaf
+    content_tag(:div, nil, html_options.deep_merge(data: { leaf: leaf.to_json }))
+  end
+end

data/lib/foliage.rb

@@ -0,0 +1,9 @@
+require 'foliage/leaf'
+require 'foliage/version'
+
+module Foliage
+  autoload :VERSION,  'foliage/version'
+  autoload :Leaf,     'foliage/leaf'
+end
+
+require 'foliage/rails'

data/lib/foliage/leaf.rb

@@ -0,0 +1,235 @@
+module Foliage
+  class Leaf
+    def initialize(config = {})
+      @config = config
+      @categories_colors = @config.delete(:categories_colors)
+      @config[:backgrounds] = map_backgrounds
+    end
+
+    def map_backgrounds
+      [
+        {
+          name: 'OpenStreetMap Hot',
+          url: 'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
+          referenceName: 'open_street_map.hot',
+          attribution: '&copy; <a href=\'http://openstreetmap.org\'>OpenStreetMap</a> contributors, <a href=\'http://creativecommons.org/licenses/by-sa/2.0/\'>CC-BY-SA</a>, Tiles courtesy of <a href=\'http://hot.openstreetmap.org/\' target=\'_blank\'>Humanitarian OpenStreetMap Team</a>',
+          tms: false,
+          byDefault: false
+        },
+        {
+          name: 'Thunderforest Landscape',
+          url: 'https://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png',
+          referenceName: 'thunderforest.landscape',
+          attribution:
+           'Maps © <a href=\'http://www.thunderforest.com\'>Thunderforest</a>, Data © <a href=\'http://www.openstreetmap.org/copyright\'>OpenStreetMap contributors</a>',
+          subdomains: 'abc',
+          tms: false,
+          byDefault: false
+        },
+        {
+          name: 'Stamen Watercolor',
+          url: 'http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg',
+          referenceName: 'stamen.watercolor',
+          attribution: 'Map tiles by <a href=\'http://stamen.com\'>Stamen Design</a>, <a href=\'http://creativecommons.org/licenses/by/3.0\'>CC BY 3.0</a> &mdash; Map data &copy; <a href=\'http://openstreetmap.org\'>OpenStreetMap</a> contributors, <a href=\'http://creativecommons.org/licenses/by-sa/2.0/\'>CC-BY-SA</a>',
+          subdomains: 'abcd',
+          minZoom: 3,
+          maxZoom: 15,
+          tms: false,
+          byDefault: true
+        },
+        {
+          name: 'Esri World imagery',
+          url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+          referenceName: 'esri.world_imagery',
+          attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
+          tms: false,
+          byDefault: false
+        }
+      ]
+    end
+
+    def background(layer, options = {})
+      # allow to add custom background
+      options[:name] = layer.name if layer.name?
+      options[:url] = layer.url if layer.url?
+      options[:by_default] = layer.by_default if layer.by_default?
+      @config[:backgrounds] ||= []
+      @config[:backgrounds] << options
+    end
+
+    def overlay(name, provider_name)
+      @config[:overlays] ||= []
+      @config[:overlays] << { name: name, provider_name: provider_name }
+    end
+
+    # def layer(name, list = {})
+    #   @config[:layers] ||= []
+    #   @config[:layers] << {name: name, list: list}
+    # end
+
+    def layer(name, serie, options = {})
+      options[:label] = name.to_s.humanize unless options[:label]
+      name = name.to_s.parameterize.tr('-', '_') unless name.is_a?(Symbol)
+      @config[:layers] ||= []
+      @config[:layers] << { reference: name.to_s.camelcase(:lower) }.merge(options.merge(name: name, serie: serie.to_s.camelcase(:lower)))
+    end
+
+    def simple(name, serie, options = {})
+      layer(name, serie, options.merge(type: :simple))
+    end
+
+    def choropleth(name, serie, options = {})
+      layer(name, serie, options.merge(type: :choropleth))
+    end
+
+    def bubbles(name, serie, options = {})
+      layer(name, serie, options.merge(type: :bubbles))
+    end
+
+    def heatmap(name, serie, options = {})
+      layer(name, serie, options.merge(type: :heatmap))
+    end
+
+    def band(name, serie, options = {})
+      layer(name, serie, options.merge(type: :band))
+    end
+
+    def categories(name, serie, options = {})
+      layer(name, serie, { colors: @categories_colors }.merge(options.merge(type: :categories)))
+    end
+
+    def paths(name, serie, options = {})
+      layer(name, serie, { colors: @categories_colors }.merge(options.merge(type: :paths)))
+    end
+
+    def path(name, serie, options = {})
+      layer(name, serie, { colors: @categories_colors }.merge(options.merge(type: :path)))
+    end
+
+    def points(name, serie, options = {})
+      layer(name, serie, { colors: @categories_colors }.merge(options.merge(type: :points)))
+    end
+
+    def point_group(name, serie, options = {})
+      layer(name, serie, options.merge(type: :point_group))
+    end
+
+    # def multi_points(name, serie, options = {})
+    #   layer(name, serie, options.merge(type: :multi_points))
+    # end
+
+    # Add a serie of geo data
+    def serie(name, data)
+      raise StandardError, 'data must be an array. Got: ' + data.class.name unless data.is_a? Array
+      @config[:series] ||= {}.with_indifferent_access
+      @config[:series][name] = data.compact.collect do |item|
+        next unless item[:shape]
+        item
+          .merge(shape: item[:shape])
+          .merge(item[:popup] ? { popup: compile_leaf_popup(item[:popup], item) } : {})
+      end.compact
+    end
+
+    # Add a control
+    def control(name, options = true)
+      @config[:controls] ||= {}.with_indifferent_access
+      @config[:controls][name.to_s.camelize(:lower)] = options
+    end
+
+    def to_json
+      @config.deep_transform_keys do |key|
+        key.to_s.camelize(:lower)
+      end.to_json
+    end
+
+    protected
+
+    # Build a data structure for popup building
+    def compile_leaf_popup(object, item)
+      if object.is_a?(TrueClass)
+        hash = { header: item[:name] }
+        for key, value in item
+          unless [:header, :footer, :name, :shape].include?(key)
+            hash[key] = value.to_s
+          end
+        end
+        compile_leaf_popup(hash, item)
+      elsif object.is_a?(String)
+        return [{ type: :content, content: object }]
+      elsif object.is_a?(Hash)
+        blocks = []
+        if header = object[:header]
+          blocks << compile_block(header, :header, content: item[:name])
+        end
+        if content = object[:content]
+          if content.is_a? String
+            blocks << { type: :content, content: content }
+          elsif content.is_a? Array
+            for value in content
+              block = {}
+              if value.is_a? String
+                block[:content] = value
+              elsif value.is_a? Hash
+                block.update(value)
+              else
+                raise "Not implemented array block for #{object.class}"
+              end
+              if block[:label].is_a?(TrueClass)
+                block[:label] = "attributes.#{attribute}".t(default: ["labels.#{attribute}".to_sym, attribute.to_s.humanize])
+              elsif !block[:label]
+                block.delete(:label)
+              end
+              blocks << block.merge(type: :content)
+            end
+          elsif content.is_a? Hash
+            for attribute, value in content
+              block = {}
+              if value.is_a? String
+                block[:content] = value
+              elsif value.is_a? Hash
+                block.update(value)
+              elsif value.is_a? TrueClass
+                block[:value] = item[attribute].to_s
+                block[:label] = true
+              end
+              if block[:label].is_a?(TrueClass)
+                block[:label] = attribute.to_s.humanize
+              elsif !block[:label]
+                block.delete(:label)
+              end
+              blocks << block.merge(type: :content)
+            end
+          else
+            raise "Not implemented content for #{content.class}"
+          end
+        end
+        if footer = object[:footer]
+          blocks << compile_block(footer, :footer, content: item[:name])
+        end
+        return blocks
+      else
+        raise "Not implemented for #{object.class}"
+      end
+    end
+
+    def compile_block(*args)
+      options = args.extract_options!
+      info = args.shift
+      type = args.shift || options[:type]
+      if info.is_a? String
+        block = { type: type, content: info }
+      elsif info.is_a? TrueClass
+        if options[:content]
+          block = { type: type, content: options[:content] }
+        else
+          raise StandardError, 'Option :content must be given when info is a TrueClass'
+        end
+      elsif info.is_a? Hash
+        block = info.merge(type: type)
+      else
+        raise StandardError, "Not implemented #{type} for #{object.class}"
+      end
+      block
+    end
+  end
+end