FON/index.html at master · graymo/FON · 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
---
---
<!DOCTYPE html>
<html>
<head>
  <title>Kitchener Festival of Neighbourhoods</title>
  <meta charset="utf-8" />

  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />

  <style>
    .leaflet-popup-content table {
      border-collapse:collapse;
      }
    .leaflet-popup-content tr:nth-child(even) {background: #f7f7f7}
    .leaflet-popup-content tr:nth-child(odd) {background: #FFF}
    .leaflet-popup-content td,
    .leaflet-popup-content th {
      padding: 5px 10px;
      border-color: #eee;
      border-width: 1px;
      border-style: solid;
      font-size: 11px;}
  </style>

</head>
<body>
  <div id="map" style="width: 600px; height: 650px"></div>

  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <script>

    var map = L.map('map').setView([43.43,-80.475], 12);
    L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
      maxZoom: 18,
      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="http://mapbox.com">Mapbox</a>',
      id: 'examples.map-i875mjb7'
    }).addTo(map);

    function getColor(w) {
			return w == 10 ? '#ffffb3' :
			       w == 9  ? '#bebada' :
			       w == 8  ? '#fb8072' :
			       w == 7  ? '#80b1d3' :
			       w == 6  ? '#fdb462' :
			       w == 5  ? '#b3de69' :
			       w == 4  ? '#fccde5' :
			       w == 3  ? '#d9d9d9' :
			       w == 2  ? '#bc80bd' :
			       w == 1  ? '#8dd3c7' :
			                 '#ccebc5' ;
		}

		function style(feature) {
			return {
				weight: 2,
				opacity: 1,
				color: 'white',
				dashArray: '3',
				fillOpacity: 0.7,
				fillColor: getColor(feature.properties.WardNumber)
			};
		}

		var geojson;

    function onEachFeature(feature, layer) {
      // does this feature have a property named popupContent?
      if (feature.properties) {
        html = '<table>'
        $.each(feature.properties, function( k, v ) {
          html += '<tr><th>' + k + '</td><td>' + v + '</td></tr>';
        });
        html+= '</table>';
        layer.bindPopup(html, {closeButton:false});
      }
    }

    var fonFeatures = {{site.data.registered-activities|jsonify}};
    var unregistered = {{site.data.unregistered-activities|jsonify}};
    var awards = {{site.data.capital-grants|jsonify}};

    var events = L.geoJson(fonFeatures);
    var other = L.geoJson(unregistered);
    var grants = L.geoJson(awards);

    var wards = {{site.data.ward-boundaries|jsonify}};

    geojson = L.geoJson(wards, {style: style}).addTo(map);

    var overlays = {
      "Registered FON Events": events,
      "Other Events": other,
      "Neighbourhood Improvement Grants": grants
    };

    L.control.layers(overlays).addTo(map);

  </script>
</body>
</html>