PageRenderTime 53ms CodeModel.GetById 29ms RepoModel.GetById 1ms app.codeStats 0ms

/application/views/main_test_js.php

https://github.com/surflightroy/Ushahidi_Web
PHP | 349 lines | 251 code | 46 blank | 52 comment | 34 complexity | a03890df74017b46d79855bebd24f52b MD5 | raw file
  1. /*
  2. * Main Javascript
  3. * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  4. * TESTING SERVER SIDE CLUSTERING
  5. * REPLACE main_js.php with this one to use
  6. * Clustering (heat mapping)
  7. * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  8. */
  9. // Map JS
  10. jQuery(function() {
  11. var map_layer;
  12. var markers;
  13. var southwest;
  14. var northeast;
  15. var catID = '';
  16. /*
  17. - Initialize Map
  18. - Uses Spherical Mercator Projection
  19. - Units in Metres instead of Degrees
  20. */
  21. var options = {
  22. units: "m",
  23. numZoomLevels: 16,
  24. controls:[],
  25. projection: new OpenLayers.Projection("EPSG:900913"),
  26. 'displayProjection': new OpenLayers.Projection("EPSG:4326")
  27. };
  28. var map = new OpenLayers.Map('map', options);
  29. map.addControl( new OpenLayers.Control.LoadingPanel({minSize: new OpenLayers.Size(573, 366)}) );
  30. /*
  31. - Select A Mapping API
  32. - Live/Yahoo/OSM/Google
  33. - Set Bounds
  34. */
  35. var default_map = <?php echo $default_map; ?>;
  36. if (default_map == 2)
  37. {
  38. map_layer = new OpenLayers.Layer.VirtualEarth("virtualearth", {
  39. sphericalMercator: true,
  40. maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34)
  41. });
  42. }
  43. else if (default_map == 3)
  44. {
  45. map_layer = new OpenLayers.Layer.Yahoo("yahoo", {
  46. sphericalMercator: true,
  47. maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34)
  48. });
  49. }
  50. else if (default_map == 4)
  51. {
  52. map_layer = new OpenLayers.Layer.OSM.Mapnik("openstreetmap", {
  53. sphericalMercator: true,
  54. maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34)
  55. });
  56. }
  57. else
  58. {
  59. map_layer = new OpenLayers.Layer.Google("google", {
  60. sphericalMercator: true,
  61. maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34)
  62. });
  63. }
  64. map.addLayer(map_layer);
  65. // Add Controls
  66. map.addControl(new OpenLayers.Control.Navigation());
  67. map.addControl(new OpenLayers.Control.PanZoomBar());
  68. map.addControl(new OpenLayers.Control.MousePosition());
  69. map.addControl(new OpenLayers.Control.LayerSwitcher());
  70. // Create the markers layer
  71. function addMarkers(catID,startDate,endDate, currZoom, currCenter){
  72. // Does 'markers' already exist? If so, destroy it before creating new layer
  73. if (markers){
  74. for (var i = 0; i < markers.length; i++) {
  75. markers[i].destroy();
  76. markers[i] = null;
  77. }
  78. map.removeLayer(markers);
  79. }
  80. // Set Map Center
  81. var myPoint;
  82. if (typeof(currZoom) != 'undefined' && typeof(currCenter) != 'undefined')
  83. {
  84. myPoint = currCenter;
  85. myZoom = currZoom;
  86. }else{
  87. // create a lat/lon object
  88. var proj = new OpenLayers.Projection("EPSG:4326");
  89. myPoint = new OpenLayers.LonLat(<?php echo $longitude; ?>, <?php echo $latitude; ?>);
  90. myPoint.transform(proj, map.getProjectionObject());
  91. // display the map centered on a latitude and longitude (Google zoom levels)
  92. myZoom = <?php echo $default_zoom; ?>;
  93. };
  94. map.setCenter(myPoint, myZoom);
  95. // Get Viewport Boundaries
  96. extent = map.getExtent().transform(map.getProjectionObject(), new OpenLayers.Projection("EPSG:4326"));
  97. southwest = extent.bottom+','+extent.left;
  98. northeast = extent.top+','+extent.right;
  99. // Set Feature Styles
  100. var style = new OpenLayers.Style({
  101. label: "${count}",
  102. fontColor: "#ffffff",
  103. fontSize: "${fontsize}",
  104. fontWeight: "bold",
  105. labelAlign: "center",
  106. pointRadius: "${radius}",
  107. fillColor: "${color}",
  108. fillOpacity: 0.8,
  109. strokeColor: "#000000",
  110. strokeWidth: 1,
  111. strokeOpacity: 1
  112. },
  113. {
  114. context:
  115. {
  116. count: function(feature)
  117. {
  118. if (feature.attributes.count == 1) {
  119. return "";
  120. } else {
  121. return feature.attributes.count;
  122. }
  123. },
  124. fontsize: function(feature)
  125. {
  126. if (feature.attributes.count > 10) {
  127. return "18px";
  128. } else {
  129. return "13px";
  130. }
  131. },
  132. radius: function(feature)
  133. {
  134. var feature_count = feature.attributes.count;
  135. return (Math.min(feature_count, 20) + 8) * 1.01;
  136. },
  137. color: function(feature)
  138. {
  139. return "#" + feature.attributes.color;
  140. }
  141. }
  142. });
  143. // Transform feature point coordinate to Spherical Mercator
  144. preFeatureInsert = function(feature) {
  145. var src = new OpenLayers.Projection('EPSG:4326');
  146. var dest = new OpenLayers.Projection('EPSG:900913');
  147. var point = new OpenLayers.Geometry.Point(feature.geometry.x, feature.geometry.y);
  148. OpenLayers.Projection.transform(point, src, dest);
  149. };
  150. params = [];
  151. if (typeof(catID) != 'undefined' && catID.length > 0){
  152. params.push('c=' + catID);
  153. }
  154. if (typeof(startDate) != 'undefined'){
  155. params.push('s=' + startDate);
  156. }
  157. if (typeof(endDate) != 'undefined'){
  158. params.push('e=' + endDate);
  159. }
  160. // Create the markers layer
  161. markers = new OpenLayers.Layer.GML("reports", "<?php echo url::base() . 'json_test' ?>" + '/?z='+ myZoom +'&sw='+ southwest +'&ne='+ northeast +'&' + params.join('&'),
  162. {
  163. preFeatureInsert:preFeatureInsert,
  164. format: OpenLayers.Format.GeoJSON,
  165. projection: new OpenLayers.Projection("EPSG:4326"),
  166. formatOptions: {
  167. extractStyles: true,
  168. extractAttributes: true
  169. },
  170. styleMap: new OpenLayers.StyleMap({"default":style})
  171. });
  172. map.addLayer(markers);
  173. selectControl = new OpenLayers.Control.SelectFeature(markers,
  174. {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
  175. map.addControl(selectControl);
  176. selectControl.activate();
  177. }
  178. addMarkers();
  179. // Refactor Clusters On Zoom
  180. map.events.register('zoomend', null, function() {
  181. // Get Current Category
  182. currCat = $("#currentCat").val();
  183. // Get Current Start Date
  184. currStartDate = $("#startDate").val();
  185. // Get Current End Date
  186. currEndDate = $("#endDate").val();
  187. // Get Current Zoom
  188. currZoom = map.getZoom();
  189. // Get Current Center
  190. currCenter = map.getCenter();
  191. // Refresh Map
  192. addMarkers(currCat, currStartDate, currEndDate, currZoom, currCenter);
  193. });
  194. function onMapStartLoad(event) {
  195. $("#loader").show();
  196. }
  197. function onMapEndLoad(event) {
  198. $("#loader").hide();
  199. }
  200. function onPopupClose(evt) {
  201. // selectControl.unselect(selectedFeature);
  202. for (var i=0; i<map.popups.length; ++i)
  203. {
  204. map.removePopup(map.popups[i]);
  205. }
  206. }
  207. function onFeatureSelect(feature) {
  208. selectedFeature = feature;
  209. // Since KML is user-generated, do naive protection against
  210. // Javascript.
  211. var content = "<div class=\"infowindow\"><h2>"+feature.attributes.name + "</h2></div>";
  212. if (content.search("<script") != -1) {
  213. content = "Content contained Javascript! Escaped content below.<br />" + content.replace(/</g, "&lt;");
  214. }
  215. popup = new OpenLayers.Popup.FramedCloud("chicken",
  216. feature.geometry.getBounds().getCenterLonLat(),
  217. new OpenLayers.Size(100,100),
  218. content,
  219. null, true, onPopupClose);
  220. feature.popup = popup;
  221. map.addPopup(popup);
  222. }
  223. function onFeatureUnselect(event) {
  224. map.removePopup(event.feature.popup);
  225. event.feature.popup.destroy();
  226. event.feature.popup = null;
  227. }
  228. // Category Switch
  229. $("a[id^='cat_']").click(function() {
  230. var catID = this.id.substring(4);
  231. var catSet = 'cat_' + this.id.substring(4);
  232. $("a[id^='cat_']").removeClass("active");
  233. $("#cat_" + catID).addClass("active");
  234. $("#currentCat").val(catID);
  235. // Destroy any open popups
  236. onPopupClose();
  237. // Get Current Start Date
  238. currStartDate = $("#startDate").val();
  239. // Get Current End Date
  240. currEndDate = $("#endDate").val();
  241. // Get Current Zoom
  242. currZoom = map.getZoom();
  243. // Get Current Center
  244. currCenter = map.getCenter();
  245. addMarkers(catID, currStartDate, currEndDate, currZoom, currCenter);
  246. });
  247. if (!$("#startDate").val()) {
  248. return;
  249. }
  250. //Accessible Slider/Select Switch
  251. $("select#startDate, select#endDate").selectToUISlider({
  252. labels: 6,
  253. labelSrc: 'text',
  254. sliderOptions: {
  255. change: function(e, ui) {
  256. var startDate = $("#startDate").val();
  257. var endDate = $("#endDate").val();
  258. var currentCat = gCategoryId;
  259. // Get Current Category
  260. currCat = $("#currentCat").val();
  261. // Get Current Zoom
  262. currZoom = map.getZoom();
  263. // Get Current Center
  264. currCenter = map.getCenter();
  265. // Refresh Map
  266. addMarkers(currCat, startDate, endDate, currZoom, currCenter);
  267. // refresh graph
  268. if (!currentCat || currentCat == '0') {
  269. currentCat = 'ALL';
  270. }
  271. $.timeline({categoryId: currentCat, startTime: new Date(startDate * 1000),
  272. endTime: new Date(endDate * 1000),
  273. graphData: allGraphData[0][currentCat],
  274. url: "<?php echo url::base() . 'json_test/timeline/' ?>"
  275. }).plot();
  276. }
  277. }
  278. }); //.hide();
  279. // Graph
  280. var allGraphData = [<?php echo $all_graphs ?>];
  281. var startTime = new Date($("#startDate").val() * 1000);
  282. var endTime = new Date($("#endDate").val() * 1000);
  283. $.timeline({categoryId: 'ALL', startTime: startTime, endTime: endTime,
  284. graphData: allGraphData[0]['ALL'],
  285. url: "<?php echo url::base() . 'json_test/timeline/' ?>"
  286. }).plot();
  287. var categoryIds = [0,<?php echo join(array_keys($categories), ","); ?>];
  288. for (var i=0; i<categoryIds.length; i++) {
  289. $('#cat_'+categoryIds[i]).click(function(){
  290. var categories = <?php echo json_encode($categories); ?>;
  291. categories['0'] = ["ALL", "#990000"];
  292. graphData = allGraphData[0][categories[this.id.split("_")[1]][0]];
  293. var catId = categories[this.id.split("_")[1]][0];
  294. gCategoryId = catId;
  295. var startTime = new Date($("#startDate").val() * 1000);
  296. var endTime = new Date($("#endDate").val() * 1000);
  297. $.timeline({categoryId: catId, startTime: startTime, endTime: endTime,
  298. graphData: graphData,
  299. url: "<?php echo url::base() . 'json_test/timeline/' ?>"
  300. }).plot();
  301. });
  302. }
  303. });