Bar Chart + Esri Leaflet Map Interaction


  //create a cedar chart
  var chart = new Cedar({"type": "bar"});
  var style = {
      "height": 400,
      "width": 850,
      "marks": [{"properties": {
        "hover": {"fill": {"value": "#c15000"}},
        "update": {"fill": {"value": "#0079c1"}}}}]};

  chart.override = style;

  //create the dataset w/ mappings
  var dataset = {
    "url":"https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "query": {
        "groupByFieldsForStatistics": "Zip",
        "outStatistics": [{
          "statisticType": "sum", 
          "onStatisticField": "Number_of", 
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },  
    "mappings":{
      "x": {"field":"Zip","label":"ZIP Code"},
      "y": {"field":"Number_of_SUM","label":"Total Students"}
    }
  };

  //assign to the chart
  chart.dataset = dataset;

  //show the chart
  chart.show({
    elementId: "#chart"
  });


  var map = L.map('map').setView([38.9,-77], 11);

  var geojsonMarkerOptions = {
    radius: 8,
    fillColor: style.marks[0].properties.update.fill.value,
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
  };

  L.esri.basemapLayer('Streets').addTo(map);
  var featureLayer = L.esri.featureLayer({
    url: 'https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0',
    pointToLayer: function (geojson, latlng) {
      return L.circleMarker(latlng, geojsonMarkerOptions);
    },
  });

  featureLayer.addTo(map);


  //CHART EVENTS
  chart.on('mouseover', onChartHover);

  function onChartHover(e,d) {

    //get selected value for attribute in chart marker
    var selected = d[dataset.mappings.x.field];

    var hoverStyle = {
      radius: 8,
      fillColor: style.marks[0].properties.hover.fill.value,
      color: "#000",
      weight: 1,
      opacity: 1,
      fillOpacity: 0.8
    };

    featureLayer.setStyle(function(point) {
      if (point.properties[dataset.mappings.x.field] === selected ) {
        return hoverStyle;
      } else {
        return geojsonMarkerOptions;
      }
    });

  }