dc.leaflet.js

dc.leafletChart = function(_chart) {
  _chart = dc.baseChart(_chart);

  var _map;

  var _mapOptions=false;
  var _defaultCenter=false;
  var _defaultZoom=false;


    var _tiles = function (map) {
        L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.{ext}', {
	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://www.openstreetmap.org/copyright">OpenStreetMap</a>',
	subdomains: 'abcd',
	minZoom: 0,
	maxZoom: 18,
	ext: 'png'
        }).addTo(map);
    }
/*
  var _tiles=function(map) {
    L.tileLayer('http://a.tiles.mapbox.com/v3/unhcr.jg02lf55/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
  }


  var _tiles=function(map) {
    L.tileLayer('http://otile2.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
  }
*/
  _chart.doRender = function() {
    _map = L.map(_chart.root().node(),_mapOptions);
    if (_defaultCenter && _defaultZoom)
      _map.setView(_chart.toLocArray(_defaultCenter), _defaultZoom);

    _chart.tiles()(_map);

    _chart._postRender();

    return _chart.doRedraw();
  }

  _chart._postRender = function() {
    //abstract
  }

  _chart.mapOptions = function(_) {
    if (!arguments.length) return _mapOptions;
    _mapOptions = _;
    return _chart;
  }

  _chart.center = function(_) {
    if (!arguments.length) return _defaultCenter;
    _defaultCenter = _;
    return _chart;
  }

  _chart.zoom = function(_) {
    if (!arguments.length) return _defaultZoom;
    _defaultZoom = _;
    return _chart;
  }

  _chart.tiles = function(_) {
    if (!arguments.length) return _tiles;
    _tiles = _;
    return _chart;
  }

  _chart.map = function() {
    return _map;
  }

  _chart.toLocArray = function(value) {
    if (typeof value == "string") {
      // expects '11.111,1.111'
      value = value.split(",");
    }
    // else expects [11.111,1.111]
    return value;
  }

  return _chart;
}


/***************************
          Markers
***************************/


dc.leafletMarkerChart = function(parent, chartGroup) {
  var _chart = dc.leafletChart({});

  var _renderPopup = true;
  var _cluster = false; // requires leaflet.markerCluster
  var _clusterOptions=false;
  var _rebuildMarkers = false;
  var _brushOn = true;
  var _filterByArea = false;

  var _filter;
  var _innerFilter=false;
  var _zooming=false;
  var _layerGroup = false;
  var _markerList = [];
  var _currentGroups=false;

  _chart.renderTitle(true);

  var _location = function(d) {
    return _chart.keyAccessor()(d);
  }

  var _marker = function(d,map) {
    var marker = new L.Marker(_chart.toLocArray(_chart.locationAccessor()(d)),{
        title: _chart.renderTitle() ? _chart.title()(d) : '',
        alt: _chart.renderTitle() ? _chart.title()(d) : '',
          icon: _icon(),
          clickable: _chart.renderPopup() || (_chart.brushOn() && !_filterByArea),
        draggable: false
        });
    return marker;
  }

  var _icon = function(d,map) {
    return new L.Icon.Default();
  }

  var _popup = function(d,marker) {
    return _chart.title()(d);
  }

  _chart._postRender = function() {
    if (_chart.brushOn()) {
      if (_filterByArea)
        _chart.filterHandler(doFilterByArea);

      _chart.map().on('zoomend moveend', zoomFilter, this );
      if (!_filterByArea)
        _chart.map().on('click', zoomFilter, this );
      _chart.map().on('zoomstart', zoomStart, this);
    }

    if (_cluster)
      _layerGroup = new L.MarkerClusterGroup(_clusterOptions?_clusterOptions:null);
    else
      _layerGroup = new L.LayerGroup();
    _chart.map().addLayer(_layerGroup);
  }

  _chart.doRedraw = function() {
    var groups = _chart.computeOrderedGroups().filter(function (d) {
      return _chart.valueAccessor()(d) !== 0;
    });
    if (_currentGroups && _currentGroups.toString()==groups.toString())
      return;
    _currentGroups=groups;

    if (_rebuildMarkers) {
      _markerList=[];
    }
    _layerGroup.clearLayers();

    var addList=[];
    groups.forEach(function(v,i) {
      var key = _chart.keyAccessor()(v);
      var marker = null;
      if (!_rebuildMarkers && key in _markerList)
        marker = _markerList[key];
      else
        marker = createmarker(v,key);
      if (!_chart.cluster())
        _layerGroup.addLayer(marker);
      else
        addList.push(marker);
    });

    if (_chart.cluster() && addList.length>0)
      _layerGroup.addLayers(addList);
  }

  _chart.locationAccessor = function(_) {
    if (!arguments.length) return _location;
    _location= _;
    return _chart;
  }

  _chart.marker = function(_) {
    if (!arguments.length) return _marker;
    _marker= _;
    return _chart;
  }

  _chart.icon = function(_) {
    if (!arguments.length) return _icon;
    _icon= _;
    return _chart;
  }

  _chart.popup = function(_) {
    if (!arguments.length) return _popup;
    _popup= _;
    return _chart;
  }

  _chart.renderPopup = function(_) {
    if (!arguments.length) return _renderPopup;
    _renderPopup = _;
    return _chart;
  }


  _chart.cluster = function(_) {
    if (!arguments.length) return _cluster;
    _cluster = _;
    return _chart;
  }

  _chart.clusterOptions = function(_) {
    if (!arguments.length) return _clusterOptions;
    _clusterOptions = _;
    return _chart;
  }

  _chart.rebuildMarkers = function(_) {
    if (!arguments.length) return _rebuildMarkers;
    _rebuildMarkers = _;
    return _chart;
  }

  _chart.brushOn = function(_) {
    if (!arguments.length) return _brushOn;
    _brushOn = _;
    return _chart;
  }

  _chart.filterByArea = function(_) {
    if (!arguments.length) return _filterByArea;
    _filterByArea = _;
    return _chart;
  }

  _chart.markerGroup = function() {
    return _layerGroup;
  }

  var createmarker = function(v,k) {
    var marker = _marker(v);
    marker.key = k;
    if (_chart.renderPopup())
      marker.bindPopup(_chart.popup()(v,marker));
    if (_chart.brushOn() && !_filterByArea)
      marker.on("click",selectFilter);
    _markerList[k]=marker;
    return marker;
  }

  var zoomStart = function(e) {
    _zooming=true;
  }

  var zoomFilter = function(e) {
      if (e.type=="moveend" && (_zooming || e.hard))
          return;
    _zooming=false;

    if (_filterByArea) {
      var filter;
      if (_chart.map().getCenter().equals(_chart.center()) && _chart.map().getZoom()==_chart.zoom())
            filter = null;
        else
            filter = _chart.map().getBounds();
      dc.events.trigger(function () {
        _chart.filter(null);
        if (filter) {
          _innerFilter=true;
          _chart.filter(filter);
          _innerFilter=false;
        }
        dc.redrawAll(_chart.chartGroup());
      });
    } else if (_chart.filter() && (e.type=="click" ||
        (_chart.filter() in _markerList &&
        !_chart.map().getBounds().contains(_markerList[_chart.filter()].getLatLng())))) {
      dc.events.trigger(function () {
          _chart.filter(null);
          if (_renderPopup)
            _chart.map().closePopup();
          dc.redrawAll(_chart.chartGroup());
      });
    }
  }

  var doFilterByArea = function(dimension, filters) {
    _chart.dimension().filter(null);
      if (filters && filters.length>0) {
          _chart.dimension().filterFunction(function(d) {
        if (!(d in _markerList))
          return false;
        var locO = _markerList[d].getLatLng();
        return locO && filters[0].contains(locO);
          });
      if (!_innerFilter && _chart.map().getBounds().toString!=filters[0].toString())
        _chart.map().fitBounds(filters[0])
    }
  }

  var selectFilter = function(e) {
    if (!e.target) return;
    var filter = e.target.key;
    dc.events.trigger(function () {
      _chart.filter(filter);
      dc.redrawAll(_chart.chartGroup());
    });
  }

  return _chart.anchor(parent, chartGroup);
}


/***************************
          choropleth
***************************/


dc.leafletChoroplethChart = function(parent, chartGroup) {
  var _chart = dc.colorChart(dc.leafletChart({}));

  var _geojsonLayer = false;
  var _dataMap = [];

  var _geojson = false;
  var _renderPopup = true;
  var _brushOn = true;
  var _featureOptions = {
    'fillColor':'black',
    'color':'gray',
    'opacity':0.4,
    'fillOpacity':0.6,
    'weight':1
  };

  var _featureKey = function(feature) {
    return feature.key;
  }

  var _featureStyle = function(feature) {
    var options = _chart.featureOptions();
    if (options instanceof Function)
      options=options(feature);
    options = JSON.parse(JSON.stringify(options));
    var v = _dataMap[_chart.featureKeyAccessor()(feature)];
    if (v && v.d) {
      options.fillColor=_chart.getColor(v.d,v.i);
      if (_chart.filters().indexOf(v.d.key)!=-1) {
        options.opacity=0.8;
        options.fillOpacity=1;
      }
    }
    return options;
  };

  var _popup = function(d,feature) {
    return _chart.title()(d);
  }

  _chart._postRender = function() {
    _geojsonLayer=L.geoJson(_chart.geojson(),{
          style: _chart.featureStyle(),
      onEachFeature: processFeatures
    });
    _chart.map().addLayer(_geojsonLayer);
  }

  _chart.doRedraw = function() {
    _geojsonLayer.clearLayers();
    _dataMap=[];
    _chart.computeOrderedGroups().forEach(function (d,i) {
      _dataMap[_chart.keyAccessor()(d)] = {'d':d,'i':i};
    });
    _geojsonLayer.addData(_chart.geojson());
  }

  _chart.geojson = function(_) {
    if (!arguments.length) return _geojson;
    _geojson = _;
    return _chart;
  }

  _chart.featureOptions = function(_) {
    if (!arguments.length) return _featureOptions;
    _featureOptions = _;
    return _chart;
  }

  _chart.featureKeyAccessor = function(_) {
    if (!arguments.length) return _featureKey;
    _featureKey= _;
    return _chart;
  }

  _chart.featureStyle = function(_) {
    if (!arguments.length) return _featureStyle;
    _featureStyle= _;
    return _chart;
  }

  _chart.popup = function(_) {
    if (!arguments.length) return _popup;
    _popup= _;
    return _chart;
  }

  _chart.renderPopup = function(_) {
    if (!arguments.length) return _renderPopup;
    _renderPopup = _;
    return _chart;
  }

  _chart.brushOn = function(_) {
    if (!arguments.length) return _brushOn;
    _brushOn = _;
    return _chart;
  }

  var processFeatures = function (feature, layer) {
    var v = _dataMap[_chart.featureKeyAccessor()(feature)];
    if (v && v.d) {
      layer.key=v.d.key;
      if (_chart.renderPopup())
              layer.bindPopup(_chart.popup()(v.d,feature));
      if (_chart.brushOn())
        layer.on("click",selectFilter);
    }
  }

  var selectFilter = function(e) {
    if (!e.target) return;
    var filter = e.target.key;
    dc.events.trigger(function () {
      _chart.filter(filter);
      dc.redrawAll(_chart.chartGroup());
    });
  }

  return _chart.anchor(parent, chartGroup);
}