| | | Track Probability Forecast | | |
| Legend | Analysed Position | | Forecast Position | | Past Track | | Forecast Track | (The color of the symbols above will change with the classification of the tropical cyclone) | | Low Pressure Area or Extratropical Low | | | Color | Tropical Depression | | Tropical Storm | | Severe Tropical Storm | | Typhoon | | Severe Typhoon | | Super Typhoon | | | Potential Track Area (70% probability) | First 72 hours | | 72-120 hours | |
Notes |
- Tropical cyclones centred within the area bounded by 7-36N and 100-140E (show on map) will be shown on this website. According to the analysed position of the tropical cyclone and the tropical cyclone warning signal in force, the update time of this webpage will be different. Details are listed in the table below:
| Tropical Cyclone Warning Signal No.1 or above in force | No Tropical Cyclone Warning Signal in force | Tropical cyclones centred within the area bounded by 10N and 30N, 105E and 125E.* | Other tropical cyclones centred within the area bounded by 7N and 36N,100E and 140E. | Update time [Observation time] (Hong Kong time) | Every hour [Every hour] | 00:30 [23:00] 03:30 [02:00] 06:30 [05:00] 09:30 [08:00] 12:30 [11:00] 15:30 [14:00] 18:30 [17:00] 21:30 [20:00] | 04:00 [02:00] 10:00 [08:00] 16:00 [14:00] 22:00 [20:00] | *The tropical cyclone track, analysed positions and maximum sustained wind near centre are based on Hong Kong Observatory's tropical cyclone warning for shipping. - Detailed information of the tropical cyclone, including latitude, longitude, classification and the maximum sustained wind near centre will be shown when placing the mouse cursor over the analysed or forecast positions. The user can use the controls on the left of the map to change the area of interest and to zoom into city or even street levels. Please bear in mind the uncertainty of the tropical cyclone locations as described below in using this function.
- While the forecast positions and track indicate the most likely future path of the tropical cyclone, they may deviate from the actual path of the storm. By pressing the 'Potential Track Area' button, the probable area within which the tropical cyclone will fall with a probability of 70% will be shown. Literally, it means that among 10 times of track forecast for similar situations, the tropical cyclone will be centred within the indicated area in about 7 times. The area grows as the forecast hour increases. It will be particularly larger beyond 72 hours and is indicated with lighter shadings on the map. The size in terms of radius of the 'Potential Track Area' corresponding to different forecast hours are determined from the error statistics of the forecasts issued in past years (updated in 2022) and are as shown in the following table:
Tropical Cyclone Track | Radius of 'Potential Track Area' | Analysed position* | 15 km | 24-hour forecast position | 100 km | 48-hour forecast position | 170 km | 72-hour forecast position | 255 km | 96-hour forecast position | 345 km | 120-hour forecast position | 465 km | *Analysed position refers to the positions of tropical cyclones fixed by the Observatory based on observation data available in real time. Such real-time positions could deviate from those obtained later through "Best Track Analysis" when more comprehensive sets of observations become available. The corresponding radius of 'Potential Track Area' is determined from the statistics in the past years as the mean value. - Short-term erratic departure of the tropical cyclone from the general direction of movement may occur from time to time. These departures are partly due to uncertainties in locating the centre of the tropical cyclone, and partly due to actual short-term variations in the direction and speed of movement of the tropical cyclone itself.
- The infra-red satellite image closest to the time of tropical cyclone analysed position can be shown by pressing the 'Satellite Image' button, below which is the 'Time of image' representing the time when satellite data is completely received at the ground reception system. Since it takes time to receive and process the satellite data as well as generate the image, the time of image may somtimes be different from the time of tropical cyclone analysed position.
- The Hong Kong Observatory's radar images closest to the time of tropical cyclone analysed position can be shown by pressing the 'Radar Image' button, below which is the 'Time of image' representing the time when radar completes its scan. For detailed information, please refer to the Weather Radar Image website.
The background geographical information in this page comes from OpenStreetMap. The use of OpenStreetMap is to aid users in appreciating the geographical location of the areas affected by tropical cyclones. This does not imply that information on the map is endorsed by the Hong Kong Observatory. The use of OpenStreetMap is subject to itsLicense Terms. - The satellite images were originally captured by the Himawari-9 (H9) satellite of Japan Meteorological Agency (JMA). Anyone wishing to further disseminate these satellite images should seek permission from JMA. (Address: Japan Meteorological Agency, 3-6-9 Toranomon, Minato City, Tokyo 105-8431, Japan).
|
If you have any comments on our website, please fill in the suggestion form or send us an e-mail. |
" + "
|
" + "
|
" + "
|
" + ""; } document.getElementById('display_info').innerHTML = info_table; } var hideBoundary = true; var hideCone = false; var showText = false; var showSat = false; var showRad = false; function resetSelection() { document.getElementById('boundary_check').checked = false; document.getElementById('cone_check').checked = true; document.getElementById('text_check').checked = false; document.getElementById('sat_check').checked = false; document.getElementById('rad_check').checked = false; applySetting(); } function resetButton() { if (hideCone) { if (document.getElementById('cone_check').checked) { $('#cone_btn').click(); } } if (showText) { if (!document.getElementById('text_check').checked) { $('#text_btn').click(); } } if (showSat) { if (!document.getElementById('sat_check').checked) { $('#sat_btn').click(); } } if (showRad) { if (!document.getElementById('rad_check').checked) { $('#rad_btn').click(); } } if (hideBoundary) { if (document.getElementById('boundary_check').checked) { $('#boundary_btn').click(); } } } function applySetting() { var satCook = getCookieTC("sat"); var radCook = getCookieTC("rad"); var coneCook = getCookieTC("cone"); var boundaryCook = getCookieTC("boundary"); var timeCook = getCookieTC("time"); if (boundaryCook == "false") { hideBoundary = true; } if (coneCook == "false") { hideCone = true; } if (satCook == "true") { $('#sat_btn').click(); showSat = true; } if (radCook == "true") { showRad = true; } if (timeCook == "true") { showText = true; } } function setcookie(c_name, c_value, exdays) { var exdate = new Date(); exdate.setDate(exdate.getDate() + exdays); document.cookie = c_name + "=" + c_value + ";"; } function getCookieTC(c_name) { var c_value = document.cookie; var c_start = c_value.indexOf(" " + c_name + "="); if (c_start == -1) { c_start = c_value.indexOf(c_name + "="); } if (c_start == -1) { c_value = null; } else { c_start = c_value.indexOf("=", c_start) + 1; var c_end = c_value.indexOf(";", c_start); if (c_end == -1) { c_end = c_value.length; } c_value = unescape(c_value.substring(c_start, c_end)); } return c_value; } //=========================================================================== // functions - GIS //=========================================================================== //Draw 400KM Range Ring cir_circle_400 = function (doc) { // === split the document into lines === lines = doc.split("\n"); var last_lat = null; var last_lon = null; var write = false; var count = 0; for (var i = 0; i < lines.length; i = i + 25) { if (lines[i].length > 1) { data_content = lines[i].split(","); if (data_content.length == 2) { if (count >= 12) count = 0; else count++; if (count == 1 || count == 3 || count == 4 || count == 5 || count == 7 || count == 9 || count == 10 || count == 11) { write = true; } else { write = false; } if (last_lat != null && last_lon != null && write) { var point1 = new OpenLayers.Geometry.Point(parseFloat(data_content[1]), parseFloat(data_content[0])); point1 = point1.transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()); var point2 = new OpenLayers.Geometry.Point(last_lon, last_lat); point2 = point2.transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()); var points = new Array(point1, point2); var line = new OpenLayers.Geometry.LineString(points); var style = { strokeColor: "#505050", strokeWeight: 2 }; var lineFeature = new OpenLayers.Feature.Vector(line, null, style); lineLayer.addFeatures([lineFeature]); } last_lat = parseFloat(data_content[0]); last_lon = parseFloat(data_content[1]); } } } //-- Add 400KM Label ------------------ var desc_400 = "400km"; var point_400 = new OpenLayers.Geometry.Point(110.8, 20.2); point_400 = point_400.transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()); var tcText = new OpenLayers.Feature.Vector(point_400, null, { label: desc_400, labelXOffset: 0, labelYOffset: 0, labelAlign: "lb", fontSize: '8px', fontWeight: 'bold', fontStyle: 'italic' }); lineLayer.addFeatures([tcText]); } //--- Function : Draw 800KM Range Ring------------------------------------------ cir_circle_800 = function (doc) { // === split the document into lines === lines = doc.split("\n"); var last_lat = null; var last_lon = null; var write = false; var count = 1; for (var i = 1; i < lines.length; i = i + 20) { if (lines[i].length > 1) { data_content = lines[i].split(","); if (data_content.length == 2) { if (count >= 12) count = 1; else count++; if (count == 1 || count == 3 || count == 4 || count == 5 || count == 7 || count == 9 || count == 10 || count == 11) { write = true; } else { write = false; } if (last_lat != null && last_lon != null && write) { var point1 = new OpenLayers.Geometry.Point(parseFloat(data_content[1]), parseFloat(data_content[0])); point1 = point1.transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()); var point2 = new OpenLayers.Geometry.Point(last_lon, last_lat); point2 = point2.transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()); var points = new Array(point1, point2); var line = new OpenLayers.Geometry.LineString(points); var style = { strokeColor: "#505050", strokeWeight: 2 }; var lineFeature = new OpenLayers.Feature.Vector(line, null, style); lineLayer.addFeatures([lineFeature]); } last_lat = parseFloat(data_content[0]); last_lon = parseFloat(data_content[1]); } } } //-- Add 800KM Label ------------------ var desc_800 = "800km"; var point_800 = new OpenLayers.Geometry.Point(106.7, 19.7); point_800 = point_800.transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()); var tcText = new OpenLayers.Feature.Vector(point_800, null, { label: desc_800, labelXOffset: 0, labelYOffset: 0, labelAlign: "lb", fontSize: '8px', fontWeight: 'bold', fontStyle: 'italic' }); lineLayer.addFeatures([tcText]); } function ToggleLayer(ItemId) { var checked = false; if (ItemId == "boundary") { checked = $('input[type=checkbox][id="boundary_check"]').is(":checked"); } else { var icon = $('#' + ItemId + '_btn').find('[class^="icon-"]'); checked = !icon.hasClass('icon-ok'); icon.toggleClass('icon-blank', !checked).toggleClass('icon-ok', checked); if (checked) document.getElementById(ItemId + '_info').style.visibility = 'visible'; else document.getElementById(ItemId + '_info').style.visibility = 'hidden'; } document.getElementById(ItemId + '_check').checked = checked; var myLayer; switch (ItemId) { case 'cone': myLayer = tcCone; break; case 'sat': myLayer = tcSat; break; case 'rad': myLayer = tcRad; break; case 'boundary': myLayer = tcBoundary; break; case 'text': myLayer = textLayer; break; } myLayer.setVisibility(checked); } function loadkml(i) { var kmlfile = "/wxinfo/currwx/tc_gis_track_15a_e_" + TC_ID[i] + ".xml"; $.get(kmlfile, function (content) { // Parse KML data and add data to map var kmlParser = new OpenLayers.Format.KML2({ internalProjection: map.getProjectionObject(), extractStyles: true, extractAttributes: true }); var features = kmlParser.read(content); tcTrack.addFeatures(features); }); tcTrack.setVisibility(true); document.getElementById('cone_info').innerHTML = "(Not applicable)"; var kmlfilecone = "/wxinfo/currwx/tc_gis_cone_15a_" + TC_ID[i] + ".kml"; $.get(kmlfilecone, function (content) { // Parse KML data and add data to map var kmlParser = new OpenLayers.Format.KML({ internalProjection: map.getProjectionObject(), extractStyles: true, extractAttributes: true }); var features = kmlParser.read(content); if (features.length > 0) { tcCone.addFeatures(features); document.getElementById('cone_info').innerHTML = ""; } else { document.getElementById('cone_info').innerHTML = "(Not applicable)"; } }); tcCone.setVisibility(document.getElementById('cone_check').checked); var kmlfile = "/wxinfo/currwx/tc_gis_sat_" + TC_ID[i] + ".kml"; document.getElementById('sat_info').innerHTML = "(Not applicable)"; $.get(kmlfile, function (content) { // Parse KML data and add data to map var xmlstr = content.xml ? content.xml : (new XMLSerializer()).serializeToString(content); xmlstr = xmlstr.replace(/
.\//g, "/wxinfo/currwx/"); var kmlParser = new OpenLayers.Format.KML2({ internalProjection: map.getProjectionObject(), extractStyles: true, extractAttributes: true }); var features = kmlParser.read(xmlstr); tcSat.addFeatures(features); for (var feat in features) { for (var tag in features[feat].attributes) { if (tag == "description") { if (features[feat].attributes[tag] != "error") { document.getElementById('sat_info').innerHTML = "Image time:" + features[feat].attributes[tag]; } else { document.getElementById('sat_info').innerHTML = "(Not applicable)"; } break; } } } }); tcSat.setVisibility(document.getElementById('sat_check').checked); var kmlfile = "/wxinfo/currwx/tc_gis_rad_" + TC_ID[i] + ".kml"; document.getElementById('rad_info').innerHTML = "(Not applicable)"; $.get(kmlfile, function (content) { // Parse KML data and add data to map var xmlstr = content.xml ? content.xml : (new XMLSerializer()).serializeToString(content); xmlstr = xmlstr.replace(/.\//g, "/wxinfo/currwx/"); var kmlParser = new OpenLayers.Format.KML2({ internalProjection: map.getProjectionObject(), extractStyles: true, extractAttributes: true }); var features = kmlParser.read(xmlstr); tcRad.addFeatures(features); for (var feat in features) { for (var tag in features[feat].attributes) { if (tag == "description") { if (features[feat].attributes[tag] != "error") { document.getElementById('rad_info').innerHTML = "Image time:" + features[feat].attributes[tag]; } else { document.getElementById('rad_info').innerHTML = "(Not applicable)"; } break; } } } }); tcRad.setVisibility(document.getElementById('rad_check').checked); tcBoundary.setVisibility(document.getElementById('boundary_check').checked); } function createpopup(feature) { var centroid = feature.geometry.getCentroid(); map.popup = new OpenLayers.Popup.FramedCloud(feature.id, new OpenLayers.LonLat(centroid.x, centroid.y), new OpenLayers.Size(320, 125), feature.attributes.description, null, true); if (feature.attributes.description != null) { map.popup.autoSize = true; } map.popup.panMapIfOutOfView = true; feature.popup = map.popup; map.addPopup(map.popup); } function clearpopup() { if (map.popup) { map.removePopup(map.popup); map.popup.destroy(); map.popup = null; } } function tcLabel(tc_name, hkt_map, lat, lon) { var point = new OpenLayers.Geometry.Point(lon, lat); point = point.transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()); var desc = ""; if (tc_name == "undefined" || !tc_name) { desc = hkt_map; var tcText = new OpenLayers.Feature.Vector(point, null, { label: desc, labelXOffset: 7, labelYOffset: 6, labelAlign: "lb", fontFamily: 'Arial' }); //var tcText = new OpenLayers.Feature.Vector(point, null, {label: desc, labelXOffset: 7, labelYOffset: 6, labelAlign: "lb", fontWeight: 'bold', fontFamily: 'Arial'}); this.tcText.push(tcText); } else { desc = tc_name + "\n" + hkt_map; var tcName = new OpenLayers.Feature.Vector(point, null, { label: desc, labelXOffset: 7, labelYOffset: 6, labelAlign: "lb", fontFamily: 'Arial' }); //var tcName = new OpenLayers.Feature.Vector(point, null, {label: desc, labelXOffset: 7, labelYOffset: 6, labelAlign: "lb", fontWeight: 'bold', fontFamily: 'Arial'}); this.tcName.push(tcName); } } function addCoastlineAndNameLayer() { var GIScoastlineLayer = new OpenLayers.Layer.OSM("Coastline", "/maps_weather/f4/osm-tiles/coastline/${z}/${x}/${y}.png", { transitionEffect: "resize", minZoomLevels: 4, numZoomLevels: 9, }) map.addLayer(GIScoastlineLayer); $(GIScoastlineLayer.div).addClass("coastline"); var GISnameLayer = new OpenLayers.Layer.OSM("Place Name", "/maps_weather/f4/osm-tiles/placename/${z}/${x}/${y}.png", { transitionEffect: "resize", minZoomLevels: 4, numZoomLevels: 9 }) map.addLayer(GISnameLayer); } function addAlt() { $('body img:not([alt])').attr('alt', ''); $('body .olControlZoomInItemInactive').attr('aria-label', 'Zoom In'); $('body .olControlZoomInItemInactive').attr('tabindex', '0'); $('body .olControlZoomOutItemInactive').attr('aria-label', 'Zoom Out'); $('body .olControlZoomOutItemInactive').attr('tabindex', '0'); $('body .olControlZoomToHomeItemInactive').attr('aria-label', 'Hong Kong'); $('body .olControlZoomToHomeItemInactive').attr('tabindex', '0'); } //=========================================================================== // Initialize //=========================================================================== var TC_Count; var TC_ID = []; var ENG = []; var CHI = []; var map; var tcText = []; var tcName = []; var allTcTextCheck; var allTc; if (typeof tc !== 'undefined') { TC_Count = tc.length; $(window).on("unload", function(e) { var coneStatus = document.getElementById('cone_check').checked; var textStatus = document.getElementById('text_check').checked; var satStatus = document.getElementById('sat_check').checked; var radStatus = document.getElementById('rad_check').checked; var boundaryStatus = document.getElementById('boundary_check').checked; setcookie("cone", coneStatus, 0); setcookie("sat", satStatus, 0); setcookie("rad", radStatus, 0); setcookie("boundary", boundaryStatus, 0); setcookie("time", textStatus, 0); }); resetSelection(); OpenLayers.INCHES_PER_UNIT["公里"] = OpenLayers.INCHES_PER_UNIT["km"]; OpenLayers.INCHES_PER_UNIT["米"] = OpenLayers.INCHES_PER_UNIT["m"]; function ToggleBoundaryLayer() { var checked = $('input[type=checkbox][id="boundary_check"]').is(":checked"); tcBoundary.setVisibility(checked); } var selection_list = null; var lineLayer = null; var tcSat = null; var tcRad = null; var tcCone = null; var tcTrack = null; var pointStyle = null; var styleMap = null; var textLayer = null; var nameLayer = null; function buildTcList() { for (var i = 0; i < TC_Count; i = i + 1) { if (tc[i].length > 1) { data_content = tc[i].split(","); if (data_content.length == 3) { TC_ID[i] = data_content[0]; ENG[i] = data_content[1]; CHI[i] = data_content[2]; } } } var selection_list = ""; document.getElementById('tc_selection').innerHTML = selection_list; lineLayer = new OpenLayers.Layer.Vector("Ref Line", {}); map.addLayer(lineLayer); tcSat = new OpenLayers.Layer.Vector("Tc Sat", {}); tcSat.setOpacity(0.6); map.addLayer(tcSat); tcRad = new OpenLayers.Layer.Vector("Tc Rad", {}); tcRad.setOpacity(0.5); map.addLayer(tcRad); tcCone = new OpenLayers.Layer.Vector("Tc Cone", {}); map.addLayer(tcCone); tcTrack = new OpenLayers.Layer.Vector("Tc Track", {}); map.addLayer(tcTrack); pointStyle = new OpenLayers.Style({ 'label': "${label}", 'labelXOffset': 7, 'labelYOffset': 6, 'labelAlign': "lb", //'fontWeight': 'bold', 'fontFamily': 'Arial' }, { context: { label: function (feature) { // clustered features count or blank if feature is not a cluster return feature.cluster[0] ? feature.cluster[0].style.label : ""; } } }); styleMap = new OpenLayers.StyleMap({ 'default': pointStyle, }); addCoastlineAndNameLayer(); textLayer = new OpenLayers.Layer.Vector("Tc Label", { styleMap: styleMap, strategies: [new OpenLayers.Strategy.Cluster({ distance: 80 })] }); map.addLayer(textLayer); nameLayer = new OpenLayers.Layer.Vector("Tc Name Label", {}); map.addLayer(nameLayer); if (TC_Count > 0) { loadkml(0); var Cir400File = '/wxinfo/currwx/tc_gis_km400.txt'; var Cir800File = '/wxinfo/currwx/tc_gis_km800.txt'; var posinfoFile = '/wxinfo/currwx/tc_gis_posinfo_15a_' + TC_ID[0] + '.txt'; var posinfoFile_des = '/wxinfo/currwx/tc_des_e_' + TC_ID[0] + '.xml'; var thisdate = new Date(); drawInfoTable(TC_ID, 0); DownloadUrl(Cir400File, cir_circle_400); DownloadUrl(Cir800File, cir_circle_800); DownloadUrl(posinfoFile, read_data); read_data_des(posinfoFile_des); } var featuresCtrlOptions = { hover: true, overFeature: function (e) { clearpopup(); createpopup(e); }, outFeature: function (e) { clearpopup(); }, clickFeature: function (e) { clearpopup(); createpopup(e); } }; var selectControl = new OpenLayers.Control.SelectFeature([tcTrack], featuresCtrlOptions); map.addControl(selectControl); selectControl.activate(); //button handling var cone_btn = $('#cone_btn').on('click', function (e) { ToggleLayer('cone'); }); var text_btn = $('#text_btn').on('click', function (e) { ToggleLayer('text'); }); var sat_btn = $('#sat_btn').on('click', function (e) { ToggleLayer('sat'); }); var rad_btn = $('#rad_btn').on('click', function (e) { ToggleLayer('rad'); }); var boundary_btn = $('#boundary_btn').on('click', function (e) { ToggleLayer('boundary'); }); resetButton(); } } else { $("#div_tc tbody").html("When a tropical cyclone forms within or enters the area bounded by 7-36N and 100-140E, the Observatory will issue the first tropical cyclone track within two hours. |
"); } //map map = new OpenLayers.MetGisMap('map', { minZoomLevels: 4, numZoomLevels: 15, zoom: 5, controls: [new OpenLayers.Control.Navigation(), new OpenLayers.Control.ZoomHomePanel(), new OpenLayers.Control.ArgParser(), new OpenLayers.Control.Attribution(), new OpenLayers.Control.ScaleLine1({ bottomOutUnits: '', topOutUnits: "km", topInUnits: "m" }) ], zoomToHome: function () { map.setCenter( new OpenLayers.LonLat(114.213, 22.1467).transform( new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject() ), 5 //map.zoom ); }, allOverlays: true,//key for multiple OSM layers useCommonBaseLayer: function () { var map = this; function failbackToOSM() { var osm = new OpenLayers.Layer.OSM("OpenStreetMap", "/maps_weather/f4/osm-tiles/detail/${z}/${x}/${y}.png", { transitionEffect: "resize", minZoomLevels: 4, numZoomLevels: 9 }) map.addLayer(osm); map.setBaseLayer(osm); } try { if (window.google && google.maps) { var baseMap = new OpenLayers.Layer.Google("GoogleStreets", { sphericalMercator: true, type: google.maps.MapTypeId.TERRAIN, minZoomLevels: 4, numZoomLevels: 9 }); map.addLayer(baseMap); var googleFailbackTimeout = setTimeout(function () { map.removeLayer(baseMap); failbackToOSM(); }, 20000); google.maps.event.addListener(baseMap.mapObject, 'tilesloaded', function () { clearTimeout(googleFailbackTimeout); if (map.baseLayer != baseMap) return; }); // END of tilesloaded } } catch (e) { console.log(e); } if (!map.baseLayer) { failbackToOSM(); } } }); var osm = new OpenLayers.Layer.OSM("OpenStreetMap", "/maps_weather/f4/osm-tiles/detail/${z}/${x}/${y}.png", { transitionEffect: "resize", minZoomLevels: 4, numZoomLevels: 9 }) map.addLayer(osm); map.setBaseLayer(osm); map.setCenter( new OpenLayers.LonLat(114.213, 22.1467).transform( new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject() ) ); var tcBoundary = new OpenLayers.Layer.Vector("Tc Track Boundary", { visibility: true, strategies: [new OpenLayers.Strategy.Fixed()], protocol: new OpenLayers.Protocol.HTTP({ url: "/wxinfo/currwx/tc_track_boundary.kml", format: new OpenLayers.Format.KML2() }) }); map.addLayer(tcBoundary); if (typeof (tc) === 'undefined' || tc.length == 0) { tcBoundary.setVisibility(document.getElementById('boundary_check').checked); addCoastlineAndNameLayer(); } else { buildTcList(); } var checkForGoogleMapError = setInterval(function () { if ($('#map').find('.gm-err-container').length || $('#map_sdacanvas').find('.gm-err-container').length) { var osm = new OpenLayers.Layer.OSM("OpenStreetMap", "/maps_weather/f4/osm-tiles/detail/${z}/${x}/${y}.png", { transitionEffect: "resize", minZoomLevels: 4, numZoomLevels: 9 }) // Remove the Google base layer map.baseLayer = null; map.addLayer(osm); map.setBaseLayer(osm); // Reset map center and zoom map.setCenter( new OpenLayers.LonLat(114.213, 22.1467).transform( new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject() ), 5 ); clearInterval(checkForGoogleMapError); } }, 100); setTimeout(function () { clearInterval(checkForGoogleMapError); }, 60000); addAlt(); const zoomins = document.querySelectorAll('.olControlZoomInItemInactive'); const zoomouts = document.querySelectorAll('.olControlZoomOutItemInactive'); const homes = document.querySelectorAll('.olControlZoomToHomeItemInactive'); zoomins.forEach(zoomin => { zoomin.addEventListener('keydown', function() { if (event.key === 'Enter') { $('body').find(".olControlZoomInItemInactive").click(); } }); }); zoomouts.forEach(zoomout => { zoomout.addEventListener('keydown', function() { if (event.key === 'Enter') { $('body').find(".olControlZoomOutItemInactive").click(); } }); }); homes.forEach(home => { home.addEventListener('keydown', function() { if (event.key === 'Enter') { $('body').find(".olControlZoomToHomeItemInactive").click(); } }); });