#Solar Eclipse Finder

Solar Eclipse Finder is a JavaScript-based web application that displays past and future solar eclipses that pass through a user defined location. The source data is published as an AGOL hosted service with the paths of 905 solar eclipses from 1601 to 2200. The eclipse paths were prepared by Michael Zeiler from data courtesy of Xavier Jubier.

The live application is available here.

Originally developed 2½ years ago as a Silverlight-based web application (see blog posting here), we wanted to confirm that the same performance and advanced symbology is achievable today with HTML5/JavaScript in modern browsers.

##jQuery & Bootstrap jQuery is a JavaScript framework for DOM manipulating. It is important to note that jQuery is not a prerequisite for mapping apps using Esri‘s ArcGIS API for JavaScipt. It is however a prerequisite of many third party JavaScript libraries like Bootstrap, a popular user interface framework. This application uses Bootstap’s popover tooltips in the fly-out attribute window and its modal dialog during start-up.

##D3 The tapered symbol used by eclipse shadow paths is achieved using a linear gradient fill. Linear gradient fills are not supported by ArcGIS API for JavaScript. However linear gradient fills are supported by SVG, the underlying technology used by Esri’s JavaScript API for renderering vectors. We used Mike Bostock‘s D3.js JavaScript library to insert and apply linear gradient fills directly to the map’s embedded SVG node.

##Conclusion Updating this application was a two step process. First the eclipse dataset was republished as an AGOL hosted feature service and, second, the app was rewritten in HTML/JS. Both tasks were relatively effortless and only took a couple of days in total.