Making a Clickable Map Display of CAP Alerts

1. 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

2. 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://s3-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 Making a Clickable Map Display

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

4. The "aynschronouos" function is the "callback" part of the $.ajax function JQuery AJAX • JavaScript 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 JavaScript and XML" Making a Clickable Map Display

5. JSON (JavaScript Object Notation) • JSON is a text notation for data interchange • Its syntax borrows from JavaScript, making it easier for use by Javascript programmers • Data in JSON is packaged as name/value pairs,where the colonseparates name from valueand 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 Making a Clickable Map Display

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

7. 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 Making a Clickable Map Display

8. getSubscriptionParms Using JQuery AJAX, "getSubscriptionParms" promise function does an HTTPS GET of the JSON file: https://alert-hub-subscriptions.s3.amazonaws.com/json Find the JSON item matching the given subscriptionId, extract the subscriptionName, feedItemsLimit, and polygonCoordinates for that subscription Use the polygonCoordinates to set values for the map center latitude, longitude, and zoom Making a Clickable Map Display

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

10. compileAlerts The Javascript "compileAlerts" promise performs an HTTPS GET of the JSON file at subscriptionUrl, e.g.: https://s3-eu-west-1.amazonaws.com/alert-feeds/unfiltered/rss.xml Making a Clickable Map Display

11. compileAlerts Once compileAlerts retrieves the subscription feed file, it pushes to a table each CAP alert with its values of title, link, and pubDate CAP alerts are compiled only up to feedItemsLimit Once compilation is done, the table is reversed Then, an array of promises reads the alerts table and processes each CAP alert Making a Clickable Map Display

12. showThisAlert • For each table entry, showThisAlert gets the CAP XML using "link" • capNS makes regular the XML namespace • Nested functions then parse the alertXml structure to get all the polygons and circles, plus other CAP values useful when a user clicks on the mapped alert Making a Clickable Map Display

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

14. Open Street Map and Leaflet • Filtered Alert Hub now uses OpenStreetMap 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 initMap • onEachFeature() sets an alert area to yellow or red • handleClick() generates popup for alerts at the clicked point, using Leaflet PIP (Point in Polygon) Making a Clickable Map Display

15. 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 Making a Clickable Map Display

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

17. Handling polygons and circles • constructPolygon() makes geojsonPolygon from capPolygon • add feature to map: "alerts.addData(geojsonPolygon);" • constructCircle() makes geojsonPolygonCircle from CapCircle • add feature to map: "alerts.addData(geojsonPolygonCircle);" • Circle special handling: • If the circle has zero radius, change radius to 1 (kilometer) • Convert each circle to a 20-sided geoJSON polygon so the Leaflet PIP facility can handle it Making a Clickable Map Display

18. Further Reading and Exercises Further Reading • Leaflet Quick Start Guide Exercises • Change the subscriptionId 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 Making a Clickable Map Display