![Page 1: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/1.jpg)
A ONE-STOP SERVICE HUB
INTEGRATING ESSENTIAL WEATHER
AND GEOPHYSICAL INFORMATION ON A
GIS PLATFORM
Hong Kong Observatory
![Page 2: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/2.jpg)
Mission
To provide people-oriented quality services in meteorology and related fields;
To enhance the society's capability in natural disaster prevention and response, through science, innovation and partnership.
HONG KONG OBSERVATORY
![Page 3: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/3.jpg)
• forecasting weather and issuing warnings on weather-related hazards.
• monitoring and assessing radiation levels in Hong Kong.
• providing other meteorological and geophysical services, to meet the needs of the public and the shipping, aviation, industrial and engineering sectors.
HONG KONG OBSERVATORY
The Hong Kong Observatory is responsible for
http://www.hko.gov.hk
![Page 4: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/4.jpg)
Weather analysis
![Page 5: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/5.jpg)
Different types of weather information
![Page 6: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/6.jpg)
Geospatial and Temporal Weather Information
![Page 7: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/7.jpg)
A computer-based tool for
holding, displaying, and
manipulating huge amounts
of spatial data.
Geographic Information System (GIS)
![Page 8: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/8.jpg)
From data display to analysis/decision-making
From internal application to service delivery
From generalized to location-specific service
Geographic Information System (GIS)
![Page 9: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/9.jpg)
FIRST STEP
![Page 10: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/10.jpg)
• Use KML and geospatial
information display software
• With geospatial information display
software, zooming, panoramic
view operations to view rainfall
distribution in the region.
Use of GISThe first time using GIS technology in presenting
meteorological data in the webpage.
“Rainfall Nowcast for the Pearl River Delta Region”
![Page 11: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/11.jpg)
Proximity Analysis
• Two or more data layers can be
overlaid
• GIS creates buffers around features on
a particular layer
• This allows analyses such as flood
zone delineation and features near a
route.
![Page 12: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/12.jpg)
Query and Overlay Analyses
Location-specific Lightning Alert Webpage
http://www.hko.gov.hk/wxinfo/llis/alert_index.htm
![Page 13: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/13.jpg)
GIS for Public Weather Service
![Page 14: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/14.jpg)
FURTHER DEVELOPMENT
![Page 15: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/15.jpg)
• Open source GIS technology is developing
rapidly
• Development of the meteorological analysis
system becomes more convenient
• Display a wide variety of real-time meteorological
data, including automatic weather station data,
radar images, satellite images, upper-air
sounding data, lightning location information and
numerical weather predication (NWP) model
products on same platform.
Use of GIS
![Page 16: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/16.jpg)
• KML supports Time, Raster and Vector
• Pre-generated at server to minimize overall
processing time
System Design
DB / Files CacheMapping
SoftwareWeb Client
HTTP
Server
Raster /
Vector Files
KML/JSON
FilesConvertor
Web
BrowserHTTP
Server
Common GIS work flow
HKO GIS work flow
![Page 17: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/17.jpg)
Like these …
IN
KML
JSON
IDV
Data OUT
System Design
Folders
web
![Page 18: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/18.jpg)
Web
Daemon
Server(Data Processor)
Daemon
“server”
Data Filing
Data bank /File Repository
Contains
KML, JSON, Image Tiles
Files
Data Provider (A)
Data Provider (B)
IN Tray
OUT Tray
csv2jsoncsv2kml
IDV image2tiles
…
formatter
GIS Products
…
User
Interface
![Page 19: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/19.jpg)
Work Flow
Predefined Data
csv
Grib
image
csv2json
csv2kml
IDV
image2tiles
Input Repository
json
kml
kmls
tiles(256*256px
images, in png)
Prerenderedtile images (usually by other sources)
Data Bank
json
kml
kmls
tiles(256*256px
images, in png)
Filing(copy to right
place)
![Page 20: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/20.jpg)
LAYERS: BASE MAP & OVERLAY
Base map
Overlay
Images, icons, shapes, markers …
![Page 21: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/21.jpg)
Client-side:
HTML + JavaScript + CSS + jQuery + HTML5
OpenLayers: Web-based GIS API
OpenStreetMap: Basemap Source
jQuery UI: Webpage component
Server-side:
IDV: Transfer meteorological data (csv or grib) to images
Data converter : Transfer CSV/DB data to KML/JSON data
Components
![Page 22: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/22.jpg)
Web-based GIS API
Free and Open Source JavaScript
OpenLayers
Web-based GIS API
Free, external and publicly available web and mobile implementations
Pay for uplifts above usage limits
Licenses for internal implementations
Google Maps APIs
![Page 23: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/23.jpg)
OpenLayers vs Google Map JavaScript API
• JavaScript API for overlays
• No base map provided
• Define your own layer as
base map
• Support Google Map, Bing,
XYZ (e.g. OpenStreetMap), WMS
(e.g. MapServer) …
• Host the JS API code in
your own server
• JavaScript API for overlays
• Google map as Base map
• 4 options: Roadmap, Satellite,
Hybrid, Terrain
• Rely on JS API code in
Google’s server
• License issue
OpenLayers Google Map
![Page 24: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/24.jpg)
Image : Vector vs Raster
Vector
Raster
![Page 25: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/25.jpg)
KML
A plain text file type, extends from XML
It specifies a set of features for displaying in maps.
Browser build-in XML parser
JsonDraw
In-house developed method for layer drawing
Data are saved in Json format (a lightweight data-
interchange form)
Browser with HTML5 support
Vector Image
![Page 26: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/26.jpg)
KMLKML files in web server
![Page 27: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/27.jpg)
KML DisplayKML
![Page 28: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/28.jpg)
Vector Image
json
“JsonDraw”
csv csv2json
webJsonDraw
![Page 29: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/29.jpg)
Image vs. Image Tiles
Different zoom level require different
resolution of the same image.
When the zoom level is too large, a single
image will be too large or blur, and slow
response.
Hence, use image tiles to target different
zoom level and different space. Load the
need tiles only.
Raster Layer Types
![Page 30: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/30.jpg)
After testing, 256px*256px seems optimal in our case.
Hence, “Google Projection”
Codename “EPSG:900913” in OpenLayers.
The world is as a square.
Mercator Projection and Map Tiles
Map Tiles
It is always 256px*256px.
It is a square bitmap graphics
displayed in a grid arrangement
to show a map.
![Page 31: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/31.jpg)
0, 1, 2, 3 ...
At zoomLevel 0, the equator of the earth is 256 pixels long. Each successive zoom level is magnified by a factor of 2.
Zoom level 0 = The world in a map tile (256px*256px).
Every zoom level is double (2×) of its previous size. The larger zoom level, the more detail, but cover less actual area in a map tile
(256px*256px)
Tile in zoom level 2 = ¼ of tile in zoom level 1, but still in 256px*256px
Area size in zoom level 1 = 22 × area size in zoom level
Zoom 0 1 2 3 N
Tiles in 1 side 1 2 4 8 2N
No. of Tiles 1×1
=1
2×2
=4
4×4
=16
8×8
=64
2N×2N
=2N×2
World coverage
per tiles
1 1/4 1/16 1/64 1/2N×2
Map Ratio – zoom level
![Page 32: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/32.jpg)
Data Density: original (x1) Data Density: x4
Data Density: x16 Data Density: all data
Data Density Control
![Page 33: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/33.jpg)
OpenLayers.Strategy.Cluster
Strategy for vector feature clustering
Key Property
distance – pixel distance between features
x1: distance
x4: distance / 2
x16: distance / 4
ALL: no distance
De-collision
First-Come, First-Serve
Loop over the nearest 9 boxes
Data Density Control
![Page 34: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/34.jpg)
WHAT CAN GIS DO?
![Page 35: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/35.jpg)
Weather Information scattered over webpages
GIS
![Page 36: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/36.jpg)
Internal Applications
![Page 37: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/37.jpg)
Internal ApplicationsSurface winds field and temperature distribution,
help forecaster to analyze the temperature
advection effect.
Illustrate the relationship between geopotential height at
upper level and changes in surface pressure, it helps
forecaster to appreciate the effect on surface pressure
bring along with weather system at upper level.
![Page 38: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/38.jpg)
User can select weather
elements on map
different type of weather
observation
Radar Images
Lightning Location Information
Corresponding station observation data can also be displayed
once user pointing the station location mark
http://maps.weather.gov.hk/index_e.html
Internet Web Page
( Regional Weather in Hong Kong )
![Page 39: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/39.jpg)
Internet Web Page
(Rainfall Nowcast for the Pearl River Delta Region)
http://www.hko.gov.hk/nowcast/prd/api/index_ue.htm
![Page 40: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/40.jpg)
IN FUTURE
![Page 41: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/41.jpg)
Geographic Information System (GIS)
HKO Internet Website
A variety of weather and
geophysical information in graphical
format
Scattering over different webpages
Inconvenience in getting the
required information
![Page 42: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/42.jpg)
Regional Weather in Hong Kong
Display different weather observations taken at various weather
stations over Hong Kong
Including radar imageries and cloud-to-ground lightning locations
etc.
Tailor make for smartphone tablet users
![Page 43: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/43.jpg)
One-stop Service Hub Portal
Integrating weather
observations and essential
weather elements around
the world
Worldwide earthquake
reports
User can select any
combination of the weather
elements and areas for
display on map
![Page 44: A ONE-STOP SERVICE HUB INTEGRATING ESSENTIAL WEATHER … · Codename “EPSG:900913” in OpenLayers. The world is as a square. Mercator Projection and Map Tiles Map Tiles It is always](https://reader034.vdocument.in/reader034/viewer/2022042100/5e7c9190b2e8404c651d66a1/html5/thumbnails/44.jpg)
THANKS