Adding PieChart Layer through DVF in a Leaflet map

Question

I am using Leaflet DVF (https://github.com/humangeo/leaflet-dvf/wiki/) to add several chart layers over a map.

I succesfuly added a Choropleth map but now I am stuck with the Charts Layers. This is the code:

// This is the code for the Choropleth

    var options = {
        locationMode: L.LocationModes.LOOKUP,
        recordsField: null,
        codeField: 'CODIGO',
        locationLookup: zipData, // A GeoJSON FeatureCollection that will be used to lookup boundaries/location
        locationTextField: 'ESTADO',
        includeBoundary: true, // Whether or not to include a background boundary so people know what boundary each marker is associated with
        layerOptions: {
            fillOpacity: 0.9,
            opacity: 1,
            weight: 1
        },
        displayOptions: {
            POPU: {
                displayName: 'Population',
                fillColor: new L.HSLSaturationFunction(new L.Point(90000, 0), new L.Point(635100, 1), {
                    outputHue: 240
                }),
                color: new L.HSLSaturationFunction(new L.Point(90000, 0), new L.Point(635100, 1 ), {
                    outputHue: 240,
                    outputLuminosity: '35%'
                })
            }
        }
    };

    var nlPopLayerChoropleth = new L.ChoroplethDataLayer(NLpopdens, options);
    layerControl.addOverlay(nlPopLayerChoropleth, 'Choropleth');

// This is the code for the Charts Layer

    var electionOptions = {
    recordsField: 'features',
    locationMode: L.LocationModes.LOOKUP,
    codeField: 'CODIGO',
    chartOptions: {
        'PRI': {
            displayName: 'Opcion 1',
            color: 'hsl(0,100%,25%) ',
            fillColor: 'hsl(0,80%,75%)',
            maxValue: 8000000
        },
        'PAN': {
            displayName: 'Opcion 2',
            color: 'hsl(240,100%,25%)',
            fillColor: 'hsl(240,80%,75%)',
            maxValue: 8000000
        }
    },
    layerOptions: {
        fillOpacity: 0.8,
        opacity: 1,
        weight: 1,
        radius: 10,
        barThickness: 5
    },
    tooltipOptions: {
        iconSize: new L.Point(80,60),
        iconAnchor: new L.Point(-5,60)
    },
    onEachRecord: function (layer,record) {
        $html = $(L.HTMLUtils.buildTable(record));

        layer.bindPopup($html.wrap('<div/>').parent().html(),{
            minWidth: 400,
            maxWidth: 400
        });
    },
    legendOptions: {
        title: '2008 Results'
    }
};

var electionChartLayer2008 = new L.PieChartDataLayer(zipData,electionOptions);

map.addLayer(electionChartLayer2008);

The GEOJSON I am using is like this:

var zipData = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"CODIGO":"MX02","ESTADO":"Baja California","PRI":23,"PAN":12},"geometry":{"type":"MultiPolygon","coordinates":[[[[-113.13971710205078,29.017776489257812],[-113.24057006835938,29.06777572631836]...

I also have another script where the property "POPU" is located:

var NLpopdens =[ { "CODIGO": "MX01", "ESTADO": "Aguascalientes", "POPU": "634000", "AREA": "162.18", "Density": "3346.0192378838", "Partidos": {"PRI":400,"PAN":200},

},

...

(for each state)

Answer 1

Manuel, based on your zipData variable above, it looks like the keys in chartOptions need to be: 'properties.PRI' and 'properties.PAN'. Also 'codeField' probably needs to read 'properties.CODIGO'. Basically each reference in those options (aside from 'recordsField') needs to reference properties at the record level. In this case, each record is a GeoJSON feature from the zipData FeatureCollection. Does that make sense?