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));

            minWidth: 400,
            maxWidth: 400
    legendOptions: {
        title: '2008 Results'

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


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)


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?

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.