socmap_adf 0.0.1

data/lib/assets/javascripts/socmap_adf/modules/cluster/templates/chart.jst.eco

@@ -0,0 +1,6 @@
+<div class="chart_wrap">
+  <div class="chart"></div>
+  <% if @reports_count: %>
+  <div class="label"><strong><%= @reports_count.text %></strong><br/><%= @objectName %></div>
+  <% end %>
+</div>

data/lib/assets/javascripts/socmap_adf/modules/cluster/views/chart.js.coffee

@@ -0,0 +1,107 @@
+class ADF.Cluster.Views.Chart extends ADF.MVC.Views.Base
+  
+  template: JST['socmap_adf/modules/cluster/templates/chart']
+  position: null
+  labelWidht: 15
+  labelHeight: 15
+  bigSize: 160
+  mediumSize: 120
+  smallSize: 80
+  upLimit: 50
+  currentSize: 120
+  objectName: ""
+  events:
+    "mouseenter .chart_wrap": "onChartMouseOver"
+    "mouseleave .chart_wrap": "onChartMouseOut"
+
+  initialize: () -> 
+    @data = @options.data
+    @reports_count = @options.sum
+    @setSize()
+    @objectName = @options.objectName if @options.objectName
+    $.elycharts.templates['pie_basic_1'] =
+      type: "pie"
+      defaultSeries:
+        plotProps:
+          stroke: "white"
+          "stroke-width": 1
+          opacity: 0.9
+
+  setSize: () ->
+    count = if @reports_count then @reports_count.text else 1
+    if count >= @upLimit
+      @currentSize = @bigSize
+    else
+      @currentSize = @mediumSize
+  
+  onChartMouseOver: () =>
+    @$(".chart").animate({opacity: 1}, 100)
+    @$el.css({"z-index":10})
+    
+  onChartMouseOut: () =>
+    @$(".chart").animate({opacity: 0.7}, 100)
+    @$el.css({"z-index":5})
+    
+  render: () =>
+    $(@el).html(@template({reports_count: @reports_count, objectName: @objectName }))
+    @$(".chart_wrap").css
+      position:"relative"
+    @$(".chart").css
+      height: @currentSize
+      width: @currentSize
+      opacity: 0.7
+    lTop = (@currentSize / 2) - (@labelHeight / 2)
+    lLeft = (@currentSize / 2) - (@labelWidht / 2)
+    @$(".label").css
+      position: "absolute"
+      top: lTop
+      left: lLeft
+      background: "#000000"
+      opacity: 0.8
+      color:"#ffffff"
+      "text-align": "center"
+      "border-radius": 4
+      "-moz-border-radius": 4
+      "-webkit-border-radius": 4
+      "font-size" : "13px"
+      "line-height": "13px"
+      "padding": "4px 6px"
+    
+    @hide()
+    @onRenderCompleted()
+    @
+    
+  onRenderCompleted: () ->
+    @draw() if @position?
+    @$(".chart").chart
+      template: "pie_basic_1",
+      values:
+        serie1: @data
+      defaultSeries:
+        values: [
+          {plotProps: { fill: "#ff6700" }},
+          {plotProps: { fill: "#0094ff" }},
+          {plotProps: { fill: "#529900" }}
+        ]
+    
+  setPosition: (position, draw = false) ->
+    @position = position
+    @draw() if draw
+    
+  draw: () ->
+    if @position
+      @$el.css
+        cursor:"pointer"
+        top: @position.y - (@currentSize / 2)
+        left: @position.x - (@currentSize / 2)
+        position:"absolute"
+    @show()
+    
+  hide: () ->
+    @$el.hide()
+    
+  show: () ->
+    @$el.show() if @position
+
+  
+  

data/lib/assets/javascripts/socmap_adf/modules/cluster/views/chart_icon.js.coffee

@@ -0,0 +1,106 @@
+class ADF.Cluster.Views.ChartIcon extends google.maps.OverlayView
+
+  constructor : (cluster, styles, opt_padding) ->
+    @styles_ = styles
+    @padding_ = opt_padding or 0
+    @cluster_ = cluster
+    @center_ = null
+    @map_ = cluster.getMap()
+    @chartView = null
+    @sums_ = null
+    @visible_ = false
+    @setMap @map_
+
+  triggerClusterClick : ->
+    @clickHandler(@cluster_) if @clickHandler
+    markerClusterer = @cluster_.getMarkerClusterer()
+    google.maps.event.trigger markerClusterer, "clusterclick", @cluster_
+    if markerClusterer.isZoomOnClick() and markerClusterer.getMaxZoomOnClick() > @map_.getZoom()
+      @map_.fitBounds @cluster_.getBounds()
+      if @map_.getZoom() > markerClusterer.getMaxZoomOnClick()
+        @map_.setZoom(markerClusterer.getMaxZoomOnClick())
+    
+  onAdd : ->
+    return unless @isNeedToCluster()
+    @chartView = new ADF.Cluster.Views.Chart({ data: @sumData(), sum: @sums_ })
+
+    if @visible_
+      pos = @getPosFromLatLng_(@center_)
+      @chartView.setPosition( pos )
+      
+    panes = @getPanes()
+    panes.overlayMouseTarget.appendChild @chartView.render().el
+
+    google.maps.event.addDomListener @chartView.el, "click", =>
+      @triggerClusterClick()
+      
+  draw : ->
+    if @visible_
+      pos = @getPosFromLatLng_(@center_)
+      @chartView.setPosition(pos, true) if @chartView
+
+  hide : ->
+    if @chartView?
+      @chartView.hide()
+      @visible_ = false
+
+  show : ->
+    if @chartView?
+      pos = @getPosFromLatLng_(@center_)
+      @chartView.setPosition(pos, true)
+      @chartView.show()
+    else if @cluster_.getMarkers() && @cluster_.getMarkers().length == 1
+      marker = @cluster_.getMarkers()[0]
+      marker.setMap @map_
+      marker.getMarker().setMap @map_ if marker.getMarker()
+    @visible_ = true
+
+  showOrShowMarker : ->
+              
+  sumData : ->
+    dataHash = { 1 : 0, 2 : 0, 3 : 0 }
+    markers = @cluster_.getMarkers()
+    for marker in markers
+      dataHash[ marker.getData() ] = if dataHash[ marker.getData() ]? then dataHash[ marker.getData() ] + 1 else 1
+    @result = []
+    $.each dataHash, (data, i) =>
+      @result.push i
+    @result
+    
+  getPosFromLatLng_ : (latlng) ->
+    pos = @getProjection().fromLatLngToDivPixel(latlng)
+    pos.x -= parseInt(@width_ / 2, 10) if pos
+    pos.y -= parseInt(@height_ / 2, 10) if pos
+    pos
+
+  isNeedToCluster: () ->
+    markers = @cluster_.getMarkers()
+    if markers.length > 1 then true else false
+    
+  remove : ->
+    @setMap null
+
+  onRemove : ->
+    if @chartView and @chartView.$el.parent()
+      @hide()
+      @chartView.$el.remove()
+      @chartView = null
+
+  setSums : (sums) ->
+    @sums_ = sums
+    @text_ = sums.text
+    @index_ = sums.index
+    @useStyle()
+
+  useStyle : ->
+    index = Math.max(0, @sums_.index - 1)
+    index = Math.min(@styles_.length - 1, index)
+    style = @styles_[index]
+    @height_ = style["height"]
+    @width_ = style["width"] 
+
+  setCenter : (center) ->
+    @center_ = center
+
+  addClickHandler: (handler) ->
+    @clickHandler = handler

data/lib/assets/javascripts/socmap_adf/modules/cluster/views/cluster.js.coffee

@@ -0,0 +1,127 @@
+class ADF.Cluster.Views.Cluster 
+
+  constructor : (markerClusterer) ->
+    @markerClusterer_ = markerClusterer
+    @map_ = markerClusterer.getMap()
+    @gridSize_ = markerClusterer.getGridSize()
+    @minClusterSize_ = markerClusterer.getMinClusterSize()
+    @averageCenter_ = markerClusterer.isAverageCenter()
+    @center_ = null
+    @markers_ = []
+    @bounds_ = null
+    if @markerClusterer_.getClusterShowType() == "chart"
+      @clusterIcon_ = new ADF.Cluster.Views.ChartIcon(this, markerClusterer.getStyles(), markerClusterer.getGridSize())
+    else
+      @clusterIcon_ = new ADF.Cluster.Views.DefaultIcon(this, markerClusterer.getStyles(), markerClusterer.getGridSize())
+
+  isMarkerAlreadyAdded : (marker) ->
+    if @markers_.indexOf
+      return @markers_.indexOf(marker) isnt -1
+    else
+      i = 0
+      m = undefined
+
+      while m = @markers_[i]
+        return true  if m is marker
+        i++
+    false
+
+  addMarker : (marker) ->
+    return false  if @isMarkerAlreadyAdded(marker)
+    unless @center_
+      @center_ = marker.getPosition()
+      @calculateBounds_()
+    else
+      if @averageCenter_
+        l = @markers_.length + 1
+        lat = (@center_.lat() * (l - 1) + marker.getPosition().lat()) / l
+        lng = (@center_.lng() * (l - 1) + marker.getPosition().lng()) / l
+        @center_ = new google.maps.LatLng(lat, lng)
+        @calculateBounds_()
+    marker.isAdded = true
+    @markers_.push marker
+    len = @markers_.length
+    
+    # Min cluster size not reached so show the marker.
+    marker.setMap @map_  if len < @minClusterSize_ and marker.getMap() isnt @map_
+    marker.getMarker().setMap @map_  if len < @minClusterSize_ and marker.getMarker() and marker.getMarker().getMap() isnt @map_
+    if len is @minClusterSize_
+      
+      # Hide the markers that were showing.
+      i = 0
+
+      while i < len
+        @markers_[i].setMap null
+        @markers_[i].getMarker().setMap null if @markers_[i].getMarker()
+        i++
+    marker.setMap null  if len >= @minClusterSize_
+    marker.getMarker().setMap null  if len >= @minClusterSize_ and marker.getMarker()
+    @updateIcon()
+    true
+
+  getMarkerClusterer : ->
+    @markerClusterer_
+
+  getBounds : ->
+    bounds = new google.maps.LatLngBounds(@center_, @center_)
+    markers = @getMarkers()
+    i = 0
+    marker = undefined
+
+    while marker = markers[i]
+      bounds.extend marker.getPosition()
+      i++
+    bounds
+
+  remove : ->
+    @clusterIcon_.remove()
+    @markers_.length = 0
+    delete @markers_
+
+  getClusterIcon: () ->
+    @clusterIcon_
+
+  getSize : ->
+    @markers_.length
+
+  getMarkers : ->
+    @markers_
+
+  getCenter : ->
+    @center_
+
+  calculateBounds_ : ->
+    bounds = new google.maps.LatLngBounds(@center_, @center_)
+    @bounds_ = @markerClusterer_.getExtendedBounds(bounds)
+
+  isMarkerInClusterBounds : (marker) ->
+    @bounds_.contains marker.getPosition()
+
+  getMap : ->
+    @map_
+
+  updateIcon : ->
+    zoom = @map_.getZoom()
+    mz = @markerClusterer_.getMaxZoom()
+    if mz and zoom > mz
+      
+      # The zoom is greater than our max zoom so show all the markers in cluster.
+      i = 0
+      marker = undefined
+
+      while marker = @markers_[i]
+        marker.setMap @map_
+        marker.getMarker().setMap @map_ if marker.getMarker()
+        i++
+      return
+
+    if @markers_.length < @minClusterSize_
+      
+      # Min cluster size not yet reached.
+      @clusterIcon_.hide()
+      return
+    numStyles = @markerClusterer_.getStyles().length
+    sums = @markerClusterer_.getCalculator()(@markers_, numStyles)
+    @clusterIcon_.setCenter @center_
+    @clusterIcon_.setSums sums
+    @clusterIcon_.show()

data/lib/assets/javascripts/socmap_adf/modules/cluster/views/default_icon.js.coffee

@@ -0,0 +1,170 @@
+class ADF.Cluster.Views.DefaultIcon extends google.maps.OverlayView
+
+  constructor : (cluster, styles, opt_padding) ->
+    @styles_ = styles
+    @padding_ = opt_padding or 0
+    @cluster_ = cluster
+    @center_ = null
+    @map_ = cluster.getMap()
+    @div_ = null
+    @sums_ = null
+    @visible_ = false
+    @setMap @map_
+
+  ###
+  Triggers the clusterclick event and zoom's if the option is set.
+  ###
+  triggerClusterClick : ->
+    markerClusterer = @cluster_.getMarkerClusterer()
+    
+    # Trigger the clusterclick event.
+    google.maps.event.trigger markerClusterer, "clusterclick", @cluster_
+    
+    # Zoom into the cluster.
+    @map_.fitBounds @cluster_.getBounds()  if markerClusterer.isZoomOnClick()
+
+
+  ###
+  Adding the cluster icon to the dom.
+  @ignore
+  ###
+  onAdd : ->
+    @div_ = document.createElement("DIV")
+    if @visible_
+      pos = @getPosFromLatLng_(@center_)
+      @div_.style.cssText = @createCss(pos)
+      @div_.innerHTML = @sums_.text
+    panes = @getPanes()
+    panes.overlayMouseTarget.appendChild @div_
+    that = this
+    google.maps.event.addDomListener @div_, "click", ->
+      that.triggerClusterClick()
+
+  ###
+  Returns the position to place the div dending on the latlng.
+
+  @param {google.maps.LatLng} latlng The position in latlng.
+  @return {google.maps.Point} The position in pixels.
+  @private
+  ###
+  getPosFromLatLng_ : (latlng) ->
+    pos = @getProjection().fromLatLngToDivPixel(latlng)
+    pos.x -= parseInt(@width_ / 2, 10)
+    pos.y -= parseInt(@height_ / 2, 10)
+    pos
+
+
+  ###
+  Draw the icon.
+  @ignore
+  ###
+  draw : ->
+    if @visible_
+      pos = @getPosFromLatLng_(@center_)
+      @div_.style.top = pos.y + "px"
+      @div_.style.left = pos.x + "px"
+
+
+  ###
+  Hide the icon.
+  ###
+  hide : ->
+    @div_.style.display = "none"  if @div_
+    @visible_ = false
+
+
+  ###
+  Position and show the icon.
+  ###
+  show : ->
+    if @div_
+      pos = @getPosFromLatLng_(@center_)
+      @div_.style.cssText = @createCss(pos)
+      @div_.style.display = ""
+    @visible_ = true
+
+
+  ###
+  Remove the icon from the map
+  ###
+  remove : ->
+    @setMap null
+
+
+  ###
+  Implementation of the onRemove interface.
+  @ignore
+  ###
+  onRemove : ->
+    if @div_ and @div_.parentNode
+      @hide()
+      @div_.parentNode.removeChild @div_
+      @div_ = null
+
+
+  ###
+  Set the sums of the icon.
+
+  @param {Object} sums The sums containing:
+  'text': (string) The text to display in the icon.
+  'index': (number) The style index of the icon.
+  ###
+  setSums : (sums) ->
+    @sums_ = sums
+    @text_ = sums.text
+    @index_ = sums.index
+    @div_.innerHTML = sums.text  if @div_
+    @useStyle()
+
+
+  ###
+  Sets the icon to the the styles.
+  ###
+  useStyle : ->
+    index = Math.max(0, @sums_.index - 1)
+    index = Math.min(@styles_.length - 1, index)
+    style = @styles_[index]
+    @url_ = style["url"]
+    @height_ = style["height"]
+    @width_ = style["width"]
+    @textColor_ = style["textColor"]
+    @anchor_ = style["anchor"]
+    @textSize_ = style["textSize"]
+    @backgroundPosition_ = style["backgroundPosition"]
+
+
+  ###
+  Sets the center of the icon.
+
+  @param {google.maps.LatLng} center The latlng to set as the center.
+  ###
+  setCenter : (center) ->
+    @center_ = center
+
+
+  ###
+  Create the css text based on the position of the icon.
+
+  @param {google.maps.Point} pos The position.
+  @return {string} The css style text.
+  ###
+  createCss : (pos) ->
+    style = []
+    style.push "background-image:url(" + @url_ + ");"
+    backgroundPosition = (if @backgroundPosition_ then @backgroundPosition_ else "0 0")
+    style.push "background-position:" + backgroundPosition + ";"
+    if typeof @anchor_ is "object"
+      if typeof @anchor_[0] is "number" and @anchor_[0] > 0 and @anchor_[0] < @height_
+        style.push "height:" + (@height_ - @anchor_[0]) + "px; padding-top:" + @anchor_[0] + "px;"
+      else
+        style.push "height:" + @height_ + "px; line-height:" + @height_ + "px;"
+      if typeof @anchor_[1] is "number" and @anchor_[1] > 0 and @anchor_[1] < @width_
+        style.push "width:" + (@width_ - @anchor_[1]) + "px; padding-left:" + @anchor_[1] + "px;"
+      else
+        style.push "width:" + @width_ + "px; text-align:center;"
+    else
+      style.push "height:" + @height_ + "px; line-height:" + @height_ + "px; width:" + @width_ + "px; text-align:center;"
+    txtColor = (if @textColor_ then @textColor_ else "black")
+    txtSize = (if @textSize_ then @textSize_ else 11)
+    style.push "cursor:pointer; top:" + pos.y + "px; left:" + pos.x + "px; color:" + txtColor + "; position:absolute; font-size:" + txtSize + "px; font-family:Arial,sans-serif; font-weight:bold"
+    style.join ""

data/lib/assets/javascripts/socmap_adf/modules/cluster/views/main.js.coffee

@@ -0,0 +1,10 @@
+class ADF.Cluster.Views.Main extends ADF.MVC.Views.Base
+   
+  initialize: ->
+    _.bindAll(this, 'render')
+    
+  render: ->
+    @onRenderComplete()   
+    return @
+
+  onRenderComplete: () =>