白地図レイヤに塗り分けしてGISもどき

白地図レイヤに塗り分けしてGISもどきを作ってみるサンプルプログラミング

「統計でみる都道府県のすがた 2018」より、各都道府県の平均気温をプロットしています。

  var myMap = new Y.Map("map");

  // 白地図レイヤーを作成
  var bml = new Y.BlankMapLayer();
  bml.setStyle({
    "label":{
      "default": "off" // ラベル(都道府県名を非表示)
    },
    "area": {
      "01":"FFFFFF", // 北海道    9.3
      "02":"FFE2E2", // 青森県   11.0
      "03":"FFDEDE", // 岩手県   11.2
      "04":"FFB7B7", // 宮城県   13.5
      "05":"FFC8C8", // 秋田県   12.5
      "06":"FFC4C4", // 山形県   12.7
      "07":"FFABAB", // 福島県   14.2
      "08":"FFA0A0", // 茨城県   14.8
      "09":"FFA0A0", // 栃木県   14.8
      "10":"FF9292", // 群馬県   15.6
      "11":"FF8D8D", // 埼玉県   15.9
      "12":"FF7E7E", // 千葉県   16.8
      "13":"FF8585", // 東京都   16.4
      "14":"FF7C7C", // 神奈川県 16.9
      "15":"FFA5A5", // 新潟県   14.5
      "16":"FF9999", // 富山県   15.2
      "17":"FF9191", // 石川県   15.7
      "18":"FF9292", // 福井県   15.6
      "19":"FF9191", // 山梨県   15.7
      "20":"FFBEBE", // 長野県   13.1
      "21":"FF7C7C", // 岐阜県   16.9
      "22":"FF7070", // 静岡県   17.6
      "23":"FF7A7A", // 愛知県   17.0
      "24":"FF7C7C", // 三重県   16.9
      "25":"FF8F8F", // 滋賀県   15.8
      "26":"FF7979", // 京都府   17.1
      "27":"FF6E6E", // 大阪府   17.7
      "28":"FF6D6D", // 兵庫県   17.8
      "29":"FF8C8C", // 奈良県   16.0
      "30":"FF6E6E", // 和歌山県 17.7
      "31":"FF8C8C", // 鳥取県   16.0
      "32":"FF8D8D", // 島根県   15.9
      "33":"FF8181", // 岡山県   16.6
      "34":"FF7777", // 広島県   17.2
      "35":"FF8383", // 山口県   16.5
      "36":"FF7070", // 徳島県   17.6
      "37":"FF7272", // 香川県   17.5
      "38":"FF7070", // 愛媛県   17.6
      "39":"FF6767", // 高知県   18.1
      "40":"FF6767", // 福岡県   18.1
      "41":"FF6B6B", // 佐賀県   17.9
      "42":"FF6767", // 長崎県   18.1
      "43":"FF6969", // 熊本県   18.0
      "44":"FF7070", // 大分県   17.6
      "45":"FF5F5F", // 宮崎県   18.6
      "46":"FF4E4E", // 鹿児島県 19.6
      "47":"FF0000", // 沖縄県   24.1
    }
  }, true);

  // レイヤーセットを作成
  var layerset = new Y.LayerSet("bm", [bml]);

  // Mapにレイヤーセットを追加
  myMap.addLayerSet("bml", layerset);

  myMap.drawMap(
    new Y.LatLng(36.231132,137.964569), 
    6,
    Y.LayerSetId.NORMAL
  );

  // Mapの表示レイヤーを変更
  myMap.setLayerSet("bml");

9.3℃~24.1℃をFF~00に変換して、色を決めてみました。GoogleのGeomapならこのへんは自動計算してくれたんですが…。