leaflet.js openstreetmapの地図にc3.jsでsvg円グラフを描画

jsfiddle

参考

http://www.nofuture.tv/diary/20141010.html#p03
http://jsfiddle.net/rmACm/2/

利用モジュール

jquery, leaflet.js, d3.js, c3.js

html

<div id="map"></div>

css

#map {

    height: 400px;
}

.svg-marker div{
    -webkit-transform: translateX(-50%) translateY(-35px);
    width: 150px;
    height: 150px;
}

js

$(function () {
    var map = L.map('map').setView([34.839378, 134.694097], 15);
    var tileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
        maxZoom: 19
    });
    tileLayer.addTo(map);

    tileLayer.on("load", function () {
        var myIcon = L.divIcon({
            className: 'svg-marker',
            html: '<div id="chart"></div>',
            iconSize: null,
            iconAnchor: null
        });



        L.marker([34.839378, 134.694097], {
            icon: myIcon
        }).addTo(map);
var chart = c3.generate({
    bindto: '#chart',
    data: {
        // iris data from R
        columns: [
            ['data1', 30],
            ['data2', 120],
        ],
        type : 'pie',
        onclick: function (d, i) { console.log("onclick", d, i); },
        onmouseover: function (d, i) { console.log("onmouseover", d, i); },
        onmouseout: function (d, i) { console.log("onmouseout", d, i); }
    }
});

    });
});