QueryTask with geometry, results as an InfoWindow onHover

<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1255"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title style="direction:rtl">Interactive maps</title> <link href="/Content/kendo/styles/kendo.common-bootstrap.min.css?v=2.1.6" rel="stylesheet" /> <link rel="stylesheet" href="/Content/kendo/2018.1.221/kendo.common.min.css?v=2.1.6"> <link rel="stylesheet" href="/Content/kendo/2018.1.221/kendo.default.min.css?v=2.1.6"> <link href="/Content/Site.css?v=2.1.6" rel="stylesheet" type="text/css" /> <link href="/UserContent/UserLTR.css?v=2.1.6" rel="stylesheet" type="text/css" /> <script src="/Scripts/jquery-1.12.4.min.js?v=2.1.6" type="text/javascript"></script> <script src="/Scripts/jquery.newsTicker.js?v=2.1.6" type="text/javascript"></script> <script src="/UserContent/UserScript.js?v=2.1.6" type="text/javascript"></script> <script src="/Scripts/bootstrap.js?v=2.1.6" type="text/javascript"></script> <script src="/Scripts/bootstrap-datepicker.js?v=2.1.6" type="text/javascript"></script> <script src="/Scripts/bootstrap-timepicker.js?v=2.1.6" type="text/javascript"></script> <script src="/Scripts/SiteScripts.js?v=2.1.6" type="text/javascript"></script> <script src="/scripts/jquery.quicksand.js?v=2.1.6" type="text/javascript"></script> <script src="/scripts/fancybox/source/jquery.fancybox.pack.js?v=2.1.6" type="text/javascript"></script> <link href="/scripts/fancybox/source/jquery.fancybox1.css?v=2.1.6" rel="stylesheet" type="text/css" /> <script src="/Scripts/kendo/2018.1.221/jszip.min.js?v=2.1.6"></script> <script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"></script> <script src="/Scripts/kendo/cultures/kendo.culture.en-US.min.js?v=2.1.6"></script> <script src="/Scripts/moment.min.js?v=2.1.6"></script> <script src="/Scripts/jquery.slimmenu.min.js?v=2.1.6"></script> <link href="/Content/slimmenu.min.css?v=2.1.6" rel="stylesheet" /> <script src="/Scripts/TableSuter/jquery.tablesorter.min.js?v=2.1.6"></script> <link rel="shortcut icon" href="/img/icons/favicon.ico"> <script src="/Scripts/utils/ResizeSensor.js?v=2.1.6"></script> <script src="/Scripts/WebConfig.js?v=2.1.6"></script> <script> //the goal is not to use the following variables more. var g_LangName = 'en-US'; baseUrl = "/"; dateFormat = "M/d/yyyy"; //it does not known if there is any use in this variable. //alternative WebConfig.stationInfoDateFormat = "M/D/YYYY"; WebConfig.langName = 'en-US'; WebConfig.baseUrl = "/"; </script> <script src="/Scripts/utils/utils.js"></script> <script src="/Scripts/utils/jsUtils.js?v=2.1.6"></script> <script src="/Scripts/utils/jqueryExtension.js?v=2.1.6"></script> <script src="/Scripts/utils/Kendo/KendoConfig.js?v=2.1.6"></script> <script src="/Scripts/utils/Kendo/kendoDirectionUtils.js?v=2.1.6"></script> <script src="/Scripts/utils/Kendo/kendoUtils.js?v=2.1.6"></script> <script src="/Scripts/utils/Kendo/KendoCustomWindowFactory.js?v=2.1.6"></script> <script src="/Scripts/utils/IdGenerator.js?v=2.1.6"></script> <script src="/Scripts/utils/HtmlUtils.js?v=2.1.6"></script> <script src="/Scripts/utils/modelUtils.js?v=2.1.6"></script> <script src="/Scripts/utils/ajaxLoader.js?v=2.1.6"></script> <script src="/Scripts/utils/graphExporter.js?v=2.1.6"></script> <script src="/Scripts/utils/mobile-detect.min.js"></script> <script src="/Scripts/utils/deviceUtils.js?v=2.1.6"></script> <script src="/Scripts/jquery.validate.min.js?v=2.1.6" type="text/javascript"></script> <link href="/Style/style_using_sass-ltr.css" rel="stylesheet" /> <meta name="twitter:widgets:csp" content="on" /> <link rel="stylesheet" href="/css1/bootstrap.css?v=2.1.6" type="text/css" /> <link rel="stylesheet" href="/css1/icons-retina.css?v=2.1.6" type="text/css" /> <link rel="stylesheet" href="/css1/common.css?v=2.1.6" type="text/css" /> <link rel="stylesheet" href="/css1/datepicker.css?v=2.1.6" type="text/css" /> <link href="/assets/css/jquery.mCustomScrollbar.css?v=2.1.6" rel="stylesheet" type="text/css" /> <link href="/assets/css/font-awesome.min.css?v=2.1.6" rel="stylesheet" type="text/css" /> <link href="//fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet" type="text/css" /> <link href="//fonts.googleapis.com/css?family=Raleway:400,300,700,900" rel="stylesheet" type="text/css" /> <link href="/assets/css/main.css?v=2.1.6" rel="stylesheet" type="text/css" /> <link href="/assets/css/prism.css?v=2.1.6" rel="stylesheet" type="text/css" /> <script src="/Scripts/kendo/cultures/kendo.culture.en-US.min.js"></script> <script> fullPath = "/"; kendo.culture("en-US"); </script> <style> .logOnOfli a{ color:rgb(56,84,121); font-size: 13px; font-weight: normal; text-decoration: underline; } table.tablesorter thead tr th, table.tablesorter tfoot tr th{ background-color: rgb(230, 238, 238) !important; font-family:Arial !important; font-size:14px !important; font-weight:bold !important; } table.tablesorter tbody td{ background-color: rgb(255, 255, 255) !important; font-family:Arial !important; font-size:14px !important; font-weight:normal !important; } ul#menu li a, ul#menu li ul li a,.languageMenu a,#menu li div{ font-family:Arial !important; font-size:16px !important; font-weight:normal !important; color:#fff; } #topPageTitle{ background-color: rgba(57, 78, 95, 0.48) !important; } .titlePageH1 h1{ font-family:Arial !important; font-size:25px !important; font-weight:bold !important; } #content h1{ font-family:Arial !important; font-size:25px !important; font-weight:bold !important; color:rgb(51, 51, 51) !important; background:rgba(57, 78, 95, 0.48) !important; margin-top:0px !important; } body{ width:100% !important; } #Linkimg { background: transparent; border-radius: 0; cursor: pointer; font-size: 40px; height: 26px; margin-left: 0px; padding: 6px 7px; position: absolute; text-align: center; vertical-align: middle; width: 9px; top: 0; left: 0; z-index: 9999999999999; color: white; } #agency { float: left; } #LinksDiv { float: right; background: #394e5f !important; } /*#Links{ overflow: hidden; }*/ #navheader { /* background-color: #fff; */ font-size: 85%; text-align: right; margin: 0 auto; padding: 4px 4px 3px 3px; border-top: none; border-right: none; border-bottom: none; border-left: none; background: none; } #masthead { background: #394e5f; width: 100%; min-height: 47px; /*overflow:hidden;*/ } .theList li{ background: rgb(0, 136, 204); border:none; border-radius:6px; color:#fff; margin: 3px; padding: 10px; } #ListMeterology li.IndexClicked,.theList input.IndexClicked,.theList li:hover{ background: #394e5f; color:#fff; } .theList input{ background: rgb(0, 136, 204); border:none; border-radius:0px; color:#fff; margin: 3px 0px; padding: 10px; } .theList input:hover{ background: #394e5f; border:none; border-radius:0px; color:#fff; } ul#menu { height: 37px; background: rgb(0, 136, 204); } ul#menu li a, .nameMenu { box-shadow: none; display: list-item; font-size: 16px; line-height: 37px; margin-bottom: 1px; margin-top: 1px; text-decoration: none; text-shadow: none; vertical-align: middle; } ul#menu ul { background: rgb(0, 136, 204); min-width: 232px; } ul.slimmenu li ul li{ background: rgb(0, 136, 204); cursor: pointer; } ul#menu li.menuLi a:hover,ul#menu ul li.menuLi a:hover,ul#menu li.menuLi .nameMenu:hover{ background: #394e5f; color: #fff; } ul#menu ul li { width: 100%; /*min-width: 290px;*/ display: inline-table; border-bottom: none; border-top: none; } ul#menu li.selected ul li a { background-color: transparent; box-shadow: 0px 0px 2px black; } ul#menu li.selected ul li a:hover { background-color: #394e5f; } ul#menu li.selected a,ul#menu li.selected a, ul#menu li.selected .nameMenu{ background-color: #394e5f; box-shadow: 0px 0px 2px black; color:#fff; } ul#menu li.selected ul li { background:rgb(0, 136, 204); } #lang { margin-left: 0px; max-width: 92px; float: left; margin-top: 5px; } .logOnOf { margin-right: 5px; } body { margin: 0; } #agency { font-size: 100%; padding: 0.6em 0 0.2em; } .ListOfMonitors .menu-collapser { width: 100%; z-index: 900000000000; color: black; } #childPageLink{ background: rgba(187, 204, 187, 0); } #childPageLink a{ color: rgba(0, 0, 0, 1); } </style> </head> <body> <script> try{ var _gaq = _gaq || []; //added for dnr.wi.gov cross-domain tracking _gaq.push(['dnr._setAccount', 'UA-9064896-1']); _gaq.push(['dnr._setDomainName','temp.airquality.wi.gov']); //not sure this will work since this is not a valid subdomain for DNR _gaq.push(['dnr._setAllowLinker', true]); _gaq.push(['dnr._trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); } catch(err) { alert('Error in processing GATC'); } </script> <div id="TopPage"> <div id="Linkimg">-</div> <div id="Links" style="background:#394e5f !important;"> <div id="LinksDiv"> <div class="link"> <a href="https://dnr.wi.gov/topic/AirQuality/Monitor.html" target="_blank" title="Air Quality Monitoring"> <img class="LinksImg" /> </a> <a href="https://dnr.wi.gov/topic/AirQuality/Monitor.html" target="_blank" title="Air Quality Monitoring" style="font-family:Arial;color:#fff;font-size:12px;font-weight:normal;">Air Quality Monitoring</a> </div> <div class="link"> <a href="https://dnr.wi.gov/topic/AirQuality/Trends.html" target="_blank" title="Air Quality Trends"> <img class="LinksImg" /> </a> <a href="https://dnr.wi.gov/topic/AirQuality/Trends.html" target="_blank" title="Air Quality Trends" style="font-family:Arial;color:#fff;font-size:12px;font-weight:normal;">Air Quality Trends</a> </div> <div class="link"> <a href="https://dnr.wi.gov/topic/AirQuality/Contacts.html" target="_blank" title="Contact Air Program Staff"> <img class="LinksImg" /> </a> <a href="https://dnr.wi.gov/topic/AirQuality/Contacts.html" target="_blank" title="Contact Air Program Staff" style="font-family:Arial;color:#fff;font-size:12px;font-weight:normal;">Contact Air Program Staff</a> </div> <div class="link"> <a href="https://dnr.wi.gov" target="_blank" title="Back to DNR website"> <img class="LinksImg" /> </a> <a href="https://dnr.wi.gov" target="_blank" title="Back to DNR website" style="font-family:Arial;color:#fff;font-size:12px;font-weight:normal;">dnr.wi.gov</a> </div> <div class="link"> <a href="https://www.wisconsin.gov/" target="_blank" title="Wisconsin.gov"> <img class="LinksImg" /> </a> <a href="https://www.wisconsin.gov/" target="_blank" title="Wisconsin.gov" style="font-family:Arial;color:#fff;font-size:12px;font-weight:normal;">Wisconsin.gov</a> </div> </div> </div> <script> $("#Linkimg").click(function () { $("#Links").toggle(300, function () { if ($("#Links").css("display") == "block") { $("#Linkimg").css({ "font-size": "29px", "margin-top": "0px", "color": '#fff' }); $("#Linkimg").text("-"); } else { $("#Linkimg").text("+"); $("#Linkimg").css({ "font-size": "29px", "margin-top": "18px", "color": 'rgba(0, 0, 0, 1)' }); } }); }); function closeDiv(a) { $("#Links").toggle(300, function () { }); } </script> <div id="BackGroundappheader"></div> <div id="appheader" style="background: rgba(187, 204, 187, 0); display:block"> <div class="EnvelopeDiv" style="max-width:100%"> <div id="LogoSystemNameLeftDiv"> <a href="" target="_blank"> <img id="LogoSystemNameLeft" src="/Images/dnr-air.jpg" /> </a> </div> <div id="title"> <a href="/" style="font-family:Aharoni !important;font-size:20px ;color:rgba(0, 0, 0, 1) !important;font-weight:bold ;">SystemTitle</a> </div> <div id="LogoSystemNameRightDiv"> </div> <div style="clear:both"></div> </div> </div> <div id="Noise_Monitoring_Program"> <div>Noise monitoring program</div> </div> <div class="BorderClass BeforeMasthead"></div> <div id="masthead" style="background:rgb(0, 136, 204);position: relative;overflow hidden;"> <div id="navheader"> <ul id="menu" class="slimmenu"> <li class="menuLi selected"> <a href="/home/map" class=" access_focusable" tabindex="0"> Interactive Maps </a> </li> <li class="menuLi HaveChild "> <div class="nameMenu menuItemWithChilds access_focusable" tabindex="0">Reports</div> <ul class="subMenuParent"> <li><a href="/Report/HourlyReports">Hourly Monitoring Data</a> </li> <li><a href="/report/SingleStationReport">Station Report</a> </li> <li><a href="/Report/stationreport">Multistation Report</a> </li> <li><a href="/report/MonitorReport">Monitor Report</a> </li> <li><a href="/Report/StationsIndexReport">Index Report</a> </li> <li><a href="/Report/AQI_CurrentHourSummary">Current AQI Summary</a> </li> <li><a href="/Report/HighestAQI">Highest AQI</a> </li> <li><a href="/Report/HighestOzone">Highest Ozone</a> </li> <li><a href="/Report/HighestPM25">Highest PM2.5</a> </li> <li><a href="/Report/EightHourlyReports">8-hr Ozone Summary</a> </li> <li><a href="/Report/Hr24PM25Summary">24-hr PM2.5 Summary</a> </li> <li><a href="/Report/AdvanceReportsMenu">Advanced Reports Menu</a> </li> </ul> </li> <li class="menuLi "> <a href="/home/text/81" class=" access_focusable" tabindex="0"> Information </a> </li> <li class="menuLi "> <a href="/home/text/324" class=" access_focusable" tabindex="0"> Forecast </a> </li> <li class="menuLi "> <a href="/home/text/538" class=" access_focusable" tabindex="0"> Air Quality Index (AQI) </a> </li> </ul> <div style="clear: both"> </div> <div style="clear: both"></div> </div> <script> /* adding supporting for navigation to sub menus via keyboard (Tab key) */ $('.menuItemWithChilds').focusin(function (e) { $(this).trigger("mouseenter") }); $(".menuItemWithChilds").shiftTabFocusOut(function (e) { let this_ = e; //debugger $(this_).trigger("mouseout") }); //not working //$("#menu .subMenuParent li:last-child > a").tabFocusOut(function (e) { // $(this).closest(".subMenuParent").siblings('.menuItemWithChilds').trigger("mouseout") //}); //instead $("#menu .subMenuParent li:last-child > a").bind('keydown', function (e) { if (!e.shiftKey && e.keyCode == 9) { $(this).closest(".subMenuParent").siblings('.menuItemWithChilds').trigger("mouseout") } }); $("#menu .subMenuParent li:first-child > a").shiftTabFocusOut(function (e) { //debugger let this_ = e; $(this_).closest(".subMenuParent").siblings('.menuItemWithChilds').trigger("mouseout") }); ///////////////////////////////////////////////////////////////////////////////// $("#LinksDiv").slimmenu( { style: 'font-family:Arial !important;color:#fff !important', resizewidth: '800', collapserTitle: 'Links menu', animspeed: 'medium', easingeffect: null, indentchildren: true, childrenindenter: ' ' }); $("#menu").slimmenu( { style: 'font-family:Arial !important;color:#fff !important', resizewidth: '800', collapserTitle: 'Toptitle', animspeed: 'medium', easingeffect: null, indentchildren: false, childrenindenter: ' ' }); </script> <style> .languageMenu { padding: 6px !important; } #languageDropDownList { height: 28px; width: 150px; border: none; } </style> <script> let langugePlace = "0"; let doesShowLang = "False".toLowerCase() == "true" ? true : false; let languageMenu = $(".languageMenu") if (doesShowLang && langugePlace == 1) { $(".EnvelopeDiv").append(languageMenu) } </script> <script> $('#languageDropDownList').on('change', function () { changeLeng(this.value) }) </script> </div> <div class="BorderClass AfterMasthead"></div> </div> <div class="page"> <div id="main" class="mainMap"> <div id="CoverPathLinkWithUserName"> <div id="pathLinks"> <div class="LinkName"><a href="/">Home</a><span><img src="/img/seperator.png" class="imageseperetor"></span></div> <div class="LinkName"> <a href="/home/map">Interactive Maps</a> </div> <div class="clearBoth" style="clear:both"></div> </div> <div id="UserName"> </div> </div> <script src="/Scripts/moment.min.js?v=2.1.6"></script> <script src="/scripts/fancybox/source/jquery.fancybox.pack.js?v=2.1.6" type="text/javascript"></script> <link href="/scripts/fancybox/source/jquery.fancybox1.css?v=2.1.6" rel="stylesheet" type="text/css" /> <script> $(document).ready(function () { $(".ListSelected").attr('selected', 'selected'); var tempHeight= $("#indexes").height()/2; $(".IndexListName").css("margin-top",tempHeight+"px"); if("True"=="True") { $("#ButtonsIndexesArea").css("width","auto"); } else{ $("#ButtonsIndexesArea").css("width","50px"); $("#ButtonsIndexesArea span").css("border-color","rgba(97, 93, 93,0) rgba(97, 93, 93, 1) rgba(97, 93, 93, 0) rgba(97, 93, 93,0)"); } //-------------------------------------------------------------------------- //Refresh every hour var DateTime=moment(); var NexDateTime= moment(); NexDateTime.seconds(0); NexDateTime.minutes(20); if(DateTime>=NexDateTime) { NexDateTime.hours(NexDateTime.hours()+1); } setTimeout(function(){location.reload(); }, NexDateTime-DateTime); //--------------------------------------------------------------------------- //$(".page").height(parseInt($("body").height())-$("#Linkimg").height()-$("#masthead").height()-$("#appheader").height()-$("#navheader").height()-$("#Advisory").height()-$("footer").height()-40); $("#mapDiv").height(parseInt($(window).height())-$("#navheader").height()-$("#Advisory").height()-$("#ListMonitors").height()-35); var LargeIndex=$("#mapDiv").height()-120; if($(".IndexListDiv").height()>LargeIndex) { $(".IndexListDiv").css({"height":LargeIndex+"px","overflow-y":"scroll"}); } }); </script> <style> .page { margin-left: auto; margin-right: auto; margin-top: 10px; } .onlyTable table td:first-child, .contentPane table td:first-child { text-align: left; } .onlyTable table td .InfoClass, .contentPane table td .InfoClass { float: right; } html { height: 100%; } .RightLeftButtons { width: 100%; } .titlesTable { width: 324px; } .titleTable { width: 62px; } .onlyTable table { width: 324px !important; } .titleTable:first-child { width: 77px; } .titleTable:nth-child(2) { width: 87px; } .titleTable:nth-child(3) { width: 78px; } .titleTable:nth-child(4) { width: 77px; } .close { opacity: 1; } .dijitPopup { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .InfoClass { cursor: pointer; } body { width: 100%; height: 100%; } #mapDiv { width: 100%; min-height: 200px; /*height:100%;*/ } #ListPollutant, #ListMeterology, #List2Index { /*width: 83%;*/ } #footer { margin-top: 0px; } #footer p { margin: 0px; } #buttons { /*background: rgba(255, 255, 255,0.85) none repeat scroll 0 0;*/ color: rgb(255, 255, 255); font-size: 18px; font-weight: bold; height: 42px; margin-top: 8px; width: 14%; /*left: 109px;*/ z-index: 22; position: relative; float: left; } #buttons > select { width: 157px; } footer { /*background: rgba(250, 250, 250, 0.85) none repeat scroll 0 0;*/ bottom: 0; display: block; position: relative; width: 100%; margin: 0; padding-bottom: 0px; } #ButtonsIndexesArea span { cursor: pointer; border-color: rgba(97, 93, 93,0) rgba(97, 93, 93,0) rgba(97, 93, 93, 0) rgba(97, 93, 93,1); border-style: solid; border-width: 7px 8px 5px; display: block; height: 1px; z-index: 2; } select { background-color: rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0); color: rgb(0, 0, 0); width: 220px; } #main { min-height: inherit; } #agZoomToolbar { position: absolute; right: 2px; bottom: 39px; z-index: 99999999999; } .btn { padding: 1px 9px; margin: 4px; } .theList input { padding: 7px; } #ListMonitors { width: 100%; } </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>QueryTask with geometry, results as an InfoWindow onHover</title> <link rel="stylesheet" href="https://js.arcgis.com/3.41/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.41/esri/css/esri.css"> <script src="https://js.arcgis.com/3.41/"></script> <script src="/Scripts/mapscripts.js?v=2.1.6"></script> <script> var isMeterology="False"; var AQILevel='AQI[level]'; </script> <div id="ListMonitors"> <div id="buttons" style=display:block> <select> <option id="ListIndex" value="ListIndex" class="listSelect ListSelected" onclick="displayIndexList($(this).attr('id'))" title="This option will display air quality index values">Air Quality Index</option> <option id="pollutant" value="pollutant" class="listSelect" onclick="displayMonitorListInput($(this).attr('id'),isMeterology)" title="This option will display measured pollutant values">Pollutant</option> <option id="Metrology" value="Metrology" class="listSelect" onclick="displayMonitorListInput($(this).attr('id'),isMeterology)" title="This option will display measured meteorology values">Meteorology</option> <option id="Stations" value="Stations" class="listSelect1" title="This option will display sites">Sites</option> </select> </div> <div id="pollutantList" class="ListOfMonitors"> <div class="coverMonitors"> <div class="RightLeftButtons"> <img src="/img/Arrow_Left.png" class="LeftArrow" onclick="leftClick('ListPollutant')" /> <img src="/img/Arrow_Right.png" class="RightArrow" onclick="RightClick('ListPollutant')" /> </div> <div id="ListPollutant" class="theList"> </div> </div> </div> <div id="MetrologyList" class="ListOfMonitors"> <div class="coverMonitors"> <div class="RightLeftButtons"> <img src="/img/Arrow_Left.png" class="LeftArrow" onclick="leftClick('ListMeterology')" /> <img src="/img/Arrow_Right.png" class="RightArrow" onclick="RightClick('ListMeterology')" /> </div> <div id="ListMeterology" class="theList"> </div> </div> </div> <div id="indexList" class="ListOfMonitors"><b><i>Thank you for your patience. The data on this map may take 20 seconds to load.</i></b><br> <div class="coverMonitors"> <div class="RightLeftButtons"> <img src="/img/Arrow_Left.png" class="LeftArrow" onclick="leftClick('List2Index')" /> <img src="/img/Arrow_Right.png" class="RightArrow" onclick="RightClick('List2Index')" /> </div> <div id="List2Index" class="theList"> <input type="button" value="ALL" id="0" data-val="All" class="ListIndex IndexClicked" title="All Sites" /> <input type="button" data-id="2" value="OZONE" id="2" data-val="O3" class="ListIndex " title="OZONE" /> <input type="button" data-id="21" value="PM2.5" id="3" data-val="PM2.5" class="ListIndex " title="PARTICULATE MATTER < 2.5 MICRONS" /> <input type="button" data-id="22" value="PM10" id="4" data-val="PM10" class="ListIndex " title="PARTICULATE MATTER < 10 MICRONS" /> <input type="button" data-id="4" value="SO2" id="5" data-val="SO2" class="ListIndex " title="SULFUR DIOXIDE" /> <input type="button" data-id="1" value="NO2" id="6" data-val="NO2" class="ListIndex " title="NITROGEN DIOXIDE" /> <input type="button" data-id="3" value="CO" id="7" data-val="CO" class="ListIndex LastElem" title="CARBON MONOXIDE" /> <div style="clear:both"></div> <script> $("#indexList:last-child").addClass("last-child"); $.each($(".theList"),function(index,elem){ var c=0; $.each($(elem).children(),function(key,val){ c+=$(val).width(); }) if($(elem).width()<c) { $(elem).css('overflow-y', 'auto'); } }) //if ($("#List2Index input").length > 8) { // $('#List2Index').css('overflow-y', 'scroll'); //} //else { // $('#List2Index').css('overflow-y', 'hidden'); //} </script> </div> </div> </div> <div style="clear:both"></div> </div> <div style="clear:both"></div> <div id="mapDiv"> <span id="scale" style="position: absolute; left: 30px; bottom: 30px; z-index: 100; color: yellow; font-size: 150%;"></span><span id="visibleLayer" style="position: absolute; left: 30px; bottom: 5px; z-index: 100; color: yellow; font-size: 150%;"> </span> <div id="agZoomToolbar" class="btn-toolbal"> <div class="btn-group"> <button id="agZoomIn-button" class="btn btn-primary"> <span class="glyphicon glyphicon-plus">+</span> </button> <button id="agZoomOut-button" class="btn btn-primary"> <span class="glyphicon glyphicon-minus">-</span> </button> </div> </div> <div id="originalZoom" style="position: absolute; z-index:2; left: 10px; top: 30px;"><img src="/img/originalZoom.png" title="original zoom" alt="original zoom" style="cursor: pointer; width: 30px;" /></div> <div id="ButtonsIndexesArea" style="position: absolute; top: 100px; z-index: 2; background: rgba(250,250,250,0.4);padding: 3px;width: auto;padding-right: 7px;overflow:hidden"> <div style="text-align:right;"><span></span></div> <div id="indexes" style="z-index:22;"> <div class="IndexListDiv"> <div class="IndexListName" style="float: left; transform: rotate(270deg); font-weight: bold; text-align: center; width: auto; height: 24px; margin-left: -26px; position: absolute;"> <div>AQI[level]</div> </div> <ul id="IndexList"> <li class="liValList"><div class="ColorVal" style="background:#fff" title="No monitor"></div><div class="colorName">No monitor</div><div style="clear:both"></div></li> <li class="liValList"><div class="ColorVal" style="background:#00E400" title="Good"></div><div class="colorName">Good</div><div style="clear:both"></div></li> <li class="liValList"><div class="ColorVal" style="background:#FFFF00" title="Moderate"></div><div class="colorName">Moderate</div><div style="clear:both"></div></li> <li class="liValList"><div class="ColorVal" style="background:#FF7E00" title="Unhealthy for sensitive groups"></div><div class="colorName">Unhealthy for sensitive groups</div><div style="clear:both"></div></li> <li class="liValList"><div class="ColorVal" style="background:#FF0000" title="Unhealthy"></div><div class="colorName">Unhealthy</div><div style="clear:both"></div></li> <li class="liValList"><div class="ColorVal" style="background:#8F3F97" title="Very unhealthy"></div><div class="colorName">Very unhealthy</div><div style="clear:both"></div></li> <li class="liValList"><div class="ColorVal" style="background:#7E0023" title="Hazardous"></div><div class="colorName">Hazardous</div><div style="clear:both"></div></li> <li class="liValList"><div class="ColorVal" style="background:#808080" title="No data"></div><div class="colorName">No data</div><div style="clear:both"></div></li> </ul> </div> </div> <div style="clear:both"></div> </div> <div id='StationDiv'></div> <div id='infoDiv'></div> <div id="windowcontainer"></div> <div id="LoadingImage" style="display: none;background:transparent"> <img src="/img/loading (1).gif" style="max-width:219px;" /> </div> </div> <script> var PollutantOrder={ "mainMap": { "3": { "Area": "pollutant", "Place": 6 , "Name": "CO"}, "1": { "Area": "pollutant", "Place": 5 , "Name": "NO2"}, "2": { "Area": "pollutant", "Place": 0 }, "4": { "Area": "pollutant", "Place": 4 , "Name": "SO2" }, "21": { "Area": "pollutant", "Place": 1 , "Name": "PM2.5" }, "22": { "Area": "pollutant", "Place": 2 , "Name": "PM10" }, "36": { "Area": "Metrology", "Place": 1 }, "37": { "Area": "Metrology", "Place": 2 , "Name": "PRECIPITATION"}, "18": { "Area": "Metrology", "Place": 3 }, "38": { "Area": "Metrology", "Place": 4 }, "19": { "Area": "Metrology", "Place": 5 , "Name": "WIND"}, "15": { "Area": "Metrology", "Place": 6 , "Name": "TEMPERATURE"}, }, "Hydrology": { "86": { "Area": "parameter", "Place": 0 }, "87": { "Area": "parameter", "Place": 1 }, "88": { "Area": "parameter", "Place": 3 }, "89": { "Area": "parameter", "Place": 2 }, "90": { "Area": "parameter", "Place": 4 }, "91": { "Area": "parameter", "Place": 5 }, "92": { "Area": "parameter", "Place": 6 }, "93": { "Area": "parameter", "Place": 7 }, "94": { "Area": "parameter", "Place": 8 }, }, "map24": { "51": { "Area": "Metrology", "Place": 0 }, "48": { "Area": "Metrology", "Place": 3 }, "45": { "Area": "Metrology", "Place": 7 }, "46": { "Area": "Metrology", "Place": 7 }, "37": { "Area": "Metrology", "Place": 1 }, "57": { "Area": "Metrology", "Place": 2, "Name": "Temp 2m" }, "58": { "Area": "Metrology", "Place": 6 }, "55": { "Area": "Metrology", "Place": 5, "Name": "RH" }, "38": { "Area": "Metrology", "Place": 4, "Name": "קרינה מצטברת יומית" } }, "KmlMap": { "Temp": { "Name": "Temp", "Place": 5, "Units": "ºC", "GraphSettings": { "Period": "Hourly", "Type": "line", "style": "step" } }, "Ws": { "Name": "Ws", "Units": "מ/ש", "Place": 7, "GraphSettings": { "Period": "Hourly", "Type": "line", "style": "" } }, "Ws_gust": { "Units": "מ/ש", "Name": "Ws_gust", "Place": 8, "GraphSettings": { "Period": "Hourly", "Type": "line", "style": "" } }, "Rain": { "Name": "Rain", "Units": "mm", "Place": 3, "GraphSettings": { "Period": "Hourly", "Type": "line", "style": "step" } }, "Etp": { "Name": "Etp", "Units": "mm", "Place": 0, "GraphSettings": { "Period": "daily", "Type": "column", "style": "" } }, "Rh": { "Name": "Rh", "Units": "%", "Place": 4, "GraphSettings": { "Period": "Hourly", "Type": "line", "style": "" } }, "Net_Radiation": { "Name": "Net_Radiation", "Units": "מגאול/מ²", "Place": 2, "GraphSettings": { "Period": "daily", "Type": "column", "style": "" } }, "Hi": { "Place": 1, "Name": "Hi", "Units": "ºC", "GraphSettings": { "Period": "Hourly", "Type": "line", "style": "" } }, "Thi": { "Place": 6, "Name": "Thi", "Units": "ºF", "GraphSettings": { "Period": "Hourly", "Type": "line", "style": "" } }, "Total_Cloud_Cover": { "Place": 7, "Units": "אחוז כיסוי", "Name": "Total_Cloud_Cover", "GraphSettings": { "Period": "Hourly", "Type": "line", "style": "" } } } } .mainMap; var PollutantConections=[{ "Id": 19, "level": null, "map": false, "ConectionList": [ { "PollutantId": 20, "PollutantName": "aa", "level": null, "def": false,asix: "fdsf" }, { "PollutantId": 19, "PollutantName": "bb", "level": null, "def": false ,asix: "cc"} ] }] ; var showCounty=1; $(".listSelect").click(function(){ if($(".ListSelected").attr("id")=="ListIndex") { $("#IndexList").empty(); $('#indexes').css("display","block"); //$("#IndexList").clear(); var IndexListJson = [{"ColorString":"Good","ColorValue":"#00E400","Range":0.000000,"RangeUpper":51.000000},{"ColorString":"Moderate","ColorValue":"#FFFF00","Range":51.000000,"RangeUpper":101.000000},{"ColorString":"Unhealthy for sensitive groups","ColorValue":"#FF7E00","Range":101.000000,"RangeUpper":151.000000},{"ColorString":"Unhealthy","ColorValue":"#FF0000","Range":151.000000,"RangeUpper":201.000000},{"ColorString":"Very unhealthy","ColorValue":"#8F3F97","Range":201.000000,"RangeUpper":301.000000},{"ColorString":"Hazardous","ColorValue":"#7E0023","Range":301.000000,"RangeUpper":500.000000},{"ColorString":"No data","ColorValue":"#808080","Range":500.000000,"RangeUpper":500.000000}]; $("#IndexList").append('<li class="liValList"><div class="ColorVal" style="background:#fff" title="No monitor"></div><div class="colorName">No monitor</div><div style="clear:both"></div></li>'); $.each(IndexListJson,function(i,e) { $("#IndexList").append(' <li class="liValList"><div class="ColorVal" style="background:'+e.ColorValue+'" title="'+e.ColorString+'"></div><div class="colorName">'+e.ColorString+'</div><div style="clear:both"></div></li>'); //$("#IndexList").append('<li class="liValList"><div class="ColorVal" style="background:'+e.ColorValue+'"></div><div class="colorName">'+e.ColorString+'</div></li>'); }); //$('#indexes').css("padding","10px"); } else{ cahngeIndexList(); } if('False'!="True"){ $("#buttons").css("display","block"); } }); $("#buttons select").on("change",function(){ if(this.value=="ListIndex") { displayIndexList(this.value); }else{ displayMonitorListInput(this.value,'False'); } if('False'!="True"){ $('#buttons').css("display","block"); } if($(".ListSelected").attr("id")=="ListIndex") { $("#IndexList").empty(); $('#indexes').css("display","block"); $('#ButtonsIndexesArea').css("display","block"); //$("#IndexList").clear(); var IndexListJson = [{"ColorString":"Good","ColorValue":"#00E400","Range":0.000000,"RangeUpper":51.000000},{"ColorString":"Moderate","ColorValue":"#FFFF00","Range":51.000000,"RangeUpper":101.000000},{"ColorString":"Unhealthy for sensitive groups","ColorValue":"#FF7E00","Range":101.000000,"RangeUpper":151.000000},{"ColorString":"Unhealthy","ColorValue":"#FF0000","Range":151.000000,"RangeUpper":201.000000},{"ColorString":"Very unhealthy","ColorValue":"#8F3F97","Range":201.000000,"RangeUpper":301.000000},{"ColorString":"Hazardous","ColorValue":"#7E0023","Range":301.000000,"RangeUpper":500.000000},{"ColorString":"No data","ColorValue":"#808080","Range":500.000000,"RangeUpper":500.000000}]; $("#IndexList").append('<li class="liValList"><div class="ColorVal" style="background:#fff" title="No monitor"></div><div class="colorName">No monitor</div><div style="clear:both"></div></li>'); $.each(IndexListJson,function(i,e) { $("#IndexList").append(' <li class="liValList"><div class="ColorVal" style="background:'+e.ColorValue+'" title="'+e.ColorString+'"></div><div class="colorName">'+e.ColorString+'</div><div style="clear:both"></div></li>'); //$("#IndexList").append('<li class="liValList"><div class="ColorVal" style="background:'+e.ColorValue+'"></div><div class="colorName">'+e.ColorString+'</div></li>'); }); //$('#indexes').css("padding","10px"); var tempHeight= $("#indexes").height()/2; $(".IndexListName").css("margin-top",tempHeight+"px"); } else if($(".ListSelected").attr("id")=="Stations"){ $(".listSelect1").click(); cahngeIndexList(); $(".IndexListName").html(""); var dss1 = $(".IndexListName").width() / 2.6; $(".IndexListName").css("margin-left", "-" + dss1 + "px"); //$('#indexes').css("display","none"); //$('#ButtonsIndexesArea').css("display","none"); } else{ cahngeIndexList(); } $.each($(".theList"),function(index,elem){ var c=0; $.each($(elem).children(),function(key,val){ c+=$(val).width(); }) if($(elem).width()<c) { $(elem).css('overflow-y', 'auto'); } }) }); function b(){ $('option#ListIndex').css("display","none"); $('option#pollutant').css("display","none"); $('#ListMonitors #buttons').children().removeAttr("selected"); $('.ListSelected').removeClass("ListSelected"); $("#Metrology").attr("selected","selected").addClass("ListSelected"); $("#Metrology").click(); setTimeout(function(){ $("#MetrologyList input#0").click()},500); } // Load the Visualization API and the piechart package. //google.load('visualization', '1', { 'packages': ['corechart'] }); $("#mapDiv").height(parseInt($(window).height())-$("#navheader").height()-$("#Advisory").height()-$("#ListMonitors").height()-35); var map; var keys=[]; var initColor; var stations=[]; var iconPath; var infoTemplate; var hashMonitorTable={}; var hashGroupTable={}; var hashColorValueIndexTable={}; var highlightSymbol; var countiesGraphicsLayer1; var countiesGraphicsLayer; var visibleLayers = 3; var history1; var flagmeterology=false; var PollutantDescrip; var count1 = 0; var count2 = 0; require([ "esri/map", "esri/dijit/BasemapGallery", "esri/graphic", "esri/InfoTemplate", "esri/SpatialReference", "esri/geometry/Extent", "esri/layers/GraphicsLayer", "dojo/_base/array", "dojo/dom-style", "dojo/query", "esri/geometry/Point", "esri/geometry/Polygon", "esri/symbols/TextSymbol", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/PictureMarkerSymbol", "esri/tasks/query", "esri/tasks/QueryTask", "esri/Color", "dijit/TooltipDialog", "esri/lang", "dijit/popup", "dojo/dom", "esri/graphicsUtils" ], function ( Map, BasemapGallery, Graphic, InfoTemplate, SpatialReference, Extent, GraphicsLayer, arrayUtils, domStyle, query, Point,Polygon, TextSymbol, SimpleMarkerSymbol, SimpleFillSymbol, SimpleLineSymbol,PictureMarkerSymbol, Query, QueryTask, Color, TooltipDialog, esriLang, dijitPopup, dom,graphicsUtils ) { map = new Map("mapDiv", { basemap: getBasemap(), center: [-89.559761, 44.558757], zoom: 7, smartNavigation: false, KeyboardNavigation:false, slider: false, autoResize:true, isZoomSlider:true, sliderStyle: "large", showAttribution: true, sliderPosition: "bottom-right", sliderOrientation: "horizontal" }); if($(window).width()<520) { map.setZoom(6); }; var basemapGallery = new BasemapGallery({ showArcGISBasemaps: true, map: map }, "GalleryMap"); basemapGallery.startup(); $("#agZoomIn-button").click(function(){ map.setLevel(map.getLevel()+1); }) $("#agZoomOut-button").click(function(){ map.setLevel(map.getLevel()-1); }) basemapGallery.on("error", function (msg) { console.log("basemap gallery error: ", msg); }); $("#GalleryMap").append(" <div class=\"closeMapGallery\" style=\"cursor: pointer;position: absolute; top: 0px; left: 0px; background: url('/Scripts/fancybox/source/fancybox_sprite.png') repeat scroll 0% 0% transparent; width: 35px; height: 34px;display:none\"></div>") map.on("load", LoadMap); if('False'=="True"){ $(document).bind('function_setUpQuery_complete', b); // b(); } function getBasemap() { let basemapRet = "streets"; if ("false" == "true") { if(AccessibilityManager.isGrayscale) { basemapRet = "gray"; } else if (AccessibilityManager.isContrast) { basemapRet = basemapRet == "satellite" ? "streets" : "satellite"; //alternative map as plaster. } } return basemapRet; } function LoadMap() { var documentwidth = $(document).width(); var documentHeight = $("#mapDiv").height(); if (parseInt(documentwidth) > parseInt(784)) { map.infoWindow.resize(380, 280); } else { if (documentwidth > 380) documentwidth = 380; if (documentHeight > 380) documentHeight = 380; map.infoWindow.resize(parseInt(documentwidth - 10), documentHeight - 100); } //map.disableMapNavigation(); map.disableKeyboardNavigation(); dialog = new TooltipDialog({ id: "tooltipDialog", style: "position: absolute; width: auto; font: normal normal normal 10pt Helvetica;z-index:100" }); dialog.startup(); //or can use the callback option in the queryTask.execute method. var queryTaskForArcGis = "https://airquality.wi.gov/usercontent/counties?where=STATE_NAME+%3D+%27Wisconsin%27&text=&objectIds=&time=&timeRelation=esriTimeRelationOverlaps&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&distance=&units=esriSRUnit_Foot&relationParam=&outFields=NAME&returnGeometry=true&returnTrueCurves=false&maxAllowableOffset=&geometryPrecision=&outSR=&havingClause=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&historicMoment=&returnDistinctValues=false&resultOffset=&resultRecordCount=&returnExtentOnly=false&sqlFormat=none&datumTransformation=&parameterValues=&rangeValues=&quantizationParameters=&featureEncoding=esriDefault&f=pjson"; var whereQueryForArcGis = "STATE_NAME='Wisconsin'"; var outFieldsForArcGis = "NAME"; if (queryTaskForArcGis != "" && queryTaskForArcGis != null) { setUpQuery(queryTaskForArcGis, whereQueryForArcGis, outFieldsForArcGis); } else { var dataMap = []; // var points = [[19.82, 41.33], [16.37, 48.21], [18.38, 43.85], [23.32, 42.7], [16, 45.8], [19.08, 47.5], [12.48, 41.9], [21.17, 42.67], [21.43, 42], [19.26, 42.44], [26.1, 44.43], [12.45, 43.93], [20.47, 44.82], [17.12, 48.15], [14.51, 46.06], [12.45, 41.9]]; // iconPath = "M24.0,2.199C11.9595,2.199,2.199,11.9595,2.199,24.0c0.0,12.0405,9.7605,21.801,21.801,21.801c12.0405,0.0,21.801-9.7605,21.801-21.801C45.801,11.9595,36.0405,2.199,24.0,2.199zM31.0935,11.0625c1.401,0.0,2.532,2.2245,2.532,4.968S32.4915,21.0,31.0935,21.0c-1.398,0.0-2.532-2.2245-2.532-4.968S29.697,11.0625,31.0935,11.0625zM16.656,11.0625c1.398,0.0,2.532,2.2245,2.532,4.968S18.0555,21.0,16.656,21.0s-2.532-2.2245-2.532-4.968S15.258,11.0625,16.656,11.0625zM24.0315,39.0c-4.3095,0.0-8.3445-2.6355-11.8185-7.2165c3.5955,2.346,7.5315,3.654,11.661,3.654c4.3845,0.0,8.5515-1.47,12.3225-4.101C32.649,36.198,28.485,39.0,24.0315,39.0z"; initColor = "#0088CC"; var dataMap1 = []; GetAllStationsFun(event); } } function setUpQuery(queryTaskForArcGis, whereQueryForArcGis, outFieldsForArcGis) { map.hideZoomSlider(); var queryTask = new QueryTask(queryTaskForArcGis); //build query filter //$("#LoadImage").fancybox({ // 'closeBtn': false, // helpers : { // overlay : {closeClick: false} // prevents closing when clicking OUTSIDE fancybox // } //}).trigger('click'); var query = new Query(); query.returnGeometry = true; query.outFields = [outFieldsForArcGis]; query.outSpatialReference = { "wkid": 102100 }; query.where = whereQueryForArcGis; queryTask.on("complete", function (event) { var dataMap = []; // var points = [[19.82, 41.33], [16.37, 48.21], [18.38, 43.85], [23.32, 42.7], [16, 45.8], [19.08, 47.5], [12.48, 41.9], [21.17, 42.67], [21.43, 42], [19.26, 42.44], [26.1, 44.43], [12.45, 43.93], [20.47, 44.82], [17.12, 48.15], [14.51, 46.06], [12.45, 41.9]]; // iconPath = "M24.0,2.199C11.9595,2.199,2.199,11.9595,2.199,24.0c0.0,12.0405,9.7605,21.801,21.801,21.801c12.0405,0.0,21.801-9.7605,21.801-21.801C45.801,11.9595,36.0405,2.199,24.0,2.199zM31.0935,11.0625c1.401,0.0,2.532,2.2245,2.532,4.968S32.4915,21.0,31.0935,21.0c-1.398,0.0-2.532-2.2245-2.532-4.968S29.697,11.0625,31.0935,11.0625zM16.656,11.0625c1.398,0.0,2.532,2.2245,2.532,4.968S18.0555,21.0,16.656,21.0s-2.532-2.2245-2.532-4.968S15.258,11.0625,16.656,11.0625zM24.0315,39.0c-4.3095,0.0-8.3445-2.6355-11.8185-7.2165c3.5955,2.346,7.5315,3.654,11.661,3.654c4.3845,0.0,8.5515-1.47,12.3225-4.101C32.649,36.198,28.485,39.0,24.0315,39.0z"; initColor = "#0088CC"; var dataMap1 = []; GetAllStationsFun(event); }); queryTask.execute(query); } $("#originalZoom").on("click",function(){ var documentwidth=$(document).width(); if(parseInt(documentwidth)>parseInt(784)) { map.centerAndZoom([-89.559761, 44.558757],7); } else{ var extent; if(showCounty) { var AreaLayer=map.getLayer("Area"); extent=graphicsUtils.graphicsExtent(AreaLayer.graphics); } else{ var stationLayer=map.getLayer("stations"); extent=graphicsUtils.graphicsExtent(stationLayer.graphics); } map.setExtent(extent); } //var AreaLayer=map.getLayer("Area"); }) //map zoom change map.on("extent-change", changeScale); function changeScale(evt) { var stationLayer=map.getLayer("stations"); var AreaLayer=map.getLayer("Area"); try { if (evt.lod.level <= 7) { if(showCounty) { $("#stations_layer").css("visibility", "hidden"); AreaLayer.enableMouseEvents(); AreaLayer.setOpacity(0.8); } else{ $("#stations_layer").css("visibility", "visible"); } closeDialog(); } else { if(showCounty) { AreaLayer.disableMouseEvents(); AreaLayer.setOpacity(0.3); $("#Area_layer").css("visibility", "visible"); } $("#stations_layer").css("visibility", "visible"); closeDialog(); } } catch (e) { if(showCounty) { $("#Area_layer").css("visibility", "visible"); $("#stations_layer").css("visibility", "hidden"); } else{ $("#stations_layer").css("visibility", "visible"); } closeDialog(); }; } function changeScale1(evt) { var stationLayer=map.getLayer("stations"); var AreaLayer=map.getLayer("Area"); try { if (evt <= 7) { if(showCounty) { $("#Area_layer").css("visibility", "visible"); $("#Area2_layer").css("visibility", "visible"); AreaLayer.enableMouseEvents(); AreaLayer.setOpacity(0.8); $("#stations_layer").css("visibility", "hidden"); } else{ $("#stations_layer").css("visibility", "visible"); } closeDialog(); } else { if(showCounty) { AreaLayer.disableMouseEvents(); AreaLayer.setOpacity(0.3); $("#Area_layer").css("visibility", "visible"); } $("#stations_layer").css("visibility", "visible"); closeDialog(); } } catch (e) { if(showCounty) { $("#Area_layer").css("visibility", "visible"); $("#Area2_layer").css("visibility", "visible"); $("#stations_layer").css("visibility", "hidden"); AreaLayer.enableMouseEvents(); AreaLayer.setOpacity(0.8); } else{ $("#stations_layer").css("visibility", "visible"); } closeDialog(); }; } function closeDialog() { try { map.graphics.clear(); dijitPopup.close(dialog); map.infoWindow.hide(); } catch (e) { }; } //get All Stations for the layer Station function GetAllStationsFun(event) { $.getJSON("/ajax/getAllStations") .done(function (Data) { dataMap = Data.slice(); dataMap1 = Data.slice(); $.each(dataMap,function(i,val){ var DicMonitor={}; $.each(val.monitors,function(z,valMon){ var PollutantId=valMon.PollutantID; if(PollutantId!=null) { DicMonitor[PollutantId]=valMon; } }) val.monitors=DicMonitor; }) stations = Data; map.graphics.clear(); highlightSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([125, 125, 125,0])), new Color([125, 125, 125, 0])); var initialize=""; if('False'=="True"){ initialize=false; } else{ initialize=true; } countiesGraphicsLayer1 = layerAdd(dataMap, null,true,initialize); if(showCounty) { countiesGraphicsLayer = CityLayerAdd(event.featureSet.features,initialize); } map.graphics.enableMouseEvents(); changeScale(map.graphics); var count1 = 0; var count2 = 0; var PollutantDescrip="3"; // map.graphics.on("mouse-out", closeDialog); //var hashMonitorTable1=hashMonitorTable.sort(function(obj1, obj2) { // // Ascending: first age less than the previous // return obj1.Description - obj2.Description; //});v //add monitors Button to page var keys=[]; addmonitorsToPage(); $("#ListPollutant :last-child").addClass("LastElem"); $("#ListMeterology :last-child").addClass("LastElem"); $("#pollutantList").append("<select id='ListPollutantSelect' class='PollutantSelect' style='display:none'></select>"); $.each($("#ListPollutant").children(),function(a,b){ $("#ListPollutantSelect").append("<option id="+$(b).attr("id")+" value="+$(b).attr("value")+" data-id="+$(b).attr("data-id")+" data-val="+$(b).attr("data-val")+" class='monitorsSelect'>"+$(b).attr("value")+"</option>") }) $("#MetrologyList").append("<select id='ListMeterologySelect' class='PollutantSelect' style='display:none'></select>"); $.each($("#ListMeterology").children(),function(a,b){ $("#ListMeterologySelect").append("<option id="+$(b).attr("id")+" value="+$(b).attr("value")+" data-id="+$(b).attr("data-id")+" data-val="+$(b).attr("data-val")+" class='monitorsSelect'>"+$(b).attr("value")+"</option>") }) $("#indexList").append("<select id='indexListSelect' class='PollutantSelect' style='display:none'></select>"); $.each($("#List2Index input"),function(a,b){ $("#indexListSelect").append("<option id="+$(b).attr("id")+" value="+$(b).attr("value") +" data-id="+$(b).attr("data-id")+" data-val="+$(b).attr("data-val")+" class='ListIndexSelect'>"+$(b).attr("value")+"</option>") }) $(document).trigger('function_setUpQuery_complete'); $.each($(".theList"),function(index,elem){ var c=0; $.each($(elem).children(),function(key,val){ c+=$(val).width(); }) if($(elem).width()<c) { $(elem).css('overflow-y', 'auto'); } }) //listen for when the mouse-over event fires on the countiesGraphicsLayer //when fired, create a new graphic with the geometry from event.graphic //and add it to the maps graphics layer $(".monitors").on("click", function () { // $('#ListMonitors').css("display", "none"); // $('#ListMonitors').children().css("display", "none"); var t=$(this).parent().parent().children("select"); var s=$(t).children("option[id^='"+$(this).attr("id")+"']"); $(s).attr("selected","selected"); if($(document).width()<785) { //$(this).parent().css("display","none"); } var a = $(this).attr("data-val"); // console.log("yaqui_" + $(this).attr("id")); $(".IndexClicked").removeClass("IndexClicked"); $(this).addClass("IndexClicked"); //countiesGraphicsLayer1= layerAdd(dataMap,a); try{ if(showCounty) { map.removeLayer(map.getLayer("Area")); } map.removeLayer(map.getLayer("stations")); } catch(e){}; countiesGraphicsLayer1 = layerAdd(dataMap, [a], false,null,$(this).attr("data-id")); if(showCounty) { countiesGraphicsLayer = CityLayerAdd(event.featureSet.features); } //changeScale(map.graphics); changeScale1(map.getZoom()); if($(".ListSelected").attr("id")!="ListIndex") { cahngeIndexList(); } if($(this).attr("data-val")=="Flood Forecast") { changeScall($(this).attr("data-val")); } }); $(".PollutantSelect").on("change", function () { var idvar=$(this).attr("id"); var parentId=$(this).parent().attr("id"); var z=$("#"+idvar+" option[value^='"+$(this).val()+"']"); var t; $.each($("#"+parentId+" input[id^='"+$(z).attr("id")+"']"),function(a,r){ if($(r).attr("value")==$(this).val()) { t= r; } }); if($(document).width()<785) { //$(z).parent().css("display","none"); } var a = $(z).attr("data-val"); $(".IndexClicked").removeClass("IndexClicked"); $(t).addClass("IndexClicked"); try{ if(showCounty) { map.removeLayer(map.getLayer("Area")); } map.removeLayer(map.getLayer("stations")); } catch(e){}; if(a=="All") { countiesGraphicsLayer1 = layerAdd(dataMap,null, $(".ListSelected").val()=="ListIndex"); } else{ countiesGraphicsLayer1 = layerAdd(dataMap, [a], $(".ListSelected").val()=="ListIndex",null,$(z).attr("data-id")); } if(showCounty) { countiesGraphicsLayer = CityLayerAdd(event.featureSet.features); } changeScale1(map.getZoom()); if($(".ListSelected").attr("id")!="ListIndex") { cahngeIndexList(); } }); $(".ListIndex").on("click", function () { // $('#ListMonitors').css("display", "none"); // $('#ListMonitors').children().css("display", "none"); var t=$(this).parent().parent().children("select"); var s=$(t).children("option[id^='"+$(this).attr("id")+"']"); $(s).attr("selected","selected"); if($(document).width()<785){ //$(this).parent().css("display","none"); } $(".IndexClicked").removeClass("IndexClicked"); $(this).addClass("IndexClicked"); var a = $(this).attr("data-val"); if(showCounty) { map.removeLayer(map.getLayer("Area")); } map.removeLayer(map.getLayer("stations")); if ($(this).attr("Id") == "0") { countiesGraphicsLayer1 = layerAdd(dataMap, null, true); } else { var tempMon=a.split(" and "); countiesGraphicsLayer1 = layerAdd(dataMap, tempMon, true,null,$(this).attr("data-id")); } if(showCounty) { countiesGraphicsLayer = CityLayerAdd(event.featureSet.features); } //changeScale(map.graphics); changeScale1(map.getZoom()); // console.log($('#ListMonitors #List2Index input')); }); $.fancybox.close(); }) .fail(function (jqxhr, textStatus, error) { var err = textStatus + ", " + error; }); $(".listSelect1").on("click",function(){ $('#ListMonitors').children().css("display", "none"); if('False'!="True"){ $('#buttons').css("display","block"); } $("#IndexList").empty(); $(".ListSelected").removeClass("ListSelected"); $(this).addClass("ListSelected"); if(showCounty) { map.removeLayer(map.getLayer("Area")); } map.removeLayer(map.getLayer("stations")); countiesGraphicsLayer1 = layerAdd(dataMap, "stations", true); if(showCounty) { countiesGraphicsLayer = CityLayerAdd(event.featureSet.features); } changeScale1(map.getZoom()); cahngeIndexList(); }); } var thisScalar=getScaller(); // //Add station layer // function layerAdd(thisdataMap, a, IsIndex,initialize,thisId) { removeLayerById("stations"); var stations = []; var hashtable = []; hashGroupTable = {}; hashMonitorTable=[]; hashColorValueIndexTable={}; var flagoflegendName=false; //-------------------station take--------------------------------------// stations=returnListOfStations(a,thisdataMap,thisId); //if(a==null|| a=="stations"){ // stations = dataMap; //} //else{ // for (i = 0; i < thisdataMap.length; i++) { // if (thisdataMap[i].monitors != null){ // for (j = 0; j < thisdataMap[i].monitors.length; j++) { // try{ // $.each(a,function(k,val){ // if (thisdataMap[i].monitors[j].Pollutantname == val || thisdataMap[i].monitors[j].Pollutantname.replace("_2","").replace("_",".")== val) { // stations.push(thisdataMap[i]); // if(!flagoflegendName && ($(".ListSelected").attr("id")=="pollutant"||$(".ListSelected").attr("id")=="Metrology")) // { // $(".IndexListName").html(thisdataMap[i].monitors[j].Pollutantname.replace("_2","").replace("_",".")+"["+thisdataMap[i].monitors[j].unit+"]"); // flagoflegendName=true; // var dss=$(".IndexListName").width()/2.6; // $(".IndexListName").css("margin-left","-"+dss+"px"); // } // return false; // } // }); // } // catch(e){}; // } // } // } //} //---------------------------------------------------------------------// map.graphics.clear(); countiesGraphicsLayer1 = new GraphicsLayer({ opacity: 1, maxScale: 7, id: "stations" }); var featureCount1 = stations.length; //---------------------------×¦×‘×™×¢×ª ×”× ×§×•×“×•×ª ×‘×ž×¤×”---------------------// for (var i = 0; i < featureCount1; i++) { if (stations[i].latitude != null && stations[i].longitude != null ) { var color = initColor; var text=""; var text2=""; var color2=""; var units=""; if(a==null || a=="stations"){ if(a==null){ if(stations[i].IndexValue==null) continue; color=stations[i].IndexColor; try{ if(stations[i].IndexValue!="----") { text=parseInt(stations[i].IndexValue)==-9999?"----":parseInt(stations[i].IndexValue); } else{ text="----"; } } catch(e){ text="----"; } } else{ color="#0088CC"; text=""; } if (stations[i].monitors != null) $.each(stations[i].monitors,function(z,val){ if(hashMonitorTable[z]==null) { hashMonitorTable[z]=val; } }) } else{ if (stations[i].monitors != null){ if(stations[i].monitors[thisId]!=null) { //markerGroups.set(thisId,map); var thisMonitor=stations[i].monitors[thisId]; var numericFormat=thisMonitor.NumericFormat.toString().split("."); if(IsIndex){ if(text=="" ||parseFloat(text)<parseFloat(text)) { if(thisMonitor.indexVal==null || thisMonitor.Color==null) continue; color=thisMonitor.Color; text=parseInt(thisMonitor.indexVal)==-9999?"----":parseInt(thisMonitor.indexVal); //text=thisMonitor.indexVal; if(text==-9999) { text="----"; } units=thisMonitor.unit.trim(); } } else{ var scall; var thisScall; var lenghtscall; if(text=="" ||parseFloat(text)<parseFloat(text)) { if(numericFormat.length>1) { if(parseInt(thisMonitor.value)==-9999|| thisMonitor.value=="----"|| thisMonitor.value==null) { text="----"; } else{ text=parseFloat(thisMonitor.value).toFixed(numericFormat[1]); } } else{ if(parseInt(thisMonitor.value)==-9999|| thisMonitor.value=="----"|| thisMonitor.value==null) { text="----"; } else{ text=parseFloat(thisMonitor.value).toFixed(0); } } units=thisMonitor.unit.trim(); } //if($(".ListSelected").attr("id")=="Metrology") //{ color="#0088CC"; //if(Pid!=null) //{ // color="#ffffff"; // var CorrentScalar=thisScalar[Pid]; // var indexofFlood; // if(stations[i].monitors[level]!=null) // { // var levelMon=stations[i].monitors[level]; // indexofFlood=levelMon.value; // var color1= CorrentScalar.range.filter(function(el){ // return el.minval<=parseInt(indexofFlood)&&el.maxval>parseInt(indexofFlood); // }) // IconStation=color1; // if(color1[0].color!=null) // { // color=color1[0].color; // } // } //} if(thisMonitor.Pollutantname!=null && thisMonitor.Pollutantname.toLowerCase()=="flood") { color="#ffffff"; var CorrentScalar=thisScalar[thisId]; var indexofFlood; $.each(stations[i].monitors,function(countMon,theMon){ if(theMon.name=="Level") { indexofFlood=theMon.value; var color1= CorrentScalar.range.filter(function(el){ return el.minval<=parseInt(indexofFlood)&&el.maxval>parseInt(indexofFlood); }) IconStation=color1; if(color1.length>0) { color=color1[0].color; } } }) } //} else{ var CorrentScalar=thisScalar[thisId]; var indexofFlood; if(CorrentScalar!=null) { indexofFlood=thisMonitor.value; var color1= CorrentScalar.range.filter(function(el){ return el.minval<=parseInt(indexofFlood)&&el.maxval>parseInt(indexofFlood); }) IconStation=color1; if(color1.length>0) { color=color1[0].color; } } } if(thisMonitor.value!="----" &&thisMonitor.value!=""&&thisMonitor.value!=null && parseInt(thisMonitor.value)!=-9999) { if(CorrentScalar!=null) { $.each(CorrentScalar,function(k,val){ if(parseFloat(thisMonitor.value)>=val.minval && parseFloat(thisMonitor.value)<CorrentScalar[k+1].minval) { color=val.color; units=thisMonitor.unit.trim(); if(numericFormat.length>1) { text=parseFloat(thisMonitor.value).toFixed(numericFormat[1]); } else{ text=parseFloat(thisMonitor.value).toFixed(0); } } if(k==0 && parseFloat(thisMonitor.value)<val.minval){ units=thisMonitor.unit.trim(); color="#969696"; if(numericFormat.length>1) { text=parseFloat(thisMonitor.value).toFixed(numericFormat[1]); } else{ text=parseFloat(thisMonitor.value).toFixed(0); } } //else{ // if(parseFloat(thisMonitor.value)>=val.Factor) // { // color=val.ColorValue; // if(numericFormat.length>1) // { // text=parseFloat(thisMonitor.value).toFixed(numericFormat[1]); // } // else{ // text=parseFloat(thisMonitor.value).toFixed(0); // } // } //} }); } } else{ color="#969696"; text="----"; } } } } } var ValidDate = "1440"; if(a!="stations") { if (ValidDate != "" && (stations[i].DateVal==null||moment(stations[i].DateVal,"YYYY/MM/DD HH:mm").isBefore(moment().add(-parseInt(ValidDate), 'minutes')))) { if(stations[i].DateVal==null||moment(stations[i].DateVal,"YYYY/MM/DD HH:mm").isBefore(moment().add(-parseInt(ValidDate), 'minutes'))) { color="#969696"; text="----"; } } //----------------------------------------point color & text ---------------------------------------------------------------// if(a!=null) { if(a[0]!="WDS" && parseInt(thisId) != 19) { var graphic = new Graphic(new Point([stations[i].longitude, stations[i].latitude]), createSymbol(iconPath, color)); graphic.attributes = { Name: stations[i].name, Monitors: stations[i].monitors, Station: stations[i] }; countiesGraphicsLayer1.add(graphic); } } else{ var graphic = new Graphic(new Point([stations[i].longitude, stations[i].latitude]), createSymbol(iconPath, color)); graphic.attributes = { Name: stations[i].name, Monitors: stations[i].monitors, Station: stations[i] }; countiesGraphicsLayer1.add(graphic); } var ofset=[]; if(a!=null) { if(a[0]=="WDS" || parseInt(thisId) == 19 || parseInt(thisId)==20) { var ValueDirection; $.each(stations[i].monitors,function (t,Mon){ if(Mon.Pollutantname=="WDD"|| Mon.PollutantID==20) { ValueDirection=Mon.value; //if($.isNumeric(ValueDirection)){ // ValueDirection=parseFloat(ValueDirection-180); // if(ValueDirection<0) // { // ValueDirection=ValueDirection+360; // } //} } }) if($.isNumeric(ValueDirection)) { var angle=""; if (ValueDirection >= 0 && ValueDirection < 12) // N { ofset.x= -4; ofset.y= -12; angle=2; } if (ValueDirection >= 12 && ValueDirection < 22.5) // N { ofset.x= -4; ofset.y= -12; angle=20; } else if (ValueDirection >= 22.5 && ValueDirection < 43.5) // NE { ofset.x= -10; ofset.y= -10; angle=40; } else if (ValueDirection >= 43.5 && ValueDirection < 67.5) // NE { ofset.x= -12; ofset.y= -8; angle=60; } else if (ValueDirection >= 67.5 && ValueDirection < 112.5) // E { ofset.x= -14; ofset.y= 0; angle=90; } else if (ValueDirection >= 112.5 && ValueDirection < 122.5) //SE { ofset.x= -13; ofset.y= 6; angle=110; } else if (ValueDirection >= 122.5 && ValueDirection < 157.5) //SE { ofset.x= -10; ofset.y= 12; angle=140; } else if (ValueDirection >= 157.5 && ValueDirection < 180) //S -works { ofset.x= -4; ofset.y= 12; angle=160; } else if (ValueDirection >= 180 && ValueDirection < 202.5) //S -works { ofset.x= 6; ofset.y= 12; angle=-150; } else if (ValueDirection >= 202.5 && ValueDirection < 247.5) //SW - works { ofset.x= 12; ofset.y= 6; angle=-120; } else if (ValueDirection >= 247.5 && ValueDirection < 265.5) //W -works { ofset.x= 13; ofset.y= 2; angle=-100; } else if (ValueDirection >= 265.5 && ValueDirection < 292.5) //W -works { ofset.x= 13; ofset.y= 0; angle=-90; } else if (ValueDirection >= 292.5 && ValueDirection < 310.5) //NW { ofset.x= 10; ofset.y= -10; angle=-50; } else if (ValueDirection >= 310.5 && ValueDirection < 337.5) //NW { ofset.x=5; ofset.y= -12; angle=-25; } else { ofset.x=0; ofset.y= -13;//works angle=0; } //var symbol = new PictureMarkerSymbol({"xoffset":ofset.x,"yoffset":ofset.y,"type":"esriPMS","url":"/img/Blue_N.png","contentType":"image/png","width":15,"height":15,"angle":angle}); var graphic2 = new Graphic(new Point([stations[i].longitude, stations[i].latitude]), createSymbolwithArrow("M466.718,412.02c82.353-29.153,141.451-107.503,141.451-199.843C608.169,94.999,513.171,0,395.993,0 C278.814,0,183.816,94.999,183.816,212.177c0,92.34,59.098,170.689,141.451,199.843v68.815h-113.26l183.929,311.15l183.93-311.15 H466.718V412.02z M523.497,509.38L395.993,735.547L268.884,509.38h84.673V390.943c-81.065-19.181-141.451-91.845-141.451-178.767 c0-101.562,82.325-183.887,183.887-183.887c101.562,0,183.887,82.325,183.887,183.887c0,86.922-60.386,159.585-141.451,178.767 V509.38H523.497z", color,angle,ofset)); countiesGraphicsLayer1.add(graphic2); } var graphic = new Graphic(new Point([stations[i].longitude, stations[i].latitude]), createSymbol(iconPath, color)); graphic.attributes = { Name: stations[i].name, Monitors: stations[i].monitors, Station: stations[i] }; countiesGraphicsLayer1.add(graphic); } } var graphic1 = new Graphic(new Point([stations[i].longitude, stations[i].latitude]), createSymbol1(iconPath,text)); graphic1.attributes = { Name: stations[i].name, Monitors: stations[i].monitors, Station: stations[i] }; countiesGraphicsLayer1.add(graphic1); //-------------------------------------------------------------------------------------------------------------------------// } else if (a == "stations") { var graphic = new Graphic(new Point([stations[i].longitude, stations[i].latitude]), createSymbol(iconPath, color)); graphic.attributes = { Name: stations[i].name, Monitors: stations[i].monitors, Station: stations[i] }; countiesGraphicsLayer1.add(graphic); var graphic1 = new Graphic(new Point([stations[i].longitude, stations[i].latitude]), createSymbol1(iconPath, text)); graphic1.attributes = { Name: stations[i].name, Monitors: stations[i].monitors, Station: stations[i] }; countiesGraphicsLayer1.add(graphic1); } var c= stations[i].StGroupName.trim().split(" -"); if (hashGroupTable[c[0]] == null) { hashGroupTable[c[0]] = {"color":color,"val":text,"unit":units}; hashColorValueIndexTable[color] = text; } else { if (hashGroupTable[c[0]].color != color) { if (parseFloat(hashGroupTable[c[0]].val) < parseFloat(text) ||isNaN(parseFloat(hashGroupTable[c[0]].val))) { hashGroupTable[c[0]].val = text; hashGroupTable[c[0]].color = color; } } } } } removeLayerById("stations"); if(initialize!=false) map.addLayer(countiesGraphicsLayer1,1); //mouse-over event for station layer var actionStation; var timer; var delayparam; if("True".toLowerCase() == "true") { actionStation="click"; delayparam=800; } else{ actionStation="mouse-over"; delayparam=800; } var timer; countiesGraphicsLayer1.on(actionStation, function (event) { var graphicAttributes = event.graphic.attributes; var point=this; var SelectedMonitor=graphicAttributes.Monitors[$(".IndexClicked").attr("data-id")]; var SelectedPollutant=SelectedMonitor!=null ?"S_"+SelectedMonitor.stationSerialCode+"_"+SelectedMonitor.channel:null; var IsIndex=$(".ListSelected").val()=="ListIndex"; point.station=graphicAttributes.Station; timer = setTimeout(function(){ var ajaxData = { id:point.station.serialCode, thisStation:JSON.stringify(point.station), thisMonitor:JSON.stringify(SelectedMonitor), MonitorsClick:$(".IndexClicked").attr("data-val").toLowerCase(), SelectedType:$("#buttons select").val(), ShowIndexType:false, SelectedPollutant:SelectedPollutant, ForIndex:IsIndex, selectedId:$(".IndexClicked").attr("data-id"), } new StationInfoPopup(ajaxData, stationInfoPopupConfigKey, StationInfoPopupType, point.station) },delayparam); }); countiesGraphicsLayer1.on("mouse-out", function (event) { clearTimeout(timer); }); return countiesGraphicsLayer1; } //add city layer to the map function CityLayerAdd(CityList,initialize) { var countryes=""; countryes=countryes.split(","); removeLayerById("Area"); var features = CityList; countiesGraphicsLayer = new GraphicsLayer({ opacity: 0.8, maxScale: 7, id: "Area" }); //QueryTask returns a featureSet. //Loop through features in the featureSet and add them to the map. var featureCount = features.length; map.graphics.clear(); for (var i = 0; i < featureCount; i++) { a = features[i].attributes.NAME.trim(); try { var Arialist=hashGroupTable[a]; var colorAria=null; if(Arialist!=null){ colorAria=Arialist.color; if(colorAria==null) { colorAria="#fff"; } } else{ colorAria="#fff"; } var colortemp= new Color(colorAria); if(countryes.indexOf(a)>=0) { colortemp=new Color([colortemp.r,colortemp.g,colortemp.b,0.5]); } var redColor = Color.fromString(colorAria); var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([125, 125, 125, 1]), 1), new Color(colortemp)); if(countryes.indexOf(a)>=0) { var symbol1 = new SimpleFillSymbol(SimpleFillSymbol.STYLE_DIAGONAL_CROSS, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([125, 125, 125, 1]), 1), new Color("#FA2C28"),1); var graphic22 = new Graphic(new Polygon(features[i].geometry)); graphic22.setSymbol(symbol1); countiesGraphicsLayer.add(graphic22); } var graphic = features[i]; //Feature is a graphic graphic.setSymbol(symbol); countiesGraphicsLayer.add(graphic); } catch (e) {console.log(e) }; } if(initialize!=false) map.addLayer(countiesGraphicsLayer,0); if(map.getZoom()>=7) { var timercounties; countiesGraphicsLayer.on("mouse-move", function (event) { //timercounties = setTimeout(function(){ //dojo.connect(countiesGraphicsLayer, "mouse-move", function (event) { var t = "${NAME}"; if(hashGroupTable[event.graphic.attributes.NAME]!=null && $(".ListSelected").attr("id").trim()!="Stations") { t+="<br/>"; if($(".ListSelected").attr("id")=="ListIndex"){ t+="AQI:"; if(hashGroupTable[event.graphic.attributes.NAME].val==-9999) { t+="----"; } else{ t+=hashGroupTable[event.graphic.attributes.NAME].val; } } else{ t+="Value:"; t+=hashGroupTable[event.graphic.attributes.NAME].val+" "+hashGroupTable[event.graphic.attributes.NAME].unit; } } var content = esriLang.substitute(event.graphic.attributes, t); //console.log(event); map.graphics.clear(); //use the maps graphics layer as the highlight layer var graphic = event.graphic; var highlightGraphic = new Graphic(graphic.geometry, highlightSymbol); map.graphics.add(highlightGraphic); dialog.setContent(content); domStyle.set(dialog.domNode, "opacity", 0.85); dijitPopup.open({ popup: dialog, x: event.pageX, y: event.pageY }); //},500); }); } countiesGraphicsLayer.on("mouse-move", function (event) { console.log("shukli") //timercounties = setTimeout(function(){ //dojo.connect(countiesGraphicsLayer, "mouse-move", function (event) { var t = "${NAME}"; if(hashGroupTable[event.graphic.attributes.NAME]!=null && $(".ListSelected").attr("id").trim()!="Stations") { t+="<br/>"; if($(".ListSelected").attr("id")=="ListIndex"){ t+="AQI:"; if(hashGroupTable[event.graphic.attributes.NAME].val==-9999) { t+="----"; } else{ t+=hashGroupTable[event.graphic.attributes.NAME].val; } } else{ t+="Value:"; t+=hashGroupTable[event.graphic.attributes.NAME].val+" "+hashGroupTable[event.graphic.attributes.NAME].unit; } } var content = esriLang.substitute(event.graphic.attributes, t); //console.log(event); //map.graphics.clear(); //use the maps graphics layer as the highlight layer var graphic = event.graphic; var highlightGraphic = new Graphic(graphic.geometry, highlightSymbol); map.graphics.add(highlightGraphic); dialog.setContent(content); domStyle.set(dialog.domNode, "opacity", 0.85); dijitPopup.open({ popup: dialog, x: event.pageX, y: event.pageY }); //},500); }); countiesGraphicsLayer.on("dbl-click", function (event) { console.log(event); }); //countiesGraphicsLayer.on("mouse-out", function (event) { // clearTimeout(timercounties); //}); //map.disableDoubleClickZoom(); //map.on("dbl-click", function (event) { // console.log(event); //}); dojo.connect(map.graphics, "onMouseOut", function(evt) { //map.graphics.clear(); dijit.popup.close(); }); //dojo.connect(map, "onClick", function (event) { //try{ // var poligon = new esri.geometry.Polygon(event.graphic.geometry); // //console.log(event); // map.setExtent(poligon.getExtent(), true); // map.graphics.clear(); //} //catch(e){} //}); dojo.connect(countiesGraphicsLayer, "onDblClick", function (event) { try{ var poligon = new esri.geometry.Polygon(event.graphic.geometry); //console.log(event); map.setExtent(poligon.getExtent(), true); map.graphics.clear(); } catch(e){ console.log(e); } ///var poligon = new esri.geometry.Polygon(event.graphic.geometry); //console.log(event); //map.setZoom(map.getZoom()+1); ////map.setExtent(poligon.getExtent(), true); //map.graphics.clear(); }); //dojo.connect(map, "onDblClick", function (event) { // try{ // var poligon = new esri.geometry.Polygon(event.graphic.geometry); // //console.log(event); // map.setExtent(poligon.getExtent(), true); // map.graphics.clear(); // } // catch(e){ // console.log(e); // } // ///var poligon = new esri.geometry.Polygon(event.graphic.geometry); // //console.log(event); // //map.setZoom(map.getZoom()+1); // ////map.setExtent(poligon.getExtent(), true); // //map.graphics.clear(); //}); dojo.connect(map,'mousedown', function (evt) { console.log(evt); evt.preventDefault(); }); }; dojo.connect(countiesGraphicsLayer, "onDblClick", function (event) { try{ var poligon = new esri.geometry.Polygon(event.graphic.geometry); //console.log(event); map.setExtent(poligon.getExtent(), true); map.graphics.clear(); } catch(e){ console.log(e); } ///var poligon = new esri.geometry.Polygon(event.graphic.geometry); //console.log(event); //map.setZoom(map.getZoom()+1); ////map.setExtent(poligon.getExtent(), true); //map.graphics.clear(); }); //remove Layer from the map by Layer Id function removeLayerById(LayerId) { var incidentLayer = map.getLayer(""); try { map.removeLayer(incidentLayer); } catch (e) { } } }); //create a Symbol for the station poin function createSymbol(path, color) { if (color == null) { color = "#000"; } var markerSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE,28, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color("rgba(39, 213, 85, 0.84)"), 1), new dojo.Color(color=="Gray"?"#969696":color)); return markerSymbol; }; function createSymbolwithArrow(path, color,angle,ofset) { if (color == null) { color = "#000"; } //markerSymbol.setOffset(ofset.x,ofset.y); // markerSymbol.setAngle(angle); var markerSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND,28, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color("rgba(39, 213, 85, 0.84)"), 1), new dojo.Color(color=="Gray"?"#969696":color)); markerSymbol.setOffset(ofset.x,ofset.y); markerSymbol.setAngle(angle); markerSymbol.setPath(path); markerSymbol.setSize("60"); return markerSymbol; }; //create a Symbol for the station text function createSymbol1(path, val) { var markerSymbol = new esri.symbol.TextSymbol(val); if(val=="-9999") val="----"; markerSymbol.text=val; markerSymbol.setOffset(-1, -4); markerSymbol.setColor( new dojo.Color([0, 0, 0])); markerSymbol.setAlign(esri.symbol.TextSymbol.ALIGN_MIDDLE); var font = new esri.symbol.Font(); font.setSize("14pt"); // font.setWeight(esri.symbol.Font.WEIGHT_BOLD); markerSymbol.setFont(font); return markerSymbol; }; function goBack(e) { //console.log(e); var documentwidth=$(document).width(); var documentHeight=$("#mapDiv").height(); if(parseInt(documentwidth)>parseInt(784)) { $(".sizer").css("width", "400px"); $(".contentPane").css("max-height", "inherit"); } else{ if(documentwidth>380) documentwidth=380; if(documentHeight>380) documentHeight=380; $(".sizer").width(parseInt(documentwidth-10)); $(".contentPane").css("max-height",documentHeight-100+"px") } $(".contentPane").html(dwdw); } $('#basemapGallery').on("click", function () { if ($('#basemapGallery').css("height") == "33px") { $('#basemapGallery').css({ "height": "225px", "width": "385px" }); $('#GalleryMap').css({ "height": "200px", "width": "385px","overflow-y": "scroll"}); $('#titleGallery').css("display","none"); $('.closeMapGallery').css("display","block"); } else { $('#basemapGallery').css({ "height": "33px", "width": "46px" }); $('#GalleryMap').css({ "height": "0", "width": "0", "overflow": "hidden" }); $('#titleGallery').css("display","block"); $('.closeMapGallery').css("display","none"); } }); $("#closeImage").on("click", function () { $("#ListMonitors").css("display", "none"); }); function Graph(a, b,d) { if($(".restore").length>0){ $(".restore").click(); } var ThisPage=$("."+d); if($(ThisPage).attr("src")=="/img/DiagramIcon(white).png" ||$(ThisPage).attr("src")=="/img/DiagramIcon.png"){ $(".maximize,.restore").css("display","block"); var history1 = $(".contentPane").html(); dwdw = history1; $(".contentPane").empty(); var TempUnits="" ; $.each(a.monitors,function(z,tt){ if(tt.Pollutantname!=null){ if(tt.Pollutantname.replace("_",".").toLowerCase()==$(".IndexClicked").attr("data-val").toLowerCase()){ TempUnits= tt.unit; } } }); $.get("graphReport?station=" + a.serialCode + "&pollutant=" + b + "&TimeBase=" + a.timebase+"&Unit="+TempUnits.trim(), function (data) { $(".contentPane").html(data); $(".contentPane").css("overflow-x", "hidden"); setTimeout(function(){ var width1=""; //alert($(".ui-tabs-nav").width()); $.each($(".ui-tabs-nav li"),function(i,valLi){ if(i==0) { width1=$(valLi).width(); } width1=width1+$(valLi).width(); }); if(width1>$(".ui-tabs-nav").width()) { $(".ui-tabs-nav").css("overflow-y","scroll"); } //alert(width1); },500); }); $(ThisPage).attr("src","/img/Text White.png"); } else{ $(ThisPage).attr("src","/img/DiagramIcon(white).png"); $(".maximize,.restore").css("display","none"); goBack(); } }; function Graph1(a, b,d) { var tfd=$(".chart_div[style*='block']").attr("data-val"); var ThisPage=$("."+d); $(".maximize,.restore").css("display","block"); $(".contentPane").empty(); var TempUnits="" ; $.each(a.monitors,function(z,tt){ if(tt.Pollutantname.replace("_",".").toLowerCase()==$(".IndexClicked").attr("data-val").toLowerCase()){ TempUnits= tt.unit; } if(tt.Pollutantname.replace("_",".")==b||tt.Description==b) { b=tt.Pollutantname.replace("_","."); } }); $.get("graphReport?station=" + a.serialCode + "&pollutant=" + b + "&TimeBase=" + a.timebase+"&Unit="+TempUnits.trim(), function (data) { $(".contentPane").append(data); $(".contentPane").append("<div class='diageamTitle1' onclick='GraphIndex1(" + JSON.stringify(a) + ","+'"' + b+ '"'+","+'"diageamTitle1"'+")' style=' clear: both;font-weight: bold; cursor: pointer; height: 20px; margin-bottom: 2px; box-shadow: 0px 0px 1px 1px rgb(0, 0, 0); width: 69px; background: rgb(245, 245, 245) none repeat scroll 0% 0%;'> > Index </div>") //$(".chart_div").css("display","none"); $('#chart_div_'+tfd).css("display","block"); $('.LeftArrowPollutantDiv').css("cursor","pointer"); $('.LeftArrowPollutantDiv[data-val*='+tfd+']').css("cursor","default"); $(".contentPane").css("overflow-x", "hidden"); }); $(ThisPage).attr("src","/img/Text White.png"); }; function Graph1fancy(a, b,d) { var TempUnits="" ; var DateVal=""; $.each(a.monitors,function(i,datevalue){ if(datevalue.DateVal!=null) { DateVal=datevalue.DateVal.substring(0, 10); return; } if(DateVal!=null) { return; } }); $.fancybox.open({ href: "graphReportForIndex?station=" + a.serialCode + "&pollutant=" + b+"&Date=" + DateVal + "&TimeBase=" + a.timebase+"&fancy="+true, type: "ajax", autoSize: true, ajax: { type: "Get", } }); }; function GraphIndex(a, b,d) { if($(".restore").length>0){ $(".restore").click(); } var ThisPage=$("."+d); if($(ThisPage).attr("src")=="/img/DiagramIcon(white).png"){ $(".maximize,.restore").css("display","block"); var history1 = $(".contentPane").html(); dwdw = history1; $(".contentPane").empty(); var DateVal; $.each(a.monitors,function(i,datevalue){ if(datevalue.DateVal!=null && datevalue.value!="----" ) { DateVal=datevalue.DateVal; return false; } }) $.get("graphReportForIndex?station=" + a.serialCode + "&pollutant=" + b+"&Date=" + DateVal + "&TimeBase=" + a.timebase, function (data) { $(".contentPane").append(data); if($(".IndexClicked").val()!="All"){ $(".contentPane").append("<div class='diageamTitle1' onclick='Graph1(" + JSON.stringify(a) + ","+'"' + b+ '"'+","+'"diageamTitle1"'+")' style=' clear: both;font-weight: bold; cursor: pointer; height: 20px; margin-bottom: 2px; box-shadow: 0px 0px 1px 1px rgb(0, 0, 0); width: 69px; background: rgb(245, 245, 245) none repeat scroll 0% 0%;'> > value </div>") } $(".contentPane").css("overflow-x", "hidden"); }); $(ThisPage).attr("src","/img/Text White.png"); } else{ $(ThisPage).attr("src","/img/DiagramIcon(white).png"); $(".maximize,.restore").css("display","none"); goBack(); } }; function GraphIndex1(a, b,d) { var tfd=$(".chart_div[style*='block']").attr("data-val"); $(".maximize,.restore").css("display","block"); $(".contentPane").empty(); var DateVal; $.each(a.monitors,function(i,datevalue){ if(datevalue.DateVal!=null) { DateVal=datevalue.DateVal; return; } }) $.get("graphReportForIndex?station=" + a.serialCode + "&pollutant=" + b+"&Date=" + DateVal + "&TimeBase=" + a.timebase, function (data) { $(".contentPane").append(data); $(".contentPane").append("<div class='diageamTitle1' onclick='Graph1(" + JSON.stringify(a) + ","+'"' + b+ '"'+","+'"diageamTitle1"'+")' style=' clear: both;font-weight: bold; cursor: pointer; height: 20px; margin-bottom: 2px; box-shadow: 0px 0px 1px 1px rgb(0, 0, 0); width: 69px; background: rgb(245, 245, 245) none repeat scroll 0% 0%;'> > value </div>") //$(".chart_div").css("display","none"); $('#chart_div_'+tfd).css("display","block"); $('.LeftArrowPollutantDiv').css("cursor","pointer"); $('.LeftArrowPollutantDiv[data-val*='+tfd+']').css("cursor","default"); $(".contentPane").css("overflow-x", "hidden"); }); $(ThisPage).attr("src","/img/Text White.png"); }; //infoWindows content for index function indexContentTable(featurecount1,station){ if('False'!="True"){ var content = "<div class='textBubble' style=\"white-space: nowrap;\"><div class='titleBubble' title='Current AQI Title' style=\"text-decoration: underline;\">Current AQI: </div><div style=\"float:right;white-space: nowrap;\">"+station.IndexName+" <span class=\"indexColor\" style=\"background:"+station.IndexColor+" \">"+station.IndexValue+"</span></div><div style=\"clear:both \"></div></div>"; } content += "<table>"; content += "<tr>"; content += "<th> Pollutant"; content += "</th>"; content += "<th> AQI"; content += "</th>"; content += "</tr>"; var tt=[{"publicName":"OZONE","PollutantName":"O3 ","PollutantDescription":"OZONE","MON_Desc":"OZONE","PollutantID":2,"Place":0},{"publicName":"PM2.5","PollutantName":"PM2_5 ","PollutantDescription":"PM2.5","MON_Desc":"PM2.5","PollutantID":21,"Place":1},{"publicName":null,"PollutantName":"PM10 ","PollutantDescription":"PM10","MON_Desc":"PM10","PollutantID":22,"Place":2},{"publicName":"SO2","PollutantName":"SO2 ","PollutantDescription":"SO2","MON_Desc":"SO2","PollutantID":4,"Place":4},{"publicName":null,"PollutantName":"NO2 ","PollutantDescription":"NO2","MON_Desc":"NO2","PollutantID":1,"Place":5},{"publicName":null,"PollutantName":"CO ","PollutantDescription":"CO","MON_Desc":"CO","PollutantID":3,"Place":6}]; var ss=[]; $.each(tt,function(i,val){ ss.push(val.PollutantName.trim().toLowerCase()); }) for (var i = 0; i < featurecount1.length; i++) { var PollutantDescrip=Boolean("3"); try{ if($.inArray(featurecount1[i].Pollutantname.trim().toLowerCase().replace("_2",""), ss)>-1 ) { content += "<tr><td>"; if(polutantInfo!=null && polutantInfo[featurecount1[i].Pollutantname.replace("_2","")]!=null){ content +="<a class='InfoClass' onclick='infoOpen(\""+featurecount1[i].Pollutantname.replace("_2","")+"\")' src='#infoDiv'><img class=\"ImageInfo\" src=\"/img/info (Table).png\" /></a>"; } if(PollutantDescrip &&featurecount1[i].Description!="") { content += featurecount1[i].Description.replace("_","."); } else{ content += featurecount1[i].Pollutantname.replace("_","."); } content += "</td>"; content += "<td>"; if(featurecount1[i].indexVal==-9999) { content +="----"; } else{ content += featurecount1[i].indexVal; } content += "</td>"; //content += "<td>"; //content += featurecount1[i].unit; //content += "</td>"; content += "</tr>"; } } catch(e){}; //} } content += "</table><br/>"; return(content); } function StationContentTable(featurecount1,station){ var content=""; if('False'!="True"){ content = "<div class='textBubble'style=\"white-space: nowrap;\"><div class='titleBubble' title='Current AQI Title' style=\"text-decoration: underline;\">Current AQI: </div><div style=\"float:right;white-space: nowrap;\">"+station.IndexName+" <span class=\"indexColor\" style=\"background:"+station.IndexColor+" \">"+station.IndexValue+"</span></div><div style=\"clear:both \"></div></div><br/><div style=\"clear:both \"></div>"; } content += "<div class=\"tableDiv\">"; content += "<div class=\"onlyTable\">"; content += "<table> <tr>"; content += "<td>"; content += "Parameter"; content += "</td>"; content += "<td> Value"; content += "</td>"; content += "<td > Units"; content += "</td>"; if('False'!="True"){ content += "<td > AQI"; content += "</td>"; } content += "</tr></table></div>"; content += "<div class=\"onlyTable\">"; content += "<table>"; for (var i = 0; i < featurecount1.length; i++) { var numericFormat=featurecount1[i].NumericFormat.toString().split("."); content += "<tr><td>"; if(featurecount1[i].Pollutantname!=null &&polutantInfo!=null && polutantInfo[featurecount1[i].Pollutantname.replace("_2","")]!=null){ content +="<a class='InfoClass' onclick='infoOpen(\""+featurecount1[i].Pollutantname.replace("_2","")+"\")' src='#infoDiv'><img class=\"ImageInfo\" src=\"/img/info (Table).png\" /></a>"; } if(featurecount1[i].Pollutantname!=null) { content += featurecount1[i].Pollutantname; } else{ content += featurecount1[i].name; } content += "</td>"; content += "<td>"; if(parseFloat(featurecount1[i].value)!=-9999 &&featurecount1[i].value!="----"){ if(numericFormat.length>1) { content += parseFloat(featurecount1[i].value).toFixed(numericFormat[1]); } else{ content += parseFloat(featurecount1[i].value).toFixed(0); } } else{ content +="----" } content += "</td>"; content += "<td>"; content += featurecount1[i].unit; content += "</td>"; if('False'!="True"){ content += "<td>"; if(featurecount1[i].indexVal!=-9999) { content+="<div onclick='Graph1fancy(" + JSON.stringify(station) + "," + '"' +featurecount1[i].Pollutantname + '"' + ",\"diageamTitle\")' style=\"cursor: pointer;\">"+featurecount1[i].indexVal+"</div>"; //content += featurecount1[i].indexVal; } else content +="----"; content += "</td>"; } content += "</tr>"; //} } content += "</table></div></div>"; return(content); } //infoWindows content for Monitor function indexContentMonitor(featurecount1,IsIndex){ var content = "<div>"; for (var i = 0; i < featurecount1.length; i++) { try{ var numericFormat=featurecount1[i].NumericFormat.toString().split("."); var MonitorList=$(".IndexClicked").attr("data-val").toLowerCase().split(" and "); if(MonitorList[0]=="wds") { MonitorList.push("wdd"); } $.each(MonitorList,function(kk,valMon){ if(valMon == featurecount1[i].Pollutantname.toLowerCase() ||valMon == featurecount1[i].name.toLowerCase()|| valMon==featurecount1[i].Pollutantname.replace("_2","").replace("_",".").toLowerCase()) { var DateVal=new Date(featurecount1[i].DateVal); var indexval=featurecount1[i].indexVal; if(indexval=="-9999"){ indexval="----"; } if (IsIndex){ if('False'!="True"){ content += "<div class='textBubble'style=\"white-space: nowrap;\"><div class='titleBubble' style=\"text-decoration: underline;\">Current AQI: </div><div class='valuepopup'>"+indexval+"</div></div>"; } } var valuefPol; content += "<div class='textBubble'><div class='titleBubble'>Monitor Type: </div><div class='valuepopup'>"+featurecount1[i].Pollutantname.replace("_",".")+"</div></div>"; content += "<div class='textBubble'><div class='titleBubble'>Current Hourly Measurement: </div><div class='valuepopup'>"; if (IsIndex){ valuefPol=numericFormat.length>1?parseFloat(featurecount1[i].value).toFixed(numericFormat[1]):parseFloat(featurecount1[i].value).toFixed(0); } else{ valuefPol=numericFormat.length>1?parseFloat(featurecount1[i].Lastvalue).toFixed(numericFormat[1]):parseFloat(featurecount1[i].value).toFixed(0); } if(valuefPol!="NaN") { content += valuefPol+" "+ featurecount1[i].unit+"</div>"; } else{ content += "----</div>"; } } }) } catch(e){}; } content += "</div></div><br/>"; return content; } function cahngeIndexList() { var selected = $(".IndexClicked").attr("data-val"); //$("#IndexList").clear(); try{ var scall = getScallParam(selected); $("#IndexList").empty(); $('#indexes').css("display","block"); $('#ButtonsIndexesArea').css("display","block"); //$("#IndexList").clear(); var IndexListJson = [{"ColorString":"Good","ColorValue":"#00E400","Range":0.000000,"RangeUpper":51.000000},{"ColorString":"Moderate","ColorValue":"#FFFF00","Range":51.000000,"RangeUpper":101.000000},{"ColorString":"Unhealthy for sensitive groups","ColorValue":"#FF7E00","Range":101.000000,"RangeUpper":151.000000},{"ColorString":"Unhealthy","ColorValue":"#FF0000","Range":151.000000,"RangeUpper":201.000000},{"ColorString":"Very unhealthy","ColorValue":"#8F3F97","Range":201.000000,"RangeUpper":301.000000},{"ColorString":"Hazardous","ColorValue":"#7E0023","Range":301.000000,"RangeUpper":500.000000},{"ColorString":"No data","ColorValue":"#808080","Range":500.000000,"RangeUpper":500.000000}]; if($(".ListSelected").attr("id")=="Stations") { $("#IndexList").append('<li class="liValList"><div class="ColorVal" style="background:#fff" title="No site present"></div><div class="colorName">No site present</div><div style="clear:both"></div></li>'); $("#IndexList").append('<li class="liValList"><div class="ColorVal" style="background:rgb(39,149,195)" title="Site(s) available"></div><div class="colorName">Site(s) available</div><div style="clear:both"></div></li>'); } else{ $("#IndexList").append('<li class="liValList"><div class="ColorVal" style="background:#fff" title="No monitors"></div><div class="colorName">No monitors</div><div style="clear:both"></div></li>'); $("#IndexList").append('<li class="liValList"><div class="ColorVal" style="background:rgb(39,149,195)" title="Current data"></div><div class="colorName">Current data</div><div style="clear:both"></div></li>'); $("#IndexList").append('<li class="liValList"><div class="ColorVal" style="background:rgb(150,150,150)" title="No current data"></div><div class="colorName">No current data</div><div style="clear:both"></div></li>'); } //} var tempHeight= $("#indexes").height()/2; $(".IndexListName").css("margin-top",tempHeight-10+"px"); } catch(e){}; } function infoOpen(a){ $("#infoDiv").html(polutantInfo[a]); $.fancybox({ href: '#infoDiv', 'transitionIn': 'elastic', 'transitionOut': 'elastic', 'speedIn': 500, 'speedOut': 300, 'autoDimensions': true, 'centerOnScroll': true, 'width':'50%', 'height':'100%', 'autoSize' : false, }); } function infoStation(a){ $.get("stationInfo?stationId=" +a, function (data) { $("#StationDiv").html(data); $.fancybox({ href: '#StationDiv', 'transitionIn': 'elastic', 'transitionOut': 'elastic', 'speedIn': 500, 'speedOut': 300, 'autoDimensions': true, 'centerOnScroll': true, 'autoSize' : true, }); //$(".contentPane").html("<div class='diageamTitle1' onclick='Graph1(" + JSON.stringify(a) + ","+'"' + b+ '"'+","+'"diageamTitle1"'+")' style='font-weight: bold; cursor: pointer; height: 20px; margin-bottom: 2px; box-shadow: 0px 0px 1px 1px rgb(0, 0, 0); width: 69px; background: rgb(245, 245, 245) none repeat scroll 0% 0%;'>see value</div>") //$(".contentPane").append(data); //$(".contentPane").css("overflow-x", "hidden"); }); } $(".close").on("click", function (e) { e.preventdefault() $(".LeftArrowPollutant img").css("visibility", "hidden") }); //var indexHeiht=$("#indexes").css("height"); $("#ButtonsIndexesArea span").click(function(){ if($("#ButtonsIndexesArea").width()!="50") { $("#ButtonsIndexesArea").animate({ width:"50px" }, { duration: 1000, specialEasing: { width: "linear", height: "easeOutBounce" }, complete: function() { $("#ButtonsIndexesArea span").css("border-color","rgba(97, 93, 93,0) rgba(97, 93, 93, 1) rgba(97, 93, 93, 0) rgba(97, 93, 93,0)"); } }); } else{ $("#ButtonsIndexesArea").animate({ width:$("#indexes").width(), }, { duration: 1000, specialEasing: { width: "linear", height: "easeOutBounce" }, complete: function() { $("#ButtonsIndexesArea span").css("border-color","rgba(97, 93, 93,0) rgba(97, 93, 93, 0) rgba(97, 93, 93, 0) rgba(97, 93, 93,1)") } }); } }) function changeScall(b){ var ListScall=getScaller(); var thisScall=ListScall[b]; thisScall.reverse(); $("#IndexList").empty(); $.each(thisScall,function(c,a){ $("#IndexList").append(' <li class="liValList"><div class="ColorVal" style=background:'+a.color+'></div>'+ '<div class="colorName">'+a.minval+'</div><div style="clear:both"></div></li>'); }) } function getScaller() { var scall = {}; scall["Flood Forecast"] = [{ "minval": 0, "color": "#ffffff","title":"×œ×œ× ×–×¨×™×ž×”" }, { "minval": 1, "color": "rgb(189,215,231)","title":"×–×¨×™×ž×” ×‘××¤×™×§" }, { "minval": 2, "color": "rgb(0,255,0)","title":"××–×”×¨×ª ×©×˜×¤×•× ×•×ª-×–×¨×™×ž×” ×—×–×§×”" }, { "minval":3, "color": "rgb(255,255,0)","title":"××–×”×¨×ª ×©×˜×¤×•× ×•×ª ×ž×©×ž×¢×•×ª×™×™×-×¦×¤×™ ×œ× ×–×§" }, { "minval": 4, "color": "rgb(253,141,60)","title":"××–×”×¨×ª ×©×˜×¤×•× ×•×ª ×—×ž×•×¨×”-× ×–×§ × ×¨×—×‘" }, { "minval": 5, "color": "rgb(227,26,28)","title":"××–×”×¨×ª ×©×˜×¤×•× ×•×ª ×—×ž×•×¨×” ×‘×™×•×ª×¨-× ×–×§ ×—×¨×™×’"}]; return scall; } function centerKendoWindow(){ setTimeout(function(){ try{ $("#kendoWindow").data("kendoWindow").center(); } catch(e){ } $(".k-window").css({"z-index":"1111"}); },70); }; function addmonitorsToPage(){ $.each(hashMonitorTable,function(temppol){ if(PollutantOrder!=null) { if(PollutantOrder[this.PollutantID]!=null) { keys.push({id:this.PollutantID,Description:this.Description,MON_Desc:this.MON_Desc,name:PollutantOrder[this.PollutantID].Name!=null?PollutantOrder[this.PollutantID].Name:this.name,Area:PollutantOrder[this.PollutantID].Area,Place:PollutantOrder[this.PollutantID].Place}); } } else{ keys.push({id:this.PollutantID,name:this.Pollutantname}); } }); keys.sort(function(a,b) {return a.Place - b.Place}); for (var z in keys ) { if (keys[z] != "") { var titleDescription; var k=keys[z]; var inputPollutant=""; switch (PollutantDescrip) { case "1": if(k.name!="WDS") { inputPollutant=k.name; } else{ inputPollutant="WIND"; } break; case "2": if(k.name!="WDS") { inputPollutant=hashMonitorTable[k.id].Description; } else{ inputPollutant="WIND" } break; case "3": if(k.name!="WDS") { inputPollutant=hashMonitorTable[k.id].MON_Desc; } else{ inputPollutant="WIND" } break; default: if(k.name!="WDS") { inputPollutant=k.name; } else{ inputPollutant="WIND"; } break; } if (inputPollutant == "" || inputPollutant ==null) { inputPollutant = k.name; } //if(hashMonitorTable[k.id].Description!="") //{ if(k.name!="WDS") { titleDescription=getTranslateName("tl_"+k.name); } else{ titleDescription="WIND"; } //} //else{ // titleDescription=inputPollutant; //} var PollutantConection=$.grep(PollutantConections,function(val){ return k.id == val.Id &&(val.map==true ||val.map==null); }); var contentConnection=""; var ElemAdd=""; if(PollutantConection.length>0) { contentConnection="HaveConnection"; ElemAdd="data-Pid='"+k.id+"' level-Id='"+PollutantConection[0].level+"'"; } if (k.Area=="Metrology" ) { //if (k.toLowerCase() == "pres" || k.toLowerCase() == "t" || k.toLowerCase() == "rh" || k.toLowerCase() == "wind speed" || k.toLowerCase() == "wind dir" || k.toLowerCase() == "dir" || k.toLowerCase() == "sped" || k.toLowerCase() == "fiter" || k.toLowerCase() == "rain" || k.toLowerCase() == "rack" || k.toLowerCase() == "temp") { if(k.name.toLowerCase() == "rain" ||k.name.toLowerCase() == "flood" || k.name.toLowerCase() == "flood forecast" ) { var tranlatemon; switch(k.name.toLowerCase()) { case "flood": tranlatemon='flood'; break; case "flood forecast": tranlatemon='flood forecast'; break; case "rain": tranlatemon='Rain'; break; default: tranlatemon=getTranslateName(k.name,'en-US'); } $("#ListMeterology").append('<li type="button" data-id=\"'+k.id+'\" value=\"' +tranlatemon + '\" data-val=\"'+ k.name +'\" id=\"' + count2 + '\" class=\"monitors '+contentConnection+'\" '+ElemAdd+' title=\"'+titleDescription+'\" >'+tranlatemon+'</li>'); } else{ $("#ListMeterology").append('<input type="button" data-id=\"'+k.id+'\" value=\"' +inputPollutant + '\" data-val=\"'+ k.name +'\" id=\"' + count2 + '\" class=\"monitors '+contentConnection+'\" '+ElemAdd+' title=\"'+titleDescription+'\" />'); } count2 = count2 + 1; } else if (inputPollutant!=null &&((hashMonitorTable[k.name]!=null&&hashMonitorTable[k.name].isIndex)||(typeof PolutantShowAll!= 'undefined' &&PolutantShowAll==true))) { $("#ListPollutant").append('<input type="button" data-id=\"'+k.id+'\" value=\"' + inputPollutant.replace("_2","") + '\" data-val=\"'+ k.name.replace("_2","") +'\" id=\"' + count1 + '\" class=\"monitors '+contentConnection+'\" title=\"'+titleDescription+'\" />'); count1 = count1 + 1; } } }; }; function returnListOfStations(a,thisdataMap,thisId){ stations=[]; if(a==null|| a=="stations"){ stations = dataMap; } else{ for (i = 0; i < thisdataMap.length; i++) { if (thisdataMap[i].monitors[thisId] != null){ stations.push(thisdataMap[i]); //for (j = 0; j < thisdataMap[i].monitors.length; j++) { // try{ // $.each(a,function(k,val){ // if (thisdataMap[i].monitors[j].Pollutantname == val || thisdataMap[i].monitors[j].Pollutantname.replace("_",".")== val) { // stations.push(thisdataMap[i]); // return false; // } // }); // } // catch(e){}; //} } } } return stations; } </script> <script src="/Scripts/utils/Kendo/KendoCustomWindowFactory.js?v=2.1.6"></script> <script src="/Scripts/stationInfoPopup/stationInfoPopup.js?v=2.1.6"></script> <script> var stationInfoPopupConfigKey = "StationInfoPageForMap"; var StationInfoPopupType = "old"; </script> <div style="clear: both"> </div> </div> <div style="clear: both"> </div> <footer> <div class="footerDiv"> <p><span style="font-size:11.0pt;font-family:'Calibri',sans-serif;">The monitoring data presented on this webpage contains real-time continuous data that have not been through a full quality assurance review. These data should be considered unofficial. Data in reports may not follow all rounding/truncation conventions required for comparison to the regulatory National Ambient Air Quality Standards. For details, see the </span> <strong>Information tab</strong>.<br />This map is for informational purposes only and may not have been prepared for or be suitable for legal, engineering or surveying purposes. The user is solely responsible for verifying the accuracy of information before using for any purpose. By using this product for any purpose user agrees to be bound by all disclaimers found here: <strong>https://dnr.wisconsin.gov/legal</strong>. </p> <div style="clear:both"></div> </div> </footer> <div style="clear: both"> </div> </div> <script> $("#SetLang").on("change", function (val) { changeLeng($("#SetLang").val()); }) function changeLeng(a) { $.ajax({ async: false, cache: false, type: "GET", url: "/Ajax/ChangeLang", data: { UserLang: a } }) .done(function (mds) { location.replace(location.href); }) } if ($(document).width() < 800) { $("footer").css("display", "none"); } else { $("footer").css("display", "block"); } </script> <script> $(document).load(function () { if ($("#TopPage").height() < $(window).height()) { $("#main").css("min-height", ($(window).height() - $("#TopPage").height()) + "px"); } }) jQuery(window).load(function () { if ($("#agency").width() + $("#navheader").width() + $(".languageMenu").width() > $(window).width()) { $("#agency").css("display", "none"); } else { $("#agency").css("display", "block"); } }); </script> <script> if (parseInt(window.innerWidth) < 820) { $(".ListLang").css("display", "block"); $(".languageMenu").css("display", "none"); $("#navheader").css("width", "100%"); } else { $(".ListLang").css("display", "none"); $(".languageMenu").css("display", "block"); $("#navheader").css("width", ""); //$("#navheader").css("width", "80%"); } $(window).resize(function () { if (parseInt(window.innerWidth) < 820) { $(".ListLang").css("display", "block"); $(".languageMenu").css("display", "none"); $("#navheader").css("width", "100%"); } else { $(".ListLang").css("display", "none"); $(".languageMenu").css("display", "block"); $("#navheader").css("width", ""); //$("#navheader").css("width", "80%"); } }) </script> </body> </html>

CINXE.COM

QueryTask with geometry, results as an InfoWindow onHover