CINXE.COM
Severe Weather Information Centre 3.0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="SHORTCUT ICON" type="image/x-icon" href="./images/wmo.ico" /> <title>Severe Weather Information Centre 3.0</title> <link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/pretty-checkbox1.min.css"> <link rel="stylesheet" href="./css/leaflet.css" /> <link rel="stylesheet" href="./css/swic1.css"> <link rel="stylesheet" href="./css/main4.css"> <link rel="stylesheet" href="./css/MoraScrollbar.css" /> <link rel="stylesheet" href="./css/new-layout1.css" /> <link rel="stylesheet" href="./css/jquery-ui.css"> <link rel="stylesheet" href="./css/all.min.css"> <link rel="stylesheet" href="./css/bootstrap-datepicker.css"> <link rel="stylesheet" href="./css/jquery.ui.timepicker.css"> <link rel="stylesheet" href="./css/archive.css"> <style type="text/css"> @font-face{ font-family:"Montserrat-Regular"; src:url('./fonts/Montserrat-Regular.ttf') format('truetype'); font-style:normal; font-weight:normal; } @font-face{ font-family:"Montserrat-Bold"; src:url('./fonts/Montserrat-Bold.ttf') format('truetype'); font-style:normal; font-weight:normal; } @font-face{ font-family:"Montserrat-wght"; src:url('./fonts/Montserrat-VariableFont_wght.ttf') format('truetype'); font-style:normal; font-weight:normal; } *, body { font-family: 'Montserrat-Regular','Helvetica Neue', Helvetica, Arial, sans-serif; } body, .search_row_left select, .search_row_right select, #sel_tc, .btn_tableView, .card_issue, .card_area_desc { color: #0F172A; } .btn_tableView { font-size: 13.5px; } .main-menu-bar ul li a { font-size: 12.9px; } #tc_view { font-size: 12.6px; } .card_suc { font-size: 12px; -webkit-transform-origin-x: 0; -webkit-transform: scale(0.90, 1); width: 111%; } .msc-btn-up, .msc-btn-down { text-indent: -9999px; color: #FFFFFF; } .msc-handle { text-indent: -9999px; color: #000000; } .mCSB_container { overflow: unset !important; } #map { margin-top: 0px; top: 218px; } .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar { border: none; } .leaflet-bar a { color: #ffffff; background-color: #165890; border-bottom: 1px solid #0B3A8C; } .leaflet-bar a:hover { color: #ffffff; background-color: #165890; border-bottom: 1px solid #0B3A8C; } .leaflet-touch .leaflet-bar a { width: 36px; height: 38px; line-height: 38px; } .leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out { font-size: 18px; } .leaflet-touch .leaflet-bar a:first-child { border-top-left-radius: 8px; border-top-right-radius: 8px; } .leaflet-touch .leaflet-bar a:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .leaflet-bar a.leaflet-disabled { color: #ffffff; background-color: #165890; border-bottom: 1px solid #0B3A8C; } .intro { background-color: #FACB5F; margin-top: 0px; position: absolute; z-index: -1; width: 100%; } .intro p { color: #0F3367; text-align: center; padding: 10px 200px; margin-bottom: 0px; font-weight: bold; font-size: 17px; float: left; width: 98%; } .intro a { float: right; display: block; margin-top: 10px; margin-right: 20px; } #cap-impl-remark { display: block; padding: 13px 13px 0px 13px; font-size: 13px; margin: 13px; background-color: rgb(236, 236, 236); color: rgb(0, 0, 0); } #cap-impl-remark ul { list-style: none; margin-bottom: 0px; margin-left: -40px; padding-bottom: 10px; } .criteria_table tr th, .criteria_table tr td { border: 2px solid #666666; padding: 3px; } .website_name { font-size: 30px; } .website_intro { font-size: 18px; } @media (max-width:1767px) { .intro p { padding: 10px 25px; } } @media (max-width:1444px) { .intro p { padding: 10px 25px; font-size: 15px; line-height: 25px; } } @media (min-width: 991px) and (max-width: 1282px) { .intro p { padding: 10px 5px; font-size: 12px; } .leaflet-custom-zoom { padding-top: 285px; } } @media (min-width: 768px) and (max-width: 990px) { .intro { top: 48px; position: absolute; width: 100%; } .intro p { float: left; padding: 8px 5px 0px 5px!important; font-size: 12px; width: 100%; margin-bottom: 4px; line-height: 14px!important; } .intro a { margin-top: 4px!important; margin-right: 15px!important; } .leaflet-custom-zoom { padding-top: 133px!important; } } @media (min-width: 680px) and (max-width: 990px) { #search_box { top: 103px; } } @media (min-width: 680px) and (max-width: 767px) { .leaflet-custom-own { padding-top: 93px!important; } } @media (min-width: 768px) and (max-width:892px) { .intro p { font-size: 12px; } } @media (max-width: 1862px) { .intro p { padding: 10px 50px; width: 95%; font-size: 16px; line-height: 25px; } } @media (max-width: 1562px) { .intro p { padding: 10px 4px; width: 95%; font-size: 15px; } } @media (max-width: 1307px) { .intro p { font-size: 14px; } } @media (max-width: 1221px) { .intro p { font-size: 13px; } } @media (max-width: 1221px) { .intro p { font-size: 12px; } } @media (max-width: 1136px) { .intro p { font-size: 11px; } } #web_title img { display: none; height: 40px; } @media (max-width:660px) { #web_title { margin-left: -16px; top: 2px; margin-top: 0px; } #web_title h1 { display: none; } #web_title img { display: block; margin-left: 40%; } } </style> <script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="./js/bootstrap.bundle.min.js"></script> <script type="text/javascript" src="./js/detectmobilebrowser.js"></script> <script type="text/javascript" src="./js/config1.js"></script> <script type="text/javascript" src="./js/leaflet.js"></script> <script type="text/javascript" src="./js/mapbox-gl.js"></script> <script type="text/javascript" src="./js/esri-leaflet.js"></script> <script type="text/javascript" src="./js/esri-leaflet-vector.js"></script> <script type="text/javascript" src="./js/tropical-cyclone1.js"></script> <script type="text/javascript" src="./js/moment-with-locales.min.js"></script> <script type="text/javascript" src="./js/geojson-polyline.min.js"></script> <script type="text/javascript" src="./js/turf.min.js"></script> <script type="text/javascript" src="./js/swic1.js"></script> <!-- Observations --> <script type="text/javascript" src="./js/bootbox.min.js"></script> <script type="text/javascript" src="./js/highcharts.js"></script> <script type="text/javascript" src="./js/geoserver1.js"></script> <script type="text/javascript" src="./js/MoraScrollbar.js"></script> <script type="text/javascript" src="./js/lang.min.js"></script> <script type="text/javascript" src="./js/new-layout.js"></script> <script type="text/javascript" src="./js/bootstrap-datepicker.js"></script> <script type="text/javascript" src="./js/jquery.ui.timepicker.js"></script> <script type="text/javascript" src="./js/archive.js"></script> <script type="text/javascript"> $.urlParam = function (name) { var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href); if (results == null) { return null; } else { return decodeURIComponent(results[1]) || 0; } }; var centerlat = mapCenter[0]; var centerlng = mapCenter[1]; var mapzoom = mapCenter[2]; var search_data = null; var valDef = $.urlParam('def') || ''; getWMOMember(); var web_appleDev = (/iPhone/i.test(navigator.userAgent) || /iPad/i.test(navigator.userAgent)); var web_platform = (jQuery.browser.mobile) ? 'mb' : ((web_appleDev) ? 'mb' : 'pc'); var mob = (web_platform == "mb") ? true : false; var agree = true; //change to use WMS, no need concern huge data size var map = null; if (localStorage['mapview'] == "0" && localStorage["lastlat_l"] != "" && localStorage["lastlng_l"] != "" && valDef == "") { centerlat = localStorage["lastlat_l"]; centerlng = localStorage["lastlng_l"]; mapzoom = localStorage["lastzmlv_l"]; } var obCount = 0, obTime = []; var click_lock = false, currOffset = 0, list_margin = [-24], curCnt = [0]; var utc = ""; var warnings_in_effect = {}; var warnings_in_effect_severity = {}; var warnings_in_effect_pastday = {}; var nowarning, notInList; var notInList_json = [], nowarning_json = []; var nowarningList = {}, nowarningKeys; var updateCount = 0; var timerID = null; var renderFirst = ['flag']; var cntSec = 3; var hvGC = false; var clockwiseIcon = null, anticlockwiseIcon = null; var satellite; var ani_loading = null; var ani_img_y = 312; var fixMapPositionTimer = null; var firstLoad = true; var onMetareas = false; var mobDefPanH = 89; // Mobile Default Panel Additional Height function customZoom(action) { if (map.getZoom() > map.getMinZoom() && map.getZoom() < map.getMaxZoom()) { $('.leaflet-custom-zoom-in').removeClass('leaflet-disabled'); $('.leaflet-custom-zoom-out').removeClass('leaflet-disabled'); } else if (map.getZoom() >= map.getMaxZoom()) { $('.leaflet-custom-zoom-out').removeClass('leaflet-disabled'); $('.leaflet-custom-zoom-in').addClass('leaflet-disabled'); } else if (map.getZoom() <= map.getMinZoom()) { $('.leaflet-custom-zoom-in').removeClass('leaflet-disabled'); $('.leaflet-custom-zoom-out').addClass('leaflet-disabled'); } if (action == 'in') { if (map.getZoom() < map.getMaxZoom()) { map.zoomIn(1); $('.leaflet-custom-zoom-in').blur(); } } else if (action == 'out') { if (map.getZoom() > map.getMinZoom() && !(map.getZoom() == 3 && $('#choose_metareas').is(":checked"))) { map.zoomOut(1); $('.leaflet-custom-zoom-out').blur(); } } if (map.getZoom() == 2) { //resetClipMapViewPosition(); } else { $("#map").css({ 'clip': 'inherit' }); $('.leaflet-control-zoom').removeAttr('style'); } } $.fn.textWidth = function (text, font) { if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body); $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font')); return $.fn.textWidth.fakeEl.width(); }; var flaglock = false; function setMapCenter(lat, lng, zoomlv, boo) { if (boo) flaglock = true; map.setView(new L.LatLng(lat, lng), zoomlv); } var latGLO = -1; var lngGLO = -1; var zoomGLO = -1; function flyToMapCenter(lat, lng, zoomlv, boo) { if (boo) flaglock = true; latGLO = lat; lngGLO = lng; zoomGLO = zoomlv; map.flyTo(new L.LatLng(lat, lng), zoomlv); } function resetClipMapViewPosition() { console.log("[Call] resetClipMapViewPosition"); } function getSorted(selector, attrName) { return $($(selector).toArray().sort(function (a, b) { var aVal = parseInt((a.getAttribute(attrName)).substring(20)), bVal = parseInt((b.getAttribute(attrName)).substring(20)); return bVal - aVal; })); } function getObjects(obj, key, val) { var objects = []; for (var i in obj) { if (!obj.hasOwnProperty(i)) continue; if (typeof obj[i] == 'object') { objects = objects.concat(getObjects(obj[i], key, val)); } else if (i == key && obj[i] == val || i == key && val == '') { objects.push(obj); } else if (obj[i] == val && key == '') { if (objects.lastIndexOf(obj) == -1) { objects.push(obj); } } } return objects; } function satelliteOnOff() { if (localStorage["satellite"] == "1") { map.removeLayer(satellite); localStorage.setItem("satellite", "0"); } else { satellite.bringToFront(); map.addLayer(satellite); localStorage.setItem("satellite", "1"); } } function tcOnOff(show) { if (show == "1") { showAllTC(); } else if (show == "0") { for (var i = 0; i < inforce.length; i++) { for (let index = 5; index >= 0; index--) { if (index == 0) { angle = 0; } else if (index == 1) { angle = 1080; } else if (index == 2) { angle = 720; } else if (index == 3) { angle = 360; } else if (index == 4) { angle = -360; } else if (index == 5) { angle = -720; } let jn = inforce[i]['id']; if (angle != 0) { jn = inforce[i]['id'] + "_" + angle; } removeTC(jn); } } $('#map').find(".prompt").remove(); } currentTC = ""; $("#sel_tc").val("").removeClass("sel_tc_active"); $('#centre_info').html(""); $('#detail-box').css("display", "none"); tcViewSetting(); } function callSettingPanel() { close_all_view(); activeBtn('.btn-setting'); $('#setting_view').css('display', 'block'); if ($('#region')[0].length == 0) { $('#region').empty().append("<option value=''>Please select</option>"); for (var i = 0; i < region_location.length; i++) { $('#region').append("<option value='" + i + "'>" + region_location[i].name + "</option>"); } } } function callFilterPanel() { close_all_view(); activeBtn('.btn-filter'); read_txt(); $('#filter_view').css('display', 'block'); init_filter_val(); } function callTCPanel() { close_all_view(); activeBtn('.btn-tc'); $('#tc_view').css('display', 'block'); resizePanel(); init_tc_val(); } function callInfoPanel(_init) { if (typeof _init == "undefined") _init = false; close_all_view(); if (_init) { localStorage.setItem("ob_update_uat", ""); loadObservation('rain'); loadObservation('thunder'); loadObservation('fog'); loadObservation('gale'); } else { activeBtn('.btn-obser'); var setHeightVal = $(window).height() - $(".header").height() - $(".main-menu-bar").height() - $(".intro").height() - $(".severity_legend").height() - $(".footer").height(); if ($(window).width() <= 767) { setHeightVal = $(window).height() - $(".header").height() - $(".btn-cap").outerHeight() - $(".severity_legend").height() - $(".footer").height(); } if (browserName == "safari") setHeightVal += 5; $("#sw_info_view").css("height", setHeightVal + "px"); $("#level-1, #level-2, #level-3, #level-4").removeClass("with-arrows msc-wrapper"); $("#level-5").addClass("with-arrows msc-wrapper"); $('#sw_info_view').css('display', 'block'); resizePanel(); } } function callMaritimePanel() { close_all_view(); activeBtn('.btn-marine'); $('#maritime_view').css('display', 'block'); resizePanel(); init_filter_val(); } function init_filter_val() { var severity = localStorage["severity"].split(""); var urgency = localStorage["urgency"].split(""); var certainty = localStorage["certainty"].split(""); var marine = localStorage["marine"]; var fulllist = localStorage["fulllist"]; var border = localStorage["border"]; var nit = localStorage["notInList"]; var nw = localStorage["nowarning"]; var c = localStorage["centre"]; var cp = localStorage["centre_poly"]; var sate = localStorage["satellite"]; var mapview = localStorage["mapview"]; $("#mv" + mapview).addClass("toggle_active"); for (var i = 0; i < severity.length; i++) { if (severity[i] == "1") $('#s' + i).prop('checked', true); } for (var i = 0; i < urgency.length; i++) { if (urgency[i] == "1") $('#u' + i).prop('checked', true); } for (var i = 0; i < certainty.length; i++) { if (certainty[i] == "1") $('#c' + i).prop('checked', true); } if (marine == "1") $('#choose_maritime').prop('checked', true); $("#wie" + fulllist).addClass("toggle_active"); if (border == "1") $('#borderlineon').prop('checked', true); if (nit == "1") $('#choose_notInList').prop('checked', true); if (nw == "1") $('#choose_nowarning').prop('checked', true); if (c == "1") $('#choose_centre').prop('checked', true); if (cp == "1") $('#choose_centre_poly').prop('checked', true); if (sate == "1") $('#sate').prop('checked', true); if ($('#s1').is(':checked') && mob && !agree) $('#s1').prop('checked', false); if ($('#s0').is(':checked') && mob && !agree) $('#s0').prop('checked', false); } function init_tc_val() { var forecast = localStorage["forecast"]; if (forecast == "1") $('#choose_forecast').prop('checked', true); var tc = localStorage["tc"]; if (tc == "1") $('#tc_onoff').prop('checked', true); var add_info = localStorage["add_info"]; if (add_info == "1") $('#choose_time').prop('checked', true); $('.choose_time').each(function () { var key = "t" + $(this).val(); var val = localStorage[key]; if (val == "1") $('#choose_time_' + key).prop('checked', true); else $('#choose_time_' + key).prop('checked', false); }); mapResize(); } function getWMOMember() { $.ajax({ url: './json/wmo_member.json', dataType: 'json', cache: false, async: false, success: function (data) { search_data = data; if (valDef != "") { let self_def = getObjects(self_defined, 'code', valDef); if (self_def.length == 0) location.href = "./"; centerlat = self_def[0].lat; centerlng = self_def[0].lng; mapzoom = self_def[0].zmlv; } } }); } function SortByCityName(a, b) { var aName = a.name.toLowerCase(); var bName = b.name.toLowerCase(); return aName.localeCompare(bName); } function SortBySentTime(s, t) { var sTime = new Date(s[1].replace(' ', 'T')).getTime(); var tTime = new Date(t[1].replace(' ', 'T')).getTime(); var compare = sTime < tTime ? 1 : -1; return compare; } function selectWMOmembers(mid) { var in_mid = (mid !== undefined) ? mid : $('#wmo_members').val(); if (in_mid != "") { getEffectiveWarningByMember(in_mid, true); } if (in_mid != "") { var member = getObjects(search_data, 'mid', in_mid); var self_def = getObjects(self_defined, 'mid', in_mid); if (self_def.length > 0) { if (!actionFromClickOnMap) { flyToMapCenter(self_def[0].lat, self_def[0].lng, self_def[0].zmlv, false); } } else { if (!actionFromClickOnMap) { flyToMapCenter(member[0].lat, member[0].lng, 6, false); } } } } function updateWMOmembers(init, mode) { region_array = []; if (!$("#level-2").is(":hidden")) { updateSeverityButton(); updateMemberWarningList(); $("#wmo_members").val(""); $("#level-2, #level-2-header, .link_back").css("display", "none"); $("#level-2, #level-4").removeClass("with-arrows msc-wrapper"); var warning_view_height = $("#warning_view").height(); var setHeightVal = $(window).height() - $(".header").height() - $(".main-menu-bar").height() - $(".intro").height() - warning_view_height - $(".severity_legend").height() - $(".footer").height(); if (browserName == "safari") setHeightVal += 5; $("#level-1").css("height", setHeightVal + "px"); $("#level-1").addClass("with-arrows msc-wrapper"); $("#level-1").css("display", "block"); $("#warning_view").css("visibility", "visible"); MoraScrollbar.refresh(); $(".msc-content").scrollTop(0); $(".msc-scrollbar").css("right", "0px"); $(".msc-btn-up").text("up").css("text-indent","-9999px"); $(".msc-handle").text("handle").css("text-indent","-9999px"); $(".msc-btn-down").text("down").css("text-indent","-9999px"); } $('#wmo_members').empty().append("<option value=''>Please select</option>"); if ($('#region').val() != "0") { var member = getObjects(search_data, 'ra', $('#region').val()); var list_data = member[0].members.sort(SortByCityName); for (var i = 0; i < list_data.length; i++) { $('#wmo_members').append("<option value='" + list_data[i].mid + "'>" + list_data[i].name + "</option>"); } if (!$("#level-1").is(":hidden")) { var ra = regionalAssociation[$("#region").val()]; $("#members_warning_list li").each(function () { var region_org = $(this).find(".each_member_region_org"); var ary = region_org.html().split(" "); if ("Region " + ra[0] == ary[0]) { $(this).css("display", "block"); var mem_id = $(this).attr("id").replace("member_", ""); region_array.push(mem_id); } else { $(this).css("display", "none"); } }); MoraScrollbar.refresh(); $(".msc-content").scrollTop(0); $(".msc-content").css("padding-right", "13px"); $(".msc-btn-up").text("up").css("text-indent","-9999px"); $(".msc-handle").text("handle").css("text-indent","-9999px"); $(".msc-btn-down").text("down").css("text-indent","-9999px"); if ($(".msc-scrollbar").is(":hidden")) { $(".msc-content").css("padding-right", "0px"); var setHeightVal = $(window).height() - $(".header").height() - $(".main-menu-bar").height() - $(".intro").height() - $("#warning_view").height() - $(".severity_legend").height() - $(".footer").height(); if (browserName == "safari") setHeightVal += 5; $("#level-1").css("height", setHeightVal + "px"); } severity_array = [0, 0, 0, 0, 0]; for (var i = 0; i < members_severity.length; i++) { if (region_array.indexOf(members_severity[i][0]) != -1) { severity_array[0] += members_severity[i][3]; severity_array[1] += members_severity[i][4]; severity_array[2] += members_severity[i][5]; severity_array[3] += members_severity[i][6]; severity_array[4] += members_severity[i][7]; } } updateSeverityButton(); for (var i = 0; i < severity_array.length; i++) { var classname = "s_" + severityLabel[i].toLowerCase(); if (severity_array[i] != 0) { $("." + classname).html(severityLabel[i] + " (" + severity_array[i] + ")").removeClass(classname + "_dim"); } else { $("." + classname).html(severityLabel[i] + " (" + severity_array[i] + ")").addClass(classname + "_dim"); } } updateWarningNumber(); } } else { var mems = []; for (var x = 0; x < search_data.length; x++) { mems = mems.concat(search_data[x]['members']); } var list_data = mems.sort(SortByCityName); var previousName = ""; for (var i = 0; i < list_data.length; i++) { if (list_data[i].name != previousName) { $('#wmo_members').append("<option value='" + list_data[i].mid + "'>" + list_data[i].name + "</option>"); previousName = list_data[i].name; } } if (init) { if (!$("#level-1").is(":hidden")) { $("#members_warning_list li").each(function () { $(this).css("display", "block"); }); MoraScrollbar.refresh(); $(".msc-content").scrollTop(0); $(".msc-btn-up").text("up").css("text-indent","-9999px"); $(".msc-handle").text("handle").css("text-indent","-9999px"); $(".msc-btn-down").text("down").css("text-indent","-9999px"); severity_array = [0, 0, 0, 0, 0]; for (var i = 0; i < members_severity.length; i++) { severity_array[0] += members_severity[i][3]; severity_array[1] += members_severity[i][4]; severity_array[2] += members_severity[i][5]; severity_array[3] += members_severity[i][6]; severity_array[4] += members_severity[i][7]; } updateSeverityButton(); for (var i = 0; i < severity_array.length; i++) { var classname = "s_" + severityLabel[i].toLowerCase(); if (severity_array[i] != 0) { $("." + classname).html(severityLabel[i] + " (" + severity_array[i] + ")").removeClass(classname + "_dim"); } else { $("." + classname).html(severityLabel[i] + " (" + severity_array[i] + ")").addClass(classname + "_dim"); } } updateWarningNumber(); } } } if (localStorage["mapview"] != "0" || mode == 1) { let zoom = region_location[$('#region').val()].zm; if (zoom < 3 && $('#choose_metareas').is(":checked")) zoom = 3; flyToMapCenter(region_location[$('#region').val()].lat, region_location[$('#region').val()].lng, zoom, $('#region').val() == '0'); //setMapCenter } } function tmpGlobal() { let zoom = ($('#choose_metareas').is(":checked")) ? '3' : mapCenter[2]; setMapCenter(mapCenter[0], mapCenter[1], zoom, false); } function borderCtrl(init) { var border = localStorage["border"]; if (init == false) { if (border == "1") { localStorage.setItem("border", "0"); } else { localStorage.setItem("border", "1"); } } var border_updated = localStorage["border"]; var border_style = (border_updated == 1) ? 'local_geo_server:s3' : 'local_geo_server:s5'; removeWMS(); loadWMS(); loadExclamationMarkMetaData(); } function severityFilter(opt, value) { //4 - Extreme, 3 - Severe, 2 - Moderate, 1 - Minor, 0 - Unknown var optval = (value) ? value : $(opt); var cat = (value) ? value.substring(0, 1) : $(optval).attr('id').substring(0, 1); var val = (value) ? value.substring(1) : $(optval).attr('id').substring(1); if ((cat + val == "s0" || cat + val == "s1") && mob && !agree) { // For Mobile } else { var label = ""; var vis = $('#' + cat + val).is(":checked"); switch (cat) { case 's': label = "severity"; break; case 'u': label = "urgency"; break; case 'c': label = "certainty"; break; case 'm': label = "marine"; break; case 'p': label = "pastday"; break; } var stmp = localStorage['severity'].split(""); var utmp = localStorage['urgency'].split(""); var ctmp = localStorage['certainty'].split(""); var newval = (vis) ? "1" : "0"; if (cat == "p") { localStorage.setItem(label, val); $('.btn-1, .btn-2, .btn-3').removeClass('active'); $('.btn-' + localStorage[label]).addClass('active'); } else if (cat != "m") { var tmp = localStorage[label].split(""); for (var i = 0; i < tmp.length; i++) { if (val == i) tmp[i] = newval; } localStorage.setItem(label, tmp.join("")); } else { localStorage.setItem(label, newval); } if (localStorage["severity"]) { removeWMS(); loadWMS(); loadExclamationMarkMetaData(); } var boo = 1 if (localStorage["fulllist"] != "1") { boo = 0 } queryByBBOX(boo) } //mob else } function rectify_lng(ori_lng) { if (ori_lng < -180) { new_lng = ori_lng + 360; } if (ori_lng > 180) { new_lng = ori_lng - 360; } if (new_lng > 180 || new_lng < -180) { return rectify_lng(new_lng); } else { return new_lng; } } function setWIE(_val) { $("button[id*=wie]").removeClass("toggle_active"); $("#wie" + _val).addClass("toggle_active"); localStorage.setItem("fulllist", _val); buildWarningsInEffect(); } function setMV(_val) { $("button[id*=mv]").removeClass("toggle_active"); $("#mv" + _val).addClass("toggle_active"); localStorage.setItem("mapview", _val); } function goPrevItem() { $('#nmhs-next').css("display", "block"); if (click_lock) return; click_lock = true; var cntItem = 0, getit = false, moveset = 0; $('.nmhs-item').each(function () { if (!getit) { if ($(this).position().left < 0) { currOffset--; moveset = list_margin[currOffset]; getit = true; } } cntItem++; if (getit && cntItem == $('.nmhs-item').length) { if (list_margin.indexOf(moveset) == 0) $('#nmhs-prev').css("display", "none"); $('.warning-in-effect-list').animate({ 'margin-left': moveset }, 240, function () { click_lock = false; }); } if (!getit && cntItem == $('.nmhs-item').length) { click_lock = false; } }); } function goNextItem() { $('#nmhs-prev').css("display", "block"); if (click_lock) return; click_lock = true; var cntItem = 0, getit = false, moveset = 0; var chkWidth = ($('.warning-in-effect-box').width() == 768) ? 768 : $(document).innerWidth(); $('.nmhs-item').each(function () { if (!getit) { if ($(this).position().left + 120 > chkWidth) { currOffset++; if (chkWidth - $(this).position().left < 120) moveset = ((($(this).position().left - 16) * currOffset) + 24) * -1; else moveset = (((($(this).position().left - 16) * currOffset) + 24) + (185 * currOffset)) * -1; if (list_margin.length == currOffset) { list_margin.push(moveset); curCnt.push(cntItem); } getit = true; } } cntItem++; if (getit && cntItem == $('.nmhs-item').length) { var normalPageCnt = curCnt[1] - curCnt[0]; if ($('.nmhs-item').length - curCnt[list_margin.indexOf(moveset)] <= normalPageCnt) $('#nmhs-next').css("display", "none"); else $('#nmhs-next').css("display", "block"); $('.warning-in-effect-list').animate({ 'margin-left': moveset }, 240, function () { click_lock = false; }); } if (!getit && cntItem == $('.nmhs-item').length) { click_lock = false; } }); } function sizeWarningInEffectBox() { if ($('.warning-in-effect-box').width() != 768) { $('.warning-in-effect-box').css('width', '768px'); $('.warning-in-effect-size').css('background', 'url(./images/ico-shorten.png) 0px 0px no-repeat').attr('title', 'Fit for screen width'); } else { $('.warning-in-effect-box').css('width', '100%'); $('.warning-in-effect-size').css('background', 'url(./images/ico-shorten.png) -25px 0px no-repeat').attr('title', 'Shorten'); } if (localStorage["fulllist"] != "1") buildWarningsInEffect(); } function closeWarningInEffectBox() { localStorage.setItem("wie_box", "0"); $('.warning-in-effect-box').css('display', 'none'); $('.severity-legend-1').css('display', 'block'); } function buildWarningsInEffect() { var boo = 1 if (localStorage["fulllist"] != "1") { boo = 0 } queryByBBOX(boo) } function buildWarningsInEffectCallBack(_data) { var lists = _data; var lists_with_pastday = []; var pd = parseInt(localStorage["pastday"]); for (var i = 0; i < lists.length; i++) { var tmpmemid = lists[i]; var pastDayMode1 = false; // today and tmr var pastDayMode2 = false; // tmr and later var pastDayMode3 = false; // today if (pd == 3 && (pastDayMode1 == true || pastDayMode2 == true)) { lists_with_pastday.push(tmpmemid); } if (pd == 2 && (pastDayMode1 == true || pastDayMode3 == true)) { lists_with_pastday.push(tmpmemid); } if (pd == 1) { lists_with_pastday.push(tmpmemid); } } var putKeyIntoArray = []; for (key in lists_with_pastday) { var tmpMemid = lists_with_pastday[key]; var arr = []; arr.push(tmpMemid); var tmpSent = 0; if (typeof warnings_in_effect_severity[tmpMemid] !== "undefined") { tmpSent = warnings_in_effect_severity[tmpMemid]['sent']; } arr.push(tmpSent); //sent putKeyIntoArray.push(arr); } putKeyIntoArray.sort(SortBySentTime); click_lock = false, currOffset = 0, list_margin = [-24], curCnt = [0]; var calw = (putKeyIntoArray.length * 185) + 40 + 2; $('.warning-in-effect-list').empty().css('margin-left', '-24px'); $('.warning-in-effect-list').css('width', calw + 'px'); for (var i = 0; i < putKeyIntoArray.length; i++) { var fromSelfDefine = getObjects(self_defined, 'mid', putKeyIntoArray[i][0]); if (fromSelfDefine.length == 0) console.log('Need to tune the center/zoom info: ' + putKeyIntoArray[i][0]); var member = getObjects(search_data, 'mid', putKeyIntoArray[i][0]); var html = ['<li>']; html.push('<a href="javascript:void(0);" onClick="selectWMOmembers(\'' + member[0].mid.trim() + '\');">'); html.push('<div class="nmhs-item">'); html.push('<p class="nmhs-item-name">' + member[0].name + '</p>'); if (member[0].logo != "") { var setBGC = (member[0].mid.trim() == '046' || member[0].mid.trim() == '137') ? 'style="background-color:#074171;" ' : ''; html.push('<div class="nmhs-item-logo"><img ' + setBGC + 'src="https://worldweather.wmo.int/images/logo/' + member[0].logo + '" alt=""></div>'); } else { html.push('<div class="nmhs-item-logo"></div>'); } if (member[0].mid == "107") { html.push('<p class="nmhs-item-dept" title="' + member[0].dept + '">' + member[0].dept.substr(0, 63) + '...</p>'); } else { html.push('<p class="nmhs-item-dept">' + member[0].dept + '</p>'); } html.push('</div>'); html.push('</a>'); html.push('</li>'); $('.warning-in-effect-list').append(html.join('')); } $('#img-loading').css('display', 'none'); $('.warning-in-effect-box').css('display', (localStorage['wie_box'] == 1) ? "block" : "none"); //$('.btn-warning-in-effect').css('visibility', (localStorage['wie_box'] == 1) ? "hidden" : "visible"); $('.severity-legend-1').css('display', (localStorage['wie_box'] == 1) ? "none" : "block"); var chkWidth = ($('.warning-in-effect-box').width() == 768) ? 768 : $(document).innerWidth(); $('#nmhs-next').css("display", "block"); if (($('.warning-in-effect-list').width() - 60) <= chkWidth) $('#nmhs-next').css("display", "none"); } function onMoveEnd(evt) { if (!flaglock) { var endpoint = map.getCenter(); localStorage.setItem("lastlat_l", endpoint.lat); localStorage.setItem("lastlng_l", endpoint.lng); localStorage.setItem("lastzmlv_l", map.getZoom()); customZoom('0'); if ($('.warning-in-effect-box').is(':visible') && localStorage["fulllist"] != "1") { buildWarningsInEffect(); } if ($('.mapboxgl-canvas').css('transform') != "none") { var curlat = map.getCenter().lat; var curlng = map.getCenter().lng; if (tcClick) { setMapCenter(curlat + 0.001, curlng + 0.001, map.getZoom(), true); } else { flyToMapCenter(curlat + 0.001, curlng + 0.001, map.getZoom(), true); } $('.mapboxgl-canvas').css('transform', 'none'); } } else { flaglock = false; } } function pad2(n) { return (n < 10) ? ("0" + n) : n; } function chkByGeoJsonLint(in_link, in_json) { var valid = true; var testJson = JSON.stringify(in_json, null, 4); var errors = geojsonhint.hint(testJson); if (errors.length > 0) { if (errors[0].message.search(/right-hand rule/) == -1) { var message = errors.map(function (error) { return error.message; }).join('<br>') valid = false; } } return valid; } function validation(in_link, in_polygon) { var valid = true; for (var a = 0; a < in_polygon.length; a++) { for (var b = 0; b < in_polygon[a].length; b++) { var itm = in_polygon[a][b].split(","); if (Math.abs(parseFloat(itm[0])) > 180 || Math.abs(parseFloat(itm[1])) > 180) { console.log(in_link); console.log('Invalid lat/lng value'); valid = false; break; } } } if (valid) { for (var i = 0; i < in_polygon.length; i++) { var arr_polygon = []; for (var j = 0; j < in_polygon[i].length; j++) { var tmp = in_polygon[i][j].split(","); tmp[0] = parseFloat(tmp[0]); tmp[1] = parseFloat(tmp[1]); arr_polygon.push([tmp[0], tmp[1]]); } var Polygon = { "type": "Polygon", "coordinates": [ arr_polygon ] } valid = chkByGeoJsonLint(in_link, Polygon); if (!valid) break; } } return valid; } function footerUpdateTime(updateTime) { $('#footer_last_update').html("Updated on " + moment(updateTime).add(parseInt(localStorage["timezone"]), 'hours').format('YYYY-MM-DD HH:mm') + " (" + $("#sel-tz option[value='" + localStorage["timezone"] + "']").text() + ")"); } function getUTC() { $.ajax({ type: "HEAD", cache: false, async: false, url: "/json/wmo_all.json", }).done(function (message, text, jqXHR) { utc = jqXHR.getResponseHeader('Date'); }); return moment(utc).utc().format('YYYY-MM-DD HH:mm:ss'); } function getNotInList() { $.ajax({ url: './json/notInList.json', dataType: 'json', cache: false, success: function (data) { $.each(data, function (key, val) { $.each(val, function (dkey, dval) { try { var polygon = dval; var encoded = []; encoded[0] = polygon; var decoded = encoded.map(GeoJSONPolyline.decode); var coord = decoded[0]['coordinates']; dval['coordinates'] = coord; var tmp_polygon = { 'type': 'Feature', 'geometry': { 'type': dval['type'], 'coordinates': dval['coordinates'] }, "properties": { 'code': key } }; notInList_json.push(tmp_polygon); } catch (err) { console.log("displayNotInList - cannot decode"); } }); }); displayNotInList(true); } }); } var notInListLayer = []; function displayNotInList(_init) { if (!_init && valDef == "") { localStorage.setItem("notInList", (localStorage["notInList"] == 1) ? 0 : 1); } for (var i = 0; i < notInListLayer.length; i++) { if (map.hasLayer(notInListLayer[i])) { map.removeLayer(notInListLayer[i]); delete notInListLayer[i]; } } if ((localStorage["notInList"] == "1" && !capStatusFlag) || (localStorage["notInList"] == "0" && valDef != "")) { for (var i = 0; i < notInList_json.length; i++) { var centroids = { type: 'FeatureCollection', features: { type: 'Feature', properties: notInList_json[i].properties, geometry: turf.centroid(notInList_json[i]).geometry } }; var scoor = [centroids.features.geometry.coordinates[1], centroids.features.geometry.coordinates[0]]; if (centroids.features.properties.code == "Andorra") scoor = [42.543357185759994, 1.601168000000002]; if (centroids.features.properties.code == "Antarctica") scoor = [-73.67726447634907, 21.972656250000004]; if (centroids.features.properties.code == "Armenia") scoor = [40.538851525354666, 44.49462890625001]; //Aruba if (centroids.features.properties.code == "Azerbaijan") scoor = [40.43858586704331, 49.08691406250001]; if (centroids.features.properties.code == "Bahamas") scoor = [24.577099744289427, -78.02490234375001]; if (centroids.features.properties.code == "Bangladesh") scoor = [23.180763583129444, 89.54956054687501]; //Bermuda //Bhutan //Bolivia (Plurinational State of) if (centroids.features.properties.code == "Brunei Darussalam") scoor = [4.468272728744618, 114.61624145507814]; if (centroids.features.properties.code == "Cabo Verde") scoor = [15.057536509245068, -23.630218505859375]; //Cambodia if (centroids.features.properties.code == "Cayman Islands") scoor = [19.316327373141174, -81.16733551025392]; if (centroids.features.properties.code == "Christmas Island") scoor = [-10.495913866004589, 105.64315795898439]; if (centroids.features.properties.code == "Cocos Islands") scoor = [-12.187354718559234, 96.82826042175294]; //Colombia if (centroids.features.properties.code == "Cook Islands") scoor = [-21.228101918666223, -159.77725982666018]; if (centroids.features.properties.code == "Cuba") scoor = [22.004174972902003, -79.19494628906251]; if (centroids.features.properties.code == "Democratic People's Republic of Korea") scoor = [40.11799004890476, 127.18597412109376]; //Dominica //Dominican Republic //El Salvador if (centroids.features.properties.code == "Equatorial Guinea") scoor = [1.6092854348744543, 10.1129150390625]; if (centroids.features.properties.code == "Eritrea") scoor = [15.971891580928983, 38.19946289062501]; if (centroids.features.properties.code == "Fiji") scoor = [-17.790535393588964, 177.91259765625003]; //French Guiana if (centroids.features.properties.code == "French Polynesia") scoor = [-17.651873989224537, -149.4511413574219]; //Georgia //Grenada if (centroids.features.properties.code == "Guadeloupe") scoor = [16.176429608609062, -61.67999267578126]; //Guatemala if (centroids.features.properties.code == "Guernsey") scoor = [49.71415761395856, -2.2041320800781254]; if (centroids.features.properties.code == "Haiti") scoor = [19.02577027586866, -72.29003906250001]; //Honduras //Isle of Man if (centroids.features.properties.code == "Japan") scoor = [36.59788913307022, 139.25720214843753]; if (centroids.features.properties.code == "Jersey") scoor = [49.21916686055889, -2.137870788574219]; if (centroids.features.properties.code == "Kiribati") scoor = [1.784989507880982, -157.58514404296878]; if (centroids.features.properties.code == "Kyrgyzstan") scoor = [41.368564136809695, 74.50927734375001]; if (centroids.features.properties.code == "Lao People's Democratic Republic") scoor = [20.159098270646936, 102.13989257812501]; //Lebanon //Liberia //Liechtenstein if (centroids.features.properties.code == "Malaysia") scoor = [5.424616839194558, 117.07031250000001]; if (centroids.features.properties.code == "Marshall Islands") scoor = [7.149268023792515, 171.0396194458008]; //Martinique if (centroids.features.properties.code == "Micronesia (Federated States of)") scoor = [6.869166104051696, 158.22441101074222]; if (centroids.features.properties.code == "Monaco") scoor = [43.73581728937351, 7.423410415649415]; if (centroids.features.properties.code == "Montserrat") scoor = [16.74597868450992, -62.21557617187501]; if (centroids.features.properties.code == "Morocco") scoor = [32.02670629333614, -7.119140625]; //Namibia if (centroids.features.properties.code == "Nauru") scoor = [-0.5308552129951714, 166.9227504730225]; //Nepal if (centroids.features.properties.code == "New Caledonia") scoor = [-21.616579336740603, 165.82763671875003]; //Nicaragua //Niue //Norfolk Island //Pakistan if (centroids.features.properties.code == "Panama") scoor = [8.461505694920898, -80.93078613281251]; if (centroids.features.properties.code == "Papua New Guinea") scoor = [-6.839169626342808, 145.74462890625003]; if (centroids.features.properties.code == "Peru") scoor = [-10.40137755454354, -74.44335937500001]; //Rwanda if (centroids.features.properties.code == "Saint Kitts and Nevis") scoor = [17.331630748119867, -62.76283264160157]; //Saint Lucia if (centroids.features.properties.code == "Samoa") scoor = [-13.683350573778391, -172.50732421875003]; if (centroids.features.properties.code == "San Marino") scoor = [43.93622554802789, 12.46227264404297]; if (centroids.features.properties.code == "Somalia") scoor = [4.620228796979006, 46.56005859375]; //South Sudan if (centroids.features.properties.code == "Sri Lanka") scoor = [7.471410908357838, 80.66162109375001]; //Syrian Arab Republic if (centroids.features.properties.code == "Tajikistan") scoor = [38.35888785866677, 69.11499023437501]; if (centroids.features.properties.code == "Tonga") scoor = [-21.22794190505816, -175.18249511718753]; //Türkiye //Turkmenistan if (centroids.features.properties.code == "Turks and Caicos Islands") scoor = [21.852398170030728, -71.78466796875001]; if (centroids.features.properties.code == "Tuvalu") scoor = [-7.461198552113084, 178.6700534820557]; if (centroids.features.properties.code == "Ukraine") scoor = [49.027063474829355, 31.349487304687504]; if (centroids.features.properties.code == "United Arab Emirates") scoor = [23.785344805941214, 54.53613281250001]; if (centroids.features.properties.code == "Uzbekistan") scoor = [41.72213058512578, 63.11645507812501]; if (centroids.features.properties.code == "Vatican City") scoor = [41.90272421685849, 12.453002929687502]; //Venezuela, Bolivarian Republic of if (centroids.features.properties.code == "") scoor = []; notInListLayer[i] = L.marker(scoor, { icon: new L.Icon({ iconUrl: './images/uc_icon.svg', iconSize: [12, 12] }) }).addTo(map).bindTooltip("CAP Warnings Under Construction"); } } } function getNoWarningList() { nowarning_json = []; $.ajax({ url: './json/nowarning.json', dataType: 'json', cache: false, async: false, success: function (data) { nowarning_json = data; } }); } var nowarningLayer = []; function displayNoWarning(_init) { if (!_init && valDef == "") { localStorage.setItem("nowarning", (localStorage["nowarning"] == 1) ? 0 : 1); } for (var i = 0; i < nowarningLayer.length; i++) { if (map.hasLayer(nowarningLayer[i])) { map.removeLayer(nowarningLayer[i]); delete nowarningLayer[i]; } } if ((localStorage["nowarning"] == "1" && !capStatusFlag) || (localStorage["nowarning"] == "0" && valDef != "")) { for (var i = 0; i < nowarning_json.length; i++) { if (nowarning_json[i] == "Samoa") scoor = [-13.683350573778391, -172.50732421875003]; if (nowarning_json[i] == "Tonga") scoor = [-21.22794190505816, -175.18249511718753]; if (nowarning_json[i] == "Maldives") scoor = [-0.6481795331595092, 73.11950683593751]; if (nowarning_json[i] == "Guyana") scoor = [4.872047700241915, -58.91967773437501]; if (nowarning_json[i] == "Papua New Guinea") scoor = [-6.839169626342808, 145.74462890625003]; if (nowarning_json[i] == "Jamaica") scoor = [18.098865720894775, -77.32727050781251]; if (nowarning_json[i] == "Burkina Faso") scoor = [12.239333, -1.560593]; if (nowarning_json[i] == "Vanuatu") scoor = [-15.407533817241946, 166.97021484375003]; if (nowarning_json[i] == "Malawi") scoor = [-13.468872672301496, 33.48632812500001]; if (nowarning_json[i] == "Togo") scoor = [8.474858809920354, 0.9887695312500001]; if (nowarning_json[i] == "Viet Nam") scoor = [10.026308632326591, 105.76538085937501]; if (nowarning_json[i] == "Singapore") scoor = [1.3513216589864392, 103.80912780761719]; if (nowarning_json[i] == "Benin") scoor = [9.570465677115115, 2.3071289062500004]; if (nowarning_json[i] == "Burundi") scoor = [-3.4244693283866376, 29.871826171875004]; nowarningLayer[i] = L.marker(scoor, { icon: new L.Icon({ iconUrl: './images/na_icon.svg', iconSize: [12, 12] }) }).addTo(map).bindTooltip("CAP Feeds Not Accessible");; } } } function TcCentreObj() { this.centreData; this.centreList = {}; this.centre_Y; this.centre_N; this.centreGp_Y = []; this.centreGp_N = []; this.polyLayer; this.getCentreList = function () { $.ajax({ url: './json/nmhs.json', dataType: 'json', async: false, success: function (data) { centreData = data; } }); } this.createCentreMarker = function () { centreList["Y"] = []; centreList["N"] = []; var poly_json = []; $.each(centreData, function (key, val) { var mem = val['member']; var poly = val['poly']; var tmp_polygon = { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': val['poly'] }, "properties": { 'code': key } }; poly_json.push(tmp_polygon); var respY = -1; var respN = -1; for (var i = 0; i < mem.length; i++) { if (mem[i]['lat'] != 0 && mem[i]['lon'] != 0) { if (mem[i]['responsible'] == "Y") { respY += 1; centreList["Y"][respY] = L.circleMarker([mem[i]['lat'], mem[i]['lon']], markerStyle("C")); } else { respN += 1; centreList["N"][respN] = L.circleMarker([mem[i]['lat'], mem[i]['lon']], markerStyle("C")); } var content = "<div class='centre_name'>" + mem[i]['name'] + "</div>"; content += "<div class='centre_content'>"; if (typeof activeTC[mem[i]['center_id']] != "undefined") { content += "<div class='active_tc'>"; for (var j = 0; j < activeTC[mem[i]['center_id']].length; j++) { if (tca.indexOf(mem[i]['center_id'].toString()) > -1) { content += "<h5 onclick=\"openFile('" + activeTC[mem[i]['center_id']][j]['name'] + "','" + activeTC[mem[i]['center_id']][j]['file'] + "')\">" + activeTC[mem[i]['center_id']][j]['name'] + "</h5>"; } else { content += "<h5><a href='" + tcw[mem[i]['center_id']] + "' target='_blank' rel='noopener noreferrer'>" + activeTC[mem[i]['center_id']][j]['name'] + "</a></h5>"; } } content += "</div>"; } content += "<div class='related_info'>"; content += "<b>Related Information:</b>"; content += "<ul class='info_list'>"; $.each(mem[i]['info'], function (name, link) { content += "<li><a href='" + link + "' target='_blank' rel='noopener noreferrer'>" + name + "</a></li>"; }); content += "</ul>"; content += "</div>"; content += "</div>"; if (mem[i]['responsible'] == "Y") { centreList["Y"][respY].bindPopup(L.popup().setContent(content), {closeButton: false}); centreGp_Y.push(centreList["Y"][respY]); } else { centreList["N"][respN].bindPopup(L.popup().setContent(content), {closeButton: false}); centreGp_N.push(centreList["N"][respN]); } } if (mem[i]['center_id'] !== 0) { moreInfo[mem[i]['center_id']] = mem[i]['info']; } } }); centre_Y = L.featureGroup(centreGp_Y); centre_N = L.featureGroup(centreGp_N); displayCentre(true); } this.displayCentre = function (_init) { if (!_init) { localStorage.setItem("centre", (localStorage["centre"] == 1) ? 0 : 1); } if (localStorage["centre"] == "1") { if (!map.hasLayer(centre_Y)) { map.addLayer(centre_Y); } if (!map.hasLayer(centre_N)) { map.addLayer(centre_N); } } else { if (localStorage["centre_poly"] == "0") { if (map.hasLayer(centre_Y)) { map.removeLayer(centre_Y); } } if (map.hasLayer(centre_N)) { map.removeLayer(centre_N); } } } } function read_txt() { $.get('/images/text/satellite_IRG_F2.txt', function (data) { var lines = data.split("\n"); var time_arr = []; var last_date_time_arr = []; var last_date; var last_time; var latest_date_time = 0; for (var i = 0, len = lines.length; i < len; i++) { time_arr[i] = lines[i]; var date_time = parseInt(time_arr[i].replace(",", "")); if (date_time > latest_date_time) { latest_date_time = date_time; } } var last_date_time_str = latest_date_time.toString(); last_date = last_date_time_str.substr(0, 8); last_time = last_date_time_str.substr(8, 4); y = last_date.substr(0, 4); m = last_date.substr(4, 2); d = last_date.substr(6, 2); hour = last_time.substr(0, 2); min = last_time.substr(2, 2); re_form_date = y + "-" + m + "-" + d; $('.lbl_satimg').html(" (updated on " + re_form_date + " " + hour + ":" + min + " UTC)"); }); } function prepareMap() { displayGDPR(); getCentreList(); getNotInList(); autoUpdate(true); var timez = localStorage["timezone"]; if (timez >= 0) { timez = "+" + timez; } var label_text = ["Display all CAP alerts (UTC" + timez + ")", moment(utc).add(parseInt(localStorage["timezone"]), 'hours').format('DD MMM [(]ddd[)]'), moment(utc).add(parseInt(localStorage["timezone"]), 'hours').add(1, 'days').format('DD MMM [(]ddd[) and onwards]')]; for (var i = 0; i < label_text.length; i++) { $('.btn-' + (i + 1)).html(label_text[i]); } $('.btn-' + localStorage["pastday"]).addClass('active'); $('#sel-tz').val(localStorage["timezone"]); $('#sel-tz').on('change', function () { if (localStorage["timezone"] != $('#sel-tz').val()) { localStorage["timezone"] = $('#sel-tz').val(); location.href = "./index.html"; } }); } function autoUpdate(flag, isCurr = true) { utc = getUTC(); popupContent = []; popupContent_ex_mark = []; $(".btn-pool").css("display", "none"); $(".btn-setting").css("display", "none"); $(".btn-filter").css("display", "none"); $(".btn-satellite").css("display", "none"); $(".btn-tc").css("display", "none"); $(".btn-obser").css("display", "none"); $(".btn-marine").css("display", "none"); removeWMS(); if (isCurr) { loadWMS(); } else { loadTimeshiftWMS(); } loadExclamationMarkMetaData(); if (localStorage["satellite"]) { if (localStorage["satellite"] == "1") { if (!map.hasLayer(satellite)) { map.addLayer(satellite); } satellite.bringToFront(); } } if (map.hasLayer(nowarning)) { map.removeLayer(nowarning); nowarning = ""; } updateCount = 0; getNoWarningList(); obCount = 0; obTime = []; loadObservation('rain'); loadObservation('thunder'); loadObservation('fog'); loadObservation('gale'); loadTCList(flag); if (localStorage["wie_box"] == "1") { buildWarningsInEffect(); } footerUpdateTime(utc); loadMapComplete(); } function stopAutoUpdate() { if (timerID != null) { clearTimeout(timerID); timerID = null; } } function startAutoUpdate() { var reloadtime = 1000 * 60 * 5; //5 mins timerID = setTimeout(function () { stopAutoUpdate(); autoUpdate(false); }, reloadtime); } function displayIcon() { $('.loading').css('display', 'block'); var hide = true; for (var i = 0; i < renderFirst.length; i++) { if (renderFirst[i] != 1) { hide = false; break; } } if (hide || cntSec == 0) { clearInterval(timer); $('.loading').css('display', 'none'); $('#map, #search_box, .btn-setting, .btn-filter, .btn-satellite, .btn-tc, .btn-obser, .btn-marine').css('visibility', 'visible'); $('.warning-in-effect-box').css('display', (localStorage['wie_box'] == 1) ? "block" : "none"); $('.severity-legend-1').css('display', (localStorage['wie_box'] == 1) ? "none" : "block"); } cntSec--; } function buildInfoViewContent(a, b, c, d, e, f, g) { var info_content = c.split('^'); var gc = (info_content.length > 4) ? " " + info_content[4] : ""; hvGC = (gc != "") ? true : false; var container = ['<div class="info_view_container' + gc + '">']; container.push("<a class='event-name " + severityMapping[e] + "' href='javascript:void(0);' onClick='showDetail(\"" + encodeURIComponent(a) + "\",\"" + encodeURIComponent(b) + "\",\"" + encodeURIComponent(d) + "\",\"" + info_content[3] + "\",\"" + encodeURIComponent(f) + "\",\"" + g + "\")'>" + info_content[0] + "</a>"); var desc = (info_content[1].trim().length > 0) ? info_content[1] : ""; container.push("<p class='event-desc'>" + desc + "</p>"); var sent = (info_content[2].length > 0) ? moment(info_content[2]).from(utc) : ""; container.push("<p class='event-sent'>" + sent + "</p>"); container.push('<p class="event-sent-time" style="display:none;">' + info_content[2] + '</p>'); container.push("</div>"); $('#info_view').append(container.join("")); $('.event-desc').each(function () { if ($(this).textWidth() > 300) { $(this).html($(this).html().substr(0, 180) + '...'); $(this).html($(this).html().replace("......", "...")); } }); } function updateBtnMarineStatus() { if (localStorage["marine"] == "1") { $('.btn-marine').addClass("btn-active"); } } function close_all_view() { $('.menu-btn').removeClass('btn-active'); $('#info_view').css('display', 'none'); $('#setting_view').css('display', 'none'); $('#filter_view').css('display', 'none'); $("#warning_view").css('display', 'none'); $('#tc_view').css('display', 'none'); $('#sw_info_view').css('display', 'none'); $('#maritime_view').css('display', 'none'); } function activeBtn(btn) { $('.menu-btn').removeClass('btn-active'); $(btn).addClass('btn-active'); } function close_info_view() { $('#info_view').css('display', 'none'); } function close_setting_view() { $('.menu-btn').removeClass('btn-active'); $('#setting_view').css('display', 'none'); } function close_filter_view() { $('.menu-btn').removeClass('btn-active'); $('#filter_view').css('display', 'none'); } function close_cap_view() { $(".menu-btn").removeClass("btn-active"); $('#warning_view').css("display", "none"); } function close_tc_view() { $('.menu-btn').removeClass('btn-active'); $('#tc_view').css('display', 'none'); } function close_sw_info_view() { $('.menu-btn').removeClass('btn-active'); $('#sw_info_view').css('display', 'none'); } function close_maritime_view() { $('.menu-btn').removeClass('btn-active'); $('#maritime_view').css('display', 'none'); } window.capdetail = []; function showDetail(link, type, coord, mid, rLink, linkType) { window.capdetail[link] = []; window.capdetail[link]['type'] = type; window.capdetail[link]['rLink'] = rLink; if (type == "geocode" || type == "geojson" || type == "marker") { window.capdetail[link]['coord'] = coord; } window.capdetail[link]['mid'] = mid; window.open("./detail.html?" + linkType + "=" + link); } function displayGDPR() { if (localStorage["gdpr"] == "0") { $(".gdpr").css("display", "block"); } else { $(".gdpr").css("display", "none"); } } /*Limits Of Metareas*/ var jdata = { "areas": [["I<br>United Kingdom", -10.281250000000004, 56.6791104480105, "1"], ["II<br>France", -21.203125000000004, 32.24997445586331, "2"], ["III<br>Mediterranean<br>Greece", 23.039062500000004, 29.337551192346145, "3"], ["IV<br>United States of<br>America", -52.14062500000001, 35.24997445586331, "4"], ["V<br>Brazil", -30.640625000000004, -23.353636941500987, "5"], ["VI<br>Argentina", -42.29687500000001, -58.365250136856076, "6"], ["VII<br>South Africa", 29.882812500000004, -55.97379820507658, "7"], ["VIII(N)<br>India", 87.2421875, 5.5654735507102915, "8N"], ["VIII(S)<br>Mauritius/La Réunion", 66.39062500000001, -15.211180191503997, "8S"], ["VIII(S) Mauritius/Australia", 92.7578125, -28.30438068296277, "8S"], ["IX<br>Pakistan", 55.34375000000001, 13.678401873711785, "9"], ["X<br>Australia", 123.04687500000001, -58.63121664342478, "10"], ["XI<br>China", 112.75000000000001, -2.178401873711772, "11"], ["XI<br>Japan", 151.44531250000003, 23.97902595325528, "11"], ["XII<br>United States of<br>America", -146.52343750000003, 19.94304553343818, "12"], ["XIII<br>Russian<br>Federation", 154.30468750000003, 49.517200697839414, "13"], ["XIV<br>New Zealand", -157.50000000000003, -56.365250136856076, "14"], ["XV<br>Chile", -95.62500000000001, -58.365250136856076, "15"], ["XVI Peru", -98.08593750000001, -15.512810846425442, "16"], ["XVII<br>Canada", -145.54687500000003, 78.83843742487174, "17"], ["XVIII<br>Canada", -68.54687500000003, 78.83843742487174, "18"], ["XIX<br>Norway", -1.54687500000003, 78.83843742487174, "19"], ["XX<br>Russian Federation", 72.54687500000003, 78.83843742487174, "20"], ["XXI<br>Russian Federation", 154.54687500000003, 78.83843742487174, "21"]] }; var limitsOfMetareas_geojson = null; var limitsOfMetareasLayer = null; function setStyleMetareas(feature) { if (feature.properties.style == "dashed") { return { weight: 3, color: 'rgba(0, 0, 0, 1)', dashArray: '5, 5', dashOffset: '5' }; //255, 99, 71 } else { return { weight: 3, color: 'rgba(0, 0, 0, 1)' }; } } function showLimitsOfMetareas() { //Set default zoom level for Limits of Metareas if (map.getZoom() == 2) { map.setZoom(3); $('.leaflet-custom-zoom-out').addClass('leaflet-disabled'); } $.ajax({ url: './json/limitsOfMetareas.geo.json', dataType: 'json', async: false, success: function (data) { limitsOfMetareas_geojson = data; } }); limitsOfMetareasLayer = L.geoJson(limitsOfMetareas_geojson, { style: setStyleMetareas, id: "limitsOfMetareas" }); map.addLayer(limitsOfMetareasLayer); limitsOfMetareasLayer.bringToBack(); for (var i = 0; i < jdata["areas"].length; i++) { tempAdd([jdata["areas"][i][1], jdata["areas"][i][2]], jdata["areas"][i][0], jdata["areas"][i][3]); } } var mk = null; function tempAdd(latlng, title, fn) { var bigcIcon = L.icon({ iconUrl: './images/screen.png', shadowUrl: './images/screen.png', iconSize: [1, 1], shadowSize: [1, 1] }); var new_popup = L.popup({ "autoClose": false, "closeOnClick": null }).setContent("<a href='https://wwmiws.wmo.int/index.php/metareas/display/" + fn + "' target='_blank' style='display: block; padding: 2px; color: #FFFFFF; text-align: center; font-weight: bold; font-size: 10px;'>" + title + "</a>"); mk = new L.marker([latlng[1], latlng[0]], { icon: bigcIcon }).addTo(groupOfMetAreas); mk.bindPopup(new_popup, { autoPan: false, closeButton: false }).openPopup(); $('.leaflet-popup-tip-container').css('display', 'none'); } /*Limits Of Metareas*/ /*Warning area*/ var warningArea_geojson = null; var warningAreaLayer = null; function onWarningAreaClick(e) { if (e.target.feature.properties.regionalCentreUrl != "") { window.open(e.target.feature.properties.regionalCentreUrl, '_blank'); } } function onEachWarningArea(feature, layer) { layer.on({ click: onWarningAreaClick }); } function showWarningArea() { $.ajax({ url: './json/warningArea-multiviewport.geo.json', dataType: 'json', async: false, success: function (data) { warningArea_geojson = data; } }); warningAreaLayer = L.geoJson(warningArea_geojson, { style: { weight: 3, color: 'rgba(0, 154, 255, 1)', fillOpacity: 0.5, fillColor: '#2fcdff' }, onEachFeature: onEachWarningArea, id: "warningArea" }); map.addLayer(warningAreaLayer); warningAreaLayer.bringToBack(); } function warnareaOnOff() { if (warningAreaLayer == null) { showWarningArea(); $('#choose_warnarea').prop('checked', true); } else { $('#choose_warnarea').prop('checked', false); removeMapLayer(warningAreaLayer); warningAreaLayer = null; } } /*Warning area*/ function displayMaritimeWarning(_init) { if (!_init) { localStorage.setItem("marine", (localStorage["marine"] == 1) ? 0 : 1); } removeWMS(); loadWMS(); loadExclamationMarkMetaData(); } function displayMetareas(_init) { if (limitsOfMetareasLayer == null) { $('#choose_metareas').prop('checked', true); showLimitsOfMetareas(); } else { removeMapLayer(limitsOfMetareasLayer); removeMapLayer(groupOfMetAreas); $('#choose_metareas').prop('checked', false); limitsOfMetareasLayer = null; groupOfMetAreas = null; groupOfMetAreas = L.layerGroup().addTo(map); } } var valCode = $.urlParam('code') || ''; var valLat = $.urlParam('lat') || ''; var valLng = $.urlParam('lng') || ''; var valWarningArea = $.urlParam('warningArea') || ''; var valLimitsOfMetareas = $.urlParam('limitsOfMetareas') || ''; var groupOfMetAreas = null; function closeSettingPanel() { if (!$("#filter_view").is(":hidden")) { $(".btn_setting").removeClass("toggle_on"); var filter_view_html = $(".setting_mask #filter_view").html(); $("#filter_view").remove(); $("body").append("<div id=\"filter_view\"></div>"); $("#filter_view").html(filter_view_html).css("display", "none"); $(".setting_mask").remove(); } } function fixMapPosition() { map.invalidateSize(); } function mapResize() { if ($(window).width() <= 767) { var map_height = $(window).height() - $(".header").height() - $(".btn-cap").outerHeight() - $(".severity_legend").height() - $(".footer").height(); $("#map").css({ "right": "0px", "width": "100%", "height": map_height + "px" }); $("#before_map.banner").css({ "width": "" }); } else if ($(window).width() > 767 && $(window).width() < 991) { var map_height = $(window).height() - $(".header").height() - $(".btn-cap").outerHeight() - $(".severity_legend").height() - $(".footer").height(); if (!$("#warning_view").is(":hidden")) { map_height -= $("#warning_view").height(); map_height -= $("#level-1").height(); } else if (!$("#tc_view").is(":hidden")) { map_height -= $("#tc_view").height(); } else if (!$("#sw_info_view").is(":hidden")) { map_height -= $("#sw_info_view").height(); } else if (!$("#maritime_view").is(":hidden")) { map_height -= $("#maritime_view").height(); } else if ($(".setting_mask").length) { map_height -= $(".setting_mask").height(); } $("#map").css({ "right": "0px", "width": "100%", "height": map_height + "px" }); $("#before_map.banner").css({ "width": "" }); } else { var map_width = $("#side_menu_bar").width(); if (!$("#warning_view").is(":hidden")) { map_width += $("#warning_view").width(); } else if (!$("#tc_view").is(":hidden")) { map_width += $("#tc_view").width(); } else if (!$("#sw_info_view").is(":hidden")) { map_width += $("#sw_info_view").width(); } else if (!$("#maritime_view").is(":hidden")) { map_width += $("#maritime_view").width(); } else if ($(".setting_mask").length) { map_width += $(".setting_mask").width(); } var map_height = $(window).height() - $(".header").height() - $(".main-menu-bar").height() - $(".intro").height() - $(".severity_legend").height() - $(".footer").height(); $("#map").css({ "right": map_width + "px", "width": ($(window).width() - map_width) + "px", "height": map_height + "px" }); $("#before_map.banner").css({ "width": ($(window).width() - map_width) + "px" }); } fixMapPosition(); } function resizePanel() { let align_timeshift = 0; if (isTimeshift) { align_timeshift = $('.wrapper #before_map.banner').height() + 20; } align_tab_mt = Math.round($(window).height() - $('.header').height() - $('.footer').height() - $('.severity_legend').height() - $('.btn-cap').outerHeight() - $('#indicator').outerHeight() - mobDefPanH); if (!$("#level-1").is(":hidden") || !$("#level-2").is(":hidden") || !$("#level-3").is(":hidden")) { var warning_view_height = $("#warning_view").height(); var setHeightVal = $(window).height() - $(".header").height() - $(".main-menu-bar").height() - $(".intro").height() - warning_view_height - $(".severity_legend").height() - $(".footer").height(); if ($(window).width() <= 767) { setHeightVal = $(window).height() - $(".header").height() - $(".btn-cap").outerHeight() - warning_view_height - $(".severity_legend").height() - $(".footer").height(); } if ($(window).width() > 767 && $(window).width() < 991) { setHeightVal = ($(window).height() - $(".header").height() - $(".btn-cap").outerHeight() - warning_view_height - $(".severity_legend").height() - $(".footer").height()) / 3; } if (browserName == "safari") setHeightVal += 5; $("#level-1, #level-2, #level-3").css("height", setHeightVal + "px"); if (!$("level-3").is(":hidden")) { $(".cap_details").css("min-height", $("#level-3").height() + "px"); } if ($(window).width() <= 767) { let h = Math.round($(window).height() - $('.header').height() - $('.footer').height() - $('.severity_legend').height() - $('.btn-cap').outerHeight() - $('#indicator').outerHeight() - mobDefPanH); align_tab_mt = h; if (!fromBackward) { $("#warning_view").css({ "margin-top": h + "px", "display": "block" }); } $('#indicator').on('click', function () { if (!animating) { animating = true; if ($("#warning_view").css("margin-top") == align_timeshift + "px") { $("#warning_view").animate({ "margin-top": h }, 500, function () { animating = false; }); } else { $("#warning_view").animate({ "margin-top": align_timeshift }, 500, function () { animating = false; }); } } }); } else if ($(window).width() > 767 && $(window).width() < 991) { let h = $("#level-1").height() * 2; align_tab_mt = h; $("#warning_view").css("margin-top", h + "px"); } else { $("#warning_view").css("margin-top", "0px"); } } if (!$("#tc_view").is(":hidden")) { let select_arrow_1 = parseInt($("#tc_view .select_arrow_1").css("margin-top")); let centre_info = parseInt($("#tc_view #centre_info").css("margin-bottom")); var setHeightVal = $(window).height() - $(".header").height() - $(".main-menu-bar").height() - $(".intro").height() - $(".severity_legend").height() - $(".footer").height(); if ($(window).width() <= 767) { setHeightVal = $(window).height() - $(".header").height() - $(".btn-cap").outerHeight() - $(".severity_legend").height() - $(".footer").height(); } if ($(window).width() > 767 && $(window).width() < 991) { setHeightVal = ($(window).height() - $(".header").height() - $(".btn-cap").outerHeight() - $(".severity_legend").height() - $(".footer").height()) / 2; } if (browserName == "safari") setHeightVal += 5; $("#tc_view").css("height", setHeightVal + "px"); setHeight = $(window).height() - $(".header").height() - $(".main-menu-bar").height() - $(".intro").height() - 167 - $("#warnarea").height() - 12 - $("#centre_info").height() - 20 - $(".severity_legend").height() - $(".footer").height(); if ($(window).width() <= 767) { setHeight = $(window).height() - $(".header").height() - $(".btn-cap").outerHeight() - 167 - $("#warnarea").height() - 12 - $("#centre_info").height() - 20 - $(".severity_legend").height() - $(".footer").height(); } if ($(window).width() > 767 && $(window).width() < 991) { setHeight = setHeightVal - $("#tc_view .button_row").outerHeight() - $("#tc_view .total_warning_row").height() - $(".tc_control_row").height() - select_arrow_1 - centre_info - 10; } $("#detail-box").css("height", setHeight + "px"); setHeight = $(window).height() - $(".header").height() - $(".main-menu-bar").height() - $(".intro").height() - 266 - $("#warnarea").height() - 12 - $("#centre_info").height() - $(".severity_legend").height() - $(".footer").height(); if ($(window).width() <= 767) { setHeight = $(window).height() - $(".header").height() - $(".btn-cap").outerHeight() - 266 - $("#warnarea").height() - 12 - $("#centre_info").height() - $(".severity_legend").height() - $(".footer").height(); } if ($(window).width() > 767 && $(window).width() < 991) { setHeight = setHeightVal - $("#tc_view .button_row").outerHeight() - $("#tc_view .total_warning_row").height() - $(".tc_control_row").height() - select_arrow_1 - centre_info - 10 - 105 + 24; } $("#info_container").height(setHeight); if ($(window).width() <= 767) { let h = align_tab_mt; $("#tc_view").css({ "margin-top": h + "px", "display": "block" }); if ($("#tc_view .tc_control_row .tc_choose").is(":hidden")) { $("#tc_view .tc_control_row .tc_choose").css({ "display": "" }); } if ($("#tc_view .tc_control_row #centre_info .tc_dashed").is(":hidden")) { $("#tc_view .tc_control_row #centre_info .tc_dashed").css({ "display": "" }); } $('#indicator1').on('click', function () { if (!animating) { animating = true; if ($("#tc_view").css("margin-top") == align_timeshift + "px") { $("#tc_view").animate({ "margin-top": h }, 500, function () { animating = false; }); } else { $("#tc_view").animate({ "margin-top": align_timeshift }, 500, function () { animating = false; }); } } }); } else if ($(window).width() > 767 && $(window).width() < 991) { $("#tc_view").css("margin-top", setHeightVal + "px"); } else { if ($("#tc_view .tc_control_row .tc_choose").is(":hidden")) { $("#tc_view .tc_control_row .tc_choose").css({ "display": "" }); } if ($("#tc_view .tc_control_row #centre_info .tc_dashed").is(":hidden")) { $("#tc_view .tc_control_row #centre_info .tc_dashed").css({ "display": "" }); } $("#tc_view").css("margin-top", "0px"); } } if (!$("#level-4").is(":hidden")) { $("#level-4").width($("#detail-box").width()); var setHeight = $(window).height() - $(".header").height() - $(".main-menu-bar").height() - $(".intro").height() - 266 - $("#warnarea").height() - 12 - $("#centre_info").height() - 24 - $(".severity_legend").height() - $(".footer").height(); if ($(window).width() <= 767) { setHeight = $(window).height() - $(".header").height() - $(".btn-cap").outerHeight() - 266 - $("#warnarea").height() - 12 - $("#centre_info").height() - 38 - $(".severity_legend").height() - $(".footer").height(); } if ($(window).width() > 767 && $(window).width() < 991) { let select_arrow_1 = parseInt($("#tc_view .select_arrow_1").css("margin-top")); let centre_info = parseInt($("#tc_view #centre_info").css("margin-bottom")); setHeight = ($(window).height() - $(".header").height() - $(".btn-cap").outerHeight() - $(".severity_legend").height() - $(".footer").height()) / 2; if (browserName == "safari") setHeight += 5; setHeight = setHeight - $("#tc_view .button_row").outerHeight() - $("#tc_view .total_warning_row").height() - $(".tc_control_row").height() - select_arrow_1 - centre_info - 10 - 103; } $("#level-4").height(setHeight); MoraScrollbar.refresh(); $(".msc-scrollbar").css("right", "15px"); $(".msc-content").scrollTop(0); $(".msc-btn-up").text("up").css("text-indent","-9999px"); $(".msc-handle").text("handle").css("text-indent","-9999px"); $(".msc-btn-down").text("down").css("text-indent","-9999px"); } if (!$("#sw_info_view").is(":hidden")) { var setHeightVal = $(window).height() - $(".header").height() - $(".main-menu-bar").height() - $(".intro").height() - $(".severity_legend").height() - $(".footer").height(); if ($(window).width() <= 767) { setHeightVal = $(window).height() - $(".header").height() - $(".btn-cap").outerHeight() - $(".severity_legend").height() - $(".footer").height(); } if ($(window).width() > 767 && $(window).width() < 991) { setHeightVal = ($(window).height() - $(".header").height() - $(".btn-cap").outerHeight() - $(".severity_legend").height() - $(".footer").height()) / 2; } if (browserName == "safari") setHeightVal += 5; $("#sw_info_view").css("height", setHeightVal + "px"); if ($(window).width() <= 767) { let h = align_tab_mt; $("#sw_info_view").css({ "margin-top": h + "px", "display": "block" }); $('#indicator2').on('click', function () { if (!animating) { animating = true; if ($("#sw_info_view").css("margin-top") == align_timeshift + "px") { $("#sw_info_view").animate({ "margin-top": h }, 500, function () { animating = false; }); } else { $("#sw_info_view").animate({ "margin-top": align_timeshift }, 500, function () { animating = false; }); } } }); } else if ($(window).width() > 767 && $(window).width() < 991) { $("#sw_info_view").css("margin-top", setHeightVal + "px"); } else { $("#sw_info_view").css("margin-top", "0px"); } } if (!$("#level-5").is(":hidden")) { var setHeightVal = $(window).height() - $(".header").height() - $(".main-menu-bar").height() - $(".intro").height() - 73 - $(".severity_legend").height() - $(".footer").height(); if ($(window).width() <= 767) { setHeightVal = $(window).height() - $(".header").height() - $(".btn-cap").outerHeight() - 73 - $(".severity_legend").height() - $(".footer").height(); } if ($(window).width() > 767 && $(window).width() < 991) { setHeightVal = ($(window).height() - $(".header").height() - $(".btn-cap").outerHeight() - $(".severity_legend").height() - $(".footer").height()) / 2; setHeightVal = setHeightVal - $("#sw_info_view .button_row").outerHeight() - $("#sw_info_view .total_warning_row").height(); } if (browserName == "safari") setHeightVal += 5; $("#level-5").css({ "height": setHeightVal + "px", "width": "100%" }); MoraScrollbar.refresh(); $(".msc-scrollbar").css("right", "0px"); $(".msc-content").scrollTop(0); $(".msc-btn-up").text("up").css("text-indent","-9999px"); $(".msc-handle").text("handle").css("text-indent","-9999px"); $(".msc-btn-down").text("down").css("text-indent","-9999px"); } if (!$("#maritime_view").is(":hidden")) { var setHeightVal = $(window).height() - $(".header").height() - $(".main-menu-bar").height() - $(".intro").height() - $(".severity_legend").height() - $(".footer").height(); if ($(window).width() <= 767) { setHeightVal = $(window).height() - $(".header").height() - $(".btn-cap").outerHeight() - $(".severity_legend").height() - $(".footer").height(); } if ($(window).width() > 767 && $(window).width() < 991) { setHeightVal = ($(window).height() - $(".header").height() - $(".btn-cap").outerHeight() - $(".severity_legend").height() - $(".footer").height()) / 2; } if (browserName == "safari") setHeightVal += 5; $("#maritime_view").css("height", setHeightVal + "px"); if ($(window).width() <= 767) { let h = align_tab_mt; $("#maritime_view").css({ "margin-top": h + "px", "display": "block" }); $('#indicator3').on('click', function () { if (!animating) { animating = true; if ($("#maritime_view").css("margin-top") == align_timeshift + "px") { $("#maritime_view").animate({ "margin-top": h }, 500, function () { animating = false; }); } else { $("#maritime_view").animate({ "margin-top": align_timeshift }, 500, function () { animating = false; }); } } }); } else if ($(window).width() > 767 && $(window).width() < 991) { $("#maritime_view").css("margin-top", setHeightVal + "px"); } else { $("#maritime_view").css("margin-top", "0px"); } } if (!$("#filter_view").is(":hidden")) { var setHeightVal = $(window).height() - $(".header").height() - $(".main-menu-bar").height() - $(".intro").height() - $(".severity_legend").height() - $(".footer").height(); if ($(window).width() <= 767) { setHeightVal = $(window).height() - $('.header').height() - $('.btn-cap').outerHeight() - $('.severity_legend').height() - $('.footer').height(); } $(".setting_mask").css("margin-top", "0px"); if ($(window).width() > 767 && $(window).width() < 991) { setHeightVal = ($(window).height() - $(".header").height() - $(".btn-cap").outerHeight() - $(".severity_legend").height() - $(".footer").height()) / 2; $(".setting_mask").css("margin-top", setHeightVal + "px"); } if (browserName == "safari") setHeightVal += 5; $(".setting_mask").css("height", setHeightVal + "px"); } mapResize(); } function resizeNew() { if ($(window).width() <= 767) { $('.severity_legend').html($('.severity_legend').html().replace(/ /g, " ")); var button_width = $(".btn-cap").outerWidth(); $(".btn-tc").css("left", (button_width * 1) + "px"); $(".btn-obser").css("left", (button_width * 2) + "px"); $(".btn-marine").css("left", (button_width * 3) + "px"); $(".btn_history").css("left", (button_width * 4) + "px"); $(".btn_setting").css("left", (button_width * 4) + "px"); $("#noti-tc").css("left", ($(".btn-cap").outerWidth() / 2 * 3) + "px"); } else if ($(window).width() < 991) { var button_width = $(".btn-cap").outerWidth(); $(".btn-tc").css("left", (button_width * 1) + "px"); $(".btn-obser").css("left", (button_width * 2) + "px"); $(".btn-marine").css("left", (button_width * 3) + "px"); $(".btn_history").css("left", (button_width * 4) + "px"); $(".btn_setting").css("left", (button_width * 4) + "px"); $("#noti-tc").css("left", ($(".btn-cap").outerWidth() / 2 * 3) + "px"); } else { $(".btn-tc, .btn-obser, .btn-marine, #noti-tc, .btn_history, .btn_setting").css("left", "auto"); } } $(document).ready(function () { if(localStorage['intro'] === undefined) { localStorage.setItem("intro","1"); } var isMobileView = ($(window).width() < 991); //<= 767 if (!isMobileView) { var mask_height = $(window).height() - $(".header").height() - $(".main-menu-bar").height() - $(".intro").height() - $(".severity_legend").height() - $(".footer").height(); $(".loading_mask").css("height", mask_height + "px"); $(".loading_mask").css("width", ($(window).width() <= 1536) ? "586px" : "658px"); if ($(window).width() <= 1280) $(".loading_mask").css("width", "400px"); var img_loading_margin = $(".loading_mask").height() / 2 - $(".img_loading").height() / 2; $(".img_loading").css({ "margin": img_loading_margin + "px auto", "display": "block" }); ani_loading = setInterval(function () { ani_img_y = (ani_img_y < 0) ? 312 : ani_img_y - 26; $(".img_loading").css("background-position-y", ani_img_y + "px"); }, 80); getLatestInfo(); var map_width = $("#side_menu_bar").width() + $("#warning_view").width(); var map_height = $(window).height() - $(".header").height() - $(".main-menu-bar").height() - $(".intro").height() - $(".severity_legend").height() - $(".footer").height(); $("#map").css({ "right": map_width + "px", "width": ($(window).width() - map_width) + "px", "height": map_height + "px" }); } else { getLatestInfo(); var map_height = $(window).height() - $(".header").height() - $(".btn-cap").outerHeight() - $(".severity_legend").height() - $(".footer").height(); $("#map").css({ "right": "0px", "width": "100%", "height": map_height + "px" }); } $("#region").empty(); for (var i = 0; i < region_location.length; i++) { $('#region').append("<option value='" + i + "'>" + region_location[i].name + "</option>"); } $("#warning_view .btn_tableView").click(function () { window.open("./list.html"); return false; }); $("#tc_view .btn_tableView").click(function () { window.open("./tclist.html"); return false; }); var mxZ = 8; map = L.map('map', { 'center': [parseFloat(centerlat), parseFloat(centerlng)], 'zoom': parseInt(mapzoom), 'worldCopyJump': true, minZoom: 2, maxZoom: mxZ, zoomControl: false }); var southWest = L.latLng(-89.98155760646617, -360), northEast = L.latLng(89.99346179538875, 360); var bounds = L.latLngBounds(southWest, northEast); map.setMaxBounds(bounds); groupOfMetAreas = L.layerGroup().addTo(map); // vectorTileServer: serviceItemId var serviceItemId = "2848c7bbd9bf479f9d810d8f1c32e2f5"; // WMO_Agreed_Basemap_102100 L.esri.Vector.layer(serviceItemId).addTo(map); //trigger move / trigger drag flyToMapCenter(parseFloat(centerlat), parseFloat(centerlng), mapzoom, false); var urlTemplate = 'https://worldweather.wmo.int/images/satellite_img/{z}/{x}/{y}.png'; L.TileLayer.Satellite = L.TileLayer.extend({ options: { opacity: 0.4, minZoom: 2, maxZoom: 18, minNativeZoom: 3, maxNativeZoom: 4 }, id: 'mapbox.light', getTileUrl: function (tileCoord) { var meta = { "3": { "colrow": [0, 0, 9, 5] }, "4": { "colrow": [0, 0, 17, 9] } }; var y = tileCoord.x + 1; var x = (tileCoord.y + Math.pow(2, tileCoord.z) + 1) % 10; var z = tileCoord.z; var colrow = meta[z].colrow; if (y < colrow[0] || x < colrow[1] || y > colrow[2] || x > colrow[3]) return ""; return urlTemplate.replace('{z}', z.toString()) .replace('{y}', y.toString()) .replace('{x}', x.toString()); } }); L.tileLayer.satellite = function () { return new L.TileLayer.Satellite(); }; satellite = L.tileLayer.satellite(); clockwiseIcon = L.divIcon({ className: 'css-icon', html: '<div class="tc-icon tc-clockwise"><img src="./images/icon-tc-1.png" alt="" /></div>', iconUrl: './images/icon-tc-1.png', iconSize: [20, 20], }); anticlockwiseIcon = L.divIcon({ className: 'css-icon', html: '<div class="tc-icon tc-anti-clockwise"><img src="./images/icon-tc.png" alt="" /></div>', iconUrl: './images/icon-tc.png', iconSize: [20, 20], }); map.on('moveend', onMoveEnd); prepareMap(); obCount = 0; obTime = []; $('.close_gdpr').click(function () { localStorage.setItem("gdpr", "1"); displayGDPR(); }); $(".btn-cap").click(function () { if(capStatusFlag) { closeCAPstatus(); $(".toggle_on_setting_button").click(); } closeSettingPanel(); if ($(".btn-cap").hasClass("btn-active")) { close_cap_view(); mapResize(); } else { if ($(".btn-tc").hasClass("btn-active")) { clearTC(); } close_all_view(); $(".btn-cap").addClass("btn-active"); $("#warning_view").css({ "display": "block", "visibility": "hidden" }); $("#level-2-header, #level-2, #level-3-header, #level-3").css("display", "none"); $(".total_warning_row, .search_row, .severity_button_row").css("display", "block"); if ($(".link_back1").is(":hidden")) { backward(); } else { up2level(); } } if (isTimeshift) { lightboxSize(); } }); $('.btn-tc').click(function () { if(capStatusFlag) { closeCAPstatus(); $(".toggle_on_setting_button").click(); } closeSettingPanel(); if ($('.btn-tc').hasClass('btn-active')) { close_tc_view(); mapResize(); } else { showPrompt(); $(".link_back").css("display", "none"); callTCPanel(); } if (isTimeshift) { lightboxSize(); } }); $('.btn-obser').click(function () { if(capStatusFlag) { closeCAPstatus(); $(".toggle_on_setting_button").click(); } closeSettingPanel(); if ($('.btn-obser').hasClass('btn-active')) { close_sw_info_view(); mapResize(); } else { hidePrompt(); $(".link_back").css("display", "none"); callInfoPanel(); } if (isTimeshift) { lightboxSize(); } }); $('.btn-marine').click(function () { if(capStatusFlag) { closeCAPstatus(); $(".toggle_on_setting_button").click(); } closeSettingPanel(); if ($('.btn-marine').hasClass('btn-active')) { close_maritime_view(); mapResize(); } else { hidePrompt(); $(".link_back").css("display", "none"); callMaritimePanel(); } if (isTimeshift) { lightboxSize(); } }); $('#tab-list #tc-track').on('click', '.show-detail', function () { showTCDetail(); }); $('#tab-list #pressure-wind').on('click', '.show-detail', function () { showGraph(); }); $('#tab-list #more-info').on('click', '.show-detail', function () { showMoreInfo(); }); $('.btn-main-menu').click(function () { if ($(".main-menu-bar").is(":visible") == false) { $(".main-menu-bar").stop(true, true).fadeIn("fast", function () { $('.btn-main-menu').css('background', 'url(./images/btn-main-menu.png) -40px 0px no-repeat'); }); } else { $(".main-menu-bar").stop(true, true).fadeOut("fast", function () { $('.btn-main-menu').css('background', 'url(./images/btn-main-menu.png) 0px 0px no-repeat'); }); } }); $('#tc_view .total_warning_row .tc_choose_menu .btn-tc-menu').click(function () { if ($("#tc_view .tc_control_row .tc_choose").is(":visible") == false) { $("#tc_view .tc_control_row .tc_choose").stop(true, true).fadeIn("fast", function () { $('#tc_view .total_warning_row .tc_choose_menu .btn-tc-menu').css('background', 'url(./images/btn-main-menu.png) -25.7px 0px / 51.4px 25.7px no-repeat'); }); } else { $("#tc_view .tc_control_row .tc_choose").stop(true, true).fadeOut("fast", function () { $('#tc_view .total_warning_row .tc_choose_menu .btn-tc-menu').css('background', 'url(./images/btn-main-menu.png) 0px 0px / 51.4px 25.7px no-repeat'); }); } }); $("#tc_onoff").change(function () { var checked = $(this).prop("checked"); if (checked === true) { localStorage.setItem("tc", "1"); if (localStorage["forecast"] == 0) { jQuery("#choose_forecast").trigger("click"); } } else { localStorage.setItem("tc", "0"); if (localStorage["forecast"] == 1) { jQuery("#choose_forecast").trigger("click"); } } tcOnOff(localStorage["tc"]); }); $(".btn_setting") .off("click").on("click", function () { if($(".chart_view").length == 0) { align_timeshift = 0; if (isTimeshift) { align_timeshift = $('.wrapper #before_map.banner').height() + 20; } var view_id = "warning_view"; var capActive = $("button.menu-btn.btn-cap").hasClass("btn-active"); var tcActive = $("button.menu-btn.btn-tc").hasClass("btn-active"); var obserActive = $("button.menu-btn.btn-obser").hasClass("btn-active"); var marineActive = $("button.menu-btn.btn-marine").hasClass("btn-active"); if (capActive) { view_id = "warning_view"; } if (tcActive) { view_id = "tc_view"; } if (obserActive) { view_id = "sw_info_view"; } if (marineActive) { view_id = "maritime_view"; } if ($(this).hasClass("toggle_on")) { $(this).removeClass("toggle_on"); closeSettingPanel(); } else { var self = this; $(this).addClass("toggle_on"); if ($(window).width() <= 767) { if ($("#" + view_id).css("margin-top") != align_timeshift + "px") $("#" + view_id).css("margin-top", align_timeshift + "px"); } $("#warning_view").before("<div class=\"setting_mask\"><button class=\"toggle_on_setting_button\">x</button></div>"); $(".toggle_on_setting_button").off("click").on("click", function () { $(self).removeClass("toggle_on"); closeSettingPanel(); mapResize(); }); var setHeightVal = $(window).height() - $(".header").height() - $(".main-menu-bar").height() - $(".intro").height() - $(".severity_legend").height() - $(".footer").height(); if ($(window).width() <= 767) { setHeightVal = $(window).height() - $('.header').height() - $('.btn-cap').outerHeight() - $('.severity_legend').height() - $('.footer').height(); } if ($(window).width() > 767 && $(window).width() < 991) { setHeightVal = ($(window).height() - $(".header").height() - $(".btn-cap").outerHeight() - $(".severity_legend").height() - $(".footer").height()) / 2; } if (browserName == "safari") setHeightVal += 5; $(".setting_mask").height(setHeightVal); $(".setting_mask").css("margin-top", $("#" + view_id).css("margin-top")); $(".setting_mask").css("top", $("#map").css("top")); if ($(window).width() > 767 && $(window).width() < 991) { $(".setting_mask").height(setHeightVal); $(".setting_mask").css("margin-top", setHeightVal); } read_txt(); var filter_view_html = $("#filter_view").html(); $("#filter_view").remove(); $(".setting_mask").append("<div id=\"filter_view\"></div>"); $("#filter_view").html(filter_view_html).css("display", "block"); init_filter_val(); } mapResize(); if (isTimeshift) { lightboxSize(); } } else { if($(".setting_mask").is(":hidden")) $(".setting_mask").show(); } }); $(window).resize(function () { resizePanel(); resizeNew(); }); $('#submenu-block, #submenu').mouseover(function () { $('#submenu').css('display', 'block'); }).mouseout(function () { $('#submenu').css('display', 'none'); }); $('#submenu-block-1, #submenu-1').mouseover(function () { $('#submenu-1').css('display', 'block'); }).mouseout(function () { $('#submenu-1').css('display', 'none'); }); $('#submenu-block-2, #submenu-2').mouseover(function () { $('#submenu-2').css('display', 'block'); }).mouseout(function () { $('#submenu-2').css('display', 'none'); }); map.on("click", function (e) { onClickMap(e); }); mapzoom = map.getZoom(); map.on('zoomend', function () { customZoom('0'); mapzoom = map.getZoom(); }); customZoom('0'); if (valWarningArea != "") { showWarningArea(); } if (valLimitsOfMetareas != "") { showLimitsOfMetareas(); } var userAgent = navigator.userAgent; if (userAgent.match(/edg/i)) { browserName = "edge"; } else if (userAgent.match(/chrome|chromium|crios/i)) { browserName = "chrome"; } else if (userAgent.match(/firefox|fxios/i)) { browserName = "firefox"; } else if (userAgent.match(/safari/i)) { browserName = "safari"; } else if (userAgent.match(/opr\//i)) { browserName = "opera"; } else { browserName = "No browser detection"; } $.when(ajax_members_severity).done(function () { updateSeverityButton(); for (var i = 0; i < severity_array.length; i++) { var classname = "s_" + severityLabel[i].toLowerCase(); $("." + classname).click(function () { var idStr = $(this).attr("id"); var classStr = $(this).attr("class"); var classSeverity = classStr.split(" "); var isDim = (classStr.search(/_dim/) != -1); var isZero = ($(this).text().search(/\(0\)/) != -1); if (!isZero) { if (isDim) { //Show $(this).removeClass(classSeverity[1] + "_dim"); if (!$("#level-2").is(":hidden")) { $("#warnings_warning_list_1 li, #warnings_warning_list_2 li").each(function () { var severity_bar = $(this).find(".severity_bar"); var classString = $(severity_bar).attr("class"); if (classString.substr(-1) == idStr.substr(-1)) { $(this).css("display", "block"); } }); MoraScrollbar.refresh(); $(".msc-content").scrollTop(0); //?need $(".msc-btn-up").text("up").css("text-indent","-9999px"); $(".msc-handle").text("handle").css("text-indent","-9999px"); $(".msc-btn-down").text("down").css("text-indent","-9999px"); } } else { //Hide $(this).addClass(classSeverity[1] + "_dim"); if (!$("#level-2").is(":hidden")) { $("#warnings_warning_list_1 li, #warnings_warning_list_2 li").each(function () { var severity_bar = $(this).find(".severity_bar"); var classString = $(severity_bar).attr("class"); if (classString.substr(-1) == idStr.substr(-1)) { $(this).css("display", "none"); } }); MoraScrollbar.refresh(); $(".msc-content").scrollTop(0); //?need $(".msc-btn-up").text("up").css("text-indent","-9999px"); $(".msc-handle").text("handle").css("text-indent","-9999px"); $(".msc-btn-down").text("down").css("text-indent","-9999px"); } } if (!$("#level-1").is(":hidden")) { getEffectiveWarningBySeverity(); } } }); } var setHeightVal = $(window).height() - $(".header").height() - $(".main-menu-bar").height() - $(".intro").height() - $("#warning_view").height() - $(".severity_legend").height() - $(".footer").height(); if ($(window).width() <= 767) { setHeightVal = $(window).height() - $(".header").height() - $(".btn-cap").outerHeight() - $("#warning_view").height() - $(".severity_legend").height() - $(".footer").height(); } if ($(window).width() > 767 && $(window).width() < 991) { setHeightVal = ($(window).height() - $(".header").height() - $(".btn-cap").outerHeight() - $("#warning_view").height() - $(".severity_legend").height() - $(".footer").height()) / 2; } if (browserName == "safari") setHeightVal += 5; $("#level-1").css("height", setHeightVal + "px"); $(".btn-cap").addClass("btn-active"); updateMemberWarningList(); updateWMOmembers(false, 0); fixMapPosition(); }); map.invalidateSize(); resizeNew(); if(localStorage['intro']=="0") coex_intro(); }); function coex_intro() { let img = $(".intro a img").attr("src"); if(img.search(/arrow_down/) != -1) { localStorage['intro'] = "1"; $(".intro p").html("Severe Weather Information Centre, enhancing the availability of authoritative warnings and information related to extreme and/or potentially high-impact weather, water, and climate events from WMO Members, is one of the core components of WMO GMAS Framework in support of the Early Warnings for All Initiative."); $(".intro a img").attr("src", "./images/arrow_up_blue.svg"); if($(window).width() >= 320 && $(window).width() <= 500) { $("#search_box").css("top","156px"); } if($(window).width() >= 680 && $(window).width() <= 990) { $("#search_box").css("top","103px"); } else { if(!($(window).width() >= 673 && $(window).width() <= 679)) { $(".leaflet-custom-zoom").removeClass("leaflet-custom-zoom-a"); } } if($(window).width() > 1280) { $("#search_box").css("top","224px"); $(".leaflet-custom-zoom").removeClass("leaflet-custom-zoom-b"); } if($(window).width() > 990 && $(window).width() <= 1280) { $("#search_box").css("top","224px"); $(".leaflet-custom-zoom").removeClass("leaflet-custom-zoom-c"); } if($(window).width() > 500 && $(window).width() < 673) { $("#search_box").css("top","162px"); } if($(window).width() > 990) { $("#map, #warning_view, #tc_view, #sw_info_view, #maritime_view, .loading_mask, .btn-cap").css("top", "218px"); $(".btn-tc").css("top", "263px"); $("#noti-tc").css("top", "270px"); $(".btn-obser").css("top", "308px"); $(".btn-marine").css("top", "353px"); $(".btn_setting").css("top", "398px"); resizePanel(); } } else { localStorage['intro'] = "0"; if($(window).width() < 460) { $(".intro p").html("Severe Weather Information Centre, enhancing the availability of authoritative warnings and ..."); } else { if($(window).width() >= 460 && $(window).width() <= 550) { $(".intro p").html("Severe Weather Information Centre, enhancing the availability of authoritative warnings and information related to extreme ..."); } else { $(".intro p").html("Severe Weather Information Centre, enhancing the availability of authoritative warnings and information related to extreme and/or potentially high-impact weather..."); } } $(".intro a img").attr("src", "./images/arrow_down_blue.svg"); if($(window).width() < 354) { $("#search_box").css("top","88px"); } else { if($(window).width() <= 990) { $("#search_box").css("top","103px"); } if($(window).width() > 1280) { $("#search_box").css("top","196px"); $(".leaflet-custom-zoom").addClass("leaflet-custom-zoom-b"); } if($(window).width() > 990 && $(window).width() <= 1280) { $("#search_box").css("top","196px"); $(".leaflet-custom-zoom").addClass("leaflet-custom-zoom-c"); } } $(".leaflet-custom-zoom").addClass("leaflet-custom-zoom-a"); if($(window).width() > 990) { $("#map, #warning_view, #tc_view, #sw_info_view, #maritime_view, .loading_mask, .btn-cap").css("top", "193px"); $(".btn-tc").css("top", "238px"); $("#noti-tc").css("top", "245px"); $(".btn-obser").css("top", "283px"); $(".btn-marine").css("top", "328px"); $(".btn_setting").css("top", "373px"); resizePanel(); } } } </script> </head> <body> <div class="wrapper"> <div class="header" role="banner"> <div id="web_title"><img src="./images/intro_text_500px.png" alt=""><h1><span class="website_name">Severe Weather Information Centre 3.0</span><br><span class="website_intro">A Core Component of the WMO Global<br class="br_1"> Multi-hazard Alert System (GMAS) Framework<br class="br_2"> Supporting UN Early Warnings for All Initiative</span></h1></div> <div class="main-menu-bar"> <ul> <li><a id="eee" href="#" onClick="tmpGlobal();">Home (Map)</a></li> <li class="seperator">|</li> <li id="submenu-block-2"> <a class="nolink">Table View</a> <ul id="submenu-2"> <li><a href="./list.html" class="menu-sub-bar">CAP Warnings</a></li> <li><a href="./tclist.html" class="menu-sub-bar">Tropical Cyclone Tracks</a></li> </ul> </li> <li class="seperator">|</li> <li id="submenu-block-1"> <a class="nolink">Sources of Data</a> <ul id="submenu-1"> <li><a href="./sources.html" class="menu-sub-bar">CAP Warnings</a></li> <li><a href="./tc.html" class="menu-sub-bar">Tropical Cyclone Warnings and Advisories</a></li> <li><a href="./observation.html" class="menu-sub-bar">Severe Weather Observations</a></li> </ul> </li> <li class="seperator">|</li> <li id="submenu-block"> <a class="nolink">Links</a> <ul id="submenu"> <li><a href="https://public.wmo.int/en/our-mandate/weather/weather-forecast" target="_blank" rel="noopener noreferrer" class="menu-sub-bar">WMO (Weather Forecasts and Warnings)</a></li> <li><a href="https://worldweather.wmo.int" target="_blank" rel="noopener noreferrer" class="menu-sub-bar">World Weather Information Service (WWIS)</a></li> <li><a href="https://alertingauthority.wmo.int" target="_blank" rel="noopener noreferrer" class="menu-sub-bar">WMO Register of Alerting Authorities</a></li> <li><a href="https://etrp.wmo.int/course/index.php?categoryid=51" target="_blank" rel="noopener noreferrer" class="menu-sub-bar">WMO CAP Resources Portal</a></li> <li><a href="https://gmas.asia" target="_blank" rel="noopener noreferrer" class="menu-sub-bar">GMAS-A</a></li> <li><a href="https://meteoalarm.org/en/" target="_blank" rel="noopener noreferrer" class="menu-sub-bar">Meteoalarm (Europe)</a></li> <li><a href="https://wwmiws.wmo.int/index.php" target="_blank" rel="noopener noreferrer" class="menu-sub-bar">Worldwide Met-Ocean Information and Warning Service (WWMIWS)</a></li> <li><a href="https://severeweather.wmo.int/TCFW/" target="_blank" rel="noopener noreferrer" class="menu-sub-bar">Tropical Cyclone Forecaster Website</a></li> <li><a href="./feeds.html" class="menu-sub-bar">Alert Hub CAP Feeds (Demo)</a></li> <li><a href="https://portal.worldweather.org/cap-checker/" target="_blank" rel="noopener noreferrer" class="menu-sub-bar">CAP-checker</a></li> </ul> </li> <li class="seperator">|</li> <li><a href="./about.html">About</a></li> <li class="seperator">|</li> <li><a href="./note.html">Notes to User</a></li> <li class="responMenu"><a href="https://wmo.int/privacy-policy" target="_blank" rel="noopener noreferrer">Privacy Policy</a></li> <li class="responMenu"><a href="https://wmo.int/disclaimer" target="_blank" rel="noopener noreferrer">Disclaimer</a></li> <li class="responMenu"><a href="https://wmo.int" target="_blank" rel="noopener noreferrer">WMO Public site</a></li> <li class="responMenu"><a href="https://community.wmo.int/en" target="_blank" rel="noopener noreferrer">WMO Extranet</a></li> </ul> <div id="tz-box"> <label for="sel-tz">Timezone</label> <select id="sel-tz"> <option value="-12">UTC-12</option> <option value="-11">UTC-11</option> <option value="-10">UTC-10</option> <option value="-9">UTC-9</option> <option value="-8">UTC-8</option> <option value="-7">UTC-7</option> <option value="-6">UTC-6</option> <option value="-5">UTC-5</option> <option value="-4">UTC-4</option> <option value="-3">UTC-3</option> <option value="-2">UTC-2</option> <option value="-1">UTC-1</option> <option value="0">UTC+0</option> <option value="1">UTC+1</option> <option value="2">UTC+2</option> <option value="3">UTC+3</option> <option value="4">UTC+4</option> <option value="5">UTC+5</option> <option value="6">UTC+6</option> <option value="7">UTC+7</option> <option value="8">UTC+8</option> <option value="9">UTC+9</option> <option value="10">UTC+10</option> <option value="11">UTC+11</option> <option value="12">UTC+12</option> <option value="13">UTC+13</option> <option value="14">UTC+14</option> </select> </div> </div> <div class="intro"> <p>Severe Weather Information Centre, enhancing the availability of authoritative warnings and information related to extreme and/or potentially high-impact weather, water, and climate events from WMO Members, is one of the core components of WMO GMAS Framework in support of the Early Warnings for All Initiative.</p> <a href="javascript:coex_intro();"><img src="./images/arrow_up_blue.svg" alt=""></a> <div style="clear:both;"></div> </div> </div> <div id='before_map' class="banner"> <div class="label">Date and Time: </div> <div class="event"> <button type="button" class="btn btn-live" data-dismiss="modal">Back to Live Data</button> </div> <div class="datetime"> <div class="text btn_history"></div> <div class="btn_row"><button class="prev_day" title="-1day" value="-24"></button><button class="prev_hour" title="-1hour" value="-1"></button><button class="next_hour" title="+1hour" value="1"></button><button class="next_day" title="+1day" value="24"></button> </div> </div> </div> <div id='map'></div> <div id="side_menu_bar"> <!-- --> </div> <div class="loading_mask"> <div class="img_loading"></div> </div> <div id="warning_view"> <div id="indicator"> <hr> </div> <div class="button_row"> <div class="link_back"> <img src="./images/arrow_left.svg" alt=""><a id="aaa" href="#" onclick="backward();">Other Members</a> <div class="clearboth"></div> </div> <div class="link_back1"> <img src="./images/arrow_left.svg" alt=""><a id="bbb" href="#" onclick="backToMember();">Back</a> <div class="clearboth"></div> </div> <div class="clearboth"></div> </div> <div class="live_button_row"> <div class="info"> <span class="icon history_time"> </span> <span class="detail"> <div class="msg"> If wanna change to the latest weather warning. Please press 'Back to Live Data'. </div> </span> </div> </div> <div class="total_warning_row"> <div class="a"><img src="./images/cap.svg" alt="">CAP Warnings in Effect<br><span id="total_effective_warning"></span></div> <div class="c"><button class="btn_tableView">Table View</button></div> <div class="b"><img src="./images/time.svg" alt="">Updated on: <span id="updated_on"></span><span class="span_text">Sorted by the latest warning</span></div> <div class="clearboth"></div> </div> <div class="search_row"> <div class="search_row_left"> <label for="region">Regions</label> <div class="select_arrow"> <select id="region" onChange="updateWMOmembers(true, 1);"></select> </div> </div> <div class="search_row_right"> <label for="wmo_members">WMO Members</label> <div class="select_arrow"> <select id="wmo_members" onChange="selectWMOmembers();"></select> </div> </div> <div class="clearboth"></div> </div> <div class="mask_severity_button_row"> <div class="severity_button_row"> <button id="s_btn_4" class="s_btn s_extreme">Extreme</button> <button id="s_btn_3" class="s_btn s_severe">Severe</button> <button id="s_btn_2" class="s_btn s_moderate">Moderate</button> <button id="s_btn_1" class="s_btn s_minor">Minor</button> <button id="s_btn_0" class="s_btn s_unknown">Unknown</button> <div class="clearboth"></div> </div> </div> <div id="level-1" class="with-arrows msc-wrapper"> <div class="msc-content"> <div class="members_row"> <ul id="members_warning_list"></ul> </div> </div> </div> <div id="level-2-header"> <div class="members_row"> <ul id="members_warning_list_1"></ul> </div> </div> <div id="level-2"> <div class="msc-content"> <div class="warnings_row"> <ul id="warnings_warning_list_1"></ul> <ul id="warnings_warning_list_2"></ul> <div class="clearboth"></div> </div> </div> </div> <div id="level-3-header"> <p id="prtHeadline"></p> <p id="prtSent">Issued time: <span></span></p> <div id="prtLanguage"><label for="langList">Language</label>: <span id="oneLang"></span> <select id="langList" onchange="buildCAPdetail(this.value)" class="detail_2"></select> </div> <div id="btnDownloadCAP"><a id="ccc" href="#"><img src="./images/icon_tableView_btn-1.svg" alt="">Download</a></div> <div class="clearboth"></div> </div> <div id="level-3"> <div class="msc-content"> <div class="details_row"> <div class="cap_details"> <div class="div_table"> <table> <tr style="display:none;"> <th>Event, Member name, Region and Department name</th><th>Department Logo</th> </tr> <tr> <td class="td_left"> <div id="prtEvent"></div> <div id="prtMember"></div> <div id="prtRegionDept"></div> </td> <td class="td_right"> <div id="prtDeptLogo"></div> </td> </tr> </table> </div> <div class="detail_suc"> <div class="detail_s">Severity: <br class="newline"><span></span></div> <div class="pipe_col"> </div> <div class="detail_u">Urgency: <br class="newline"><span class="card_suc_span_bg"></span></div> <div class="pipe_col"> </div> <div class="detail_c">Certainty: <br class="newline"><span class="card_suc_span_bg"></span></div> <div class="clearboth"></div> </div> <div class="detail_time"> <div class="detail_effective">Effective time:<br><span class=""></span></div> <div class="pipe_col"> </div> <div class="detail_onset">Onset time:<br><span class=""></span></div> <div class="pipe_col"> </div> <div class="detail_expire">Expire time:<br><span class=""></span></div> <div class="clearboth"></div> </div> <div class="detail_desc"> <div class="detail_header"><img src="./images/icon_event.svg" alt="">Event Description</div> <p id="prtDesc"></p> </div> <div class="detail_instruc"> <div class="detail_header"><img src="./images/icon_info.svg" alt="">Instructions</div> <p id="prtInstruc"></p> </div> <div class="detail_affect_area"> <div class="detail_header"><img src="./images/icon_area.svg" alt="">Affected area</div> <p id="prtArea"></p> </div> <br><br><br><br> </div> </div> </div> </div> </div> <div id="filter_view"> <div class="filter_view_div1"> <h2 class="filter_view_h4">Settings</h2> </div> <div id="filter_scroll_view"> <div class="filter_scroll_view_div1"> <ul id='slayer_menu'> <li class="filter_view_li1"> <h3 class="filter_view_h5"><img src="./images/setting_mayer.svg" alt="">Map Layers</h3> <li> <div class='pretty p-default'><input id='choose_capstatus' type='checkbox' class='choose_capstatus' name='choose_capstatus' value='0' onClick='displayCapStatus();' /> <div class='state'><label for='choose_capstatus'> Global CAP implementation in RA I-VI</label></div> </div> </li> </li> <li class="filter_view_margin_left"> <div class='pretty p-default'><input id='sate' type='checkbox' class='choose_layer' name='choose_layer' value='2' onClick='satelliteOnOff();' /> <div class='state'><label for='sate'> Satellite Image <span class="lbl_satimg"></span></label> </div> </div> </li> <li> <div class='pretty p-default'><input id='choose_notInList' type='checkbox' class='choose_notInList' name='choose_notInList' value='0' onClick='displayNotInList(false);' /> <div class='state'><label for='choose_notInList'> CAP Warnings Under Construction</label><img src="./images/uc_icon.svg" alt="" class="marker-symbol mCS_img_loaded"></div> </div> </li> <li> <div class='pretty p-default'><input id='choose_nowarning' type='checkbox' class='choose_nowarning' name='choose_nowarning' value='0' onClick='displayNoWarning(false);' /> <div class='state'><label for='choose_nowarning'> CAP Feeds Not Accessible</label><img src="./images/na_icon.svg" alt="" class="marker-symbol mCS_img_loaded"></div> </div> </li> <li> <div class='pretty p-default'><input id='choose_centre' type='checkbox' class='choose_centre' name='choose_centre' value='0' onClick='displayCentre(false);' /> <div class='state'><label for='choose_centre'> SWIC Participating Members</label></div> </div> </li> </ul> <div class="clearboth"></div> <div class="cap_warning_setting"> <ul id="cap_warnings_menu"> <li class="filter_view_li1"> <h3 class="filter_view_h5"><img src="./images/setting_cap_warning.svg" alt="">CAP Warnings</h3> </li> <div class="pretty p-default filter_view_margin_left"> <input id="borderlineon" type="checkbox" onClick='borderCtrl(false);' /> <div class="state p-on"><label for="borderlineon">Show CAP Warnings Borders</label> </div> </div> </ul> <ul id='severity_menu'> <li class="filter_view_li2"> <h3 class="filter_view_h5">Severity</h3> </li> <li class="filter_view_margin_left"> <div class='pretty p-default'><input id='s4' type='checkbox' class='choose_severity' value='4' onClick='severityFilter(this);' /> <div class='state p-extreme'><label for='s4'> Extreme</label></div> </div> </li> <li> <div class='pretty p-default'><input id='s3' type='checkbox' class='choose_severity' value='3' onClick='severityFilter(this);' /> <div class='state p-severe'><label for='s3'> Severe</label></div> </div> </li> <li> <div class='pretty p-default'><input id='s2' type='checkbox' class='choose_severity' value='2' onClick='severityFilter(this);' /> <div class='state p-moderate'><label for='s2'> Moderate</label></div> </div> </li> <li> <div class='pretty p-default'><input id='s1' type='checkbox' class='choose_severity' value='1' onClick='severityFilter(this);' /> <div class='state p-minor'><label for='s1'> Minor</label></div> </div> </li> <li> <div class='pretty p-default'><input id='s0' type='checkbox' class='choose_severity' value='0' onClick='severityFilter(this);' /> <div class='state p-unknown'><label for='s0'> Unknown</label></div> </div> </li> </ul> <ul id='urgency_menu'> <li class="filter_view_li2"> <h3 class="filter_view_h5">Urgency</h3> </li> <li class="filter_view_margin_left"> <div class='pretty p-default'><input id='u4' type='checkbox' class='choose_urgency' value='4' onClick='severityFilter(this);' /> <div class='state'><label for='u4'> Immediate</label></div> </div> </li> <li> <div class='pretty p-default'><input id='u3' type='checkbox' class='choose_urgency' value='3' onClick='severityFilter(this);' /> <div class='state'><label for='u3'> Expected</label></div> </div> </li> <li> <div class='pretty p-default'><input id='u2' type='checkbox' class='choose_urgency' value='2' onClick='severityFilter(this);' /> <div class='state'><label for='u2'> Future</label></div> </div> </li> <li> <div class='pretty p-default'><input id='u1' type='checkbox' class='choose_urgency' value='1' onClick='severityFilter(this);' /> <div class='state'><label for='u1'> Past</label></div> </div> </li> <li> <div class='pretty p-default'><input id='u0' type='checkbox' class='choose_urgency' value='0' onClick='severityFilter(this);' /> <div class='state'><label for='u0'> Unknown</label></div> </div> </li> </ul> <ul id='certainty_menu'> <li class="filter_view_li2"> <h3 class="filter_view_h5">Certainty</h3> </li> <li class="filter_view_margin_left"> <div class='pretty p-default'><input id='c4' type='checkbox' value='4' onClick='severityFilter(this);' /> <div class='state'><label for='c4'> Observed</label></div> </div> </li> <li> <div class='pretty p-default'><input id='c3' type='checkbox' value='3' onClick='severityFilter(this);' /> <div class='state'><label for='c3'> Likely</label></div> </div> </li> <li> <div class='pretty p-default'><input id='c2' type='checkbox' value='2' onClick='severityFilter(this);' /> <div class='state'><label for='c2'> Possible</label></div> </div> </li> <li> <div class='pretty p-default'><input id='c1' type='checkbox' value='1' onClick='severityFilter(this);' /> <div class='state'><label for='c1'> Unlikely</label></div> </div> </li> <li> <div class='pretty p-default'><input id='c0' type='checkbox' value='0' onClick='severityFilter(this);' /> <div class='state'><label for='c0'> Unknown</label></div> </div> </li> </ul> <div class="clearboth"></div> </div> <ul id='last_visited_menu'> <li class="filter_view_li2"> <h3 class="filter_view_h5"><span style="display: none;">Map view setting</span><img src="./images/setting_warning.svg" alt="" ></h3> </li><!-- Show World Map --> <li> <div class="toggle_button_container"><button id="mv1" class="toggle_button" onClick="setMV('1');">Show World Map</button><button id="mv0" class="toggle_button" onClick="setMV('0');">Remember Last View</button></div> </li> </ul> <div class="clearboth"></div> </div> </div> </div> <div id="info_view"> <a id="ddd" class="btn-close" href="#" onClick="close_info_view();"> X </a> <div class="clearboth"></div> </div> <div id="tc_view"> <div id="indicator1"> <hr> </div> <div class="button_row"> <div class="clearboth"></div> </div> <div class="total_warning_row"> <div class="a1"><img src="./images/main_tropical_v2.svg" alt="">Tropical Cyclones</div> <div class="c1"><button class="btn_tableView">Table View</button></div> <div class="tc_choose_menu"><button class="btn-tc-menu">Menu</button></div> <div class="b1"> <input type="checkbox" id="tc_onoff"> <label id="chk_btn" for="tc_onoff"> <div id="knob"></div> <div id="ckb_off">off</div> <div id="ckb_on">on</div> </label> <div class="ckb_txt">All TCs</div> </div> <div class="clearboth"></div> </div> <div class="tc_control_row"> <div class="tc_choose"> <div class='pretty p-default' id='warnarea'><input id='choose_warnarea' type='checkbox' class='choose_warnarea' name='choose_warnarea' value='1' onclick="warnareaOnOff();" /> <div class='state'><label for='choose_warnarea'> Warning Area of RSMCs / TCWCs</label></div> </div> <div class='pretty p-default'><input id='choose_forecast' type='checkbox' class='choose_forecast' name='choose_forecast' value='1' onclick="forecastOnOff();" /> <div class='state'><label for='choose_forecast'> Forecast Track</label></div> </div> <div class='pretty p-default' style="margin-left: 20px;"><input id='choose_time' type='checkbox' class='choose_time' name='choose_time' value='1' onclick="timeOnOff();" /> <div class='state'><label for='choose_time'> Additional Info</label></div> </div> </div> <div class="select_arrow_1"><label for="sel_tc"><span style="display:none;">Select TCs</span></label> <select id="sel_tc" onchange="showTC(this.value)"> <option value="">All TCs</option> </select> </div> <div id="centre_info"></div> <div class="clearboth"></div> </div> <div class="tc_detail_row"> <div id="detail-box" style="display:block!important;"> <ul id="tab-list" class="nav nav-tabs nav-justified" role="tablist"> <li class="active" id="tc-track"><a class='show-detail' role='tab' data-toggle='tab'>TC Track</a></li> <li id="pressure-wind"><a class='show-detail' role='tab' data-toggle='tab'>Central P & Max Wind Speed</a></li> <li id="more-info"><a class='show-detail' role='tab' data-toggle='tab'>More Info</a></li> </ul> <ul id="detail_tc_list_header"> <li class="detail_tc_list_c1">Date Time (UTC)</li> <li class="detail_tc_list_c2">Intensity</li> <li class="detail_tc_list_c3">Speed (kt)</li> <li class="detail_tc_list_c4">Direction</li> </ul> <div class="clearboth"></div> <div id="level-4"> <div class="msc-content"> <div class="tc_row"> <ul id="detail_tc_list"></ul> <div class="clearboth"></div> </div> </div> </div> <table id="detail-table"> <thead> <tr> <th>Date Time (UTC)</th> <th>Intensity</th> <th>Speed (kt)</th> <th>Direction</th> </tr> </thead> <tbody> </tbody> </table> <div id="graph_container"></div> <div id="info_container"> <div id="info_content"></div> </div> </div> </div> </div> <div id="sw_info_view"> <div id="indicator2"> <hr> </div> <div class="button_row"> <div class="clearboth"></div> </div> <div class="total_warning_row"> <div class="d1"><img src="./images/main_weather.svg" alt="">Severe Weather Observations</div> <div class="clearboth"></div> </div> <!-- Heavy Rain/Snow --> <div id="level-5"> <div class="msc-content"> <div class="sw_scroll_view_div2"> <table width="100%" cellpadding="0" cellspacing="0" role="presentation"> <tr style="display:none;"> <th>Title and updated time</th><th>On/Off for all</th> </tr> <tr> <td class="sw_table_cell1"> <h2 class="sw_scroll_view_h5_3"><img class="legend_icon verali1" src="./images/s_rain.svg" alt="" />Heavy Rain/Snow</h2> </td> <td rowspan="2" class="sw_table_cell2 verali3"> <div class="sw_toggle_btn"> <input type="checkbox" id="rain_onoff" onclick="allOn('rain');"> <label class="chk_btn" for="rain_onoff"> <div class="knob"></div> <div class="ckb_off">off</div> <div class="ckb_on">on</div> </label> <div class="ckb_txt1">All</div> </div> </td> </tr> <tr> <td><span id="rain-time"></span></td> </tr> </table> </div> <!-- Heavy Rain/Snow --> <ul class='sw_menu'> <li class="sw_scroll_view_margin_left"> <div class='pretty p-default'><input id='rain0' class='rainChkBox' type='checkbox' value='0' onclick="selectObservation('rain');" checked /> <div class='state rain0 p-latest'><label for='rain0'><span>Latest reports</span></label></div> </div> </li> <li> <div class='pretty p-default'><input id='rain1' class='rainChkBox' type='checkbox' value='1' onclick="selectObservation('rain');" /> <div class='state rain1 p-6'><label for='rain1'><span>About 6 hours earlier</span></label></div> </div> </li> <li> <div class='pretty p-default'><input id='rain2' class='rainChkBox' type='checkbox' value='2' onclick="selectObservation('rain');" /> <div class='state rain2 p-12'><label for='rain2'><span>About 12 hours earlier</span></label></div> </div> </li> <li> <div class='pretty p-default'><input id='rain3' class='rainChkBox' type='checkbox' value='3' onclick="selectObservation('rain');" /> <div class='state rain3 p-18'><label for='rain3'><span>About 18 hours earlier</span></label></div> </div> </li> </ul> <div class="clearboth"></div> <!-- Gale --> <div class="sw_scroll_view_div2"> <table width="100%" cellpadding="0" cellspacing="0" role="presentation"> <tr style="display:none;"> <th>Title and updated time</th><th>On/Off for all</th> </tr> <tr> <td class="sw_table_cell1"> <h2 class="sw_scroll_view_h5_3"><img class="legend_icon verali1" src="./images/s_wind.svg" alt="" />Gale</h2> </td> <td rowspan="2" class="sw_table_cell2 verali3"> <div class="sw_toggle_btn"> <input type="checkbox" id="gale_onoff" onclick="allOn('gale');"> <label class="chk_btn" for="gale_onoff"> <div class="knob"></div> <div class="ckb_off">off</div> <div class="ckb_on">on</div> </label> <div class="ckb_txt1">All</div> </div> </td> </tr> <tr> <td><span id="gale-time"></span></td> </tr> </table> </div> <!-- Gale --> <ul class='sw_menu'> <li class="sw_scroll_view_margin_left"> <div class='pretty p-default'><input id='gale0' class='galeChkBox' type='checkbox' value='0' onClick="selectObservation('gale');" checked /> <div class='state gale0 p-latest'><label for='gale0'><span>Past 3 hours</span></label></div> </div> </li> <li> <div class='pretty p-default'><input id='gale1' class='galeChkBox' type='checkbox' value='1' onClick="selectObservation('gale');" /> <div class='state gale1 p-6'><label for='gale1'><span>Past 6-9 hours</span></label></div> </div> </li> <li> <div class='pretty p-default'><input id='gale2' class='galeChkBox' type='checkbox' value='2' onClick="selectObservation('gale');" /> <div class='state gale2 p-12'><label for='gale2'><span>Past 12-15 hours</span></label></div> </div> </li> <li> <div class='pretty p-default'><input id='gale3' class='galeChkBox' type='checkbox' value='3' onClick="selectObservation('gale');" /> <div class='state gale3 p-18'><label for='gale3'><span>Past 18-21 hours</span></label></div> </div> </li> </ul> <div class="clearboth"></div> <!-- Thunderstorms --> <div class="sw_scroll_view_div2"> <table width="100%" cellpadding="0" cellspacing="0" role="presentation"> <tr style="display:none;"> <th>Title and updated time</th><th>On/Off for all</th> </tr> <tr> <td class="sw_table_cell1"> <h2 class="sw_scroll_view_h5_3"><img class="legend_icon verali1" src="./images/s_thunder_slight.svg" alt="" />Thunderstorms </h2> </td> <td rowspan="2" class="sw_table_cell2 verali3"> <div class="sw_toggle_btn"> <input type="checkbox" id="thunder_onoff" onclick="allOn('thunder');"> <label class="chk_btn" for="thunder_onoff"> <div class="knob"></div> <div class="ckb_off">off</div> <div class="ckb_on">on</div> </label> <div class="ckb_txt1">All</div> </div> </td> </tr> <tr> <td><span id="thunder-time"></span></td> </tr> </table> </div> <!-- Thunderstorms --> <div class="clearboth"></div> <ul class='sw_menu'> <li class="sw_scroll_view_margin_left"> <div class='pretty p-default'><input id='thunder0' class='thunderChkBox' type='checkbox' value='0' onClick="selectObservation('thunder');" checked /> <div class='state thunder0 p-latest'><label for='thunder0'><span>Past 3 hours</span></label></div> </div> </li> <li> <div class='pretty p-default'><input id='thunder1' class='thunderChkBox' type='checkbox' value='1' onClick="selectObservation('thunder');" /> <div class='state thunder1 p-6'><label for='thunder1'><span>Past 6-9 hours</span></label></div> </div> </li> <li> <div class='pretty p-default'><input id='thunder2' class='thunderChkBox' type='checkbox' value='2' onClick="selectObservation('thunder');" /> <div class='state thunder2 p-12'><label for='thunder2'><span>Past 12-15 hours</span></label></div> </div> </li> <li> <div class='pretty p-default'><input id='thunder3' class='thunderChkBox' type='checkbox' value='3' onClick="selectObservation('thunder');" /> <div class='state thunder3 p-18'><label for='thunder3'><span>Past 18-21 hours</span></label></div> </div> </li> </ul> <div class="clearboth"></div> <div id="thunder_legend"> <div><img src="./images/s_thunder_slight.svg" alt="" >slight or moderate thunderstorm</div> <div><img src="./images/s_thunder_2.svg" alt="" >heavy thunderstorm </div> <div><img src="./images/s_thunder_3.svg" alt="" >thunderstorm with hail</div> <div><img src="./images/s_thunder_4.svg" alt="" >thunderstorm with dust-storm or sand-storm</div> <div><img src="./images/s_thunder_5.svg" alt="" >heavy thunderstorm with hail</div> </div> <div class="clearboth"></div> <!-- Fog --> <div class="sw_scroll_view_div2"> <table width="100%" cellpadding="0" cellspacing="0" role="presentation"> <tr style="display:none;"> <th>Title and updated time</th><th>On/Off for all</th> </tr> <tr> <td class="sw_table_cell1"> <h2 class="sw_scroll_view_h5_3"><img class="legend_icon verali1" src="./images/s_fog.svg" alt="" />Fog</h2> </td> <td rowspan="2" class="sw_table_cell2 verali3"> <div class="sw_toggle_btn"> <input type="checkbox" id="fog_onoff" onclick="allOn('fog');"> <label class="chk_btn" for="fog_onoff"> <div class="knob"></div> <div class="ckb_off">off</div> <div class="ckb_on">on</div> </label> <div class="ckb_txt1">All</div> </div> </td> </tr> <tr> <td><span id="fog-time"></span></td> </tr> </table> </div> <!-- Fog --> <ul class='sw_menu'> <li class="sw_scroll_view_margin_left"> <div class='pretty p-default'><input id='fog0' class='fogChkBox' type='checkbox' value='0' onClick="selectObservation('fog');" /> <div class='state fog0 p-latest'><label for='fog0'><span>Past 3 hours</span></label></div> </div> </li> <li> <div class='pretty p-default'><input id='fog1' class='fogChkBox' type='checkbox' value='1' onClick="selectObservation('fog');" /> <div class='state fog1 p-6'><label for='fog1'><span>Past 6-9 hours</span></label></div> </div> </li> <li> <div class='pretty p-default'><input id='fog2' class='fogChkBox' type='checkbox' value='2' onClick="selectObservation('fog');" /> <div class='state fog2 p-12'><label for='fog2'><span>Past 12-15 hours</span></label></div> </div> </li> <li> <div class='pretty p-default'><input id='fog3' class='fogChkBox' type='checkbox' value='3' onClick="selectObservation('fog');" /> <div class='state fog3 p-18'><label for='fog3'><span>Past 18-21 hours</span></label></div> </div> </li> </ul> <div class="clearboth"></div> <br class="newline"> <br class="newline"> </div> </div> </div> <div id="maritime_view"> <div id="indicator3"> <hr> </div> <div class="button_row"> <div class="clearboth"></div> </div> <div class="total_warning_row"> <div class="d1"><img src="./images/main_marine.svg" alt="">Maritime Warning</div> <div class="clearboth"></div> </div> <ul id='maritime_menu'> <li> <div class='pretty p-default'><input id='choose_metareas' type='checkbox' class='choose_metareas' name='choose_metareas' value='0' onClick='displayMetareas(false);' /> <div class='state'><label for='choose_metareas'> <span class="lbl_maritime_opt">Maritime Safety Information (MSI) & METAREA Coordinators</span></label></div> </div> </li> <li> <div class='pretty p-default'><input id='choose_maritime' type='checkbox' class='choose_maritime' name='choose_maritime' value='0' onClick='displayMaritimeWarning(false);' /> <div class='state'><label for='choose_maritime'> <span class="lbl_maritime_opt">CAP Warnings on Coastal Waters & Inland Lakes</span></label></div> </div> </li> </ul> <div class="clearboth"></div> </div> <div class="template"> <div class="row"> <div class="col-12 nopadding" id="left-box"> <div class="col-12 nopadding border-box"> <div class="row"> <div class="col-12" id="headline-bg"></div> <div class="col-12" id="txtContent"></div> </div> </div> </div> </div> </div> <div class="leaflet-control-container leaflet-touch"> <div class="leaflet-top leaflet-left leaflet-custom-zoom leaflet-custom-own"> <div class="leaflet-control-zoom leaflet-bar leaflet-control"> <a class="leaflet-control-zoom-in leaflet-custom-zoom-in" href="#" title="Zoom in" role="button" aria-label="Zoom in" onclick="customZoom('in');">+</a> <a class="leaflet-control-zoom-out leaflet-custom-zoom-out" href="#" title="Zoom out" role="button" aria-label="Zoom out" onclick="customZoom('out');">−</a> </div> </div> </div> <div id="search_box"> <div class="btn-pool"> <button id="p1" type="button" class="btn-default btn-1" onClick='severityFilter(this);'></button> <br class="newline"><button id="p2" type="button" class="btn-default btn-2" onClick='severityFilter(this);'></button> <button id="p3" type="button" class="btn-default btn-3" onClick='severityFilter(this);'></button> <div class="clearboth"></div> </div> </div> <button class="menu-btn btn-cap" title="CAP Warnings in Effect"></button> <!-- btn-active --> <button class="menu-btn btn-tc" title="Tropical Cyclones"></button> <div id="noti-tc">6</div> <button class="menu-btn btn-obser" title="Severe Weather Observations"></button> <button class="menu-btn btn-marine" title="Maritime Warning"></button> <button class="btn-main-menu" title="Main menu"></button> <button class="menu-btn btn_history" title="History"></button> <button class="menu-btn btn_setting" title="Setting"></button> <div class="severity_legend"> <p>CAP Severity :<span class="blk blk4"></span>Extreme |<span class="blk blk3"></span>Severe |<span class="blk blk2"></span>Moderate |<span class="blk blk1"></span>Minor |<span class="blk blk0"></span>Unknown</p> </div> <div class="footer"> <div class="onbehalf">This website is operated on behalf of WMO by <a href="https://www.hko.gov.hk/contente.htm" target="_blank" rel="noopener noreferrer">Hong Kong Observatory</a> of Hong Kong, China.</div> <div class="row footer_1"> <div class="footer-left"> <a href="https://wmo.int/copyright" target="_blank" rel="noopener noreferrer">©</a> 2024 | <a href="https://wmo.int/privacy-policy" target="_blank" rel="noopener noreferrer">Privacy Policy</a> | <a href="./contact.html">Contact</a> | <a href="https://wmo.int/disclaimer" target="_blank" rel="noopener noreferrer">Disclaimer</a> | <a href="https://wmo.int" target="_blank" rel="noopener noreferrer">WMO Public site</a> | <a href="https://community.wmo.int/en" target="_blank" rel="noopener noreferrer">WMO Extranet</a> </div> <div class="footer-right"> <div id="footer_last_update"></div> </div> </div> </div> <div class="gdpr"> We use cookies or equivalent technology to give you the best possible experience on our website. <span class="gdpr_br"><br></span>By continuing to browse this site, you give consent for cookies or equivalent technology to be used. For more details please read our <a href="https://wmo.int/privacy-policy" target="_blank" rel="noopener noreferrer">Policy</a>. <div class="close_gdpr">X</div> </div> <style type="text/css"> #mob_div { display: none; width: 100%; height: 100%; max-height: 742px; background-color: #0000FF; position: absolute; z-index: 2; border-top-left-radius: 10px; border-top-right-radius: 10px; } .severity_legend, .footer { z-index: 10000; } .wrapper { overflow: hidden; } .leaflet-top, .leaflet-bottom { z-index: 1; } </style> <script type="text/javascript"> class Swipe { constructor(element) { this.xDown = null; this.yDown = null; this.element = typeof (element) === 'string' ? document.querySelector(element) : element; this.element.addEventListener('touchstart', function (evt) { this.xDown = evt.touches[0].clientX; this.yDown = evt.touches[0].clientY; }.bind(this), false); } onLeft(callback) { this.onLeft = callback; return this; } onRight(callback) { this.onRight = callback; return this; } onUp(callback) { this.onUp = callback; return this; } onDown(callback) { this.onDown = callback; return this; } handleTouchMove(evt) { if (!this.xDown || !this.yDown) { return; } var xUp = evt.touches[0].clientX; var yUp = evt.touches[0].clientY; this.xDiff = this.xDown - xUp; this.yDiff = this.yDown - yUp; if (Math.abs(this.xDiff) > Math.abs(this.yDiff)) { // Most significant. if (this.xDiff > 0) { this.onLeft(); } else { this.onRight(); } } else { if (this.yDiff > 0) { this.onUp(); } else { this.onDown(); } } // Reset values. this.xDown = null; this.yDown = null; } run() { this.element.addEventListener('touchmove', function (evt) { this.handleTouchMove(evt); }.bind(this), false); } } function queryByIdentifer(inCode) { var filter = '<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml">'; filter += '<Or>'; filter += '<PropertyIsEqualTo>'; filter += "<PropertyName>identifier</PropertyName>"; filter += '<Literal>'+inCode+'</Literal>'; filter += '</PropertyIsEqualTo>'; filter += '<PropertyIsEqualTo>'; filter += "<PropertyName>url</PropertyName>"; filter += '<Literal>'+inCode+'</Literal>'; filter += '</PropertyIsEqualTo>'; filter += '</Or>'; filter += '</Filter>'; var urlString = gsdmn + '/f/ows/' + time().toString() + '.json'; var param = { service: 'WFS', version: '1.0.0', request: 'GetFeature', typeName: 'local_postgis:postgis_geojsons', outputFormat: 'application/json', propertyName: 'event,areadesc,sent,mem,gc,capurl,s,rlink', filter: filter, sortBy: "s,sent" }; var geojsonUrl = urlString + L.Util.getParamString(param, urlString); $.ajax({ url: geojsonUrl, async: true, type: 'GET', dataType: 'json', success(result) { if (result.features.length > 0) { var polygons = []; var boobbox = 1; $.each(result.features, function (key, value) { var idx = key var record = result.features[idx]; var bbox = record['properties'].bbox; var bboxChecked = []; $.each(bbox, function (key, value) { //[-167.75192, 69.56722, -169.45554, 70.02054] ; Lng:0,2 ; Lat: 1,3 var bboxKeyValue = bbox[key] var modeLatLng = 'Lat'; //index: 1,3 if (key == 2 || key == 0) modeLatLng = 'Lng'; //index: 0,2 if (idx == 0 && key == 0) { //idx:0 , first polygon if (bboxKeyValue < 0) boobbox = -1 //set flag } if (modeLatLng == 'Lng') { if ( (bboxKeyValue >= 0 && boobbox == -1) || (bboxKeyValue < 0 && boobbox == 1) ) { bboxKeyValue = -bboxKeyValue } } bboxChecked.push(bboxKeyValue); }); var bboxPolygon = turf.bboxPolygon(bboxChecked); polygons.push(bboxPolygon); }); var gj2 = L.geoJson( { 'type': 'FeatureCollection', 'features': polygons } ); map.fitBounds(gj2.getBounds()); } else { console.log("result.features = 0") } }, error(err) { console.log('Data Not Available'); console.log(geojsonUrl); } }); } function showPieChart(_id, _title, _data) { Highcharts.chart(_id, { chart: { type: 'pie', height: 200, width: 200, spacing: [0, 0, 0, 0] }, title: { text: '<strong>'+_title+'</strong>', margin: 0 }, tooltip: { valueSuffix: '%' }, plotOptions: { series: { dataLabels: { enabled: true, formatter: function() { return Math.round(this.percentage*100)/100 + '%'; }, distance: -30, color:'black', style: { fontSize: '14px', textOutline: 'none' } } } }, series: [ { name: 'Percentage', data: _data } ] }); } var wmsLayer1 = null; function capStatusInfoToggle() { $("#cap-impl-remark").slideToggle(150); } function hideSettingMask() { $(".setting_mask").hide(); } function hideCAPstatus() { if (wmsLayer1 != null) { map.removeLayer(wmsLayer1); wmsLayer1 = null; } $('.chart_view').remove(); $('.setting_mask').css('background-color','#000000d9'); $('.toggle_on_setting_button, #filter_view').css('display','block'); $('.severity_legend p').html(swap_legend); $('#search_box').css('display','block'); } function closeCAPstatus() { $("#choose_capstatus").click(); } var capStatusFlag = false; var activePanel = ""; function displayCapStatus() { if($(".chart_view").length > 0) { hideCAPstatus(); capStatusFlag = false; if(activePanel != "") { $(activePanel).show(); activePanel = ""; } if($("#sate").is(":checked")) { $("#sate").prop('checked',false); } if($("#choose_notInList").is(":checked")) { $("#choose_notInList").prop('checked',false); } if($("#choose_nowarning").is(":checked")) { $("#choose_nowarning").prop('checked',false); } if($("#choose_centre").is(":checked")) { $("#choose_centre").prop('checked',false); } setTimeout(function(){ removeWMS(); loadWMS(); tcOnOff('1'); loadObservation('rain'); loadObservation('thunder'); loadObservation('gale'); loadObservation('fog'); localStorage["centre"] = "0"; }, 1000 ); } else { removeWMS(); tcOnOff('0'); removeObservation('rain'); removeObservation('thunder'); removeObservation('gale'); removeObservation('fog'); capStatusFlag = true; localStorage["satellite"] = "1"; $("#sate").click(); localStorage["notInList"] = "1"; $("#choose_notInList").click(); localStorage["nowarning"] = "1"; $("#choose_nowarning").click(); localStorage["centre"] = "1"; $("#choose_centre").click(); showCAPstatus(); if(!$("#warning_view").is(":hidden")) activePanel = "#warning_view"; if(!$("#tc_view").is(":hidden")) activePanel = "#tc_view"; if(!$("#sw_info_view").is(":hidden")) activePanel = "#sw_info_view"; if(!$("#maritime_view").is(":hidden")) activePanel = "#maritime_view"; if(activePanel != "") $(activePanel).hide(); } } function calPercentage(ttl, tf) { let percentage = []; return [((ttl[0] / ttl[3])*100).toFixed(tf), ((ttl[1] / ttl[3])*100).toFixed(tf), ((ttl[2] / ttl[3])*100).toFixed(tf), ""]; } function countTotalCapStatus(obj) { let total = []; for (let a = 0; a < obj[0].length; a++) { let sum = 0; for (let b = 0; b < obj.length; b++) { sum += obj[b][a]; } total.push(sum); } return total; } function countCapStatus(obj) { let g = 0, y = 0, r = 0; for (let x in obj) { if(obj[x] == 1) g++; if(obj[x] == 2) y++; if(obj[x] == 3) r++; } return [g, y, r, (g+y+r)]; } var ra_col = []; var pie_chart = []; var swap_legend = ""; function showCAPstatus() { $.ajax({ url: './json/cap-status.json', dataType: 'json', cache: false, async: false, success: function (data) { ra_col = []; pie_chart = []; ra_col.push(countCapStatus(data.ra1)); pie_chart.push(calPercentage(ra_col[(ra_col.length - 1)], 0)); ra_col.push(countCapStatus(data.ra2)); pie_chart.push(calPercentage(ra_col[(ra_col.length - 1)], 0)); ra_col.push(countCapStatus(data.ra3)); pie_chart.push(calPercentage(ra_col[(ra_col.length - 1)], 0)); ra_col.push(countCapStatus(data.ra4)); pie_chart.push(calPercentage(ra_col[(ra_col.length - 1)], 0)); ra_col.push(countCapStatus(data.ra5)); pie_chart.push(calPercentage(ra_col[(ra_col.length - 1)], 0)); ra_col.push(countCapStatus(data.ra6)); pie_chart.push(calPercentage(ra_col[(ra_col.length - 1)], 0)); ra_col.push(countTotalCapStatus(ra_col)); pie_chart.push(calPercentage(ra_col[(ra_col.length - 1)], 1)); ra_col.push(calPercentage(ra_col[(ra_col.length - 1)], 1)); $('.toggle_on_setting_button, #filter_view').css('display','none'); $('.setting_mask').css('background-color','#ffffff'); $('.setting_mask').append('<div class="chart_view"><div><div class="chart_view_left"><h1>Global CAP implementation in RA I-VI: '+data.month+' '+data.year+'</h1></div><div class="cap_status_info"><a href="javascript:capStatusInfoToggle();" title="Information"><img src="./images/icon_info_v1.svg" alt=""></a> <a href="./CAP-status-SWIC202412.pdf" download title="Download"><img src="./images/icon_download_v1.svg" alt=""></a></div><div class="chart_view_right"><a class="btn_map_view" href="javascript:hideSettingMask();">[ Map View ]</a><a href="javascript:closeCAPstatus();">[ Close ]</a></div><div class="clear_both"></div></div><div id="cap-impl-remark"><table class="criteria_table"><tr><th>CAP compliance status data</th><th>Definition</th></tr><tr><td class="tbl_tr_green">Completed</td><td>Operational/Compliance (A-E)</td></tr><tr><td class="tbl_tr_yellow">Development/Test mode</td><td>Testing/Development (incomplete combination of A-E)</td></tr><tr><td class="tbl_tr_red">Not started</td><td>Not started</td></tr></table><strong>CAP Status Criteria</strong><ul><li>A- Training on CAP/has a Country CAP Team</li><li>B- Selecting a CAP editor facility and formatting warnings in a CAP format</li><li>C- Establishing Standard Operating Procedures for mainstreaming CAP in the warning process of the National Meteorological and Hydrological Services</li><li>D- Nominating an Editor of the WMO Register of Alerting Authorities</li><li>E- Inserting the CAP source URL in the WMO Register of Alerting Authorities</li></ul></div><div><div class="cap_status_table"></div><div class="cap_status_chart_g"><div id="global"></div></div><div class="clear_both"></div></div> <div><div class="cap_status_chart"><div id="ra1"></div></div><div class="cap_status_chart"><div id="ra2"></div></div><div class="cap_status_chart"><div id="ra3"></div></div><div class="cap_status_chart"><div id="ra4"></div></div><div class="cap_status_chart"><div id="ra5"></div></div><div class="cap_status_chart"><div id="ra6"></div></div><div class="clear_both"></div></div> </div>'); $('.chart_view').css('display','block'); let ra_row = []; for (let c = 0; c < ra_col[0].length; c++) { let tmp_row = []; for (let d = 0; d < ra_col.length; d++) { tmp_row.push(ra_col[d][c] + ((d == (ra_col.length - 1) && ra_col[d][c] != '') ? "%" : "")); } ra_row.push(tmp_row); } $(".cap_status_table").html('<table><tr><th class="tbl_mm_yy">'+data.month.substr(0, 3)+'-'+data.year.toString().substr(2, 2)+'</th><th>RAI</th><th>RAII</th><th>RAIII</th><th>RAIV</th><th>RAV</th><th>RAVI</th><th>Total</th><th>Percentage</th></tr><tr class="tbl_tr tbl_tr_green"><th class="tbl_txt_left">Completed</th><td>'+ra_row[0].join("</td><td>")+'</td></tr><tr class="tbl_tr tbl_tr_yellow"><th class="tbl_txt_left">Development/<br>Test mode</th><td>'+ra_row[1].join("</td><td>")+'</td></tr><tr class="tbl_tr tbl_tr_red"><th class="tbl_txt_left">Not started</th><td>'+ra_row[2].join("</td><td>")+'</td></tr><tr class="tbl_tr"><th class="tbl_txt_left">Total</th><td>'+ra_row[3].join("</td><td>")+'</td></tr></table>'); var _id = "global"; var _title = "Global"; var _pie_chart_data = pie_chart[(pie_chart.length - 1)]; var _data = [{name: 'Completed', y: parseFloat(_pie_chart_data[0]), color: '#00B050'},{name: 'Development/Test mode', y: parseFloat(_pie_chart_data[1]), color: '#FFFF00'},{name: 'Not started', y: parseFloat(_pie_chart_data[2]), color: '#FF0000'}] showPieChart(_id, _title, _data); _id = "ra1"; _title = "RA I"; _pie_chart_data = pie_chart[0]; _data = [{name: 'Completed', y: parseFloat(_pie_chart_data[0]), color: '#00B050'},{name: 'Development/Test mode', y: parseFloat(_pie_chart_data[1]), color: '#FFFF00'},{name: 'Not started', y: parseFloat(_pie_chart_data[2]), color: '#FF0000'}] showPieChart(_id, _title, _data); _id = "ra2"; _title = "RA II"; _pie_chart_data = pie_chart[1]; _data = [{name: 'Completed', y: parseFloat(_pie_chart_data[0]), color: '#00B050'},{name: 'Development/Test mode', y: parseFloat(_pie_chart_data[1]), color: '#FFFF00'},{name: 'Not started', y: parseFloat(_pie_chart_data[2]), color: '#FF0000'}] showPieChart(_id, _title, _data); _id = "ra3"; _title = "RA III"; _pie_chart_data = pie_chart[2]; _data = [{name: 'Completed', y: parseFloat(_pie_chart_data[0]), color: '#00B050'},{name: 'Development/Test mode', y: parseFloat(_pie_chart_data[1]), color: '#FFFF00'},{name: 'Not started', y: parseFloat(_pie_chart_data[2]), color: '#FF0000'}] showPieChart(_id, _title, _data); _id = "ra4"; _title = "RA IV"; _pie_chart_data = pie_chart[3]; _data = [{name: 'Completed', y: parseFloat(_pie_chart_data[0]), color: '#00B050'},{name: 'Development/Test mode', y: parseFloat(_pie_chart_data[1]), color: '#FFFF00'},{name: 'Not started', y: parseFloat(_pie_chart_data[2]), color: '#FF0000'}] showPieChart(_id, _title, _data); _id = "ra5"; _title = "RA V"; _pie_chart_data = pie_chart[4]; _data = [{name: 'Completed', y: parseFloat(_pie_chart_data[0]), color: '#00B050'},{name: 'Development/Test mode', y: parseFloat(_pie_chart_data[1]), color: '#FFFF00'},{name: 'Not started', y: parseFloat(_pie_chart_data[2]), color: '#FF0000'}] showPieChart(_id, _title, _data); _id = "ra6"; _title = "RA VI"; _pie_chart_data = pie_chart[5]; _data = [{name: 'Completed', y: parseFloat(_pie_chart_data[0]), color: '#00B050'},{name: 'Development/Test mode', y: parseFloat(_pie_chart_data[1]), color: '#FFFF00'},{name: 'Not started', y: parseFloat(_pie_chart_data[2]), color: '#FF0000'}] showPieChart(_id, _title, _data); wmsLayer1 = L.tileLayer.wms('https://severeweather.wmo.int/o/wms/' + time().toString() + '.png?', { layers: 'local_geo_server:cap_impl_view', version: '1.3.0', format: 'image/png8', transparent: true, styles: 'local_geo_server:capstatus', opacity: 1, zIndex: 95, tileSize: 512 }).addTo(map); $.get( "/v2/count/wms.txt" ); swap_legend = $('.severity_legend p').html(); $('.severity_legend p').html("<span class=\"cap_status_green\"></span>Completed |<span class=\"cap_status_yellow\"></span>Development/Test mode |<span class=\"cap_status_red\"></span>Not started"); $('#search_box').css('display','none'); } }); } $(document).ready(function () { $('#aaa, #bbb, #ccc, #ddd, #eee, .leaflet-control-zoom-in, .leaflet-control-zoom-out').click(function(event){ event.preventDefault(); }); }); </script> </div> <div class="modal fade" id="history" style="display: none;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-menu"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-header"> <div class="modal-title"><img src="./images/history_tracking.svg" alt="">Tracking History</div> <div class="detail">Find historical weather by searching for the day and time.</div> </div> <div class="modal-body"> <div id="dateall"> <div id="dateheader">Date</div> <div id="datepicker12"></div> </div> <div id="rightpicker12"></div> <div id="leftpicker12"></div> <div id="timeall"> <div id="timeheader">Time</div> <div id="timepicker12"></div> </div> </div> <div class="modal-footer"> <span id="text">SELECTED</span><span id="showdate"></span><span id="showtime"></span> UTC <button type="button" class="btn btn-apply" data-dismiss="modal" disabled>Apply</button> </div> </div> </div> </div> </body> </html>