meetup002/tmp.html at master · PyDataOkinawa/meetup002 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
   <script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>


   <script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>


   <style>

      html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      .legend {
          padding: 0px 0px;
          font: 10px sans-serif;
          background: white;
          background: rgba(255,255,255,0.8);
          box-shadow: 0 0 15px rgba(0,0,0,0.2);
          border-radius: 5px;
      }

      .key path {
        display: none;
      }

   </style>
</head>

<body>

   <div id="map" style="width: 960px; height: 500px"></div>

   <script>

      queue()
          .defer(d3.json, 'okinawa.json')
          .await(makeMap)

      function makeMap(error, tjson_1) {


          topo_1 = topojson.feature(tjson_1, tjson_1.objects.object);


          function matchKey(datapoint, key_variable){
              if (typeof key_variable[0][datapoint] === 'undefined') {
                  return null;
              }
              else {
                  return parseFloat(key_variable[0][datapoint]);
              };
          };


          var map = L.map('map').setView([26.273, 127.729], 10);

          L.tileLayer('http://otile1.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
              maxZoom: 18,
              minZoom: 1,
              attribution: 'Map tiles by <a href="http://open.mapquest.com/">MapQuest</a> Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
          }).addTo(map);


          function style_1(feature) {
    return {
        fillColor: 'blue',
        weight: 1,
        opacity: 1,
        color: 'black',
        fillOpacity: 0.6
    };
}


          gJson_layer_1 = L.geoJson(topo_1, {style: style_1}).addTo(map)


      };

   </script>
</body>