WMO Making a Clickable Map Display of CAP

WMO Making a Clickable Map Display of CAP Alerts presented 2 November 2018 by Eliot Christian <eliot. j. christian@gmail. com> at the Filtered Alert Hub Workshop in Hong Kong, China

The Javascript Code Use a Web browser to go to the Filtered Alert Hub site at http: //alert-hub. org Next, "Click here for recent alerts" (the link is https: //s 3 -eu-west-1. amazonaws. com/ alert-hub/cap-alerts. html ) and explore the page by clicking on different points Hit "CTRL-u" to view the source code, and then you can save a copy as your own file 2 November 2018 Making a Clickable Map Display 2

Presentation Outline 1 JQuery and JSON 2 controller() function and "promise chain" 3 compile. Alerts() then show each alert 4 Open Street Map and Leaflet 5 Handling polygons and circles 2 November 2018 Making a Clickable Map Display 3

JQuery AJAX Ø Java. Script library to simplify common tasks <script src="https: //ajax [. . . ] /jquery/3. 1. 1/jquery. min. js" <!--[if lte IE 9]> <script src='//cdnjs. cloudflare. com/ajax/libs/jquery [. . . ] Ø AJAX is "Asynchronous Java. Script and XML" The "aynschronouos" function is the "callback" part of the $. ajax function 2 November 2018 Making a Clickable Map Display 4

JSON (Java. Script Object Notation) Ø Ø Ø JSON is a text notation for data interchange Its syntax borrows from Java. Script, making it easier for use by Javascript programmers Data in JSON is packaged as name/value pairs, where the colon separates name from value and name/value pairs are separated by the comma Objects are indicated by curly braces { } and arrays are indicated by square brackets [ ] Although simpler and less verbose than XML, JSON does not have schemas and cannot substitute for XML Free JSON tool: http: //codebeautify. org/jsonviewer 2 November 2018 Making a Clickable Map Display 5

Presentation Outline 1 JQuery and JSON 2 controller() function and "promise chain" 3 compile. Alerts() then show each alert 4 Open Street Map and Leaflet 5 Handling polygons and circles 2 November 2018 Making a Clickable Map Display 6

controller() function and "promise chain" The controller() function sets up four "Promise" functions The first three are executed by a "promise chain" (. then ) The last promise is actually an array of promise functions, one for each CAP alert displayed 2 November 2018 Making a Clickable Map Display 7

get. Subscription. Parms Using JQuery AJAX, "get. Subscription. Parms" promise function does an HTTPS GET of the JSON file: https: //alert-hub-subscriptions. s 3. amazonaws. com/json Find the JSON item matching the given subscription. Id, extract the subscription. Name, feed. Items. Limit, and polygon. Coordinates for that subscription Use the polygon. Coordinates to set values for the map center latitude, longitude, and zoom 2 November 2018 Making a Clickable Map Display 8

Presentation Outline 1 JQuery and JSON 2 controller() function and "promise chain" 3 compile. Alerts() then show each alert 4 Open Street Map and Leaflet 5 Handling polygons and circles 2 November 2018 Making a Clickable Map Display 9

compile. Alerts The Javascript "compile. Alerts" promise performs an HTTPS GET of the JSON file at subscription. Url, e. g. : https: //s 3 -eu-west-1. amazonaws. com/alertfeeds/unfiltered/rss. xml 2 November 2018 Making a Clickable Map Display 10

compile. Alerts Once compile. Alerts retrieves the subscription feed file, it pushes to a table each CAP alert with its values of title, link, and pub. Date CAP alerts are compiled only up to feed. Items. Limit Once compilation is done, the table is reversed Then, an array of promises reads the alerts table and processes each CAP alert 2 November 2018 Making a Clickable Map Display 11

show. This. Alert Ø For each table entry, show. This. Alert gets the CAP XML using "link" Ø cap. NS makes regular the XML namespace Ø Nested functions then parse the alert. Xml structure to get all the polygons and circles, plus other CAP values useful when a user clicks on the mapped alert 2 November 2018 Making a Clickable Map Display 12

Presentation Outline 1 JQuery and JSON 2 controller() function and "promise chain" 3 compile. Alerts() then show each alert 4 Open Street Map and Leaflet 5 Handling polygons and circles 2 November 2018 Making a Clickable Map Display 13

Open Street Map and Leaflet Ø Filtered Alert Hub now uses Open. Street. Map for the mapping base layers; others could be used instead Ø Leaflet is an open-source library for interactive maps Ø Map is initialized through Leaflet in function init. Map Ø on. Each. Feature() sets an alert area to yellow or red Ø handle. Click() generates popup for alerts at the clicked point, using Leaflet PIP (Point in Polygon) 2 November 2018 Making a Clickable Map Display 14

Making a geojson Feature Ø Clicking on a geojson feature results in a popup that lists all alerts at the clicked point Ø The popup content is part of the geojson feature code 2 November 2018 Making a Clickable Map Display 15

Presentation Outline 1 JQuery and JSON 2 controller() function and "promise chain" 3 compile. Alerts() then show each alert 4 Open Street Map and Leaflet 5 Handling polygons and circles 2 November 2018 Making a Clickable Map Display 16

Handling polygons and circles Ø Ø Ø construct. Polygon() makes geojson. Polygon from cap. Polygon add feature to map: "alerts. add. Data(geojson. Polygon); " construct. Circle() makes geojson. Polygon. Circle from Cap. Circle add feature to map: "alerts. add. Data(geojson. Polygon. Circle); " Circle special handling: – If the circle has zero radius, change radius to 1 (kilometer) – Convert each circle to a 20 -sided geo. JSON polygon so the Leaflet PIP facility can handle it 2 November 2018 Making a Clickable Map Display 17

Further Reading and Exercises Further Reading Ø Leaflet Quick Start Guide Exercises Ø Change the subscription. Id to select a different feed Ø Changing the format and content of the Legend Ø Create and test code to change what information is displayed when the user clicks on a map feature 2 November 2018 Making a Clickable Map Display 18