daily pastebin goal
20%
SHARE
TWEET

Untitled

a guest Aug 14th, 2014 190 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
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
 
Top