Guest User

Untitled

a guest
Aug 14th, 2014
215
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Stream Gauge Monitors</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  7. <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/tundra/tundra.css">
  8. <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
  9.  
  10. <style>
  11. html,body,#mapDiv,.map.container{
  12. padding:0;
  13. margin:0px;
  14. height:100%;
  15. }
  16.  
  17. #legendDiv{
  18. background-color: #fff;
  19. position: absolute !important;
  20. z-index: 99;
  21. top:10px;
  22. right:20px;
  23. border-radius:20px;
  24. }
  25.  
  26. body {
  27. overflow: hidden;
  28. overflow: hidden;
  29. font-family: "Roboto Condensed", sans-serif;
  30. font-size: 0.90em;
  31. margin: 0 auto;
  32. width: 100%;
  33. }
  34.  
  35. #grid {
  36. height: 80%;
  37. width: 100%;
  38. }
  39.  
  40. .field-NAME {
  41. width: 5%;
  42. font-size: .80em;
  43. font-weight: normal;
  44. }
  45.  
  46. .field-CURRENT_STAGE {
  47. width: 2%;
  48. font-size: .80em;
  49. font-weight: normal;
  50. }
  51.  
  52. .field-ALERT_STATUS {
  53. width: 2%;
  54. font-size: .80em;
  55. font-weight: normal;
  56. }
  57.  
  58. .field-LINK {
  59. width: 5%;
  60. font-size: .80em;
  61. font-weight: normal;
  62. }
  63.  
  64. #grid .dgrid-row-odd {
  65. background: #F2F5F9;
  66. }
  67.  
  68. .dgrid-no-data, .dgrid-loading {
  69. color: #aaa;
  70. font-size: 3em;
  71. padding: 3em;
  72. text-align: center;
  73. }
  74. </style>
  75.  
  76. <script>var dojoConfig = { parseOnLoad: true };</script>
  77. <script src="http://js.arcgis.com/3.7compact/"></script>
  78. <script>
  79. var map,
  80. webmapId = "a8ca5a7d13b6458997352d82700e07c6",
  81. featureLayer, pageInfo, grid;
  82.  
  83. require([
  84. "esri/map",
  85. "esri/arcgis/utils",
  86. "esri/dijit/Legend",
  87. "esri/layers/FeatureLayer",
  88. "esri/tasks/query",
  89. "esri/TimeExtent",
  90. "dojo/number",
  91. "dojo/date/locale",
  92. "dojo/dom",
  93. "dojo/on",
  94. "dojo/_base/array",
  95. "dojo/store/Memory",
  96. "dgrid/OnDemandGrid",
  97. "dojo/domReady!"
  98. ], function (Map, arcgisUtils, Legend, FeatureLayer, Query, TimeExtent,
  99. number, locale, dom, on,
  100. arrayUtils, Memory,
  101. OnDemandGrid) {
  102. arcgisUtils.createMap(webmapId, "mapDiv").then(function (response) {
  103. map = response.map
  104.  
  105. var legend = new Legend({
  106. map: map,
  107. layerInfos: (arcgisUtils.getLegendLayers(response))
  108. }, "legendDiv");
  109.  
  110. legend.startup();
  111. });
  112.  
  113. var sortAttr = [{
  114. attribute: "name",
  115. descending: true
  116. }];
  117. grid = new OnDemandGrid({
  118. store: Memory({
  119. idProperty: "OBJECTID"
  120. }),
  121. columns: {
  122. NAME: "NAME",
  123. CURRENT_STAGE: "CURRENT STAGE",
  124. ALERT_STATUS: "ALERT STATUS",
  125. LINK: "Link to Flood Data Image",
  126. },
  127. loadingMessage: "Loading data...",
  128. noDataMessage: "No results found.",
  129. sort: sortAttr
  130. }, "grid");
  131.  
  132. // create a feature layer
  133. featureLayer = new FeatureLayer("http://geoweb.cityofsalem.net/salemgis/rest/services/Public/IT_StreamMonitoringStations/MapServer/0", {
  134. outFields: ["*"]
  135. });
  136.  
  137. // get object IDs from the table (feature layer)
  138. featureLayer.on("load", function () {
  139. // create the query to fetch object IDs for earthquakes that have a magnitude greater than 6.0
  140. // that occurred after January 1st 2007
  141. var query = new Query();
  142. query.where = "OBJECTID > 0";
  143. featureLayer.queryIds(query, function (objectIds) {
  144. fetchRecords(objectIds);
  145. });
  146. });
  147.  
  148. // click listeners for prev/next page buttons
  149. on(dom.byId("prev"), "click", function () {
  150. queryRecordsByPage(pageInfo.currentPage - 1);
  151. });
  152. on(dom.byId("next"), "click", function () {
  153. queryRecordsByPage(pageInfo.currentPage + 1);
  154. });
  155.  
  156. // formatting function for numbers
  157. function formatRound(value) {
  158. return number.round(value, 2);
  159. }
  160.  
  161. // formatting function for dates
  162. function formatDate(value) {
  163. var inputDate = new Date(value);
  164. return locale.format(inputDate, {
  165. selector: "date",
  166. datePattern: "MMMM d, y"
  167. });
  168. }
  169.  
  170. function fetchRecords(objectIds) {
  171. if (objectIds.length > 0) {
  172. updatePageInformation(objectIds);
  173. queryRecordsByPage(1);
  174. } else {
  175. grid.showMessage("No matching records");
  176. grid.setStore(null);
  177. }
  178. }
  179.  
  180. function updatePageInformation(objectIds, page) {
  181. pageInfo = {
  182. objectIds: objectIds,
  183. totalRecords: objectIds.length,
  184. totalPages: Math.ceil(objectIds.length / 15),
  185. currentPage: page || 0,
  186. recordsPerPage: 15
  187. };
  188.  
  189. dom.byId("pageInfo").innerHTML = pageInfo.currentPage + "/" + pageInfo.totalPages;
  190. dom.byId("recordsInfo").innerHTML = pageInfo.totalRecords;
  191.  
  192. if (pageInfo.currentPage > pageInfo.totalPages) {
  193. queryRecordsByPage(pageInfo.currentPage - 1);
  194. }
  195. }
  196.  
  197. function queryRecordsByPage(pageNumber) {
  198. // check if the page number is valid
  199. if (pageNumber < 1 || pageNumber > pageInfo.totalPages) {
  200. return;
  201. }
  202.  
  203. //grid.showMessage("Fetching records...");
  204.  
  205. var begin = pageInfo.recordsPerPage * (pageNumber - 1);
  206. var end = begin + pageInfo.recordsPerPage;
  207.  
  208. // create the query
  209. var query = new Query();
  210. query.objectIds = pageInfo.objectIds.slice(begin, end);
  211. query.outFields = ["*"];
  212.  
  213. // Query for the records with the given object IDs and populate the grid
  214. featureLayer.queryFeatures(query, function (featureSet) {
  215. updateGrid(featureSet, pageNumber);
  216. });
  217. }
  218.  
  219. function updateGrid(featureSet, pageNumber) {
  220.  
  221. var data = arrayUtils.map(featureSet.features, function (entry, i) {
  222.  
  223. var a = document.createElement('a');
  224. var linkText = document.createTextNode(entry.attributes.LINK);
  225. a.appendChild(linkText);
  226. a.title = entry.attributes.LINK;
  227. a.href = entry.attributes.LINK;
  228.  
  229. return {
  230. NAME: entry.attributes.NAME,
  231. CURRENT_STAGE: entry.attributes.CURRENT_STAGE,
  232. ALERT_STATUS: entry.attributes.ALERT_STATUS,
  233. LINK: a
  234. };
  235. });
  236. grid.store.setData(data);
  237. grid.refresh();
  238.  
  239. // update application state
  240. pageInfo.currentPage = pageNumber;
  241. dom.byId("pageInfo").innerHTML = pageInfo.currentPage + "/" + pageInfo.totalPages;
  242. }
  243.  
  244. });
  245. </script>
  246.  
  247. </head>
  248.  
  249. <body>
  250. <div id="mapDiv" style="height: 55%"></div>
  251. <div id="tbl" style="height:45%">
  252.  
  253. <p>
  254. Total records:
  255. <span id="recordsInfo">0</span>
  256. &nbsp;&nbsp;|&nbsp;&nbsp;
  257.  
  258. <button id="prev">Prev Page</button>
  259. &nbsp;&nbsp<span id="pageInfo"></span>&nbsp;&nbsp
  260.  
  261. <button id="next">Next Page</button>
  262. </p>
  263.  
  264. <!-- dgrid will be created in this div -->
  265. <div id="grid"></div>
  266. </div>
  267. <div id="legendDiv"></div>
  268. </body>
  269. </html>
  270.  
  271. grid = new OnDemandGrid({
  272. store: Memory({
  273. idProperty: "OBJECTID"
  274. }),
  275. columns: {
  276. NAME: "NAME",
  277. CURRENT_STAGE: "CURRENT STAGE",
  278. ALERT_STATUS: "ALERT STATUS",
  279. LINK: { label: "Link to Flood Data Image", formatter: makeLink }
  280. },
  281. loadingMessage: "Loading data...",
  282. noDataMessage: "No results found.",
  283. sort: sortAttr
  284. }, "grid");
  285.  
  286. function makeLink(data) {
  287. console.log("make link", data);
  288. return "<a target="_blank" href="" + data + "">" + data + "</a>";
  289. }
  290.  
  291. <!DOCTYPE html>
  292. <html>
  293. <head>
  294. <title>Stream Gauge Monitors</title>
  295. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  296. <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  297. <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/tundra/tundra.css">
  298. <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
  299.  
  300. <style>
  301. html,body,#mapDiv,.map.container{
  302. padding:0;
  303. margin:0px;
  304. height:100%;
  305. }
  306.  
  307. #legendDiv{
  308. background-color: #fff;
  309. position: absolute !important;
  310. z-index: 99;
  311. top:10px;
  312. right:20px;
  313. border-radius:20px;
  314. }
  315.  
  316. body {
  317. overflow: hidden;
  318. overflow: hidden;
  319. font-family: "Roboto Condensed", sans-serif;
  320. font-size: 0.90em;
  321. margin: 0 auto;
  322. width: 100%;
  323. }
  324.  
  325. #grid {
  326. height: 80%;
  327. width: 100%;
  328. }
  329.  
  330. .field-NAME {
  331. width: 5%;
  332. font-size: .80em;
  333. font-weight: normal;
  334. }
  335.  
  336. .field-CURRENT_STAGE {
  337. width: 2%;
  338. font-size: .80em;
  339. font-weight: normal;
  340. }
  341.  
  342. .field-ALERT_STATUS {
  343. width: 2%;
  344. font-size: .80em;
  345. font-weight: normal;
  346. }
  347.  
  348. .field-LINK {
  349. width: 5%;
  350. font-size: .80em;
  351. font-weight: normal;
  352. }
  353.  
  354. #grid .dgrid-row-odd {
  355. background: #F2F5F9;
  356. }
  357.  
  358. .dgrid-no-data, .dgrid-loading {
  359. color: #aaa;
  360. font-size: 3em;
  361. padding: 3em;
  362. text-align: center;
  363. }
  364. </style>
  365.  
  366. <script>var dojoConfig = { parseOnLoad: true };</script>
  367. <script src="http://js.arcgis.com/3.7compact/"></script>
  368. <script>
  369. var map,
  370. webmapId = "a8ca5a7d13b6458997352d82700e07c6",
  371. featureLayer, pageInfo, grid;
  372.  
  373. require([
  374. "esri/map",
  375. "esri/arcgis/utils",
  376. "esri/dijit/Legend",
  377. "esri/layers/FeatureLayer",
  378. "esri/tasks/query",
  379. "esri/TimeExtent",
  380. "dojo/number",
  381. "dojo/date/locale",
  382. "dojo/dom",
  383. "dojo/on",
  384. "dojo/_base/array",
  385. "dojo/store/Memory",
  386. "dgrid/OnDemandGrid",
  387. "dojo/dom-construct",
  388. "dojo/domReady!"
  389. ], function (Map, arcgisUtils, Legend, FeatureLayer, Query, TimeExtent,
  390. number, locale, dom, on,
  391. arrayUtils, Memory,
  392. OnDemandGrid, domConstruct) {
  393. arcgisUtils.createMap(webmapId, "mapDiv").then(function (response) {
  394. map = response.map
  395.  
  396. var legend = new Legend({
  397. map: map,
  398. layerInfos: (arcgisUtils.getLegendLayers(response))
  399. }, "legendDiv");
  400.  
  401. legend.startup();
  402. });
  403.  
  404. var sortAttr = [{
  405. attribute: "name",
  406. descending: true
  407. }];
  408. grid = new OnDemandGrid({
  409. store: Memory({
  410. idProperty: "OBJECTID"
  411. }),
  412. columns: {
  413. NAME: "NAME",
  414. CURRENT_STAGE: "CURRENT STAGE",
  415. ALERT_STATUS: "ALERT STATUS",
  416. LINK: { label: "Link to Flood Data Image", formatter: makeLink }
  417. },
  418. loadingMessage: "Loading data...",
  419. noDataMessage: "No results found.",
  420. sort: sortAttr
  421. }, "grid");
  422.  
  423. // create a feature layer
  424. featureLayer = new FeatureLayer("http://geoweb.cityofsalem.net/salemgis/rest/services/Public/IT_StreamMonitoringStations/MapServer/0", {
  425. outFields: ["*"]
  426. });
  427.  
  428. // get object IDs from the table (feature layer)
  429. featureLayer.on("load", function () {
  430. // create the query to fetch object IDs for earthquakes that have a magnitude greater than 6.0
  431. // that occurred after January 1st 2007
  432. var query = new Query();
  433. query.where = "OBJECTID > 0";
  434. featureLayer.queryIds(query, function (objectIds) {
  435. fetchRecords(objectIds);
  436. });
  437. });
  438.  
  439. // click listeners for prev/next page buttons
  440. on(dom.byId("prev"), "click", function () {
  441. queryRecordsByPage(pageInfo.currentPage - 1);
  442. });
  443. on(dom.byId("next"), "click", function () {
  444. queryRecordsByPage(pageInfo.currentPage + 1);
  445. });
  446.  
  447. // formatting function for numbers
  448. function formatRound(value) {
  449. return number.round(value, 2);
  450. }
  451.  
  452. // formatting function for dates
  453. function formatDate(value) {
  454. var inputDate = new Date(value);
  455. return locale.format(inputDate, {
  456. selector: "date",
  457. datePattern: "MMMM d, y"
  458. });
  459. }
  460.  
  461. function fetchRecords(objectIds) {
  462. if (objectIds.length > 0) {
  463. updatePageInformation(objectIds);
  464. queryRecordsByPage(1);
  465. } else {
  466. grid.showMessage("No matching records");
  467. grid.setStore(null);
  468. }
  469. }
  470.  
  471. function updatePageInformation(objectIds, page) {
  472. pageInfo = {
  473. objectIds: objectIds,
  474. totalRecords: objectIds.length,
  475. totalPages: Math.ceil(objectIds.length / 15),
  476. currentPage: page || 0,
  477. recordsPerPage: 15
  478. };
  479.  
  480. dom.byId("pageInfo").innerHTML = pageInfo.currentPage + "/" + pageInfo.totalPages;
  481. dom.byId("recordsInfo").innerHTML = pageInfo.totalRecords;
  482.  
  483. if (pageInfo.currentPage > pageInfo.totalPages) {
  484. queryRecordsByPage(pageInfo.currentPage - 1);
  485. }
  486. }
  487.  
  488. function queryRecordsByPage(pageNumber) {
  489. // check if the page number is valid
  490. if (pageNumber < 1 || pageNumber > pageInfo.totalPages) {
  491. return;
  492. }
  493.  
  494. //grid.showMessage("Fetching records...");
  495.  
  496. var begin = pageInfo.recordsPerPage * (pageNumber - 1);
  497. var end = begin + pageInfo.recordsPerPage;
  498.  
  499. // create the query
  500. var query = new Query();
  501. query.objectIds = pageInfo.objectIds.slice(begin, end);
  502. query.outFields = ["*"];
  503.  
  504. // Query for the records with the given object IDs and populate the grid
  505. featureLayer.queryFeatures(query, function (featureSet) {
  506. updateGrid(featureSet, pageNumber);
  507. });
  508. }
  509.  
  510. function updateGrid(featureSet, pageNumber) {
  511.  
  512. var data = arrayUtils.map(featureSet.features, function (entry, i) {
  513. return {
  514. NAME: entry.attributes.NAME,
  515. CURRENT_STAGE: entry.attributes.CURRENT_STAGE,
  516. ALERT_STATUS: entry.attributes.ALERT_STATUS,
  517. LINK: entry.attributes.LINK
  518. };
  519. });
  520. grid.store.setData(data);
  521. grid.refresh();
  522.  
  523. // update application state
  524. pageInfo.currentPage = pageNumber;
  525. dom.byId("pageInfo").innerHTML = pageInfo.currentPage + "/" + pageInfo.totalPages;
  526. }
  527.  
  528. function makeLink(data) {
  529. console.log("make link", data);
  530. return "<a target="_blank" href="" + data + "">" + data + "</a>";
  531. }
  532.  
  533. });
  534. </script>
  535.  
  536. </head>
  537.  
  538. <body>
  539. <div id="mapDiv" style="height: 55%"></div>
  540. <div id="tbl" style="height:45%">
  541.  
  542. <p>
  543. Total records:
  544. <span id="recordsInfo">0</span>
  545. &nbsp;&nbsp;|&nbsp;&nbsp;
  546.  
  547. <button id="prev">Prev Page</button>
  548. &nbsp;&nbsp<span id="pageInfo"></span>&nbsp;&nbsp
  549.  
  550. <button id="next">Next Page</button>
  551. </p>
  552.  
  553. <!-- dgrid will be created in this div -->
  554. <div id="grid"></div>
  555. </div>
  556. <div id="legendDiv"></div>
  557. </body>
  558. </html>
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×