foliage 0.1.0

data/app/assets/javascripts/foliage/choropleth.js.coffee

@@ -0,0 +1,51 @@
+# Add sprockets directives below:
+#= require foliage/gradient
+
+class Foliage.Choropleth extends Foliage.Gradient
+
+  constructor: (@layer, @data, options = {}) ->
+    super @data, @layer.reference, options
+
+    if this.valid()
+
+      # Compute colors
+      start = new Foliage.Color(options.startColor)
+      stop  = new Foliage.Color(options.stopColor)
+      for grade in @grades
+        level = grade.index / (@levelNumber - 1.0)
+        grade.fillColor = Foliage.Color.toString
+          red:   start.red   + (Math.round(stop.red   - start.red)   * level)
+          green: start.green + (Math.round(stop.green - start.green) * level)
+          blue:  start.blue  + (Math.round(stop.blue  - start.blue)  * level)
+      console.log "Colors computed"
+    else
+      console.warn "Invalid choropleth for #{@layer.reference}"
+      console.warn @data
+
+  # Build layer as wanted
+  buildLayerGroup: (widget, globalStyle = {}) ->
+    group = []
+    for zone in @data
+      zoneStyle =
+        fillColor: this.gradeFor(zone[@layer.reference]).fillColor
+      zoneLayer = new L.GeoJSON(zone.shape, $.extend(true, {}, globalStyle, zoneStyle))
+      widget._bindPopup(zoneLayer, zone)
+      group.push(zoneLayer)
+    group
+
+  # Build HTML legend for given choropleth computed layer
+  buildLegend: () ->
+    html  = "<div class='leaflet-legend-item' id='legend-#{@layer.name}'>"
+    html += "<h3>#{@layer.label}"+ if @layer.unit then " (#{@layer.unit})" else "" +"</h3>"
+    html += "<div class='leaflet-legend-body leaflet-choropleth-scale'>"
+    html += "<span class='min-value'>#{@grades[0].minLabel}</span>"
+    html += "<span class='max-value'>#{@grades[@levelNumber - 1].maxLabel}</span>"
+    html += "<span class='leaflet-choropleth-grades'>"
+    for grade in @grades
+      html += "<i class='leaflet-choropleth-grade' style='width: #{100 / @levelNumber}%; background-color: #{grade.fillColor}' title='#{grade.minLabel} ~ #{grade.maxLabel}'></i>"
+    html += "</span>"
+    html += "</div>"
+    html += "</div>"
+    return html
+
+Foliage.registerLayerType "choropleth", Foliage.Choropleth

data/app/assets/javascripts/foliage/color.js.coffee

@@ -0,0 +1,39 @@
+# Add sprockets directives below:
+
+class Foliage.Color
+  constructor: (color) ->
+    @red   = parseInt(color.slice(1, 3), 16)
+    @green = parseInt(color.slice(3, 5), 16)
+    @blue  = parseInt(color.slice(5, 7), 16)
+
+  toString: () ->
+    Foliage.Color.toString(this)
+
+
+Foliage.Color.toString = (color) ->
+  return "##{Foliage.Color.toHexCanal(color.red)}#{Foliage.Color.toHexCanal(color.green)}#{Foliage.Color.toHexCanal(color.blue)}"
+
+Foliage.Color.toHexCanal = (integer) ->
+  hex = Math.round(integer).toString(16)
+  if integer <= 0
+    return "00"
+  else if integer < 16
+    return "0" + hex
+  else if integer > 255
+    return "FF"
+  else
+    return hex
+
+Foliage.Color.parse = (color) ->
+  value =
+    red:   parseInt(color.slice(1, 3), 16)
+    green: parseInt(color.slice(3, 5), 16)
+    blue:  parseInt(color.slice(5, 7), 16)
+  return value
+
+Foliage.Color.random = () ->
+  value =
+    red:   16 * Math.round(16*Math.random())
+    green: 16 * Math.round(16*Math.random())
+    blue:  16 * Math.round(16*Math.random())
+  return Foliage.Color.toString value

data/app/assets/javascripts/foliage/gradient.js.coffee

@@ -0,0 +1,72 @@
+# Add sprockets directives below:
+#
+
+# Computes grades for a given
+class Foliage.Gradient
+
+  constructor: (data, property, options = {}) ->
+    options.round       ?= 5
+    options.levelNumber ?= 7
+
+    # Default values
+    @round       ?= options.round
+    @levelNumber ?= options.levelNumber
+
+    # Find min and max values
+    @grades   = []
+    if data[0]
+      @maxValue = data[0][property]
+      @minValue = data[0][property]
+      for zone in data
+        if zone[property] > @maxValue
+          @maxValue = zone[property]
+        if zone[property] < @minValue
+          @minValue = zone[property]
+      if @maxValue == @minValue
+        console.warn "Force max value to be different of min value"
+        @maxValue += 1
+    else
+      console.warn "Sets default min and max without data"
+      @maxValue = 10
+      @minValue = 0
+    console.log "Exact min (#{@minValue}) and max (#{@maxValue}) computed"
+
+    # Simplify values
+    maxMagnitude = Math.magnitude(@maxValue)
+    minMagnitude = Math.magnitude(@minValue)
+    ref = minMagnitude
+    if maxMagnitude.power > minMagnitude.power
+      ref = maxMagnitude
+    @power = ref.power
+    mag = ref.magnitude
+    mag = mag / 10 if mag >= 100
+    @maxValue = Math.ceil2(@maxValue,  mag * @round)
+    @minValue = Math.floor2(@minValue, mag * @round)
+    @length = @maxValue - @minValue
+
+    if @length > 0
+      if @levelNumber > @length and @length > 2
+        @levelNumber = @length
+      console.log "Min (#{@minValue}) and max (#{@maxValue}) computed"
+
+      # Compute grades
+      for g in [1..@levelNumber]
+        grade =
+          index: (g-1)
+          min: @minValue + (g-1) * @length / @levelNumber
+          max: @minValue +  g    * @length / @levelNumber
+        grade.minLabel = Math.humanize(grade.min, @power)
+        grade.maxLabel = Math.humanize(grade.max, @power)
+        @grades.push grade
+      console.log "Grades computed"
+
+  # Returns the grade for the given value
+  gradeFor: (value) ->
+    level = Math.round(@levelNumber * (value - @minValue) / @length)
+    level = @levelNumber - 1 if level >= @levelNumber
+    level = 0 if level < 0 or isNaN(level)
+    return @grades[level]
+
+  # Returns if the gradient is valid
+  valid: () ->
+    @length > 0

data/app/assets/javascripts/foliage/heatmap.js.coffee

@@ -0,0 +1,49 @@
+class Foliage.Heatmap
+
+  constructor: (@layer, @data, options = {}) ->
+    @items = []
+    property = @layer.reference
+    console.log property
+    console.log @data
+    for zone in @data
+      coords =  zone.shape.coordinates
+      @items.push [coords[1], coords[0], ]
+
+    if this.valid()
+      console.log "Heatmap computed"
+    else
+      console.warn "Invalid heatmap points"
+
+  # Build layer as wanted
+  buildLayerGroup: (widget, globalStyle = {}) ->
+    group = []
+    overlay = new L.TileLayer.WebGLHeatMap
+      size: 12
+      opacity: 0.8
+      autoresize: true
+    overlay.setData(@items)
+
+    group.push(overlay)
+    group
+
+  # Build HTML legend for given categories computed layer
+  buildLegend: () ->
+    html  = "<div class='leaflet-legend-item' id='legend-#{@layer.name}'>"
+    html += "<h3>#{@layer.label}</h3>"
+    html += "<div class='leaflet-legend-body leaflet-categories-scale'>"
+    # html += "<span class='leaflet-categories-items'>"
+    # for name, item of @items
+    #   html += "<span class='leaflet-categories-item'>"
+    #   html += "<i class='leaflet-categories-sample' style='background-color: #{item.fillColor};'></i>"
+    #   html += " #{item.name}"
+    #   html += "</span>"
+    # html += "</span>"
+    html += "</div>"
+    html += "</div>"
+    return html
+
+  # Check if categories are valid
+  valid: () ->
+    @items.length > 0
+
+Foliage.registerLayerType "heatmap", Foliage.Heatmap

data/app/assets/javascripts/foliage/leaf.js.coffee

@@ -0,0 +1,422 @@
+# Add sprockets directives below:
+#= require core_ext
+#= require foliage/color
+#= require_self
+#= require foliage/band
+#= require foliage/bubbles
+#= require foliage/categories
+#= require foliage/choropleth
+#= require foliage/heatmap
+#= require foliage/path
+#= require foliage/paths
+#= require foliage/points
+#= require foliage/point_group
+#= require foliage/simple
+
+((F, $) ->
+  "use strict"
+
+  F.layer = (layer, data, options) ->
+    @layerTypes ?= {}
+    if type = @layerTypes[layer.type]
+      return new type(layer, data, options)
+    else
+      console.warn "Invalid layer type: #{layer.type}"
+      return null
+
+  F.registerLayerType = (name, klass) ->
+    @layerTypes ?= {}
+    @layerTypes[name] = klass
+
+  # Generated colors in ruby
+  # $ p = Proc.new{[37 * rand(7), 255].min.to_i.to_s(16).rjust(2, "0")}
+  # $ (1..300).collect{|x| "##{p[]}#{p[]}#{p[]}"}.uniq
+  F.colors = ["#00de00", "#6f006f", "#4ade94", "#004ab9", "#de6f4a", "#b9b925", "#00b994", "#25946f", "#de00b9", "#94006f", "#de6f94", "#252594", "#dede94", "#4a2594", "#940000", "#deb9de", "#00b9b9", "#00de94", "#25254a", "#6fde6f", "#4a0094", "#256f4a", "#6f4a25", "#4a4a00", "#b9006f", "#4a6f25", "#6f946f", "#009425", "#6f4ade", "#2525de", "#b9946f", "#b9b994", "#b9de94", "#de256f", "#b900b9", "#4a4a6f", "#4a2525", "#006fde", "#940025", "#250094", "#b900de", "#4ab9b9", "#00004a", "#6f6fde", "#256fde", "#b92594", "#6f944a", "#6f6f25", "#4ab9de", "#de2525", "#2525b9", "#944a94", "#b94a94", "#946f94", "#b94a6f", "#000094", "#4a6f6f", "#006f00", "#946f4a", "#00256f", "#6f4a6f", "#de6fb9", "#6fdeb9", "#de6f00", "#94b94a", "#94b994", "#6f6fb9", "#b925de", "#de2594", "#dede25", "#6f4a94", "#946f6f", "#de25de", "#b92525", "#6fde94", "#254a25", "#4adeb9", "#00deb9", "#b9b9b9", "#6f4a4a", "#256f25", "#25deb9", "#6f25de", "#94b925", "#b9254a", "#4ade25", "#4a006f", "#25006f", "#94de00", "#6fb925", "#259425", "#6f9425", "#944a00", "#25b9b9", "#25de4a", "#00254a", "#94254a", "#4a6f94", "#002500", "#6fdede", "#deb925", "#b9b9de", "#4a4a94", "#004a4a", "#25b994", "#6f6f00", "#b92500", "#b925b9", "#940094", "#2594de", "#4ade4a", "#949400", "#256f6f", "#de00de", "#6fde25", "#4a6fde", "#4a4ab9", "#deb96f", "#6f0025", "#00b925", "#0000b9", "#254a94", "#4a25b9", "#b9004a", "#b9de00", "#6f254a", "#6f2500", "#94b96f", "#25de00", "#b99425", "#b90025", "#0094b9", "#4ab925", "#4ab96f", "#6fde00", "#b9b96f", "#94b9b9", "#de4a6f", "#4a2500", "#de0000", "#4a4a4a", "#259494", "#9400b9", "#b9deb9", "#254a00", "#0000de", "#dede4a", "#94dede", "#94de25", "#4a9494", "#4a94de", "#6fb9b9", "#dede00", "#b9256f", "#de9494", "#009494", "#006f4a", "#94944a", "#4ab900", "#6f6f4a", "#b99494", "#6f004a", "#4a256f", "#00b9de", "#b99400", "#00b96f", "#deb9b9", "#4a6f00", "#000025", "#00006f", "#00de4a", "#b96f94", "#6fb9de", "#946fde", "#deb900", "#004ade", "#254ab9", "#25de6f", "#94deb9", "#b994de", "#004a25", "#94256f", "#250025", "#6f6f6f", "#4a944a", "#4a25de", "#00b94a", "#4a4a25", "#9400de", "#94004a", "#4a94b9", "#94de94", "#6f256f", "#6fb900", "#b9944a", "#de94de", "#944a25", "#6f2594"]
+
+  $.widget "ui.leaf",
+    options:
+      box:
+        height: 400
+        width: null
+      backgrounds: {}
+      overlays: {}
+      controls: {}
+      series: {}
+      controlDefaults:
+        fullscreen:
+          position: 'topleft'
+          title: "Fullscreen"
+        geocoder:
+          collapsed: true,
+          position: 'topright',
+          text: 'Locate',
+          bounds: null,
+          email: null
+        layerSelector:
+          collapsed: true,
+          position: 'topright',
+          autoZIndex: true
+        scale:
+          position: 'bottomleft'
+          maxWidth: 200
+          metric: true
+          imperial: false
+          updateWhenIdle: false
+        zoom:
+          position: 'topleft'
+          zoomInText: ''
+          zoomInTitle: "Zoom in"
+          zoomOutText: ''
+          zoomOutTitle: "Zoom out"
+      layers: {}
+      layerDefaults:
+        band:
+          stroke: true
+          color: "#333333"
+          weight: 1
+          opacity: 1
+          fill: true
+          fillColor: "blue"
+          fillOpacity: 1
+          round: 5
+          startColor: '#FFFFFF'
+          stopColor: '#910000'
+          levelNumber: 7
+        bubbles:
+          stroke: true
+          color: "#333333"
+          weight: 1
+          opacity: 1
+          fill: true
+          fillColor: "orange"
+          fillOpacity: 1
+        categories:
+          stroke: true
+          color: "#333333"
+          weight: 1
+          opacity: 1
+          fill: true
+          fillOpacity: 1
+        choropleth:
+          stroke: true
+          color: "#333333"
+          weight: 1
+          opacity: 1
+          fill: true
+          fillColor: "blue"
+          fillOpacity: 1
+          round: 5
+          startColor: '#FFFFFF'
+          stopColor: '#910000'
+          levelNumber: 7
+        simple:
+          stroke: true
+          color: "#333333"
+          weight: 1
+          opacity: 1
+          fill: true
+          fillColor: "green"
+          fillOpacity: 1
+        paths:
+          stroke: true
+          color: "#333333"
+          weight: 2
+          opacity: 0.2
+          fill: true
+          fillOpacity: 1
+        path:
+          stroke: true
+          color: "#333333"
+          weight: 3
+          opacity: 1
+          fill: true
+          fillOpacity: 1
+          fillColor: "#333333"
+          radius: 3
+        points:
+          stroke: true
+          color: "#333333"
+          weight: 2
+          opacity: 1
+          fill: true
+          fillOpacity: 1
+          radius: 5
+        point_group:
+          stroke: true
+          color: "#333333"
+          weight: 2
+          opacity: 1
+          fill: true
+          fillOpacity: 1
+          radius: 5
+      map:
+        maxZoom: 25
+        minZoom:2
+        scrollWheelZoom: false
+        zoomControl: false
+        attributionControl: true
+        setDefaultBackground: false
+        dragging: true
+        touchZoom: true
+        doubleClickZoom: true
+        boxZoom: true
+        tap: true
+      view:
+        center:[]
+        zoom : 13
+      colors: F.colors
+
+    _create: ->
+      $.extend(true, @options, @element.data("leaf"))
+      @mapElement = $("<div>", class: "map").insertAfter(@element)
+      @map = L.map(@mapElement[0], @options.map)
+      @layers = []
+
+      if @options.map.setDefaultBackground
+        opts = {}
+        opts['attribution'] = @options.backgrounds.attribution if @options.backgrounds.attribution?
+        opts['minZoom'] = @options.backgrounds.minZoom if @options.backgrounds.minZoom?
+        opts['maxZoom'] = @options.backgrounds.maxZoom if @options.backgrounds.maxZoom?
+        opts['subdomains'] = @options.backgrounds.subdomains if @options.backgrounds.subdomains?
+        opts['tms'] = true if @options.backgrounds.tms
+
+        backgroundLayer = L.tileLayer(@options.backgrounds.url, opts)
+        backgroundLayer.addTo @map
+      @ghostLabelCluster = L.ghostLabelCluster(type: 'number', innerClassName: 'leaflet-ghost-label-collapsed')
+      @ghostLabelCluster.addTo @map
+
+      @layersScheduler = L.layersScheduler()
+      @layersScheduler.addTo @map
+
+      this._resize()
+      this._refreshView()
+      this._refreshControls()
+
+    _destroy: ->
+      @mapElement.remove()
+
+    zoom: (zoom) ->
+      return @map.getZoom() unless zoom?
+      @options.view.zoom = zoom
+      this._refreshZoom()
+
+    height: (height) ->
+      return @options.box.height unless height?
+      @options.view.box.height = height
+      this._resize()
+
+    rebuild: ->
+      this._destroy()
+      this._create()
+
+    layrs: ->
+      return @layers
+
+    mappo: ->
+      return @map
+
+    mappoElement: ->
+      return @mapElement
+
+    _resize: ->
+      if @options.box?
+        if @options.box.height?
+          @mapElement.height @options.box.height
+        if @options.box.width?
+          @mapElement.width @options.box.width
+        this._trigger "resize"
+
+    # Retuns data from a serie found with the given name
+    _getSerieData: (name) ->
+      if @options.series[name]?
+        return @options.series[name]
+      else
+        console.error "Cannot find serie #{name}"
+        alert "Cannot find serie #{name}"
+
+    # Displays all given controls
+    _refreshControls: ->
+      console.log "Refresh controls...", @options.controls
+      unless @options and @options.controls?
+        console.log "No controls..."
+        return false
+      widget = this
+      for name, options of @options.controls
+        console.log "Add control #{name}..."
+        if options isnt false
+          functionName = "_add#{name.camelize()}Control"
+          if $.isFunction widget[functionName]
+            options = {} if options is true
+            widget[functionName].call(widget, options)
+          else
+            console.log "Unknown control: #{name}"
+
+    _addFullscreenControl: (options) ->
+      options = $.extend true, {}, @options.controlDefaults.fullscreen, options
+      control = new L.Control.FullScreen options
+      @map.addControl control
+      @map.on "enterFullscreen", (e) =>
+        @map.scrollWheelZoom.enable();
+
+      @map.on "exitFullscreen", (e) =>
+        @map.scrollWheelZoom.disable();
+
+
+    _addGeocoderControl: (options) ->
+      options = $.extend true, {}, @options.controlDefaults.geocoder, options
+      control = new L.Control.OSMGeocoder options
+      @map.addControl control
+
+    _addLayerSelectorControl: (options) ->
+      baseLayers = {}
+      overlays = {}
+
+      if @options.backgrounds.length > 0
+        for layer, index in @options.backgrounds
+          opts = {}
+          opts['attribution'] = layer.attribution if layer.attribution?
+          opts['minZoom'] = layer.minZoom if layer.minZoom?
+          opts['maxZoom'] = layer.maxZoom if layer.maxZoom?
+          opts['subdomains'] = layer.subdomains if layer.subdomains?
+          opts['tms'] = true if layer.tms
+
+          backgroundLayer = L.tileLayer(layer.url, opts)
+          baseLayers[layer.name] = backgroundLayer
+          @map.addLayer(backgroundLayer) if layer.byDefault
+      else
+        # no backgrounds, set defaults
+        backgrounds = ['OpenStreetMap.HOT',"OpenStreetMap.Mapnik", "Thunderforest.Landscape", "Esri.WorldImagery"]
+
+        baseLayers = {}
+        for layer, index in backgrounds
+          backgroundLayer = L.tileLayer.provider(layer)
+          baseLayers[layer] = backgroundLayer
+          @map.addLayer(backgroundLayer) if index == 0
+
+
+      for layer in @options.overlays
+        overlayLayer = L.tileLayer.provider(layer.provider_name)
+        overlays[layer.name] = overlayLayer
+
+      legendControl = new L.control(position: "bottomright")
+      legendControl.onAdd = (map) ->
+        L.DomUtil.create('div', 'leaflet-legend-control')
+      @map.addControl legendControl
+
+      $('.leaflet-legend-control').on 'click', () ->
+        $(this).find('#legend-activity').toggleClass('minified')
+
+
+      for layer in @options.layers
+        if console.group isnt undefined
+          console.group "Add layer #{layer.name} (#{layer.type})..."
+        else
+          console.log "Add layer #{layer.name}..."
+        options = {} if options is true
+
+        data = this._getSerieData(layer.serie)
+        options = $.extend true, {}, @options.layerDefaults[layer.type], layer, parent: this
+        renderedLayer = F.layer(layer, data, options)
+        if renderedLayer and renderedLayer.valid()
+          # Build layer group
+          layerGroup = renderedLayer.buildLayerGroup(this, options)
+          console.log("#{layer.name} layer rendered", layerGroup)
+          # Add layer overlay
+          overlayLayer = L.layerGroup(layerGroup)
+          overlayLayer.name = layer.name
+          @layers.push layer
+          layer.overlay = overlays[layer.label] = overlayLayer
+          @map.addLayer(overlayLayer)
+          @layersScheduler.insert overlayLayer._leaflet_id
+          console.log("#{layer.name} layer added")
+          try
+            group = new L.featureGroup(layerGroup)
+            bounds = group.getBounds()
+            @map.fitBounds(bounds)
+            if bounds.getNorthEast().equals bounds.getSouthWest()
+              @map.setZoom 18
+          # Add legend
+          legend = legendControl.getContainer()
+          legend.innerHTML += renderedLayer.buildLegend()
+        else
+          console.warn "Cannot add layer #{layer.type}"
+
+        console.groupEnd() if console.groupEnd isnt undefined
+
+      @map.on "overlayadd", (event) =>
+        @layersScheduler.schedule event.layer
+        console.log "Add legend control..."
+        legend = $(legendControl.getContainer())
+        legend.children("#legend-#{event.layer.name}").show()
+        legend.children(".first").removeClass("first")
+        legend.children(":visible:first").addClass("first")
+        legend.removeClass("empty")
+        return
+
+      @map.on "overlayremove", (event) ->
+        console.log "Remove legend control..."
+        legend = $(legendControl.getContainer())
+        legend.children("#legend-#{event.layer.name}").hide()
+        legend.children(".first").removeClass("first")
+        legend.children(":visible:first").addClass("first")
+        legend.addClass("empty") if legend.children(":visible").length <= 0
+        return
+
+      control = new L.Control.Layers(baseLayers, overlays, @options.controlDefaults.layerSelector)
+      @map.addControl control
+
+    _addScaleControl: (options) ->
+      options = $.extend true, {}, @options.controlDefaults.scale, options
+      control = new L.Control.Scale options
+      @map.addControl control
+
+    _addZoomControl: (options) ->
+      options = $.extend true, {}, @options.controlDefaults.zoom, options
+      control = new L.Control.Zoom options
+      @map.addControl control
+
+
+    # Build a popup from given parameters. For now it only uses popup attribute of
+    # a zone. After it will use a global template for all zone by default which can be
+    # overriden with a local popup
+    _bindPopup: (layer, zone) ->
+      return unless zone.popup?
+      popup = ""
+      for block in zone.popup
+        popup += "<div class='popup-#{block.type}'>"
+        if block.label?
+          popup += "<span class='popup-block-label'>#{block.label}</span>"
+        if block.content?
+          popup += "<span class='popup-block-content'>#{block.content}</span>"
+        else if block.value?
+          popup += "<span class='popup-block-value'>#{block.value}</span>"
+        popup += "</div>"
+      layer.bindPopup(popup)
+      return layer
+
+
+    _refreshView: (view) ->
+      this._setDefaultView()
+      if @options.view.center.length > 0
+        @map.setView(@options.view.center, @options.view.zoom)
+
+    _setDefaultView: ->
+      @map.fitWorld()
+      @map.setZoom 6
+
+    _refreshZoom: ->
+      if @options.view.zoom?
+        @map.setZoom(@options.view.zoom)
+
+  $.loadLeaves = ->
+    $("*[data-leaf]").each ->
+      $(this).leaf()
+    return
+
+  # Needed to easily write setTimeout in CoffeeScript
+  delay = (time, method) -> setTimeout method, time
+
+  $(document).ready $.loadLeaves
+  $(document).on "page:load cocoon:after-insert cell:load", $.loadFoliages
+
+) Foliage, jQuery