humangeo/leaflet-dvf

create PieChartDataLayer use Geojson data

wojiaohanshuai opened this issue · 3 comments

i create a PieChartDataLayer use geojson, and i add it to the map, the PieChartDataLayer is invisiable, i guess the options arguments not correct and i don't know how to solve...

my geojson is

var data = {
    features: [{
        geometry: {
            coordinates: [116.38094329823173, 39.923614502102055],
            type: "MultiPoint"
        },
        properties: {
            code: 11011,
            gid: 1,
            name: "Beijing"
        },
        type: "Feature"
    }, ...],
    spatialReference: {...
    },
    type: "FeatureCollection"
}

my code is

var options = {

    recordsField: 'features',

    locationMode: L.LocationModes.GEOJSON,

    chartOptions: {

        "properties.code": {

            displayName: 'code',

            color: "hsl(240,100%,25%)",

            fillColor: "hsl(240,80%,55%)",

            maxValue: 80

        },
        "properties.gid": {

            displayName: "gid",

            color: "hsl(120,100%,25%)",

            fillColor: "hsl(120,80%,55%)",

            maxValue: 8000000

        }
    },
    layerOptions: {

        fillOpacity: 0.8,

        opacity: 1,

        weight: 1,

        radius: 10

    },
    tooltipOptions: {

        iconSize: new L.Point(50, 50),

        iconAnchor: new L.Point(-5, 50)

    }
};

var layer = new L.PieChartDataLayer(data, options);

map.addLayer(layer);

thx for your help

@wojiaohanshuai I'll check it out. Your example looks OK to me at first glance, but I'm going to throw together an example based on what you've provided to figure out what the issue is. Should have an answer shortly.

It looks like the issue is the actual GeoJSON. In the example above, the geometry type is MultiPoint, but the coordinates contains a single point rather than an array of points. If you change it to Point instead of MultiPoint, it works just fine.

@sfairgrieve thx for your help, i made a demo use geojson (Point) this morning, it works 👍 . http://jsfiddle.net/damncoder/e74crctg/2/