개요

사진

샘플 코드

var population = [
               0,
     5381733, 
     1308265, 
     1279594, 
     2333899,
     1023119,
     1123891,
     1914039,
     2916976,
     1974255,
     1973115,
     7266534,
     6222666,
    13515271,
     9126214,
     2304264,
     1066328,
     1154008,
      786740,
      834930,
     2098804,
     2031903,
     3700305,
     7483128,
     1815865,
     1412916,
     2610353,
     8839469,
     5534800,
     1364316,
      963579,
      573441,
      694352,
     1921525,
     2843990,
     1404729,
      755733,
      976263,
     1385262,
      728276,
     5101556,
      832832,
     1377187,
     1786170,
     1166338,
     1104069,
     1648177,
     1433566
]

var prefecturesIndex = {
            "Tottoei": 31,
            "Nara": 29,
            "Shiga": 25,
            "Gifu": 21,
            "Toyama": 16,
            "Kyoto": 26,
            "Fukui": 18,
            "Yamanashi": 19,
            "Saitama": 11,
            "Gunma": 10,
            "Tochigi": 9,
            "Shizuoka": 22,
            "Nagano": 20,
            "Ibaragi": 8,
            "Chiba": 12,
            "Fukushima": 7,
            "Yamagata": 6,
            "Akita": 5,
            "Iwate": 3,
            "Aomori": 2,
            "Yamaguchi": 35,
            "Ehime": 38,
            "Shimane": 32,
            "Hiroshima": 34,
            "Okayama": 33,
            "Hyogo": 28,
            "Kagawa": 37,
            "Kochi": 39,
            "Tokushima": 36,
            "Osaka": 27,
            "Wakayama": 30,
            "Aichi": 23,
            "Mie": 24,
            "Ishikawa": 17,
            "Tokyo": 13,
            "Kanagawa": 14,
            "Nigata": 15,
            "Miyagi": 4,
            "Fukuoka": 40,
            "Oita": 44,
            "Saga": 41,
            "Kumamoto": 43,
            "Kagoshima": 46,
            "Miyazaki": 45,
            "Nagasaki": 42,
            "Okinawa": 47,
            "Hokkaido": 1
};

function getColor(d) {
    return d > 22.5 ? '#800000' : 
        d > 20  ? '#a50f15' : 
        d > 17.5    ? '#cb181d' : 
        d > 15  ? '#ef3b2c' : 
        d > 12.5    ? '#fb6a4a' :
        d > 10  ? '#fc9272' : 
        d > 7.5 ? '#fcbba1' : 
        d > 5   ? '#fee0d2' : 
        d > 2.5 ? '#fff5f0' : 
        d > 0   ? '#ffffff' : 'bule';
}

var map = L.map('map').setView([36.5, 139.5], 5);
var mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; ' + mapLink + ' Contributors',
  maxZoom: 18,
}).addTo(map);

var legend = L.control({
    position: 'bottomright'
});
var color_range = [22.5, 20, 17.5, 15, 12.5, 10, 7.5, 5, 2.5];
legend.onAdd = function(map) {
    var div = L.DomUtil.create('div', 'info legend');
    div.innerHTML = "<p>凡例</p>";
    for (var i = 0; i < color_range.length; i++)
    {
        div.innerHTML += '<i style="background:' + getColor(color_range[i]) + '"></i> ' 
    +   (color_range[i - 1] || color_range[i - 1] == 0 ? color_range[i] : "") 
    +   (color_range[i + 1] || color_range[i + 1] == 0 ? ' - ' + color_range[i + 1] : ' ?') 
    + '<br>';
    }
    return div;
};
legend.addTo(map);

L.geoJson(j2, {
  style: style
}).addTo(map);

function style(feature) {
    console.log(feature.properties.ObjName);    
    console.log(feature.properties.ObjName_1);
    return {
        fillColor: getColor(population[prefecturesIndex[feature.properties.ObjName_1]] / 250000),
        weight: 1,
        opacity: 1,
        color: '#666',
        fillOpacity: 0.7
    };
}

아티팩트