スタートページ＞ Javascript＞ 地図＞ 地図（その他)

日本白地図に府県別に色を塗る

都道府県境界の SVGデータにより、白地図が作成されています。
各府県の特性値を与え、ランク別に色を割当てて、白地図を塗りつぶします。
白地図データは、
　　ガビパン男と私「日本の白地図」 https://www.kabipan.com/geography/whitemap/mapping_guide.html（ＳVG形式,B4）
をコピーさせていただきました。

ソースコード

<!-- 白地図 SVG の記述 -->
<svg id="map" width="500" height="700"  class="svgcss" 
     viewBox="500 700 3500 2800" class="svgcss">

  <path id="沖縄県"
        fill="none" stroke="black" stroke-width="1"
        d="M 1052.00,3777.00
           C 1052.00,3777.00 1059.67,3783.00 1059.67,3783.33
             :
             346.67,4258.67 351.33,4248.67 351.33,4248.67 Z" />
     :
  <path id="北海道"
        fill="none" stroke="black" stroke-width="1"
        d="M 3710.00,548.00
           C 3712.67,557.33 3712.67,572.00 3720.00,580.67
             :
             3861.00,551.00 3852.00,547.50 3852.00,547.50 Z" />
</svg>

<script>
    // ======== 処理の部分
    var データ = [ ["北海道", 83], …, ["東京都",  2] };

    var svg = document.getElementById("map");    // 白地図に追加
    for (var i=0; i<データ.length; i++) {
        var 対象県 = document.getElementById(データ[i][0]);
        var 特性値 = データ[i][1]; // 特性値を色に変換
        if (特性値 >= 20) var 色 = "yellow";
　　　　　　：
        else 色 = "red";
        対象県.setAttribute("fill", 色); // 対象県に色を塗る
    }
</script>

府県特性分布図の作成

<script>～</script> の部分

function 実行() {
    // ======== 入力データ
    var 県名 = ["北海道", "青森県", …, "沖縄県"];
    var 特性値 = [];
    for (var i=0; i<47; i++) {
        特性値[i] = document.form1[i].value;
        if (特性値[i] != "") 特性値[i] = eval(特性値[i]);
    }
    var 特性閾値 = [];
    var 特性色 = [];
    for (var k=0; k<8; k++) {
        var w = document.form1[47+2*k].value;
        if (w == "") break;
        特性閾値[k] = eval(w);
        特性色[k] = document.form1[48+2*k].value;
    }
    var 特性閾個数 = 特性閾値.length;

    // ============ 色の決定
    var 色 = [];
    for (i=0; i<47; i++) {
        色[i] = "none";
        if (特性値[i] != "") {
            for (k=0; k<特性閾個数; k++) {
                if (特性値[i] >= 特性閾値[k]) {
                    色[i] = 特性色[k];
                    break;
                }
            }
        }
    }
    // ============ 地図の彩色
    var svg = document.getElementById("map");    // 白地図に追加
    for (i=0; i<47; i++) {
        var 対象県 = document.getElementById(県名[i]);
        対象県.setAttribute("fill", 色[i]); // 対象県に色を塗る
    }
}