projects-map/index.html at master · danagerous/projects-map · 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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>KCP Stewardship Projects</title>
<style type="text/css">
  html { height: 100%; }
  body { height: 100%; margin: 0; padding: 0; }
  #map_canvas { height: 100%; }
  #logo {
    position: absolute;
    top: 20px;
    right: 10px;
  }
  /* CSS for Legend Box*/
  #legend {
    font-family: Arial, sans-serif;
    font-size: 0.950em;
    background: #fff;
    padding: 10px;
    margin: 10px;
    border: 1px solid #000;
    border-radius: 10px;
  }
  #legend h3 {
    margin-top: 0;
  }
  #legend img {
    vertical-align: middle;
  }
</style>
<!-- Will be implementing boostrap.js for responsive map at a later date -->
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">-->

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBG8u8kpHf3GjsyQc5ydhSu_f-dj-J2cfs"></script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script type="text/javascript" src="javascript/infobox.js"></script>

<script type="text/javascript" src="javascript/markerclusterer.js"></script>

<script type="text/javascript" src="javascript/underscore-min.js"></script>

<script type="text/javascript">
var gmarkers = [];
var map = null;
var ib = new InfoBox();

// A function to create the marker and set up the event window
function createMarker(latlng,name,html,category) {
  var boxText = document.createElement("div");
  boxText.style.cssText = "margin-top: 10px; background: rgba(255,255,255,0.7); padding: 10px; border-radius: 10px; color: #000";
  boxText.innerHTML = html;

  var myOptions = {
    content: boxText,
    disableAutoPan: false,
    maxWidth: 0,
    pixelOffset: new google.maps.Size(-100, 0),
    zIndex: null,
    boxStyle: {
      background: "url('images/tip.png') no-repeat",
      width: "250px",
    },
    closeBoxURL: "",
    infoBoxClearance: new google.maps.Size(1, 1),
    isHidden: false,
    pane: "floatPane",
    enableEventPropagation: false
  };

  var marker = new google.maps.Marker({
    position: latlng,
    icon: "images/" + category + ".png",
    map: map,
    title: name,
    zIndex: Math.round(latlng.lat()*-100000)<<5
  });

  // === Store the category and name info as a marker properties ===
  marker.mycategory = category;
  marker.myname = name;
  gmarkers.push(marker);

  google.maps.event.addListener(marker, 'click', function() {
    ib.setOptions(myOptions)
    ib.open(map, this);
  });
} // end createMarker

// == shows all markers of a particular category, and ensures the checkbox is checked ==
function show(category) {
  for (var i=0; i<gmarkers.length; i++) {
    if (gmarkers[i].mycategory == category) {
      gmarkers[i].setVisible(true);
    }
  }
  // == check the checkbox ==
  document.getElementById(category+"box").checked = true;
}

// == hides all markers of a particular category, and ensures the checkbox is cleared ==
function hide(category) {
  for (var i=0; i<gmarkers.length; i++) {
    if (gmarkers[i].mycategory == category) {
      gmarkers[i].setVisible(false);
    }
  }
  // == clear the checkbox ==
  document.getElementById(category+"box").checked = false;
  // == close the info window, in case its open on a marker that we just hid
  ib.close();
}

// == a checkbox has been clicked ==
function boxclick(box,category) {
  if (box.checked) {
    show(category);
  } else {
    hide(category);
  }
}

function myclick(i) {
  google.maps.event.trigger(gmarkers[i],"click");
}

function initialize() {
  var myOptions = {
    zoom: 7,
    center: new google.maps.LatLng(50.342441, -116.519321),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  // Load GeoJSON.
  var poly = map.data.loadGeoJson('kcpBndry.geojson');

  // Set the stroke width for geojson polygon
  map.data.setStyle({
    fillOpacity: 0.1,
    strokeColor: 'red',
    strokeWeight: 2,
    clickable: false
  });

  google.maps.event.addListener(map, 'click', function() {
    ib.close();
  });

  //Read json file to plot markers
  $(document).ready(function(){
    $.getJSON('kcpProjectsMarch2015.json', function(data) {
      for (var i = 0; i < data.length; i++) {
        // obtain the attribues of each marker
        var item = data[i];
        var point = new google.maps.LatLng(item.ltt, item.lgt);
        var name = item.name;
        var html = "<b>"+item.name+"<\/b><br \/><br \/><b>Project<\/b><br \/>"+item.project+"<br \/><br \/><b>Description<\/b><br \/>"+item.description+"<br \/><br \/><b>Project Type<\/b><br \/>"+item.project_type+"<br \/><br \/><b>Habitat Type<\/b><br \/>"+item.habitat_type;
        var category = item.org;

        // create the marker
        var marker = createMarker(point,name,html,category);
      }

      // == TO ADD LEGEND ==
      // using Underscore.js
      var uniques = _.map(_.groupBy(data,function(value){
        return value.name;
      }),function(grouped){
        return grouped[0];
      });

      var legend = document.getElementById('legend');
      for (var key in uniques) {
        var type = uniques[key];
        var category2 = type.org;
        var name2 = type.name;
        var div = document.createElement('div');
        div.innerHTML = '<img src="images/' + category2 + '_legend.png"> ' + name2;
        legend.appendChild(div);
      }

      // Cluster Markers
      var markerCluster = new MarkerClusterer(map, gmarkers, {maxZoom: 10});

      // Legend Location
      map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);

      // == show or hide the categories initially ==
      show("ncc"); // Nature Conservancy of Canada
      show("lwrgc"); // Lake Windermere Rod and Gun Club
      show("rdek"); // Regional District of East Kootenay
      show("cvgta"); // Columbia Valley Greenways Trail Alliance
      show("kcbp"); // Kootenay Community Bat Project
      show("ckiss"); // Central Kootenay Invasive Species Society
      show("ekipc"); // East Kootenay Invasive Plant Council
      show("efhs"); // Eastshore Freshwater Habitat Society
      show("jdc"); // Jakob Dulisse Consulting
      show("kcfa"); // Kootenay Centre for Forestry Alternatives
      show("knps"); // Kootenay Native Plant Society
      show("kni"); // Kutenai Nature Investigations Ltd.
      show("vast"); // VAST Resource Solutions Inc.
      show("wlds"); // Wildsight

    }); //end JSON
  }); //end jQuery
} //end initialize

</script>

<script>

  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-57887000-8', 'auto');
  ga('send', 'pageview');

</script>

</head>

<body onload="initialize()">
<div id="map_canvas"></div>
<div id="logo">
  <div><img src="images/kcp_logo_shadow.png" title="Stewardship Projects" class="img-responsive"/></div>
</div>
<div id="legend">Legend</div>
</body>

</html>