演習問題2-2: ヒートマップを作りましょう!

問題1. 背景に地図を表示してください.

<!DOCTYPE html>

<html>
<head>
  <meta charset="UTF-8">
  <title>2015/11/12 BODIKセミナー 演習2-2</title>
  
  <!-- jQuery(AJAXのために使う) -->
  <script type="text/javascript" src="../jquery/jquery-2.1.4.min.js"></script>

  <!-- Leaflet(地図ライブラリ)ファイル -->
  <script type="text/javascript" src="../leaflet/leaflet.js"></script>
  <link rel="stylesheet" href="../leaflet/leaflet.css">

  <style>
  body { padding: 0; margin: 0; }
  h1 { margin-left: 1em; font-family: sans-serif; font-weight: lighter; }
  #map { width: 100%; height: 400px; padding: 0; margin: 0; }
  </style>
</head>

<body>

<h1>演習2-2:ヒートマップを作りましょう!</h1>

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

<script type="text/javascript">
var map = L.map('map').setView([33.5833, 130.4000], 11);

// ここに地図を表示するコードを追加する.

var fukuoka_wards_population = {
  '東区': 291749,
  '博多区': 212108,
  '中央区': 176739,
  '南区': 248901,
  '城南区': 128883,
  '早良区': 211889,
  '西区': 190288
}

function fukuoka_wards_style(feature){
  var ward_name = feature.properties['N03_004']
  var ward_population = fukuoka_wards_population[ward_name]
  var ratio = (ward_population-150000) / 150000
  var color = 'hsl('+360*ratio+',80%,80%)'
  console.log(color)
  
  return {
        fillColor: color,
        weight: 0.5,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7
    };
}

function add_popup_on_ward_layer(feature, area_layer) {
  area_layer.bindPopup("ほげ")
}

// 提供者:https://github.com/niiyz/JapanCityGeoJson
// 提供者のブログによる作成方法について:http://qiita.com/niiyz/items/4e98766172340a7ee929
// 情報源:国土交通省
$.getJSON('https://raw.githubusercontent.com/niiyz/JapanCityGeoJson/master/geojson/福岡県/福岡市.json', function(japanData){
  L.geoJson(japanData, { style: fukuoka_wards_style, onEachFeature: add_popup_on_ward_layer }).addTo(map);
})
  
</script>
</body>
</html>
// 31行に以下のコードを追加する.

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

問題2. 「fukuoka_wards_style」に基づいて、区の名前と人口をポップアップで表示するようにしてください.

// 61行目を以下のコードに置き換える.

var ward_name = feature.properties['N03_004']
var ward_population = fukuoka_wards_population[ward_name]
area_layer.bindPopup("<h2>"+ward_name+"</h2>人口:" + ward_population + "人")