14 - GeoJSONのスタイリング

学習内容: GeoJSONデータのプロパティに基づいて動的にスタイルを設定します。

ポイント:

人口密度（架空データ）

10,000人/km² 以上
8,000 - 10,000人/km²
6,000 - 8,000人/km²
4,000 - 6,000人/km²
2,000 - 4,000人/km²
2,000人/km² 未満 
// 人口密度に基づいて色を返す関数
function getColor(density) {
    return density > 10000 ? '#800026' :
           density > 8000  ? '#BD0026' :
           density > 6000  ? '#E31A1C' :
           density > 4000  ? '#FC4E2A' :
           density > 2000  ? '#FD8D3C' :
                             '#FED976';
}

// スタイル関数
function style(feature) {
    return {
        fillColor: getColor(feature.properties.density),
        weight: 2,
        opacity: 1,
        color: 'white',
        fillOpacity: 0.7
    };
}

L.geoJSON(data, { style: style }).addTo(map);