humangeo / leaflet-dvf

Leaflet Data Visualization Framework
MIT License
689 stars 152 forks source link

create PieChartDataLayer use Geojson data #120

Open wojiaohanshuai opened 7 years ago

wojiaohanshuai commented 7 years ago

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

sfairgrieve commented 7 years ago

@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.

sfairgrieve commented 7 years ago

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.

wojiaohanshuai commented 7 years ago

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