API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Mar 29th, 2017
62
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.93 KB | None | 0 0
raw download clone embed print report
  1.  
  2. $(function() {
  3.  
  4. var map = (function() {
  5.  
  6. var svgPanZoon;
  7. var maxHeight = 950;
  8. var currentHeight = $(window).height() - 40;
  9.  
  10. var onReady = function(callback) {
  11. var intervalID = window.setInterval(checkReady, 1000);
  12.  
  13. function checkReady() {
  14. if (document.getElementsByTagName('body')[0] !== undefined) {
  15. window.clearInterval(intervalID);
  16. callback.call(this);
  17. }
  18. }
  19. };
  20.  
  21. var show = function(id, value) {
  22. if (value) {
  23. $('#' + id).removeClass('hidden')
  24. } else {
  25. $('#' + id).addClass('hidden')
  26. }
  27. };
  28.  
  29. var capitalizeText = function(str) {
  30. return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
  31. };
  32.  
  33. return {
  34. init: function() {
  35. onReady(function() {
  36. show('page', true);
  37.  
  38. $('#wrapper-map').css({
  39. height: currentHeight > maxHeight ? maxHeight : currentHeight
  40. });
  41.  
  42. $('#list-layers').css({
  43. height: $('#wrapper-map').height()
  44. });
  45. $('#layers').jstree({
  46. 'plugins': ["wholerow", "checkbox", "types"],
  47. 'checkbox': {
  48. 'three_state': false,
  49. 'whole_node': false,
  50. 'tie_selection': false
  51. },
  52. 'core': {
  53. "themes": {
  54. "responsive": false
  55. },
  56. 'data': [
  57. {
  58. "id": 'RED_VIAL_VECINAL',
  59. "text": "<div style='display: inline-block; width: 85%;'><span style='width: 50%; display: inline-block;'>Red Vial Vecinal</span> <span style='text-align: right; width: 50%; display: none;'><i class='fa fa-adjust' onclick='showOpacity()';></i> <i class='fa fa-search'></i></span></div>",
  60. "icon": "fa fa-minus red-vial-vecinal",
  61. "state": {
  62. "checked": false
  63. }
  64. },
  65. {
  66. "id": 'RED_VIAL_NACIONAL',
  67. "text": "<div style='display: inline-block; width: 85%;'><span style='width: 50%; display: inline-block;'>Red Vial Nacional</span> <span style='text-align: right; width: 50%; display: none;'><i class='fa fa-adjust' onclick='showOpacity()';></i> <i class='fa fa-search'></i></span></div>",
  68. "icon": "fa fa-minus red-vial-nacional",
  69. "state": {
  70. "checked": false
  71. }
  72. }, {
  73. "id": 'RED_VIAL_DEPARTAMENTAL',
  74. "text": "Red Vial Departamental",
  75. "icon": "fa fa-minus red-vial-departamental",
  76. "state": {
  77. "checked": false
  78. }
  79. },
  80. {
  81. "id": 'FERROCARRIL',
  82. "text": "<div style='display: inline-block; width: 85%;'><span style='width: 50%; display: inline-block;'>Ferrocarril</span> <span style='text-align: right; width: 50%; display: none;'><i class='fa fa-adjust' onclick='showOpacity()';></i> <i class='fa fa-search'></i></span></div>",
  83. "icon": "fa fa-minus ferrocarril",
  84. "state": {
  85. "checked": false
  86. }
  87. }, {
  88. "id": 'HIDROGRAFIA',
  89. "text": "<div style='display: inline-block; width: 85%;'><span style='width: 50%; display: inline-block;'>Hidrografía</span> <span style='text-align: right; width: 50%; display: none;'><i class='fa fa-adjust' onclick='showOpacity()';></i> <i class='fa fa-search'></i></span></div>",
  90. "icon": "fa fa-minus hidrografia",
  91. "state": {
  92. "checked": false
  93. }
  94. }, {
  95. "id": 'LAGUNAS',
  96. 'text': "<div style='display: inline-block; width: 85%;'><span style='width: 50%; display: inline-block;'>Lagunas</span> <span style='text-align: right; width: 50%; display: none;'><i class='fa fa-adjust' onclick='showOpacity()';></i> <i class='fa fa-search'></i></span></div>",
  97. "icon": "fa fa-square lagunas",
  98. "state": {
  99. "checked": false
  100. }
  101. }, {
  102. "id": 'LIMITE_SUBCUENCA',
  103. 'text': "<div style='display: inline-block; width: 85%;'><span style='width: 50%; display: inline-block;'>Límite Subcuenca</span> <span style='text-align: right; width: 50%; display: none;'><i class='fa fa-adjust' onclick='showOpacity()';></i> <i class='fa fa-search'></i></span></div>",
  104. "icon": "fa fa-square-o",
  105. "state": {
  106. "checked": true
  107. }
  108. }, {
  109. "id": 'CURVAS_NIVEL',
  110. 'text': "<div style='display: inline-block; width: 85%;'><span style='width: 50%; display: inline-block;'>Curvas de Nivel</span> <span style='text-align: right; width: 50%; display: none;'><i class='fa fa-adjust' onclick='showOpacity()';></i> <i class='fa fa-search'></i></span></div>",
  111. "icon": "fa fa-minus curva-nivel",
  112. "state": {
  113. "checked": false
  114. }
  115. }, {
  116. "id": 'CENTROS_POBLADOS',
  117. 'text': "<div style='display: inline-block; width: 85%;'><span style='width: 50%; display: inline-block;'>Centros Poblados</span> <span style='text-align: right; width: 50%; display: none;'><i class='fa fa-adjust' onclick='showOpacity()';></i> <i class='fa fa-search'></i></span></div>",
  118. "icon": "fa fa-circle",
  119. "state": {
  120. "checked": false
  121. }
  122. }, {
  123. "id": 'CAPITAL_DEPARTAMENTAL',
  124. 'text': "<div style='display: inline-block; width: 85%;'><span style='width: 50%; display: inline-block;'>Capital Departamental</span> <span style='text-align: right; width: 50%; display: none;'><i class='fa fa-adjust' onclick='showOpacity()';></i> <i class='fa fa-search'></i></span></div>",
  125. "icon": "fa fa-circle",
  126. "state": {
  127. "checked": false
  128. }
  129. }, {
  130. "id": 'CAPITAL_PROVINCIAL',
  131. 'text': "<div style='display: inline-block; width: 85%;'><span style='width: 50%; display: inline-block;'>Capital Provincial</span> <span style='text-align: right; width: 50%; display: none;'><i class='fa fa-adjust' onclick='showOpacity()';></i> <i class='fa fa-search'></i></span></div>",
  132. "icon": "fa fa-circle",
  133. "state": {
  134. "checked": false
  135. }
  136. }, {
  137. "id": 'CAPITAL_DISTRITAL',
  138. 'text': "<div style='display: inline-block; width: 85%;'><span style='width: 50%; display: inline-block;'>Capital Distrital</span> <span style='text-align: right; width: 50%; display: none;'><i class='fa fa-adjust' onclick='showOpacity()';></i> <i class='fa fa-search'></i></span></div>",
  139. "icon": "fa fa-circle",
  140. "state": {
  141. "checked": false
  142. }
  143. },
  144. {
  145. "id": 'AREA_CONSERVACION',
  146. 'text': "<div style='display: inline-block; width: 85%;'><span style='width: 50%; display: inline-block;'>Área de conservación</span> <span style='text-align: right; width: 50%; display: none;'><i class='fa fa-adjust' onclick='showOpacity()';></i> <i class='fa fa-search'></i></span></div>",
  147. "icon": "fa fa-square area-conservacion",
  148. "state": {
  149. "checked": false
  150. }
  151. }, {
  152. "id": 'CAPACIDAD_USO_MAYOR',
  153. 'text': "<div style='display: inline-block; width: 85%;'><span style='width: 50%; display: inline-block;'>Capacidad de Uso Mayor</span> <span style='text-align: right; width: 50%; display: none;'><i class='fa fa-adjust' onclick='showOpacity()';></i> <i class='fa fa-search'></i></span></div>",
  154. "icon": "fa fa-square capacidad-uso-mayor",
  155. "state": {
  156. "checked": true
  157. }
  158. }, {
  159. "id": 'COBERTURA_VEGETAL',
  160. 'text': "<div style='display: inline-block; width: 85%;'><span style='width: 50%; display: inline-block;'>Cobertura Vegetal</span> <span style='text-align: right; width: 50%; display: none;'><i class='fa fa-adjust' onclick='showOpacity()';></i> <i class='fa fa-search'></i></span></div>",
  161. "icon": "fa fa-square cobertura-vegetal",
  162. "state": {
  163. "checked": false
  164. }
  165. }, {
  166. "id": 'COMUNIDADES_CAMPESINAS',
  167. 'text': "<div style='display: inline-block; width: 85%;'><span style='width: 50%; display: inline-block;'>Comunidades Campesinas</span> <span style='text-align: right; width: 50%; display: none;'><i class='fa fa-adjust' onclick='showOpacity()';></i> <i class='fa fa-search'></i></span></div>",
  168. "icon": "fa fa-square comunidades-campesinas",
  169. "state": {
  170. "checked": false
  171. }
  172. }, {
  173. "id": 'CONFLICTOS_TIERRAS',
  174. 'text': "<div style='display: inline-block; width: 85%;'><span style='width: 50%; display: inline-block;'>Conflictos de Tierras</span> <span style='text-align: right; width: 50%; display: none;'><i class='fa fa-adjust' onclick='showOpacity()';></i> <i class='fa fa-search'></i></span></div>",
  175. "icon": "fa fa-square conflictos-tierras",
  176. "state": {
  177. "checked": false
  178. }
  179. }, {
  180. "id": 'GEOLOGIA',
  181. 'text': "<div style='display: inline-block; width: 85%;'><span style='width: 50%; display: inline-block;'>Geología</span> <span style='text-align: right; width: 50%; display: none;'><i class='fa fa-adjust' onclick='showOpacity()';></i> <i class='fa fa-search'></i></span></div>",
  182. "icon": "fa fa-square geologia",
  183. "state": {
  184. "checked": false
  185. }
  186. }, {
  187. "id": 'FISIOGRAFIA',
  188. 'text': "<div style='display: inline-block; width: 85%;'><span style='width: 50%; display: inline-block;'>Fisiografía</span> <span style='text-align: right; width: 50%; display: none;'><i class='fa fa-adjust' onclick='showOpacity()';></i> <i class='fa fa-search'></i></span></div>",
  189. "icon": "fa fa-square fisiografia",
  190. "state": {
  191. "checked": false
  192. }
  193. }, {
  194. "id": 'GEOMORFOLOGIA',
  195. 'text': "<div style='display: inline-block; width: 85%;'><span style='width: 50%; display: inline-block;'>Geomorfología</span> <span style='text-align: right; width: 50%; display: none;'><i class='fa fa-adjust' onclick='showOpacity()';></i> <i class='fa fa-search'></i></span></div>",
  196. "icon": "fa fa-square geomorfologia",
  197. "state": {
  198. "checked": false
  199. }
  200. }, {
  201. "id": 'HIDROGEOLOGIA',
  202. 'text': "<div style='display: inline-block; width: 85%;'><span style='width: 50%; display: inline-block;'>Hidrogeología</span> <span style='text-align: right; width: 50%; display: none;'><i class='fa fa-adjust' onclick='showOpacity()';></i> <i class='fa fa-search'></i></span></div>",
  203. "icon": "fa fa-square hidrografia",
  204. "state": {
  205. "checked": false
  206. }
  207. }, {
  208. "id": 'REGIONES_NATURALES',
  209. 'text': "<div style='display: inline-block; width: 85%;'><span style='width: 50%; display: inline-block;'>Regiones Naturales</span> <span style='text-align: right; width: 50%; display: none;'><i class='fa fa-adjust' onclick='showOpacity()';></i> <i class='fa fa-search'></i></span></div>",
  210. "icon": "fa fa-square regiones-naturales",
  211. "state": {
  212. "checked": false
  213. }
  214. }, {
  215. "id": 'PRECIPITACION_MEDIA',
  216. 'text': "<div style='display: inline-block; width: 85%;'><span style='width: 50%; display: inline-block;'>Precipitación Media</span> <span style='text-align: right; width: 50%; display: none;'><i class='fa fa-adjust' onclick='showOpacity()';></i> <i class='fa fa-search'></i></span></div>",
  217. "icon": "fa fa-square precipitacion-media",
  218. "state": {
  219. "checked": false
  220. }
  221. }, {
  222. "id": 'TEMPERATURA_MEDIA',
  223. 'text': "<div style='display: inline-block; width: 85%;'><span style='width: 50%; display: inline-block;'>Temperatura Media</span> <span style='text-align: right; width: 50%; display: none;'><i class='fa fa-adjust' onclick='showOpacity()';></i> <i class='fa fa-search'></i></span></div>",
  224. "icon": "fa fa-square temperatura-media",
  225. "state": {
  226. "checked": false
  227. }
  228. }, {
  229. "id": 'USO_ACTUAL_TIERRAS',
  230. 'text': "<div style='display: inline-block; width: 85%;'><span style='width: 50%; display: inline-block;'>Uso Actual de Tierras</span> <span style='text-align: right; width: 50%; display: none;'><i class='fa fa-adjust' onclick='showOpacity()';></i> <i class='fa fa-search'></i></span></div>",
  231. "icon": "fa fa-square uso-actual-tierras",
  232. "state": {
  233. "checked": false
  234. }
  235. }, {
  236. "id": 'ZONAS_VIDA',
  237. 'text': "<div style='display: inline-block; width: 85%;'><span style='width: 50%; display: inline-block;'>Zonas de Vida</span> <span style='text-align: right; width: 50%; display: none;'><i class='fa fa-adjust' onclick='showOpacity()';></i> <i class='fa fa-search'></i></span></div>",
  238. "icon": "fa fa-square zonas-vida",
  239. "state": {
  240. "checked": false
  241. }
  242. }, {
  243. "id": 'LIMITE_DISTRITAL',
  244. 'text': "<div style='display: inline-block; width: 85%;'><span style='width: 50%; display: inline-block;'>Límite Distrital</span> <span style='text-align: right; width: 50%; display: none;'><i class='fa fa-adjust' onclick='showOpacity()';></i> <i class='fa fa-search'></i></span></div>",
  245. "icon": "fa fa-square limite-distrital",
  246. "state": {
  247. "checked": true
  248. }
  249. },
  250.  
  251. ]
  252. },
  253. }).on("check_node.jstree uncheck_node.jstree", function(e, data) {
  254. $('#layer-description').addClass('hidden');
  255. $( "#informacion-laguna").addClass('hidden');
  256. $( "#informacion-poblados" ).addClass('hidden');
  257. $( "#informacion-conservacion" ).addClass('hidden');
  258. $( "#informacion-vegetal" ).addClass('hidden');
  259. $( "#informacion-comunidades" ).addClass('hidden');
  260. $( "#informacion-conflictos" ).addClass('hidden');
  261. $( "#informacion-geologias" ).addClass('hidden');
  262. $( "#informacion-fisiografias" ).addClass('hidden');
  263. $( "#informacion-geomorfologias" ).addClass('hidden');
  264. $( "#informacion-hidrogeologias" ).addClass('hidden');
  265. $( "#informacion-naturales" ).addClass('hidden');
  266. $( "#informacion-precipitaciones" ).addClass('hidden');
  267. $( "#informacion-temperatura" ).addClass('hidden');
  268. $( "#informacion-tierras" ).addClass('hidden' );
  269. $( "#informacion-centros-poblados").addClass('hidden');
  270.  
  271. var layerName = data.node.id
  272.  
  273. if (data.node.state.checked) {
  274. $('#' + layerName).removeClass('hidden');
  275. $('#' + layerName + '_-_Default').removeClass('hidden');
  276.  
  277. } else {
  278. $('#' + layerName).addClass('hidden');
  279. $('#' + layerName + '_-_Default').addClass('hidden');
  280.  
  281. }
  282.  
  283. });
  284.  
  285. svgPanZoom = svgPanZoom('#svg', {
  286. zoomEnabled: true,
  287. controlIconsEnabled: false,
  288. fit: true,
  289. center: true,
  290. contain: false,
  291. dblClickZoomEnabled: false,
  292. // maxZoom: 2,
  293. minZoom: 1.5,
  294. beforePan: function(oldPan, newPan) {
  295. var stopHorizontal = true,
  296. stopVertical = true,
  297. gutterWidth = $("#svg").width(),
  298. gutterHeight = $("#svg").height()
  299. // Computed variables
  300. ,
  301. sizes = this.getSizes(),
  302. leftLimit = -((sizes.viewBox.x + sizes.viewBox.width) * sizes.realZoom) + gutterWidth,
  303. rightLimit = sizes.width - gutterWidth - (sizes.viewBox.x * sizes.realZoom),
  304. topLimit = -((sizes.viewBox.y + sizes.viewBox.height) * sizes.realZoom) + gutterHeight,
  305. bottomLimit = sizes.height - gutterHeight - (sizes.viewBox.y * sizes.realZoom)
  306. customPan = {}
  307. customPan.x = Math.max(leftLimit, Math.min(rightLimit, newPan.x))
  308. customPan.y = Math.max(topLimit, Math.min(bottomLimit, newPan.y))
  309. return customPan
  310. }
  311. });
  312.  
  313. svgPanZoom.zoom(1.5);
  314. svgPanZoom.panBy({x: 0, y: -180});
  315.  
  316.  
  317.  
  318.  
  319. // $('#LAGUNAS path').click(function(event) {
  320. // var lagunaId = $(this).attr('data-id');
  321.  
  322. // $.getJSON( 'data/LAGUNAS.json', function(data) {
  323. // var len = data['FID'].length;
  324. // var indexResult = 0;
  325.  
  326. // for (var index = 0; index < len; index++) {
  327. // if (lagunaId === data['FID'][index]) {
  328. // indexResult = index;
  329. // break;
  330. // }
  331. // }
  332.  
  333. // $('.table tbody').empty();
  334.  
  335. // var rowData = '';
  336. // for (var key in data) {
  337. // rowData += '<td class="bold" style="width:15%; border-right: 1px solid #e7ecf1 !important;">' + capitalizeText(key) + '</td>';
  338. // rowData += '<td style="width:50%">' + data[key][indexResult] + '</td>';
  339.  
  340. // $('.table tbody').append('<tr>' + rowData + '</tr>');
  341. // rowData = '';
  342.  
  343. // }
  344. // $('#layer-description').removeClass('hidden');
  345. // });
  346. // });
  347.  
  348. // $('#LAGUNAS_-_Default g').click(function(event) {
  349. // var lagunaId = $(this).attr('data-id');
  350.  
  351. // $.getJSON( 'data/LAGUNAS.json', function(data) {
  352. // var len = data['FID'].length;
  353. // var indexResult = 0;
  354.  
  355. // for (var index = 0; index < len; index++) {
  356. // if (lagunaId === data['FID'][index]) {
  357. // indexResult = index;
  358. // break;
  359. // }
  360. // }
  361.  
  362. // $('.table tbody').empty();
  363.  
  364. // var rowData = '';
  365. // for (var key in data) {
  366.  
  367. // rowData += '<td class="bold" style="width:15%; border-right: 1px solid #e7ecf1 !important;">' + capitalizeText(key) + '</td>';
  368. // rowData += '<td style="width:50%">' + data[key][indexResult] + '</td>';
  369.  
  370. // $('.table tbody').append('<tr>' + rowData + '</tr>');
  371. // rowData = '';
  372.  
  373. // }
  374. // $('#layer-description').removeClass('hidden');
  375. // });
  376. // });
  377.  
  378. // $('path').click(function(event) {
  379. // try {
  380. // var parentId = $(this).closest('.polygon').attr('id');
  381. // var title = $("#" + parentId).attr("data-title")
  382. // var fillColor = $(this).attr('fill').toUpperCase();
  383.  
  384. // if (parentId == 'CAPACIDAD_USO_MAYOR' ||
  385. // parentId == 'CENTROS_POBLADOS' ||
  386. // parentId == 'COBERTURA_VEGETAL' ||
  387. // parentId == 'COMUNIDADES_CAMPESINAS' ||
  388. // parentId == 'CONFLICTOS_TIERRAS' ||
  389. // parentId == 'FISIOGRAFIA' ||
  390. // parentId == 'GEOLOGIA' ||
  391. // parentId == 'GEOMORFOLOGIA' ||
  392. // parentId == 'HIDROGEOLOGIA' ||
  393. // parentId == 'LAGUNAS' ||
  394. // parentId == 'PRECIPITACION_MEDIA' ||
  395. // parentId == 'REGIONES_NATURALES' ||
  396. // parentId == 'TAXONOMIA_SUELOS' ||
  397. // parentId == 'TEMPERATURA_MEDIA' ||
  398. // parentId == 'USO_ACTUAL_TIERRAS' ||
  399. // parentId == 'ZONAS_VIDA') {
  400.  
  401. // var indexResult = 0;
  402. // $.getJSON( 'data/' + parentId + '.json', function( data ) {
  403. // var len = data['COLOR'].length;
  404.  
  405. // for (var index = 0; index < len; index++) {
  406.  
  407. // if (fillColor === data['COLOR'][index]) {
  408. // indexResult = index;
  409. // break;
  410. // }
  411. // }
  412.  
  413. // $('.table tbody').empty();
  414. // var rowData = '';
  415.  
  416. // for (var key in data) {
  417. // rowData += '<td class="bold" style="width:15%; border-right: 1px solid #e7ecf1 !important;">' + capitalizeText(key) + '</td>';
  418. // if (key === 'COLOR') {
  419. // rowData += '<td style="width:50%"><div class="table-color" style="background: ' + data[key][indexResult] + ';"></div></td>';
  420.  
  421. // } else {
  422. // rowData += '<td style="width:50%">' + data[key][indexResult] + '</td>';
  423. // }
  424.  
  425. // $('.table tbody').append('<tr>' + rowData + '</tr>');
  426. // rowData = '';
  427. // }
  428.  
  429. // $('#layer-description').removeClass('hidden');
  430. // });
  431. // }
  432. // } catch(e) {
  433. // console.log(e);
  434. // }
  435. // });
  436.  
  437. show('loading', false);
  438. $('#init-message').modal('show');
  439.  
  440. });
  441. },
  442. };
  443.  
  444. })();
  445.  
  446.  
  447.  
  448.  
  449. window.map = map;
  450. window.map.init();
  451. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!