Markers with no clustering and selection by area

forked from renauld94's block: Markers with no clustering and selection by area

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>DC.js + Leaflet</title>

<div id="holder">
  <div id="demo2">
    <h2>Markers with no clustering and selection by area</h2>
    <i>Renewable energy plants in Bulgaria in 2012</i>
    <div class="map"></div>
    <div class="pie"></div>
</div>

/*     Markers      */

d3.tsv("demo1.tsv").then(function(data) {
      drawMarkerSelect(data);
  });

function drawMarkerSelect(data) {
      var xf = crossfilter(data);
      var groupname = "marker-select";
      var facilities = xf.dimension(function(d) { return d.geo; });
      var facilitiesGroup = facilities.group().reduceCount();

var marker = dc_leaflet.markerChart("#demo2 .map",groupname)
                .dimension(facilities)
                .group(facilitiesGroup)
                .width(600)
                .height(400)
                .center([42.69,25.42])
                .zoom(7)
                .renderPopup(false)
                .filterByArea(true);

var types = xf.dimension(function(d) { return d.type; });
      var typesGroup = types.group().reduceCount();

var pie = dc.pieChart("#demo2 .pie",groupname)
          .dimension(types)
          .group(typesGroup)
          .width(200)
          .height(200)
          .renderLabel(true)
          .renderTitle(true)
          .ordering(function (p) {
              return -p.value;
          });

dc.renderAll(groupname);
      return {marker: marker, pie: pie};
  }
</script>

</body>
</html>

https://unpkg.com/d3@5/dist/d3.js

https://unpkg.com/crossfilter2@1.4/crossfilter.js

https://unpkg.com/dc@3/dc.js

https://unpkg.com/leaflet

https://unpkg.com/dc.leaflet@0.4.0/dc.leaflet.js

https://unpkg.com/leaflet-markercluster