├── EclipseMapping.js
├── README.md
├── ServiceWorker.js
├── TimeZoneMap.js
├── UI.js
├── WebGLEarth
    ├── astro.js
    ├── backgroundworker.js
    ├── eclipse.js
    ├── images
    │   ├── bwmap.png
    │   ├── circle site.png
    │   ├── map.png
    │   ├── satellite.png
    │   └── topo.png
    ├── overlay.js
    ├── test.html
    └── viewer.html
├── alarm.wav
├── astro.js
├── backgroundworker.js
├── eclipse.js
├── eclipsemap.webmanifest
├── images
    ├── bwmap.png
    ├── circle site.png
    ├── icon-32.png
    ├── icon-512.png
    ├── map.png
    ├── satellite.png
    ├── screenshot1.png
    ├── screenshot2.png
    ├── screenshot3.png
    └── topo.png
├── overlay.js
├── todo.txt
├── tzmap.png
└── viewer.html


/EclipseMapping.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | Greg Miller gmiller@gregmiller.net 2022
  3 | https://www.celestialprogramming.com/
  4 | Released as public domain
  5 | */
  6 | 
  7 | import {getElementCoeffs,computeOutlineCurve} from "./eclipse.js";
  8 | import {getPenumbraBeginAndEndInfo,getGreatestEclipse,getRiseSetCurves, computeCentralLatLonForTime, getMaxEclipseAtRiseSetPoints, getExtremePoints, getTotalityLimitsByLongitudeList, getPartialLimitsByLogitudeList} from "./eclipse.js";
  9 | 
 10 | let map;
 11 | let umbraLine=null;
 12 | let penumbraLine=null;
 13 | 
 14 | function drawRiseSetCurves(){
 15 |     const lists=getRiseSetCurves();
 16 |     const setting=createPolyLineFromLatLonList(lists.setting);
 17 |     const rising=createPolyLineFromLatLonList(lists.rising);
 18 |     setting.addTo(map);
 19 |     rising.addTo(map);
 20 |     return lists;
 21 | }
 22 | 
 23 | function computeGreatestEclipse(){
 24 |     const ge=getGreatestEclipse(getElementCoeffs());
 25 |     let p=new L.LatLng(ge.lat,ge.lon);
 26 |     let m=L.circleMarker(p,{radius: 5});
 27 |     m.addTo(map);
 28 | }
 29 | 
 30 | function computePenumbraExtremeInfo(){
 31 |     const pi=getPenumbraBeginAndEndInfo(getElementCoeffs());
 32 |     let p=new L.LatLng(pi.start.lat,pi.start.lon);
 33 |     let m=L.circleMarker(p,{radius: 1});
 34 |     m.addTo(map);
 35 | 
 36 |     p=new L.LatLng(pi.end.lat,pi.end.lon);
 37 |     m=L.circleMarker(p,{radius: 1});
 38 |     m.addTo(map);
 39 |     return pi;
 40 | }
 41 | 
 42 | export function computeEclipseData(map1,workerMessage){
 43 |     map=map1;
 44 |     const e=getElementCoeffs();
 45 |     const extremes=getExtremePoints(e);
 46 |     const begin=e.T0+extremes.begin.t-e.Δt/60/60;
 47 |     const end=e.T0+extremes.end.t-e.Δt/60/60;
 48 | 
 49 |     const centralCurve=computeCentralCurve(e,begin,end);
 50 | 
 51 |     const startLon=extremes.begin.λ;
 52 |     const endLon=extremes.end.λ;
 53 | 
 54 |     const limits=drawRiseSetCurves();
 55 | 
 56 |     const north=new Array();
 57 |     getTotalityLimitsByLongitudeList(e,1,startLon,endLon)[0].forEach(el => {if(el!=null) north.push(new L.LatLng(el.lat,el.lon))});
 58 | 
 59 |     const south=new Array();
 60 |     getTotalityLimitsByLongitudeList(e,-1,startLon,endLon)[0].forEach(el => {if(el!=null) south.push(new L.LatLng(el.lat,el.lon))});
 61 | 
 62 |     const northP=new Array();
 63 |     getPartialLimitsByLogitudeList(e,1,limits.nStart,limits.nEnd)[0].forEach(el => {if(el!=null) northP.push(new L.LatLng(el.lat,el.lon))});
 64 |     
 65 |     const southP=new Array();
 66 |     getPartialLimitsByLogitudeList(e,-1,limits.sStart,limits.sEnd)[0].forEach(el => {if(el!=null) southP.push(new L.LatLng(el.lat,el.lon))});
 67 | 
 68 |     computeGreatestEclipse();
 69 |     const pi=computePenumbraExtremeInfo();
 70 | 
 71 | 
 72 |     let eclipseData={};
 73 |     eclipseData.e=e;
 74 |     eclipseData.extremes=extremes;
 75 |     eclipseData.beginTime=pi.start.time;
 76 |     eclipseData.endTime=pi.end.time;
 77 |     eclipseData.centralCurve=centralCurve;
 78 |     eclipseData.northTotalityLimits=north;
 79 |     eclipseData.southTotalityLimits=south;
 80 |     eclipseData.northPartialLimits=northP;
 81 |     eclipseData.southPartialLimits=southP;
 82 |     //eclipseData.centerPoint=centerPoint;
 83 |     eclipseData.durationLines=null;
 84 | 
 85 |     const backgroundWorker=new Worker("backgroundworker.js",{type: "module"});
 86 |     backgroundWorker.addEventListener("message",workerMessage);
 87 |     backgroundWorker.postMessage(eclipseData);
 88 | 
 89 |     return eclipseData;
 90 | }
 91 | 
 92 | function createPolyLineFromLatLonList(list){
 93 |     const t=new Array();
 94 |     for(let i=0;i<list.length;i++){
 95 |         if(!isNaN(list[i].lat) && !isNaN(list[i].lon)){
 96 |             t.push(new L.LatLng(list[i].lat,list[i].lon));
 97 |         }
 98 |     }
 99 |     if(t.length>0) t.push(t[0]);
100 |     const line=new L.Polyline(t, {color: 'black', weight: 1});
101 |     return line;
102 | }
103 | 
104 | function createPolygonFromLatLonList(list,color){
105 |     const t=new Array();
106 |     for(let i=0;i<list.length;i++){
107 |         if(!isNaN(list[i].lat) && !isNaN(list[i].lon)){
108 |             t.push(new L.LatLng(list[i].lat,list[i].lon));
109 |         }
110 |     }
111 |     if(t.length>0) t.push(t[0]);
112 |     const line=new L.polygon(t, {color: color, weight: 0});
113 |     return line;
114 | }
115 | 
116 | export function displayShadowOutlines(hour){
117 |     if(umbraLine) map.removeLayer(umbraLine);
118 |     if(penumbraLine) map.removeLayer(penumbraLine);
119 |     const curves=computeOutlineCurve(hour);
120 |     umbraLine=createPolygonFromLatLonList(curves.umbra,"#000000ff");
121 |     umbraLine.addTo(map);
122 |     penumbraLine=createPolygonFromLatLonList(curves.penumbra,'#000000aa');
123 |     penumbraLine.addTo(map);
124 | }
125 | 
126 | function computeCentralCurve(e,begin,end){
127 | 
128 |     let a=new Array();
129 |     let i=begin;
130 |     while(i<=end+.1){
131 |         const p=computeCentralLatLonForTime(e,i);
132 |         if(p!=null && p.lat!=null && p.lon!=null && !isNaN(p.lat) && !isNaN(p.lon)){
133 |             a.push(new L.LatLng(p.lat,p.lon));
134 |         }
135 |         i+=.0001;
136 |     }
137 |     return a;
138 | }
139 | 
140 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is under active development, and will have some crap laying around that might not
 2 | be used, and will generally be a bit rough around the edges.
 3 | 
 4 | The main file is viewer.html, and on line example is available: https://www.celestialprogramming.com/apps/SolarEclipseViewer/viewer.html
 5 | 
 6 | The code is public domain.
 7 | 
 8 | [Screenshots are slightly old and don't show all features]
 9 | Screenshots:
10 | ![screenshot1](https://raw.githubusercontent.com/gmiller123456/solareclipseviewer/main/images/screenshot1.png)
11 | ![screenshot2](https://raw.githubusercontent.com/gmiller123456/solareclipseviewer/main/images/screenshot2.png)
12 | ![screenshot2](https://raw.githubusercontent.com/gmiller123456/solareclipseviewer/main/images/screenshot3.png)
13 | 


--------------------------------------------------------------------------------
/ServiceWorker.js:
--------------------------------------------------------------------------------
 1 | 
 2 | self.addEventListener('install', () => {
 3 |     console.log(`installing service worker`);
 4 | })
 5 | 
 6 | self.addEventListener('activate', () => {
 7 |     console.log(`activating service worker`);
 8 | })
 9 | 
10 | self.addEventListener('fetch', event => {
11 |     //console.log(`fetching... ${event.request.url}`);
12 | })


--------------------------------------------------------------------------------
/TimeZoneMap.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | gmiller@gregmiller.net 2024
 3 | https://www.celestialprogramming.com/
 4 | Released as public domain
 5 | 
 6 | Converts time zone to UTC offset using an image generated from the
 7 | shapefiles from https://github.com/evansiroky/timezone-boundary-builder
 8 | 
 9 | Only accurate to about 6 miles at the equator, and offsets are valid
10 | only for April 8 2024.
11 | */
12 | 
13 | const tzoffsetlist={"Africa/Abidjan": 0, "Africa/Accra": 0, "Africa/Addis_Ababa": 10800, "Africa/Algiers": 3600, "Africa/Asmara": 10800, "Africa/Bamako": 0, "Africa/Bangui": 3600, "Africa/Banjul": 0, "Africa/Bissau": 0, "Africa/Blantyre": 7200, "Africa/Brazzaville": 3600, "Africa/Bujumbura": 7200, "Africa/Cairo": 7200, "Africa/Casablanca": 0, "Africa/Ceuta": 7200, "Africa/Conakry": 0, "Africa/Dakar": 0, "Africa/Dar_es_Salaam": 10800, "Africa/Djibouti": 10800, "Africa/Douala": 3600, "Africa/El_Aaiun": 0, "Africa/Freetown": 0, "Africa/Gaborone": 7200, "Africa/Harare": 7200, "Africa/Johannesburg": 7200, "Africa/Juba": 7200, "Africa/Kampala": 10800, "Africa/Khartoum": 7200, "Africa/Kigali": 7200, "Africa/Kinshasa": 3600, "Africa/Lagos": 3600, "Africa/Libreville": 3600, "Africa/Lome": 0, "Africa/Luanda": 3600, "Africa/Lubumbashi": 7200, "Africa/Lusaka": 7200, "Africa/Malabo": 3600, "Africa/Maputo": 7200, "Africa/Maseru": 7200, "Africa/Mbabane": 7200, "Africa/Mogadishu": 10800, "Africa/Monrovia": 0, "Africa/Nairobi": 10800, "Africa/Ndjamena": 3600, "Africa/Niamey": 3600, "Africa/Nouakchott": 0, "Africa/Ouagadougou": 0, "Africa/Porto-Novo": 3600, "Africa/Sao_Tome": 0, "Africa/Tripoli": 7200, "Africa/Tunis": 3600, "Africa/Windhoek": 7200, "America/Adak": -32400, "America/Anchorage": -28800, "America/Anguilla": -14400, "America/Antigua": -14400, "America/Araguaina": -10800, "America/Argentina/Buenos_Aires": -10800, "America/Argentina/Catamarca": -10800, "America/Argentina/Cordoba": -10800, "America/Argentina/Jujuy": -10800, "America/Argentina/La_Rioja": -10800, "America/Argentina/Mendoza": -10800, "America/Argentina/Rio_Gallegos": -10800, "America/Argentina/Salta": -10800, "America/Argentina/San_Juan": -10800, "America/Argentina/San_Luis": -10800, "America/Argentina/Tucuman": -10800, "America/Argentina/Ushuaia": -10800, "America/Aruba": -14400, "America/Asuncion": -14400, "America/Atikokan": -18000, "America/Bahia_Banderas": -21600, "America/Bahia": -10800, "America/Barbados": -14400, "America/Belem": -10800, "America/Belize": -21600, "America/Blanc-Sablon": -14400, "America/Boa_Vista": -14400, "America/Bogota": -18000, "America/Boise": -21600, "America/Cambridge_Bay": -21600, "America/Campo_Grande": -14400, "America/Cancun": -18000, "America/Caracas": -14400, "America/Cayenne": -10800, "America/Cayman": -18000, "America/Chicago": -18000, "America/Chihuahua": -21600, "America/Ciudad_Juarez": -21600, "America/Costa_Rica": -21600, "America/Creston": -25200, "America/Cuiaba": -14400, "America/Curacao": -14400, "America/Danmarkshavn": 0, "America/Dawson": -25200, "America/Dawson_Creek": -25200, "America/Denver": -21600, "America/Detroit": -14400, "America/Dominica": -14400, "America/Edmonton": -21600, "America/Eirunepe": -18000, "America/El_Salvador": -21600, "America/Fortaleza": -10800, "America/Fort_Nelson": -25200, "America/Glace_Bay": -10800, "America/Goose_Bay": -10800, "America/Grand_Turk": -14400, "America/Grenada": -14400, "America/Guadeloupe": -14400, "America/Guatemala": -21600, "America/Guayaquil": -18000, "America/Guyana": -14400, "America/Halifax": -10800, "America/Havana": -14400, "America/Hermosillo": -25200, "America/Indiana/Indianapolis": -14400, "America/Indiana/Knox": -18000, "America/Indiana/Marengo": -14400, "America/Indiana/Petersburg": -14400, "America/Indiana/Tell_City": -18000, "America/Indiana/Vevay": -14400, "America/Indiana/Vincennes": -14400, "America/Indiana/Winamac": -14400, "America/Inuvik": -21600, "America/Iqaluit": -14400, "America/Jamaica": -18000, "America/Juneau": -28800, "America/Kentucky/Louisville": -14400, "America/Kentucky/Monticello": -14400, "America/Kralendijk": -14400, "America/La_Paz": -14400, "America/Lima": -18000, "America/Los_Angeles": -25200, "America/Lower_Princes": -14400, "America/Maceio": -10800, "America/Managua": -21600, "America/Manaus": -14400, "America/Marigot": -14400, "America/Martinique": -14400, "America/Matamoros": -18000, "America/Mazatlan": -25200, "America/Menominee": -18000, "America/Merida": -21600, "America/Metlakatla": -28800, "America/Mexico_City": -21600, "America/Miquelon": -7200, "America/Moncton": -10800, "America/Monterrey": -21600, "America/Montevideo": -10800, "America/Montserrat": -14400, "America/Nassau": -14400, "America/New_York": -14400, "America/Nome": -28800, "America/Noronha": -7200, "America/North_Dakota/Beulah": -18000, "America/North_Dakota/Center": -18000, "America/North_Dakota/New_Salem": -18000, "America/Nuuk": -3600, "America/Ojinaga": -18000, "America/Panama": -18000, "America/Paramaribo": -10800, "America/Phoenix": -25200, "America/Port-au-Prince": -14400, "America/Port_of_Spain": -14400, "America/Porto_Velho": -14400, "America/Puerto_Rico": -14400, "America/Punta_Arenas": -10800, "America/Rankin_Inlet": -18000, "America/Recife": -10800, "America/Regina": -21600, "America/Resolute": -18000, "America/Rio_Branco": -18000, "America/Santarem": -10800, "America/Santiago": -14400, "America/Santo_Domingo": -14400, "America/Sao_Paulo": -10800, "America/Scoresbysund": -3600, "America/Sitka": -28800, "America/St_Barthelemy": -14400, "America/St_Johns": -9000, "America/St_Kitts": -14400, "America/St_Lucia": -14400, "America/St_Thomas": -14400, "America/St_Vincent": -14400, "America/Swift_Current": -21600, "America/Tegucigalpa": -21600, "America/Thule": -10800, "America/Tijuana": -25200, "America/Toronto": -14400, "America/Tortola": -14400, "America/Vancouver": -25200, "America/Whitehorse": -25200, "America/Winnipeg": -18000, "America/Yakutat": -28800, "Antarctica/Casey": 28800, "Antarctica/Davis": 25200, "Antarctica/DumontDUrville": 36000, "Antarctica/Macquarie": 36000, "Antarctica/Mawson": 18000, "Antarctica/McMurdo": 43200, "Antarctica/Palmer": -10800, "Antarctica/Rothera": -10800, "Antarctica/Syowa": 10800, "Antarctica/Troll": 7200, "Antarctica/Vostok": 18000, "Arctic/Longyearbyen": 7200, "Asia/Aden": 10800, "Asia/Almaty": 18000, "Asia/Amman": 10800, "Asia/Anadyr": 43200, "Asia/Aqtau": 18000, "Asia/Aqtobe": 18000, "Asia/Ashgabat": 18000, "Asia/Atyrau": 18000, "Asia/Baghdad": 10800, "Asia/Bahrain": 10800, "Asia/Baku": 14400, "Asia/Bangkok": 25200, "Asia/Barnaul": 25200, "Asia/Beirut": 10800, "Asia/Bishkek": 21600, "Asia/Brunei": 28800, "Asia/Chita": 32400, "Asia/Choibalsan": 28800, "Asia/Colombo": 19800, "Asia/Damascus": 10800, "Asia/Dhaka": 21600, "Asia/Dili": 32400, "Asia/Dubai": 14400, "Asia/Dushanbe": 18000, "Asia/Famagusta": 10800, "Asia/Gaza": 7200, "Asia/Hebron": 7200, "Asia/Ho_Chi_Minh": 25200, "Asia/Hong_Kong": 28800, "Asia/Hovd": 25200, "Asia/Irkutsk": 28800, "Asia/Jakarta": 25200, "Asia/Jayapura": 32400, "Asia/Jerusalem": 10800, "Asia/Kabul": 16200, "Asia/Kamchatka": 43200, "Asia/Karachi": 18000, "Asia/Kathmandu": 20700, "Asia/Khandyga": 32400, "Asia/Kolkata": 19800, "Asia/Krasnoyarsk": 25200, "Asia/Kuala_Lumpur": 28800, "Asia/Kuching": 28800, "Asia/Kuwait": 10800, "Asia/Macau": 28800, "Asia/Magadan": 39600, "Asia/Makassar": 28800, "Asia/Manila": 28800, "Asia/Muscat": 14400, "Asia/Nicosia": 10800, "Asia/Novokuznetsk": 25200, "Asia/Novosibirsk": 25200, "Asia/Omsk": 21600, "Asia/Oral": 18000, "Asia/Phnom_Penh": 25200, "Asia/Pontianak": 25200, "Asia/Pyongyang": 32400, "Asia/Qatar": 10800, "Asia/Qostanay": 18000, "Asia/Qyzylorda": 18000, "Asia/Riyadh": 10800, "Asia/Sakhalin": 39600, "Asia/Samarkand": 18000, "Asia/Seoul": 32400, "Asia/Shanghai": 28800, "Asia/Singapore": 28800, "Asia/Srednekolymsk": 39600, "Asia/Taipei": 28800, "Asia/Tashkent": 18000, "Asia/Tbilisi": 14400, "Asia/Tehran": 12600, "Asia/Thimphu": 21600, "Asia/Tokyo": 32400, "Asia/Tomsk": 25200, "Asia/Ulaanbaatar": 28800, "Asia/Urumqi": 21600, "Asia/Ust-Nera": 36000, "Asia/Vientiane": 25200, "Asia/Vladivostok": 36000, "Asia/Yakutsk": 32400, "Asia/Yangon": 23400, "Asia/Yekaterinburg": 18000, "Asia/Yerevan": 14400, "Atlantic/Azores": 0, "Atlantic/Bermuda": -10800, "Atlantic/Canary": 3600, "Atlantic/Cape_Verde": -3600, "Atlantic/Faroe": 3600, "Atlantic/Madeira": 3600, "Atlantic/Reykjavik": 0, "Atlantic/South_Georgia": -7200, "Atlantic/Stanley": -10800, "Atlantic/St_Helena": 0, "Australia/Adelaide": 34200, "Australia/Brisbane": 36000, "Australia/Broken_Hill": 34200, "Australia/Darwin": 34200, "Australia/Eucla": 31500, "Australia/Hobart": 36000, "Australia/Lindeman": 36000, "Australia/Lord_Howe": 37800, "Australia/Melbourne": 36000, "Australia/Perth": 28800, "Australia/Sydney": 36000, "Europe/Amsterdam": 7200, "Europe/Andorra": 7200, "Europe/Astrakhan": 14400, "Europe/Athens": 10800, "Europe/Belgrade": 7200, "Europe/Berlin": 7200, "Europe/Bratislava": 7200, "Europe/Brussels": 7200, "Europe/Bucharest": 10800, "Europe/Budapest": 7200, "Europe/Busingen": 7200, "Europe/Chisinau": 10800, "Europe/Copenhagen": 7200, "Europe/Dublin": 3600, "Europe/Gibraltar": 7200, "Europe/Guernsey": 3600, "Europe/Helsinki": 10800, "Europe/Isle_of_Man": 3600, "Europe/Istanbul": 10800, "Europe/Jersey": 3600, "Europe/Kaliningrad": 7200, "Europe/Kirov": 10800, "Europe/Kyiv": 10800, "Europe/Lisbon": 3600, "Europe/Ljubljana": 7200, "Europe/London": 3600, "Europe/Luxembourg": 7200, "Europe/Madrid": 7200, "Europe/Malta": 7200, "Europe/Mariehamn": 10800, "Europe/Minsk": 10800, "Europe/Monaco": 7200, "Europe/Moscow": 10800, "Europe/Oslo": 7200, "Europe/Paris": 7200, "Europe/Podgorica": 7200, "Europe/Prague": 7200, "Europe/Riga": 10800, "Europe/Rome": 7200, "Europe/Samara": 14400, "Europe/San_Marino": 7200, "Europe/Sarajevo": 7200, "Europe/Saratov": 14400, "Europe/Simferopol": 10800, "Europe/Skopje": 7200, "Europe/Sofia": 10800, "Europe/Stockholm": 7200, "Europe/Tallinn": 10800, "Europe/Tirane": 7200, "Europe/Ulyanovsk": 14400, "Europe/Vaduz": 7200, "Europe/Vatican": 7200, "Europe/Vienna": 7200, "Europe/Vilnius": 10800, "Europe/Volgograd": 10800, "Europe/Warsaw": 7200, "Europe/Zagreb": 7200, "Europe/Zurich": 7200, "Indian/Antananarivo": 10800, "Indian/Chagos": 21600, "Indian/Christmas": 25200, "Indian/Cocos": 23400, "Indian/Comoro": 10800, "Indian/Kerguelen": 18000, "Indian/Mahe": 14400, "Indian/Maldives": 18000, "Indian/Mauritius": 14400, "Indian/Mayotte": 10800, "Indian/Reunion": 14400, "Pacific/Apia": 46800, "Pacific/Auckland": 43200, "Pacific/Bougainville": 39600, "Pacific/Chatham": 45900, "Pacific/Chuuk": 36000, "Pacific/Easter": -21600, "Pacific/Efate": 39600, "Pacific/Fakaofo": 46800, "Pacific/Fiji": 43200, "Pacific/Funafuti": 43200, "Pacific/Galapagos": -21600, "Pacific/Gambier": -32400, "Pacific/Guadalcanal": 39600, "Pacific/Guam": 36000, "Pacific/Honolulu": -36000, "Pacific/Kanton": 46800, "Pacific/Kiritimati": 50400, "Pacific/Kosrae": 39600, "Pacific/Kwajalein": 43200, "Pacific/Majuro": 43200, "Pacific/Marquesas": -34200, "Pacific/Midway": -39600, "Pacific/Nauru": 43200, "Pacific/Niue": -39600, "Pacific/Norfolk": 39600, "Pacific/Noumea": 39600, "Pacific/Pago_Pago": -39600, "Pacific/Palau": 32400, "Pacific/Pitcairn": -28800, "Pacific/Pohnpei": 39600, "Pacific/Port_Moresby": 36000, "Pacific/Rarotonga": -36000, "Pacific/Saipan": 36000, "Pacific/Tahiti": -36000, "Pacific/Tarawa": 43200, "Pacific/Tongatapu": 46800, "Pacific/Wake": 43200,
14 | "Etc/GMT-12": 12*60*60,
15 | "Etc/GMT-11": 11*60*60,
16 | "Etc/GMT-10": 10*60*60,
17 | "Etc/GMT-9": 9*60*60,
18 | "Etc/GMT-8": 8*60*60,
19 | "Etc/GMT-7": 7*60*60,
20 | "Etc/GMT-6": 6*60*60,
21 | "Etc/GMT-5": 5*60*60,
22 | "Etc/GMT-4": 4*60*60,
23 | "Etc/GMT-3": 3*60*60,
24 | "Etc/GMT-2": 2*60*60,
25 | "Etc/GMT-1": 1*60*60,
26 | "Etc/GMT": 0*60*60,
27 | "Etc/GMT+1": -1*60*60,
28 | "Etc/GMT+2": -2*60*60,
29 | "Etc/GMT+3": -3*60*60,
30 | "Etc/GMT+4": -4*60*60,
31 | "Etc/GMT+5": -5*60*60,
32 | "Etc/GMT+6": -6*60*60,
33 | "Etc/GMT+7": -7*60*60,
34 | "Etc/GMT+8": -8*60*60,
35 | "Etc/GMT+9": -9*60*60,
36 | "Etc/GMT+10": -10*60*60,
37 | "Etc/GMT+11": -11*60*60,
38 | "Etc/GMT+12": -12*60*60
39 | }
40 | 
41 | export class TimeZoneMap{
42 |     tzcolormap=[["Africa/Abidjan","Africa/Accra","Africa/Addis_Ababa","Africa/Algiers","Africa/Asmara","Africa/Bamako","Africa/Bangui","Africa/Banjul","Africa/Bissau","Africa/Blantyre","Africa/Brazzaville","Africa/Bujumbura","Africa/Cairo","Africa/Casablanca","Africa/Ceuta","Africa/Conakry","Africa/Dakar","Africa/Dar_es_Salaam","Africa/Djibouti","Africa/Douala","Africa/El_Aaiun","Africa/Freetown","Africa/Gaborone","Africa/Harare","Africa/Johannesburg","Africa/Juba","Africa/Kampala","Africa/Khartoum","Africa/Kigali","Africa/Kinshasa","Africa/Lagos","Africa/Libreville","Africa/Lome","Africa/Luanda","Africa/Lubumbashi","Africa/Lusaka","Africa/Malabo","Africa/Maputo","Africa/Maseru","Africa/Mbabane","Africa/Mogadishu","Africa/Monrovia","Africa/Nairobi","Africa/Ndjamena","Africa/Niamey","Africa/Nouakchott","Africa/Ouagadougou","Africa/Porto-Novo","Africa/Sao_Tome","Africa/Tripoli","Africa/Tunis","Africa/Windhoek","America/Adak","America/Anchorage","America/Anguilla","America/Antigua","America/Aruba","America/Araguaina","America/Argentina/Buenos_Aires","America/Argentina/Catamarca","America/Argentina/Cordoba","America/Argentina/Jujuy","America/Argentina/La_Rioja","America/Argentina/Mendoza","America/Argentina/Rio_Gallegos","America/Argentina/Salta","America/Argentina/San_Juan","America/Argentina/San_Luis","America/Argentina/Tucuman","America/Argentina/Ushuaia","America/Asuncion","America/Atikokan","America/Bahia","America/Bahia_Banderas","America/Barbados","America/Belem","America/Belize","America/Blanc-Sablon","America/Boa_Vista","America/Bogota","America/Boise","America/Cambridge_Bay","America/Campo_Grande","America/Cancun","America/Caracas","America/Cayenne","America/Cayman","America/Chicago","America/Chihuahua","America/Ciudad_Juarez","America/Costa_Rica","America/Creston","America/Cuiaba","America/Curacao","America/Danmarkshavn","America/Dawson","America/Dawson_Creek","America/Denver","America/Detroit","America/Dominica","America/Edmonton","America/Eirunepe","America/El_Salvador","America/Fort_Nelson","America/Fortaleza","America/Glace_Bay","America/Goose_Bay","America/Grand_Turk","America/Grenada","America/Guadeloupe","America/Guatemala","America/Guayaquil","America/Guyana","America/Halifax","America/Havana","America/Hermosillo","America/Indiana/Indianapolis","America/Indiana/Knox","America/Indiana/Marengo","America/Indiana/Petersburg","America/Indiana/Tell_City","America/Indiana/Vevay","America/Indiana/Vincennes","America/Indiana/Winamac","America/Inuvik","America/Iqaluit","America/Jamaica","America/Juneau","America/Kentucky/Louisville","America/Kentucky/Monticello","America/Kralendijk","America/La_Paz","America/Lima","America/Los_Angeles","America/Lower_Princes","America/Maceio","America/Managua","America/Manaus","America/Marigot","America/Martinique","America/Matamoros","America/Mazatlan","America/Miquelon","America/Menominee","America/Merida","America/Metlakatla","America/Mexico_City","America/Moncton","America/Monterrey","America/Montevideo","America/Montserrat","America/Nassau","America/New_York","America/Nome","America/Noronha","America/North_Dakota/Beulah","America/North_Dakota/Center","America/North_Dakota/New_Salem","America/Nuuk","America/Ojinaga","America/Panama","America/Paramaribo","America/Phoenix","America/Port-au-Prince","America/Port_of_Spain","America/Porto_Velho","America/Puerto_Rico","America/Punta_Arenas","America/Rankin_Inlet","America/Recife","America/Regina","America/Resolute","America/Rio_Branco","America/Santarem","America/Santiago","America/Santo_Domingo","America/Sao_Paulo","America/Scoresbysund","America/Sitka","America/St_Barthelemy","America/St_Johns","America/St_Kitts","America/St_Lucia","America/St_Thomas","America/St_Vincent","America/Swift_Current","America/Tegucigalpa","America/Thule","America/Tijuana","America/Toronto","America/Tortola","America/Vancouver","America/Whitehorse","America/Winnipeg","America/Yakutat","Antarctica/Casey","Antarctica/Davis","Antarctica/DumontDUrville","Antarctica/Macquarie","Antarctica/Mawson","Antarctica/McMurdo","Antarctica/Palmer","Antarctica/Rothera","Antarctica/Syowa","Antarctica/Troll","Antarctica/Vostok","Arctic/Longyearbyen","Asia/Aden","Asia/Almaty","Asia/Amman","Asia/Anadyr","Asia/Aqtau","Asia/Aqtobe","Asia/Ashgabat","Asia/Atyrau","Asia/Baghdad","Asia/Bahrain","Asia/Baku","Asia/Bangkok","Asia/Barnaul","Asia/Beirut","Asia/Bishkek","Asia/Brunei","Asia/Chita","Asia/Choibalsan","Asia/Colombo","Asia/Damascus","Asia/Dhaka","Asia/Dili","Asia/Dubai","Asia/Dushanbe","Asia/Famagusta","Asia/Gaza","Asia/Hebron","Asia/Ho_Chi_Minh","Asia/Hong_Kong","Asia/Hovd","Asia/Irkutsk","Asia/Jakarta","Asia/Jayapura","Asia/Jerusalem","Asia/Kabul","Asia/Kamchatka","Asia/Karachi","Asia/Kathmandu","Asia/Khandyga","Asia/Kolkata","Asia/Krasnoyarsk","Asia/Kuala_Lumpur","Asia/Kuching","Asia/Kuwait","Asia/Macau","Asia/Magadan","Asia/Makassar","Asia/Manila","Asia/Muscat"],["Asia/Nicosia","Asia/Novokuznetsk","Asia/Novosibirsk","Asia/Omsk","Asia/Oral","Asia/Phnom_Penh","Asia/Pontianak","Asia/Pyongyang","Asia/Qatar","Asia/Qostanay","Asia/Qyzylorda","Asia/Riyadh","Asia/Sakhalin","Asia/Samarkand","Asia/Seoul","Asia/Shanghai","Asia/Singapore","Asia/Srednekolymsk","Asia/Taipei","Asia/Tashkent","Asia/Tbilisi","Asia/Tehran","Asia/Thimphu","Asia/Tokyo","Asia/Tomsk","Asia/Ulaanbaatar","Asia/Urumqi","Asia/Ust-Nera","Asia/Vientiane","Asia/Vladivostok","Asia/Yakutsk","Asia/Yangon","Asia/Yekaterinburg","Asia/Yerevan","Atlantic/Azores","Atlantic/Bermuda","Atlantic/Canary","Atlantic/Cape_Verde","Atlantic/Faroe","Atlantic/Madeira","Atlantic/Reykjavik","Atlantic/South_Georgia","Atlantic/St_Helena","Atlantic/Stanley","Australia/Adelaide","Australia/Brisbane","Australia/Broken_Hill","Australia/Darwin","Australia/Eucla","Australia/Hobart","Australia/Lindeman","Australia/Lord_Howe","Australia/Melbourne","Australia/Perth","Australia/Sydney","Etc/UTC","Europe/Amsterdam","Europe/Andorra","Europe/Astrakhan","Europe/Athens","Europe/Belgrade","Europe/Berlin","Europe/Bratislava","Europe/Brussels","Europe/Bucharest","Europe/Budapest","Europe/Busingen","Europe/Chisinau","Europe/Copenhagen","Europe/Dublin","Europe/Gibraltar","Europe/Guernsey","Europe/Helsinki","Europe/Isle_of_Man","Europe/Istanbul","Europe/Jersey","Europe/Kaliningrad","Europe/Kyiv","Europe/Kirov","Europe/Lisbon","Europe/Ljubljana","Europe/London","Europe/Luxembourg","Europe/Madrid","Europe/Malta","Europe/Mariehamn","Europe/Minsk","Europe/Monaco","Europe/Moscow","Europe/Oslo","Europe/Paris","Europe/Podgorica","Europe/Prague","Europe/Riga","Europe/Rome","Europe/Samara","Europe/San_Marino","Europe/Sarajevo","Europe/Saratov","Europe/Simferopol","Europe/Skopje","Europe/Sofia","Europe/Stockholm","Europe/Tallinn","Europe/Tirane","Europe/Ulyanovsk","Europe/Vaduz","Europe/Vatican","Europe/Vienna","Europe/Vilnius","Europe/Volgograd","Europe/Warsaw","Europe/Zagreb","Europe/Zurich","Indian/Antananarivo","Indian/Chagos","Indian/Christmas","Indian/Cocos","Indian/Comoro","Indian/Kerguelen","Indian/Mahe","Indian/Maldives","Indian/Mauritius","Indian/Mayotte","Indian/Reunion","Pacific/Apia","Pacific/Auckland","Pacific/Bougainville","Pacific/Chatham","Pacific/Chuuk","Pacific/Easter","Pacific/Efate","Pacific/Fakaofo","Pacific/Fiji","Pacific/Funafuti","Pacific/Galapagos","Pacific/Gambier","Pacific/Guadalcanal","Pacific/Guam","Pacific/Honolulu","Pacific/Kanton","Pacific/Kiritimati","Pacific/Kosrae","Pacific/Kwajalein","Pacific/Majuro","Pacific/Marquesas","Pacific/Midway","Pacific/Nauru","Pacific/Niue","Pacific/Norfolk","Pacific/Noumea","Pacific/Pago_Pago","Pacific/Palau","Pacific/Pitcairn","Pacific/Pohnpei","Pacific/Port_Moresby","Pacific/Rarotonga","Pacific/Saipan","Pacific/Tahiti","Pacific/Tarawa","Pacific/Tongatapu","Pacific/Wake","Pacific/Wallis","Etc/GMT-12","Etc/GMT-11","Etc/GMT-10","Etc/GMT-9","Etc/GMT-8","Etc/GMT-7","Etc/GMT-6","Etc/GMT-5","Etc/GMT-4","Etc/GMT-3","Etc/GMT-2","Etc/GMT-1","Etc/GMT","Etc/GMT+1","Etc/GMT+2","Etc/GMT+3","Etc/GMT+4","Etc/GMT+5","Etc/GMT+6","Etc/GMT+7","Etc/GMT+8","Etc/GMT+9","Etc/GMT+10","Etc/GMT+11","Etc/GMT+12"]];
43 |     canvas;
44 |     ctx;
45 |     img;
46 |     scale=10;
47 |     initialized=false;
48 | 
49 |     constructor(){
50 |         this.init();
51 |     }
52 | 
53 |     init(){
54 |         this.img=document.createElement("img");
55 |         this.img.src="tzmap.png";
56 |         this.img.addEventListener("load",this.init2.bind(this),false);
57 |     }
58 | 
59 |     init2(){
60 |         this.canvas=document.createElement("canvas");
61 |         this.canvas.width=this.img.width;
62 |         this.canvas.height=this.img.height;
63 |         this.ctx=this.canvas.getContext("2d",{willReadFrequently:true});
64 |         this.ctx.drawImage(this.img,0,0);
65 |         this.initialized=true;
66 |     }
67 | 
68 |     getTZFromLatLon(lat,lon){
69 |         if(!this.initialized) return {id: "America/New_York", offset: -14400};
70 |         const d=this.ctx.getImageData((lon+180)*this.scale,this.img.height-(lat+90)*this.scale,1,1).data;
71 |         const tzid=this.tzcolormap[d[1]][d[0]];
72 |         return {id: tzid, offset: tzoffsetlist[tzid]};
73 |     }
74 | }


--------------------------------------------------------------------------------
/UI.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | Greg Miller gmiller@gregmiller.net 2022
  3 | https://www.celestialprogramming.com/
  4 | Released as public domain
  5 | */
  6 | 
  7 | import {hoursToTime,prettyTime,UnixTimeFromJulianDate} from "./astro.js";
  8 | import {drawOverlay} from "./overlay.js";
  9 | import {computeEclipseData,displayShadowOutlines} from "./EclipseMapping.js";
 10 | import {getElementCoeffs, getLocalCircumstances } from "./eclipse.js";
 11 | import {TimeZoneMap} from "./TimeZoneMap.js";
 12 | 
 13 | const timeZoneMap=new TimeZoneMap();
 14 | let timeZone={id: "America/New_York", offset: -14400};
 15 | //populateTimeZones();
 16 | 
 17 | const canvas=document.getElementById("overlayCanvas");
 18 | const ctx = canvas.getContext("2d");
 19 | canvas.width=window.innerWidth;
 20 | canvas.height=window.innerHeight;
 21 | let markerList=[];
 22 | let lineList=[];
 23 | let currentPostionMarker=null;
 24 | 
 25 | let lat=localStorage.getItem("eclipsemap_lat");
 26 | let lon=localStorage.getItem("eclipsemap_lon");
 27 | let zoom=localStorage.getItem("eclipsemap_zoom");
 28 | if(!lat || !lon || !zoom){
 29 |     lat=38.2738;
 30 |     lon=-86.414;
 31 |     zoom=3;
 32 | }
 33 | 
 34 | var map = L.map('map',{ zoomControl: false, renderer: L.canvas() }).setView([lat,lon], zoom);
 35 | let mapURL="https://tile.openstreetmap.org/{z}/{x}/{y}.png";
 36 | let mapAttrib='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>';
 37 | let airialURL="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}";
 38 | let airialAttrib="Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
 39 | let mapLayer=L.tileLayer(mapURL,{attribution: mapAttrib})
 40 | let airialLayer=L.tileLayer(airialURL,{
 41 |     attribution: airialAttrib,
 42 |     maxNativeZoom:19,
 43 |         maxZoom:25
 44 | });
 45 | 
 46 | var OpenTopoMapLayer = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
 47 | 	maxZoom: 25,
 48 | 	attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
 49 | });
 50 | 
 51 | var Esri_WorldGrayCanvas = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
 52 | 	attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
 53 |     maxNativeZoom:16,
 54 | 	maxZoom: 25
 55 | });
 56 | 
 57 | /*
 58 | TODO: Many more map styles at:
 59 | https://leaflet-extras.github.io/leaflet-providers/preview/
 60 | */
 61 | 
 62 | const eclipseData=computeEclipseData(map,workerMessage);
 63 | map.addLayer(mapLayer);
 64 | 
 65 | // Add in a crosshair for the map
 66 | var crosshairIcon = L.icon({
 67 |     iconUrl: 'images/circle site.png',
 68 |     iconSize:     [20, 20], // size of the icon
 69 |     iconAnchor:   [10, 10], // point of the icon which will correspond to marker's location
 70 | });
 71 | 
 72 | const p=map.getCenter();
 73 | const crosshairs=L.marker(p,{icon:crosshairIcon}).addTo(map);
 74 | 
 75 | map.on('move', updateDisplay, this);
 76 | map.on('click', mapClick,this);
 77 | 
 78 | function mapClick(e){
 79 |     const p=e.latlng;
 80 |     const c=getLocalCircumstances(p.lat, p.lng,0);
 81 |     let s="Not Total";
 82 |     if(c.UTThirdContact-c.UTSecondContact>0) s=prettyTime(c.UTThirdContact-c.UTSecondContact);
 83 | 
 84 |     let m=L.circleMarker(p,{radius: 5, color: "#00000099"});
 85 |     m.addTo(map).bindTooltip(s, {permanent: true});
 86 | 
 87 |     markerList.push(m);
 88 |     if(markerList.length>1){
 89 |         const t=markerList[markerList.length-2];
 90 |         let dist=(t.getLatLng().distanceTo(m.getLatLng()) * 0.0006213712);
 91 | 
 92 |         if(dist<.25){
 93 |             dist=Math.floor(dist*5280)+"ft";
 94 |         } else {
 95 |             dist=dist.toFixed(2)+"mi";
 96 |         }
 97 |         
 98 |         const line=new L.Polyline([t.getLatLng(),m.getLatLng()], {color: 'black', weight: 1});
 99 |         line.addTo(map);
100 |         line.bindTooltip(dist, {permanent: true});
101 |         line.openTooltip();
102 |         lineList.push(line);
103 |     }
104 | }
105 | 
106 | function removeAllMapLayers(){
107 |     map.removeLayer(mapLayer);
108 |     map.removeLayer(airialLayer);
109 |     map.removeLayer(OpenTopoMapLayer);
110 |     map.removeLayer(Esri_WorldGrayCanvas);
111 | }
112 | 
113 | function setMap(){
114 |     removeAllMapLayers();
115 |     map.addLayer(mapLayer);
116 | }
117 | 
118 | function setSat(){
119 |     removeAllMapLayers();
120 |     map.addLayer(airialLayer);
121 | }
122 | 
123 | function setTopo(){
124 |     removeAllMapLayers();
125 |     map.addLayer(OpenTopoMapLayer);
126 | }
127 | 
128 | function setBwMap(){
129 |     removeAllMapLayers();
130 |     map.addLayer(Esri_WorldGrayCanvas);
131 | }
132 | 
133 | function displayLocalCircumstances(){
134 |     const p=map.getCenter();
135 |     const c=getLocalCircumstances(p.lat, p.lng,0);
136 |     const t=document.getElementById("localCircumstancesTable");
137 |     t.rows[1].cells[1].innerHTML=(p.lat-0).toFixed(4);
138 |     t.rows[2].cells[1].innerHTML=(p.lng-0).toFixed(4);
139 |     t.rows[3].cells[1].innerHTML=(c.h-0).toFixed(1);
140 |     t.rows[4].cells[1].innerHTML=(c.mag*100).toFixed(1)+"%";
141 |     if(c.mag>0){
142 |         t.rows[5].cells[1].innerHTML=hoursToTime(c.UTFirstContact,timeZone);
143 |         t.rows[6].cells[1].innerHTML=hoursToTime(c.UTLastContact,timeZone);
144 |         t.rows[7].cells[1].innerHTML=prettyTime(c.UTLastContact-c.UTFirstContact);
145 |     } else {
146 |         t.rows[5].cells[1].innerHTML="";
147 |         t.rows[6].cells[1].innerHTML="";
148 |         t.rows[7].cells[1].innerHTML="";
149 |     }
150 | 
151 |     if(c.mag>=1){
152 |         t.rows[8].cells[1].innerHTML=hoursToTime(c.UTSecondContact,timeZone);
153 |         t.rows[10].cells[1].innerHTML=hoursToTime(c.UTThirdContact,timeZone);
154 |         t.rows[11].cells[1].innerHTML=prettyTime(c.UTThirdContact-c.UTSecondContact);
155 |     } else {
156 |         t.rows[8].cells[1].innerHTML="";
157 |         t.rows[10].cells[1].innerHTML="";
158 |         t.rows[11].cells[1].innerHTML="";
159 |     }
160 |     t.rows[9].cells[1].innerHTML=hoursToTime(c.UTMaximum,timeZone);
161 | }
162 | 
163 | function formatUTCOffset(tz){
164 |     let s=tz.offset;
165 |     let pm="";
166 |     if(s>=0) pm="+";
167 |     let hours=Math.floor(s/60/60);
168 |     let t=s-hours*60*60;
169 |     t=t/60;
170 |     let ez="";
171 |     if (t<10) ez="0"
172 |     return pm+hours+":"+ez+t;
173 | }
174 | 
175 | function updateDisplay(e){
176 |     const center=map.getCenter();
177 |     
178 |     timeZone=timeZoneMap.getTZFromLatLon(center.lat,center.lng);
179 |     document.getElementById("timeZoneDisplay").innerText="GMT " + formatUTCOffset(timeZone);
180 |     const t=displayLocalCircumstances();
181 |     displayShadowOutlines(document.getElementById("timeSlider").value-0);
182 |     crosshairs.setLatLng(center);
183 |     drawOverlay(ctx,map,eclipseData);
184 |     updateTimeLabel(animhour);
185 |     localStorage.setItem("eclipsemap_lat",center.lat);
186 |     localStorage.setItem("eclipsemap_lon",center.lng);
187 |     localStorage.setItem("eclipsemap_zoom",map.getZoom());
188 | }
189 | 
190 | function workerMessage(e){
191 |     const lines=e.data;
192 |     eclipseData.durationLines=lines;
193 |     document.getElementById("durationLinesLoadingSpinner").classList.remove("loadingSpinner");
194 |     document.getElementById("showDurationLinesCheckbox").style.visibility="visible";
195 |     updateDisplay();
196 | }
197 | 
198 | function clearMarkers(e){
199 |     for(let i=0;i<markerList.length;i++){
200 |         map.removeLayer(markerList[i]);
201 |     }
202 |     for(let i=0;i<lineList.length;i++){
203 |         map.removeLayer(lineList[i]);
204 |     }
205 |     markerList=[];
206 |     lineList=[];
207 | }
208 | 
209 | function durationLinesCheck(){
210 |     updateDisplay();
211 | }
212 | 
213 | function populateTimeZones(){
214 |     const date=new Date(2024,4,8);
215 |     const tz=-(date.getTimezoneOffset()/60);
216 |     const e=document.getElementById("timeZoneSelect");
217 |     for(let i=-11;i<=14;i++){
218 |         const o=document.createElement("option");
219 |         o.value=i;
220 |         if(i>=0){
221 |             o.text="UTC + "+i;
222 |         } else {
223 |             o.text="UTC - "+Math.abs(i);
224 |         }
225 |         if(i==tz) o.selected="selected";
226 |         e.add(o,null);
227 |     }
228 | 
229 | }
230 | 
231 | function sliderInput(e){
232 |     runAmination=false;
233 |     animhour=document.getElementById("timeSlider").value-0;
234 |     displayShadowOutlines(animhour);
235 |     updateTimeLabel(animhour);
236 | }
237 | 
238 | function updateTimeLabel(hour){
239 |     const e=getElementCoeffs();
240 |     let time=e.T0 + hour - e.Δt/60/60
241 |     if(time < eclipseData.beginTime){
242 |         document.getElementById("timeSliderLabel").innerText="N/A";
243 |     } else {
244 |         document.getElementById("timeSliderLabel").innerText=hoursToTime(time,timeZone);
245 |     }
246 | }
247 | 
248 | function animate(){
249 |     displayShadowOutlines(animhour);
250 |     updateTimeLabel(animhour);
251 | 
252 |     if(runAmination && animhour<eclipseData.endTime){
253 |         animhour+=.01;
254 |         window.setTimeout(animate,50);
255 |         document.getElementById("timeSlider").value=animhour;
256 |     }
257 | }
258 | 
259 | function locationClick(){
260 |     navigator.geolocation.getCurrentPosition(positionListener);
261 | }
262 | 
263 | function positionListener(p){
264 |     if(p!=null){
265 |         map.setView([p.coords.latitude, p.coords.longitude]);
266 |         displayCurrentPositionMarker(p.coords.latitude, p.coords.longitude);
267 |     }
268 |     if(document.getElementById("autoUpdatePosition").checked){
269 |         window.setTimeout(()=>{
270 |             navigator.geolocation.getCurrentPosition(positionListener);
271 |         },1000);
272 |     }
273 | }
274 | 
275 | function autoPositionListener(p){
276 |     if(p!=null){
277 |         displayCurrentPositionMarker(p.coords.latitude, p.coords.longitude);
278 |     }
279 |     if(document.getElementById("autoUpdatePosition").checked){
280 |         window.setTimeout(()=>{
281 |             navigator.geolocation.getCurrentPosition(autoPositionListener);
282 |         },1000);
283 |     }
284 | }
285 | 
286 | function displayCurrentPositionMarker(lat,lon){
287 |     if(currentPostionMarker==null){
288 |         const icon=L.icon({
289 |             iconUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAWRJREFUOE+1VEtSg0AQ7T6A7s1G2HkAXQNewAtY5bD0FBlOAqnyAp4AstYD6AqyyQF0T+vrMNSESgUJsauooufz5vW86cc0CBGJiagcjh9Yt2HmnJkzf45dIiIBEeVEBEBqmm8qig9ar7dUVVsKgovuu6QouiJjbtxW64P6gDURBQ4oy96Pklwub8naO7emYeYQiQKKCEqMwSRJXseq7efBOs/vKY4XGCuYOWX/zsLwRUudEgCt60e3RQEFGZiB4SmB+8zzBJVuFHBqqYcOLcsHLV0BrX2jMRHGmDuRFDBNS30icwLswFIBTxFjeLgT52yAu+f3vGM4R2HH1Cn9P6Kc9dm0bYs+vJ6jtCtXe1lEDFwGLYe7nNl6iTMH2JaZCjowh4qZe0B4IRznz/bllwn73LOvzsIA+vT7b5FDqNXqk5rma89go2ih5gp2XSgzl/QG6zm3QXtDqGOtqM7CbJi58tf9AArJ62Vg0Th6AAAAAElFTkSuQmCC',
290 |             iconAnchor: [10,10]
291 |         })
292 |         currentPostionMarker=L.marker([lat,lon],{icon: icon,zIndexOffset: -1});
293 |         currentPostionMarker.addTo(map);
294 |     } else {
295 |         currentPostionMarker.setLatLng([lat,lon]);
296 |     }
297 | }
298 | 
299 | function autoUpdatePositionClick(e){
300 |     autoPositionListener(null);
301 | }
302 | 
303 | function realTimeClick(e){
304 |     runAmination=false;
305 |     document.getElementById("timeSlider").disabled=true;
306 | 
307 | }
308 | 
309 | function alarm(time,cutoff){
310 |     if(Math.abs(time-cutoff*1000)<=1000){
311 |         beep();
312 |     }
313 | }
314 | 
315 | function alarms(first, second, third, fourth){
316 |     if(document.getElementById("tenSecondWarning").checked){
317 |         alarm(first,10);
318 |         alarm(second,10);
319 |         alarm(third,10);
320 |         alarm(fourth,10);
321 |     }
322 | 
323 |     if(document.getElementById("oneMinuteWarning").checked){
324 |         alarm(first,60);
325 |         alarm(second,60);
326 |         alarm(third,60);
327 |         alarm(fourth,60);
328 |     }
329 | 
330 |     if(document.getElementById("fiveMinuteWarning").checked){
331 |         alarm(first,300);
332 |         alarm(second,300);
333 |         alarm(fourth,300);
334 |     }
335 | }
336 | 
337 | function updateCountdown(){
338 |     const e=getElementCoeffs();
339 |     const p=map.getCenter();
340 |     const c=getLocalCircumstances(p.lat, p.lng,0);
341 |     const t=document.getElementById("countdownTable");
342 |     const time=new Date().getTime()+testTimeOffset;
343 |     const fc=UnixTimeFromJulianDate(c.UTFirstContact/24.0+c.jd)-time;
344 |     const lc=UnixTimeFromJulianDate(c.UTLastContact/24.0+c.jd)-time;
345 |     const sc=UnixTimeFromJulianDate(c.UTSecondContact/24.0+c.jd)-time;
346 |     const tc=UnixTimeFromJulianDate(c.UTThirdContact/24.0+c.jd)-time;
347 |     alarms(fc,sc,tc,lc);
348 | 
349 |     if(c.mag>0){
350 |         t.rows[0].cells[1].innerHTML=prettyTime(fc/1000/60/60);
351 |         t.rows[3].cells[1].innerHTML=prettyTime(lc/1000/60/60);
352 |     } else {
353 |         t.rows[0].cells[1].innerHTML="";
354 |         t.rows[3].cells[1].innerHTML="";
355 |     }
356 | 
357 |     if(c.mag>=1){
358 |         t.rows[1].cells[1].innerHTML=prettyTime(sc/1000/60/60);
359 |         t.rows[2].cells[1].innerHTML=prettyTime(tc/1000/60/60);
360 |     } else {
361 |         t.rows[1].cells[1].innerHTML="";
362 |         t.rows[2].cells[1].innerHTML="";
363 |     }
364 | }
365 | 
366 | function setRealTimeDisplay(){
367 |     const e=getElementCoeffs();
368 |     const t0=UnixTimeFromJulianDate(e.jd) + (e.T0 - e.Δt/60/60)*60*60*1000;
369 |     const now=new Date().getTime()+testTimeOffset;
370 |     const diff=(now-t0)/1000/60/60;
371 |     animhour=diff;
372 |     document.getElementById("timeSlider").value=animhour;
373 | 
374 |     displayShadowOutlines(animhour);
375 |     updateTimeLabel(animhour);
376 | }
377 | 
378 | function displayCountdown(){
379 |     if(document.getElementById("realTimeCheckbox").checked==true){
380 |         setRealTimeDisplay();
381 |     }
382 |     if(document.getElementById("showCountdownCheckbox").checked==true){
383 |         updateCountdown();
384 |     }
385 | 
386 |     window.setTimeout(()=>{
387 |         displayCountdown();
388 |     },100);
389 | }
390 | 
391 | function countdownClick(e){
392 |     const d=document.getElementById("countdownDiv");
393 |     if(document.getElementById("showCountdownCheckbox").checked==true){
394 |         d.style.display="inline-block";
395 |     } else {
396 |         d.style.display="none";
397 |     }
398 | }
399 | 
400 | function beep() {
401 |     beepSound.play();
402 | }
403 | 
404 | function simulationModeClick(){
405 |     const e=getElementCoeffs();
406 |     const t0=UnixTimeFromJulianDate(e.jd) + (e.T0 - e.Δt/60/60)*60*60*1000;
407 |     testTimeOffset=t0+eclipseData.beginTime*60*60*1000 - new Date().getTime() + 1*60*60*1000;
408 | 
409 |     document.getElementById("simulationModeDiv").style.display="block";
410 |     document.getElementById("realTimeCheckbox").checked=true;
411 |     realTimeClick(null);
412 | }
413 | 
414 | export function simulationTimeClick(v){
415 |     testTimeOffset+=v*1000*60;
416 | }
417 | 
418 | export function initUI(){
419 |     animate();
420 | 
421 |     document.getElementById("setMapImg").addEventListener("click",setMap);
422 |     document.getElementById("setSatImg").addEventListener("click",setSat);
423 |     document.getElementById("setTopoImg").addEventListener("click",setTopo);
424 |     document.getElementById("setBwMapImg").addEventListener("click",setBwMap);
425 |     document.getElementById("clearMarkersButton").addEventListener("click",clearMarkers);
426 |     document.getElementById("showDurationLinesCheckbox").addEventListener("click",durationLinesCheck);
427 |     //document.getElementById("timeZoneSelect").addEventListener("input",updateDisplay);
428 |     document.getElementById("timeSlider").addEventListener("input",sliderInput);
429 |     document.getElementById("locationButton").addEventListener("click",locationClick);
430 |     document.getElementById("showCountdownCheckbox").addEventListener("click",countdownClick);
431 |     document.getElementById("realTimeCheckbox").addEventListener("click",realTimeClick);
432 |     document.getElementById("warningButton").addEventListener("click",beep);
433 |     document.getElementById("simulationHref").addEventListener("click",simulationModeClick);
434 |     document.getElementById("autoUpdatePosition").addEventListener("click",autoUpdatePositionClick);
435 |     
436 |     window.addEventListener("resize",updateDisplay);
437 |     window.setTimeout(()=>{
438 |         displayCountdown();
439 |     },100);
440 |     updateDisplay(null);
441 | }
442 | 
443 | const beepSound = new Audio("alarm.wav");
444 | 
445 | let runAmination=true;
446 | let animhour=eclipseData.beginTime;
447 | let testTimeOffset=0;
448 | //let testTimeOffset=((32*24 + 14)*60 + 35)*60*1000;
449 | 


--------------------------------------------------------------------------------
/WebGLEarth/astro.js:
--------------------------------------------------------------------------------
 1 | export function hoursToTime(hours,tz){
 2 |     hours+=tz.offset;  //Convert to EDT
 3 |     let h=Math.trunc(hours);
 4 |     let m=(hours-h)*60;
 5 |     let s=Math.trunc((m-Math.trunc(m))*60);
 6 |     m=Math.trunc(m);
 7 | 
 8 |     if(h<10){h="0"+h;}
 9 |     if(m<10){m="0"+m;}
10 |     if(s<10){s="0"+s;}
11 | 
12 |     return h+":"+m+":"+s+" "+tz.name;
13 | }
14 | 
15 | export function prettyTime(hours){
16 |     let h=Math.trunc(hours);
17 |     let m=(hours-h)*60;
18 |     let s=Math.trunc((m-Math.trunc(m))*60);
19 |     m=Math.trunc(m);
20 | 
21 |     let t=s+"s";
22 |     if(m>0) t=m+"m "+t;
23 |     if(h>0) t=h+"h "+t;
24 |     return t;
25 | 
26 | }
27 | 
28 | export function convertTDBToUTC(jd_tdb){
29 |     //Conversion already performed using deltaT in eclipse module
30 |     throw("TDB to UTC Not needed");
31 |     const jd_tt = jd_tdb; //differenece in TT is negligable
32 |     const jd_tai = jd_tt - 32.184 / 60 / 60 / 24;
33 |     const jd_utc = jd_tai - getLeapSeconds(jd_tai) / 60 / 60 / 24;
34 | 
35 |     return jd_utc;
36 | }
37 | 
38 | export function getLeapSeconds(jd) {
39 |     //Source IERS Resolution B1 and http://maia.usno.navy.mil/ser7/tai-utc.dat
40 |     //This function must be updated any time a new leap second is introduced
41 | 
42 |     if (jd > 2457754.5) return 37.0;
43 |     if (jd > 2457204.5) return 36.0;
44 |     if (jd > 2456109.5) return 35.0;
45 |     if (jd > 2454832.5) return 34.0;
46 |     if (jd > 2453736.5) return 33.0;
47 |     if (jd > 2451179.5) return 32.0;
48 |     if (jd > 2450630.5) return 31.0;
49 |     if (jd > 2450083.5) return 30.0;
50 |     if (jd > 2449534.5) return 29.0;
51 |     if (jd > 2449169.5) return 28.0;
52 |     if (jd > 2448804.5) return 27.0;
53 |     if (jd > 2448257.5) return 26.0;
54 |     if (jd > 2447892.5) return 25.0;
55 |     if (jd > 2447161.5) return 24.0;
56 |     if (jd > 2446247.5) return 23.0;
57 |     if (jd > 2445516.5) return 22.0;
58 |     if (jd > 2445151.5) return 21.0;
59 |     if (jd > 2444786.5) return 20.0;
60 |     if (jd > 2444239.5) return 19.0;
61 |     if (jd > 2443874.5) return 18.0;
62 |     if (jd > 2443509.5) return 17.0;
63 |     if (jd > 2443144.5) return 16.0;
64 |     if (jd > 2442778.5) return 15.0;
65 |     if (jd > 2442413.5) return 14.0;
66 |     if (jd > 2442048.5) return 13.0;
67 |     if (jd > 2441683.5) return 12.0;
68 |     if (jd > 2441499.5) return 11.0;
69 |     if (jd > 2441317.5) return 10.0;
70 |     if (jd > 2439887.5) return 4.21317 + (jd - 2439126.5) * 0.002592;
71 |     if (jd > 2439126.5) return 4.31317 + (jd - 2439126.5) * 0.002592;
72 |     if (jd > 2439004.5) return 3.84013 + (jd - 2438761.5) * 0.001296;
73 |     if (jd > 2438942.5) return 3.74013 + (jd - 2438761.5) * 0.001296;
74 |     if (jd > 2438820.5) return 3.64013 + (jd - 2438761.5) * 0.001296;
75 |     if (jd > 2438761.5) return 3.54013 + (jd - 2438761.5) * 0.001296;
76 |     if (jd > 2438639.5) return 3.44013 + (jd - 2438761.5) * 0.001296;
77 |     if (jd > 2438486.5) return 3.34013 + (jd - 2438761.5) * 0.001296;
78 |     if (jd > 2438395.5) return 3.24013 + (jd - 2438761.5) * 0.001296;
79 |     if (jd > 2438334.5) return 1.945858 + (jd - 2437665.5) * 0.0011232;
80 |     if (jd > 2437665.5) return 1.845858 + (jd - 2437665.5) * 0.0011232;
81 |     if (jd > 2437512.5) return 1.372818 + (jd - 2437300.5) * 0.001296;
82 |     if (jd > 2437300.5) return 1.422818 + (jd - 2437300.5) * 0.001296;
83 |     return 0.0;
84 | }
85 | 
86 | 


--------------------------------------------------------------------------------
/WebGLEarth/backgroundworker.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import {getLocalCircumstances} from "./eclipse.js";
 3 | 
 4 | function findNorthLatForDuration(lon,max,min,target){
 5 |     let result=9999;
 6 |     let count=0;
 7 |     let total;
 8 | 
 9 |     while(((max-min)>.00001) && count<10000){
10 |         const guess=(max-min)/2+min;
11 |         const c=getLocalCircumstances(guess, lon,0);
12 |         total=(c.UTThirdContact-c.UTSecondContact)*60;
13 | 
14 |         result=guess;
15 |         if(result==target){
16 |             max=min;
17 |         } else if(total>target){
18 |             min=guess;
19 |         } else {
20 |             max=guess;
21 |         }
22 |         count++;
23 |     }
24 |     if(total+.01<target) result=null;
25 |     return result;
26 | }
27 | 
28 | function findSouthLatForDuration(lon,max,min,target){
29 |     let result=-9999;
30 |     let count=0;
31 |     let total;
32 |     
33 |     while(((max-min)>.00001) && count<10000){
34 |         const guess=(max-min)/2+min;
35 |         const c=getLocalCircumstances(guess, lon,0);
36 |         total=(c.UTThirdContact-c.UTSecondContact)*60;
37 | 
38 |         result=guess;
39 |         if(result==target){
40 |             max=min;
41 |         } else if(total<target){
42 |             min=guess;
43 |         } else {
44 |             max=guess;
45 |         }
46 |         count++;
47 |     }
48 |     if(total+.01<target) result=null;
49 |     return result;
50 | }
51 | 
52 | function getTotalityDurationLines(d,target){
53 |     let north=new Array();
54 |     let south=new Array();
55 | 
56 |     for(let i=0;i<d.northTotalityLimits.length && i<d.southTotalityLimits.length;i++){
57 |         const lng=d.northTotalityLimits[i].lng;
58 |         let max=d.northTotalityLimits[i].lat;
59 |         let min=d.southTotalityLimits[i].lat;
60 |         let mid=(max-min)/2+min;
61 | 
62 |         const n=findNorthLatForDuration(lng,max,mid,target);
63 |         const s=findSouthLatForDuration(lng,mid,min,target);
64 |         if(n!=null) north.push({lat: n, lng: lng});
65 |         if(s!=null) south.push({lat: s, lng: lng});
66 |     }
67 |     return [north,south];
68 | }
69 | 
70 | 
71 | function messageReceived(e){
72 |     const eclipseData=e.data;
73 | 
74 |     const lines=new Array();
75 |     lines.push(getTotalityDurationLines(eclipseData,1));
76 |     lines.push(getTotalityDurationLines(eclipseData,2));
77 |     lines.push(getTotalityDurationLines(eclipseData,3));
78 |     lines.push(getTotalityDurationLines(eclipseData,4));
79 | 
80 |     this.self.postMessage(lines);
81 | 
82 | }
83 | 
84 | self.addEventListener('message', messageReceived, false);
85 | 
86 | 


--------------------------------------------------------------------------------
/WebGLEarth/eclipse.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | Greg Miller gmiller@gregmiller.net 2023
  3 | https://www.celestialprogramming.com/
  4 | Released as public domain
  5 | */
  6 | 
  7 | //Functions for computing solar eclipses.
  8 | //Most equations are from Elements of Solar Eclipses by Jean Meeus
  9 | 
 10 | 'use strict';
 11 | const rad=Math.PI/180;
 12 | 
 13 | const maxiterations=20;
 14 |     
 15 | function solveQuadrant(sin,cos){
 16 |     if(sin>=0 && cos>=0){return Math.asin(sin);}
 17 |     if(sin<0 && cos>=0){return Math.asin(sin);}
 18 |     if(sin<0 && cos<0){return -Math.acos(cos);}
 19 |     if(sin>=0 && cos<0){return Math.acos(cos);}
 20 | }
 21 | export function getElementCoeffs(){
 22 |     return getElements2024();
 23 | }
 24 | 
 25 | function getElements2024(){
 26 |     const elements={};
 27 |     elements.jd=2460408.5;
 28 |     elements.Δt=69;
 29 |     elements.T0=18;
 30 | 
 31 |     elements.X0=-0.3182440;
 32 |     elements.X1=0.5117116;
 33 |     elements.X2=0.0000326;
 34 |     elements.X3=-0.0000084;
 35 | 
 36 |     elements.Y0=0.2197640;
 37 |     elements.Y1=0.2709589;
 38 |     elements.Y2=-0.0000595;
 39 |     elements.Y3=-0.0000047;
 40 | 
 41 |     elements.d0=7.5862002;
 42 |     elements.d1=0.0148440;
 43 |     elements.d2=-0.0000020;
 44 |     elements.d3=0.0000000;
 45 | 
 46 |     elements.L10=0.5358140;
 47 |     elements.L11=0.0000618;
 48 |     elements.L12=-0.0000128;
 49 |     elements.L13=0.0000000;
 50 | 
 51 |     elements.L20=-0.0102720;
 52 |     elements.L21=0.0000615;
 53 |     elements.L22=-0.0000127;
 54 |     elements.L23=0.0000000;
 55 | 
 56 |     elements.M0=89.591217;
 57 |     elements.M1=15.004080;
 58 |     elements.M2=0.000000;
 59 |     elements.M3=0.000000;
 60 | 
 61 |     elements.tanf1 = 0.0046683;
 62 |     elements.tanf2 = 0.0046450; 
 63 | 
 64 |     return elements;
 65 |     
 66 | }
 67 | 
 68 | function getElements1996(){
 69 |     //Example data for Oct 12, 1996
 70 |     const elements={};
 71 |     elements.Δt=63;
 72 |     elements.T0=14;
 73 | 
 74 |     elements.X0=0.296103;
 75 |     elements.X1=0.5060364;
 76 |     elements.X2=0.0000145;
 77 |     elements.X3=-0.00000644;
 78 | 
 79 |     elements.Y0=1.083058;
 80 |     elements.Y1=-0.1515218;
 81 |     elements.Y2=-0.0000102;
 82 |     elements.Y3=0.00000184;
 83 | 
 84 |     elements.d0=-7.63950;
 85 |     elements.d1=-0.015234;
 86 |     elements.d2=0.000002;
 87 | 
 88 |     elements.M0=33.40582;
 89 |     elements.M1=15.003782;
 90 | 
 91 |     elements.L10=0.559341;
 92 |     elements.L11=-0.0001067;
 93 |     elements.L12=-0.0000107;
 94 | 
 95 |     elements.L20=0.013151;
 96 |     elements.L21=-0.0001062;
 97 |     elements.L22=-0.0000106;
 98 | 
 99 |     elements.tanf1=0.0046865;
100 |     elements.tanf2=0.0046632;
101 | 
102 |     return elements;
103 | }
104 | 
105 | export function getElements1994(){
106 |     //Example data for May 10, 1994
107 |     const elements={};
108 |     elements.Δt=61;
109 |     elements.T0=17;
110 | 
111 |     elements.X0=-0.173367;
112 |     elements.X1=0.4990629;
113 |     elements.X2=0.0000296;
114 |     elements.X3=-0.00000563;
115 | 
116 |     elements.Y0=0.383484;
117 |     elements.Y1=0.0869393;
118 |     elements.Y2=-0.0001183;
119 |     elements.Y3=-0.00000092;
120 | 
121 |     elements.d0=17.68613;
122 |     elements.d1=0.010642;
123 |     elements.d2=-0.000004;
124 | 
125 |     elements.M0=75.90923;
126 |     elements.M1=15.001621;
127 | 
128 |     elements.L10=0.566906;
129 |     elements.L11=-0.0000318;
130 |     elements.L12=-0.0000098;
131 | 
132 |     elements.L20=0.020679;
133 |     elements.L21=-0.0000317;
134 |     elements.L22=-0.0000097;
135 | 
136 |     elements.tanf1=0.0046308;
137 |     elements.tanf2=0.0046077;
138 | 
139 |     return elements;
140 | }
141 | function getElements(e,t,Φ,λ,height){
142 |     const o={};
143 |     o.X=e.X0 + e.X1*t + e.X2*t*t + e.X3*t*t*t;
144 |     o.Y=e.Y0 + e.Y1*t + e.Y2*t*t + e.Y3*t*t*t;
145 |     o.d=e.d0 + e.d1*t + e.d2*t*t;
146 |     o.M=e.M0 + e.M1*t;
147 |     o.Xp=e.X1 + 2*e.X2*t + 3*e.X3*t*t;
148 |     o.Yp=e.Y1 + 2*e.Y2*t + 3*e.Y3*t*t;
149 |     o.L1=e.L10 + e.L11*t + e.L12*t*t;
150 |     o.L2=e.L20 + e.L21*t + e.L22*t*t;
151 | 
152 |     o.H = o.M - λ - 0.00417807 * e.Δt;
153 | 
154 |     o.u1 = Math.atan(0.99664719*Math.tan(Φ*rad))/rad;
155 |     o.ρsinΦp=0.99664719 * Math.sin(o.u1*rad)+height/6378140*Math.sin(Φ*rad);
156 |     o.ρcosΦp=Math.cos(o.u1*rad) + height/6378140 * Math.cos(Φ*rad);
157 | 
158 |     o.ξ = o.ρcosΦp * Math.sin(o.H*rad);
159 |     o.η = o.ρsinΦp * Math.cos(o.d*rad) - o.ρcosΦp * Math.cos(o.H*rad) * Math.sin(o.d*rad);
160 |     o.ζ = o.ρsinΦp * Math.sin(o.d*rad) + o.ρcosΦp * Math.cos(o.H*rad) * Math.cos(o.d*rad);
161 |     o.ξp = 0.01745329 * e.M1 * o.ρcosΦp * Math.cos(o.H*rad);
162 |     o.ηp = 0.01745329 * (e.M1 * o.ξ * Math.sin(o.d*rad) - o.ζ * e.d1);
163 |     o.L1p = o.L1 - o.ζ * e.tanf1;
164 |     o.L2p = o.L2 - o.ζ * e.tanf2;
165 | 
166 |     o.u = o.X - o.ξ;
167 |     o.v = o.Y - o.η;
168 |     o.a = o.Xp - o.ξp;
169 |     o.b = o.Yp - o.ηp;
170 |     o.n = Math.sqrt(o.a*o.a + o.b*o.b);
171 | 
172 |     return o;
173 | 
174 | }
175 | 
176 | export function getLocalCircumstances(Φ,λ,height){
177 |     const e=getElementCoeffs();
178 |     λ=-λ;
179 | 
180 |     let t=0;
181 |     let τm=10000;
182 | 
183 |     let iterations=0;
184 |     let o;
185 |     while(Math.abs(τm)>.00001 && iterations<maxiterations){
186 |         o=getElements(e,t,Φ,λ,height);
187 |         τm = - (o.u*o.a + o.v*o.b)/(o.n*o.n);
188 |         t = t + τm;
189 |         iterations++;
190 |     }
191 | 
192 |     const m = Math.sqrt(o.u*o.u + o.v*o.v);
193 |     const G = (o.L1p - m)/(o.L1p + o.L2p);
194 |     const A = (o.L1p - o.L2p)/(o.L1p + o.L2p);
195 | 
196 |     //const Pm = Math.atan2(-o.vp, o.up);
197 |     const Pm = Math.atan2(o.u/o.v)/rad;
198 | 
199 |     const sinh=Math.sin(o.d*rad)*Math.sin(Φ*rad) + Math.cos(o.d*rad)*Math.cos(Φ*rad)*Math.cos(o.H*rad);
200 |     const h=Math.asin(sinh)/rad;
201 |     const q = Math.asin(Math.cos(Φ*rad) * Math.sin(o.H*rad) / Math.cos(h*rad));
202 | 
203 |     let S = (o.a*o.v - o.u*o.b)/(o.n * o.L1p);
204 |     let τ = o.L1p/o.n * Math.sqrt(1 - S*S);
205 | 
206 |     let firstContact = t - τ;
207 |     let lastContact = t + τ;
208 | 
209 |     for(let i=0; i<10; i++){
210 |         const fco=getElements(e,firstContact,Φ,λ,height);
211 | 
212 |         S = (fco.a*fco.v - fco.u*fco.b)/(fco.n * fco.L1p);
213 |         const τf = - (fco.u*fco.a + fco.v*fco.b)/(fco.n*fco.n) - fco.L1p/fco.n * Math.sqrt(1 - S*S);
214 | 
215 |         firstContact = firstContact + τf;
216 |     }
217 | 
218 |     for(let i=0; i<10; i++){
219 |         const fco=getElements(e,lastContact,Φ,λ,height);
220 | 
221 |         S = (fco.a*fco.v - fco.u*fco.b)/(fco.n * fco.L1p);
222 |         const τf = - (fco.u*fco.a + fco.v*fco.b)/(fco.n*fco.n) + fco.L1p/fco.n * Math.sqrt(1 - S*S);
223 | 
224 |         lastContact = lastContact + τf;
225 |     }
226 | 
227 |     //Interior contacts
228 |     S = (o.a*o.v - o.u*o.b)/(o.n * o.L2p);
229 |     τ = o.L2p/o.n * Math.sqrt(1 - S*S);
230 | 
231 |     let thirdContact = t - τ;
232 |     let secondContact = t + τ;
233 | 
234 |     for(let i=0; i<10; i++){
235 |         const fco=getElements(e,thirdContact,Φ,λ,height);
236 | 
237 |         S = (fco.a*fco.v - fco.u*fco.b)/(fco.n * fco.L2p);
238 |         const τf = - (fco.u*fco.a + fco.v*fco.b)/(fco.n*fco.n) - fco.L2p/fco.n * Math.sqrt(1 - S*S);
239 | 
240 |         thirdContact = thirdContact + τf;
241 |     }
242 | 
243 |     for(let i=0; i<10; i++){
244 |         const fco=getElements(e,secondContact,Φ,λ,height);
245 | 
246 |         S = (fco.a*fco.v - fco.u*fco.b)/(fco.n * fco.L2p);
247 |         const τf = - (fco.u*fco.a + fco.v*fco.b)/(fco.n*fco.n) + fco.L2p/fco.n * Math.sqrt(1 - S*S);
248 | 
249 |         secondContact = secondContact + τf;
250 |     }
251 | 
252 |     const UTFirstContact=e.T0 + firstContact - e.Δt/60/60;
253 |     const UTSecondContact=e.T0 + secondContact - e.Δt/60/60;
254 |     const UTThirdContact=e.T0 + thirdContact - e.Δt/60/60;
255 |     const UTLastContact=e.T0 + lastContact - e.Δt/60/60;
256 |     const UTMaximum = e.T0 + t  - e.Δt/60/60;
257 | 
258 |     const UT=e.T0 + t;
259 | 
260 |     return {
261 |         jd: e.jd, t:t, UT: UT, mag: G, 
262 |         UTMaximum: UTMaximum, 
263 |         UTFirstContact: UTFirstContact, 
264 |         UTSecondContact: UTSecondContact, 
265 |         UTThirdContact: UTThirdContact, 
266 |         UTLastContact: UTLastContact, 
267 |         h:h, m:m, elements: o};
268 | }
269 | 
270 | export function computeCentralLatLonForTime(e,UTC){
271 |     const t=UTC-e.T0;
272 | 
273 |     const X=e.X0 + e.X1*t + e.X2*t*t + e.X3*t*t*t;
274 |     const Y=e.Y0 + e.Y1*t + e.Y2*t*t + e.Y3*t*t*t;
275 |     //const Z=Z0 + Z1*t + Z2*t*t + Z3*t*t*t;
276 |     const d=e.d0 + e.d1*t + e.d2*t*t;
277 |     const M=e.M0 + e.M1*t;
278 |     const L1=e.L10 + e.L11*t + e.L12*t*t;
279 |     const L2=e.L20 + e.L21*t + e.L22*t*t;
280 | 
281 |     const Xp=e.X1 + 2*e.X2*t + 3*e.X3*t*t;
282 |     const Yp=e.Y1 + 2*e.Y2*t + 3*e.Y3*t*t;
283 | 
284 |     const dtemp=d*rad;
285 |     const ω=1/Math.sqrt(1-0.006694385 * Math.cos(d*rad)*Math.cos(d*rad));
286 | 
287 |     const p=e.M1/57.2957795;
288 |     const b=Yp - p*X*Math.sin(d*rad);
289 |     const c=Xp + p*Y*Math.sin(d*rad);
290 | 
291 |     const y1=ω * Y;
292 |     const b1=ω * Math.sin(d*rad);
293 |     const b2=0.99664719*ω*Math.cos(d*rad);
294 |     const B=Math.sqrt(1 -  X*X - y1*y1); //If B does not exist, there is no central eclipse at given time
295 | 
296 |     const Φ1=Math.asin(B*b1 + y1*b2);
297 |     //const H=Math.asin(X/Math.cos(Φ1))/rad;
298 |     //const cos(Φ1)*cos(H)=B*b2 - y1*b1;
299 |     const sinH = X/Math.cos(Φ1);
300 |     const cosH = (B*b2 - y1*b1)/Math.cos(Φ1);
301 |     const H = solveQuadrant(sinH,cosH)/rad;
302 | 
303 |     const Φ = Math.atan(1.00336409 * Math.tan(Φ1))/rad;
304 |     //const λ = M - H - 1.0027379 * Δt;
305 |     const λ = M - H - 0.00417807 * e.Δt;
306 | 
307 |     const L1p=L1 - B * e.tanf1;
308 |     const L2p=L2 - B * e.tanf2;
309 |     const a = c - p*B*Math.cos(d*rad);
310 |     const n = Math.sqrt(a*a + b*b);
311 |     const duration = 7200*L2p/n;
312 | 
313 |     const sinh=Math.sin(d*rad)*Math.sin(Φ*rad) + Math.cos(d*rad)*Math.cos(Φ*rad)*Math.cos(H*rad);
314 |     const h=Math.asin(sinh)/rad;
315 | 
316 |     const K2 = B*B + ((X*a + Y*b)*(X*a + Y*b))/(n*n);
317 |     const K = Math.sqrt(K2);
318 |     const width=12756*Math.abs(L2p)/K;
319 | 
320 |     const A = (L1p - L2p)/(L1p + L2p);
321 | 
322 |     return {lat: Φ, lon: -λ};
323 | }
324 | 
325 | function computeExtremes(e,t0){
326 |     const r={};
327 |     const t=t0;
328 |     r.t=t;
329 | 
330 | 
331 |     r.X=e.X0 + e.X1*t + e.X2*t*t + e.X3*t*t*t;
332 |     r.Y=e.Y0 + e.Y1*t + e.Y2*t*t + e.Y3*t*t*t;
333 |     //const Z=Z0 + Z1*t + Z2*t*t + Z3*t*t*t;
334 |     r.d=e.d0 + e.d1*t + e.d2*t*t;
335 |     r.M=e.M0 + e.M1*t;
336 |     r.L1=e.L10 + e.L11*t + e.L12*t*t;
337 |     r.L2=e.L20 + e.L21*t + e.L22*t*t;
338 | 
339 |     r.Xp=e.X1 + 2*e.X2*t + 3*e.X3*t*t;
340 |     r.Yp=e.Y1 + 2*e.Y2*t + 3*e.Y3*t*t;
341 | 
342 |     r.ω=1/Math.sqrt(1-0.006694385 * Math.cos(r.d*rad)*Math.cos(r.d*rad));
343 |     r.p=e.M1/57.2957795;
344 |     r.b=r.Yp - r.p*r.X*Math.sin(r.d*rad);
345 |     r.c=r.Xp + r.p*r.Y*Math.sin(r.d*rad);
346 | 
347 |     r.y1=r.ω * r.Y;
348 |     r.b1=r.ω * Math.sin(r.d*rad);
349 |     r.b2=0.99664719*r.ω*Math.cos(r.d*rad);
350 | 
351 |     let temp=1 -  r.X*r.X - r.y1*r.y1;
352 |     if(temp<0){ //avoid rounding errors, eclipse does not exist if < 0
353 |         temp=0;
354 |     }
355 |     r.B=Math.sqrt(temp); //If B does not exist, there is no central eclipse at given time
356 | 
357 |     r.Φ1=Math.asin(r.B*r.b1 + r.y1*r.b2);
358 |     const sinH=r.X/Math.cos(r.Φ1);
359 |     const cosH=(r.B*r.b2 - r.y1*r.b1)/Math.cos(r.Φ1);
360 |     r.H = solveQuadrant(sinH,cosH)/rad;
361 | 
362 |     r.Φ = Math.atan(1.00336409 * Math.tan(r.Φ1))/rad;
363 |     //const λ = M - H - 1.0027379 * Δt;
364 |     r.λ = -(r.M - r.H - 0.00417807 * e.Δt); //Meeus treats East long as negative, inverted here
365 |     r.L1p=r.L1 - r.B * e.tanf1;
366 |     r.L2p=r.L2 - r.B * e.tanf2;
367 |     r.a = r.c - r.p*r.B*Math.cos(r.d*rad);
368 |     r.n = Math.sqrt(r.a*r.a + r.b*r.b);
369 |     r.duration = 7200*r.L2p/r.n;
370 | 
371 |     r.sinh=Math.sin(r.d*rad)*Math.sin(r.Φ*rad) + Math.cos(r.d*rad)*Math.cos(r.Φ*rad)*Math.cos(r.H*rad);
372 |     r.h=Math.asin(r.sinh)/rad;
373 | 
374 |     r.K2 = r.B*r.B + ((r.X*r.a + r.Y*r.b)*(r.X*r.a + r.Y*r.b))/(r.n*r.n);
375 |     r.K = Math.sqrt(r.K2);
376 |     r.width=12756*Math.abs(r.L2p)/r.K;
377 | 
378 |     r.A = (r.L1p - r.L2p)/(r.L1p + r.L2p);
379 | 
380 |     return r;
381 | }
382 | 
383 | function computeEstimate(e){
384 |     const ω=1/Math.sqrt(1-0.006694385 * Math.cos(e.d0*rad)*Math.cos(e.d0*rad));
385 |     const u=e.X0;
386 |     const a=e.X1;
387 |     const v=ω*e.Y0;
388 |     const b=ω*e.Y1;
389 |     const n=Math.sqrt(a*a + b*b);
390 | 
391 |     const S=(a*v - u*b)/n;
392 |     const τ=-(u*a + v*b)/(n*n)
393 |     const τ1=τ - Math.sqrt(1-S*S)/n;
394 |     const τ2=τ + Math.sqrt(1-S*S)/n;
395 | 
396 |     //Hours before (τ1), and after (τ2) T0
397 |     return {τ1: τ1,τ2: τ2};
398 | }
399 | 
400 | function refineEstimate(e,t){
401 |     const X=e.X0 + e.X1*t + e.X2*t*t + e.X3*t*t*t;
402 |     const Y=e.Y0 + e.Y1*t + e.Y2*t*t + e.Y3*t*t*t;
403 |     const d=e.d0 + e.d1*t + e.d2*t*t;
404 |     const Xp=e.X1 + 2*e.X2*t + 3*e.X3*t*t;
405 |     const Yp=e.Y1 + 2*e.Y2*t + 3*e.Y3*t*t;
406 | 
407 |     const ω=1/Math.sqrt(1-0.006694385 * Math.cos(e.d0*rad)*Math.cos(e.d0*rad));
408 |     const u=X;
409 |     const a=Xp;
410 |     const v=ω*Y;
411 |     const b=ω*Yp;
412 |     const n=Math.sqrt(a*a + b*b);
413 | 
414 |     const S=(a*v - u*b)/n;
415 |     const τ=-(u*a + v*b)/(n*n)
416 |     const τ1=τ - Math.sqrt(1-S*S)/n;
417 |     const τ2=τ + Math.sqrt(1-S*S)/n;
418 | 
419 |     //Hours before (τ1), and after (τ2) T0
420 |     return {τ1: τ1,τ2: τ2};
421 | 
422 | }
423 | 
424 | export function getExtremePoints(e){
425 |     const est=computeEstimate(e);
426 |     const est2=refineEstimate(e,est.τ1);
427 |     const est3=refineEstimate(e,est.τ2);
428 | 
429 |     const beginCircumstances=computeExtremes(e,est.τ1+est2.τ1);
430 |     const endCircumstances=computeExtremes(e,est.τ2+est3.τ2);
431 |     return {begin: beginCircumstances, end: endCircumstances};
432 | }
433 | 
434 | export function getEclipseCenter(e){
435 |     let t=0;
436 |     for(let i=0;i<20;i++){
437 |         t= - (e.X0 + t*t*(e.X2 + t*e.X3))/e.X1;
438 |     }
439 | 
440 |     const Y=e.Y0 + e.Y1*t + e.Y2*t*t + e.Y3*t*t*t;
441 |     const d=e.d0 + e.d1*t + e.d2*t*t;
442 |     const M=e.M0 + e.M1*t;
443 |     const ω=1/Math.sqrt(1-0.006694385 * Math.cos(d*rad)*Math.cos(d*rad));
444 | 
445 |     const β = Math.asin(ω * Y)/rad;
446 |     const d1 = Math.asin(ω * Math.sin(d*rad))/rad;
447 |     let Φ1;
448 |     let Φ;
449 |     let λ;
450 |     if(β + d1 > 90){
451 |         Φ1 = 180 - β + d1;
452 |         Φ = Math.atan(1.00336409 * Math.tan(Φ1*raD))/rad;
453 |         λ = - (M - 180 - 0.00417807 * e.Δt);
454 |     } else if(β + d1 < -90){
455 |         Φ1 = -(180 + β + d1);
456 |         Φ = Math.atan(1.00336409 * Math.tan(Φ1*rad))/rad;
457 |         λ = - (M + 180 - 0.00417807 * e.Δt);
458 |     } else {
459 |         Φ1 = β + d1;
460 |         Φ = Math.atan(1.00336409 * Math.tan(Φ1*rad))/rad;
461 |         λ = - (M - 0.00417807 * e.Δt);
462 |     }
463 |     if(λ<-180){λ+=360;}
464 | 
465 |     const UT = e.T0 + t - e.Δt/60/60;
466 |     return {UT: UT, lat: Φ, lon: λ};
467 | }
468 | 
469 | export function getCenterLineByLongitude(e,λ){
470 |     return getLimitsForLogitude(e,λ,0,1,0);
471 | }
472 | 
473 | export function getTotalityLimitsByLongitudeList(e,northsouth,startLon,endLon){
474 |     return getLimitsByLongitudeAsList(e,northsouth,1,startLon,endLon);
475 | }
476 | 
477 | export function getPartialLimitsByLogitudeList(e,northsouth,startLon,endLon){
478 |     return getLimitsByLongitudeAsList(e,northsouth,0,startLon,endLon);
479 | }
480 | 
481 | function getLimitsByLongitudeAsList(e,northsouth,G,startLon,endLon){
482 |     const eqPoints=new Array();
483 |     const polarPoints=new Array();
484 | 
485 |     for(let i=startLon;i<=endLon;i+=.01){
486 |         const eq=getLimitsForLogitude(e,i,northsouth,G,0);
487 |         const polar=getLimitsForLogitude(e,i,northsouth,G,89.9 * Math.sign(e.Y0));
488 | 
489 |         if(polar!=null  && eq!=null){
490 |             if(Math.abs(eq.lat-polar.lat)<.1){
491 |                 eqPoints.push(eq);
492 |             } else {
493 |                 eqPoints.push(eq);
494 |                 polarPoints.push(polar);
495 |             }
496 |         } else {
497 |             eqPoints.push(null);
498 |             polarPoints.push(null);
499 |         }
500 |     }
501 | 
502 |     return [eqPoints,polarPoints];
503 | }
504 | 
505 | function getLimitsForLogitude(e,λ,northsouth,G,startΦ){
506 | 
507 |     let t=0;
508 |     let Φ=startΦ;
509 |     
510 |     let i=0;
511 |     let ΔΦ=1000;
512 |     let τ=1000;
513 |     while((Math.abs(τ)>.0001 || Math.abs(ΔΦ)>.0001) && i<20){
514 |         const X=e.X0 + e.X1*t + e.X2*t*t + e.X3*t*t*t;
515 |         const Y=e.Y0 + e.Y1*t + e.Y2*t*t + e.Y3*t*t*t;
516 |         const d=e.d0 + e.d1*t + e.d2*t*t;
517 |         const M=e.M0 + e.M1*t;
518 |         const Xp=e.X1 + 2*e.X2*t + 3*e.X3*t*t;
519 |         const Yp=e.Y1 + 2*e.Y2*t + 3*e.Y3*t*t;
520 |         const L1=e.L10 + e.L11*t + e.L12*t*t;
521 |         const L2=e.L20 + e.L21*t + e.L22*t*t;
522 | 
523 |         const H = M + λ - 0.00417807 * e.Δt;
524 |     
525 |         const height=0;
526 |         const u1 = Math.atan(0.99664719*Math.tan(Φ*rad))/rad;
527 |         const ρsinΦp=0.99664719 * Math.sin(u1*rad)+height/6378140*Math.sin(Φ*rad);
528 |         const ρcosΦp=Math.cos(u1*rad) + height/6378140 * Math.cos(Φ*rad);
529 |     
530 |         const ξ = ρcosΦp * Math.sin(H*rad);
531 |         const η = ρsinΦp * Math.cos(d*rad) - ρcosΦp * Math.cos(H*rad) * Math.sin(d*rad);
532 |         const ζ = ρsinΦp * Math.sin(d*rad) + ρcosΦp * Math.cos(H*rad) * Math.cos(d*rad);
533 |         const ξp = 0.01745329 * e.M1 * ρcosΦp * Math.cos(H*rad);
534 |         const ηp = 0.01745329 * (e.M1 * ξ * Math.sin(d*rad) - ζ * e.d1);
535 |         const L1p = L1 - ζ * e.tanf1;
536 |         const L2p = L2 - ζ * e.tanf2;
537 | 
538 |         const u = X - ξ;
539 |         const v = Y - η;
540 |         const a = Xp - ξp;
541 |         const b = Yp - ηp;
542 |         const n = Math.sqrt(a*a + b*b);
543 |     
544 |         τ = - (u*a + v*b)/(n*n);
545 |         const W = (v*a - u*b)/n;
546 |         const Q = ((b * Math.sin(H*rad) * ρsinΦp + a*(Math.cos(H*rad) * Math.sin(d*rad) * ρsinΦp + Math.cos(d*rad)*ρcosΦp)))
547 |                     / (57.29578 * n);
548 |     
549 |         //northsouth = 1 for northnet limit, -1 for southern limit
550 |         const E=L1p - G * (L1p + L2p);
551 |         ΔΦ = (W + northsouth * Math.abs(E))/Q;
552 | 
553 |         t = t + τ;
554 |         Φ = Φ + ΔΦ;
555 |         i++;
556 |     }
557 |     if (Math.abs(τ)>.0001 || Math.abs(ΔΦ)>.0001){return null;}
558 |     
559 |     const UT= e.T0 + t;
560 |     
561 |     Φ=(90+Φ)%180;
562 |     if(Φ<0)Φ+=180;
563 |     Φ-=90;
564 |     return {t: t, lat: Φ, lon: λ};
565 | }


--------------------------------------------------------------------------------
/WebGLEarth/images/bwmap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gmiller123456/solareclipseviewer/5c1cc8d1fc0f8d7902f15eca821e3e941d62dc65/WebGLEarth/images/bwmap.png


--------------------------------------------------------------------------------
/WebGLEarth/images/circle site.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gmiller123456/solareclipseviewer/5c1cc8d1fc0f8d7902f15eca821e3e941d62dc65/WebGLEarth/images/circle site.png


--------------------------------------------------------------------------------
/WebGLEarth/images/map.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gmiller123456/solareclipseviewer/5c1cc8d1fc0f8d7902f15eca821e3e941d62dc65/WebGLEarth/images/map.png


--------------------------------------------------------------------------------
/WebGLEarth/images/satellite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gmiller123456/solareclipseviewer/5c1cc8d1fc0f8d7902f15eca821e3e941d62dc65/WebGLEarth/images/satellite.png


--------------------------------------------------------------------------------
/WebGLEarth/images/topo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gmiller123456/solareclipseviewer/5c1cc8d1fc0f8d7902f15eca821e3e941d62dc65/WebGLEarth/images/topo.png


--------------------------------------------------------------------------------
/WebGLEarth/overlay.js:
--------------------------------------------------------------------------------
  1 | export function drawOverlay(ctx,map,eclipseData){
  2 |     const zoom=map.getZoom();
  3 |     
  4 |     ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
  5 |     const central=drawLineOverlay(ctx,map,eclipseData.centralCurve, {color: 'black', weight: 2});
  6 |     const limitNorthT=drawLineOverlay(ctx,map,eclipseData.northTotalityLimits, {color: 'red', weight: 2});
  7 |     const limitSouthT=drawLineOverlay(ctx,map,eclipseData.southTotalityLimits, {color: 'red', weight: 2});
  8 |     const limitNorthP=drawLineOverlay(ctx,map,eclipseData.northPartialLimits, {color: 'black', weight: 2,});
  9 |     const limitSouthP=drawLineOverlay(ctx,map,eclipseData.southPartialLimits, {color: 'black', weight: 2});
 10 | 
 11 |     if(zoom>=4){
 12 |         ctx.font = "1em Georgia";
 13 |         ctx.textAlign="center";
 14 |         ctx.textBaseline="bottom";
 15 |         drawLabel(ctx,map,"Totality Center Line",central);
 16 | 
 17 |         ctx.textBaseline="top";
 18 |         drawLabel(ctx,map,"Partial Edge",limitSouthP);
 19 |         drawLabel(ctx,map,"Totality Edge",limitSouthT);
 20 | 
 21 |         ctx.textBaseline="bottom";
 22 |         drawLabel(ctx,map,"Totality Edge",limitNorthT);
 23 |         drawLabel(ctx,map,"Partial Edge",limitNorthP);
 24 |     }
 25 | 
 26 |     if(eclipseData.durationLines!=null && document.getElementById("showDurationLinesCheckbox").checked){
 27 |         for(let i=0;i<eclipseData.durationLines.length;i++){
 28 |             const l1=drawLineOverlay(ctx,map,eclipseData.durationLines[i][0], {color: 'purple', weight: 1});
 29 |             const l2=drawLineOverlay(ctx,map,eclipseData.durationLines[i][1], {color: 'purple', weight: 1});
 30 |             if(zoom>=7){
 31 |                 ctx.font = ".75em Georgia";
 32 |                 ctx.textBaseline="top";
 33 |                 drawLabel(ctx,map,""+(i+1)+" minute",l1);
 34 |                 ctx.textBaseline="bottom";
 35 |                 drawLabel(ctx,map,""+(i+1)+" minute",l2);
 36 |             }
 37 | 
 38 |         }
 39 |     }
 40 | 
 41 | 
 42 | }
 43 | 
 44 | function drawLabel(ctx,map,text,points){
 45 |     const o=map._getMapPanePos();
 46 |     const o1=map.getPixelOrigin();
 47 |     const p1=map.project(points.first);
 48 |     const p2=map.project(points.last);
 49 | 
 50 |     const x1=p1.x+(o.x-o1.x);
 51 |     const x2=p2.x+(o.x-o1.x);
 52 |     const y1=p1.y+(o.y-o1.y);
 53 |     const y2=p2.y+(o.y-o1.y);
 54 | 
 55 |     const angle=Math.atan2(y2-y1,x2-x1);
 56 | 
 57 |     ctx.save();
 58 |     ctx.translate(x1,y1);
 59 |     ctx.rotate(angle);
 60 | 
 61 |     ctx.fillText(text,0,0);
 62 | 
 63 |     ctx.restore()
 64 | }
 65 | 
 66 | 
 67 | function drawLineOverlay(ctx,map,points,options){
 68 |     const bounds=map.getBounds();
 69 |     const n=bounds._northEast.lat;
 70 |     const e=bounds._northEast.lng;
 71 |     const s=bounds._southWest.lat;
 72 |     const w=bounds._southWest.lng;
 73 |     
 74 |     let firstPoint=null;
 75 |     let lastPoint=null;
 76 | 
 77 |     const o=map._getMapPanePos();
 78 |     const o1=map.getPixelOrigin();
 79 | 
 80 |     ctx.beginPath();
 81 |     ctx.strokeStyle=options.color;
 82 |     ctx.lineWidth=options.weight;
 83 | 
 84 |     const p=map.project(points[0]);
 85 |     ctx.moveTo(p.x+(o.x-o1.x),p.y+(o.y-o1.y));
 86 | 
 87 |     for(let i=1;i<points.length;i++){
 88 |         const t=points[i];
 89 |         if(t.lat<=n && t.lat>=s  && t.lng<=e && t.lng>=w){
 90 |             if(firstPoint==null) firstPoint=i;
 91 |             lastPoint=i;
 92 |             const p=map.project(points[i]);
 93 |             ctx.lineTo(p.x+(o.x-o1.x),p.y+(o.y-o1.y));
 94 |         }
 95 |     }
 96 |     ctx.stroke();
 97 |     const mid=Math.floor((lastPoint-firstPoint)/2)+firstPoint;
 98 |     return {first: points[mid], last: points[mid+1]};
 99 | }
100 | 


--------------------------------------------------------------------------------
/WebGLEarth/test.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://www.webglearth.com/v2/api.js"></script>
 5 |     <script>
 6 |       function initialize() {
 7 |         var earth = new WE.map('earth_div');
 8 |         WE.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
 9 |           attribution: '© OpenStreetMap contributors'
10 |         }).addTo(earth);
11 |       }
12 |     </script>
13 |     <style>
14 |       html, body{padding: 0; margin: 0;}
15 |       #earth_div{top: 0; right: 0; bottom: 0; left: 0; position: absolute !important;}
16 |     </style>
17 |     <title>WebGL Earth API: Hello World example</title>
18 |     <meta name="description" content="This is a basic tutorial for showing a map on a 3D globe. It could be used on web and Android & iOS mobile devices.">
19 |   </head>
20 |   <body onload="initialize()">
21 |     <div id="earth_div"></div>
22 |   </body>
23 | </html>


--------------------------------------------------------------------------------
/WebGLEarth/viewer.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | <head>
  4 |     <title>Solar Eclipse Map</title>
  5 |     <meta charset="utf-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
  7 |     <style>
  8 |         
  9 |         #map {
 10 |             z-index: 1;
 11 |             position: absolute;
 12 |             height: 100vh;
 13 |             width: 100vw;
 14 |         }
 15 |         body{
 16 |             padding:0px;
 17 |             margin:0px;
 18 |         }
 19 |         #overlayCanvas{
 20 |             position: absolute;
 21 |             z-index: 100;
 22 |             pointer-events: none;
 23 |         }
 24 |         #data{
 25 |             position: absolute;
 26 |             z-index:100;
 27 |             top: 10px;
 28 |             margin-left: 75px;
 29 |             background-color: rgba(255,255,255,.5);
 30 |             border-radius: 10px;
 31 |         }
 32 |         .dataLabel{
 33 |             text-align: right;
 34 |         }
 35 |         #alphatag{
 36 |             position: absolute;
 37 |             z-index:100;
 38 |             background-color: red;
 39 |             color: white;
 40 |             left: 50%;
 41 |             -webkit-transform: translateX(-50%);
 42 |             transform: translateX(-50%);
 43 |             visibility: hidden;
 44 |         }
 45 |         .duration{
 46 |             font-size: 2em;
 47 |             font-weight: bold;
 48 |         }
 49 |         #mapselectdiv{
 50 |             padding: 10px;
 51 |             border-radius: 10px;
 52 |             position: fixed;
 53 |             bottom: 10px;
 54 |             left: 75px;
 55 |             z-index: 100;
 56 |             background-color: rgba(255,255,255,.75);
 57 |             border:solid black;
 58 |         }
 59 | 
 60 |         @media screen and (max-width:800px){
 61 |             #data{
 62 |                 font-size: .5em;
 63 |             }
 64 |         }
 65 | 
 66 |         @media screen and (max-height:500px){
 67 |             #data{
 68 |                 font-size: .5em;
 69 |             }
 70 |         }
 71 | 
 72 |         .loadingSpinner {
 73 |             width: 1em;
 74 |             height: 1em;
 75 |             border: 2px solid #000;
 76 |             border-bottom-color: transparent;
 77 |             border-radius: 50%;
 78 |             display: inline-block;
 79 |             box-sizing: border-box;
 80 |             animation: loadingSpinnerRotate 1s linear infinite;
 81 |         }
 82 | 
 83 |         @keyframes loadingSpinnerRotate {
 84 |             0% {
 85 |                 transform: rotate(0deg);
 86 |             }
 87 |             100% {
 88 |                 transform: rotate(360deg);
 89 |             }
 90 |         } 
 91 |     </style>
 92 | </head>
 93 | <body>
 94 |     <div id="alphatag">Alpha application under active development, will contain bugs.</div>
 95 |     <div id="map"></div>
 96 |     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
 97 |     integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
 98 |     crossorigin=""/>
 99 |     
100 |     <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
101 |         integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
102 |         crossorigin=""></script>
103 |     <script src="https://www.webglearth.com/v2/api.js"></script>
104 |     
105 |     <canvas id="overlayCanvas"></canvas>
106 |     <div id="mapselectdiv">
107 |         <img id="setMapImg" src="images/map.png">
108 |         <img id="setSatImg" src="images/satellite.png">
109 |         <img id="setTopoImg" src="images/topo.png">
110 |         <img id="setBwMapImg" src="images/bwmap.png">
111 |     </div>
112 |     <div id="data">
113 |         <table id="localCircumstancesTable">
114 |             <tr><td class="dataLabel">Time Zone:</td><td><select id="timeZoneSelect"></select></td></tr>
115 |             <tr><td class=dataLabel>Lat:</td><td class=dataField></td></tr>
116 |             <tr><td class=dataLabel>Lon:</td><td class=dataField></td></tr>
117 |             <tr><td class=dataLabel>Sun Alt:</td><td class=dataField></td></tr>
118 |             <tr><td class=dataLabel>Magnitude:</td><td class=dataField></td></tr>
119 |             <tr><td class=dataLabel>Partial Start:</td><td class=dataField></td></tr>
120 |             <tr><td class=dataLabel>Partial End:</td><td class=dataField></td></tr>
121 |             <tr><td class=dataLabel>Partial Duration:</td><td class=dataField></td></tr>
122 |             <tr><td class=dataLabel>Totality Start:</td><td class=dataField></td></tr>
123 |             <tr><td class=dataLabel>Maximum Eclipse:</td><td class=dataField></td></tr>
124 |             <tr><td class=dataLabel>Totality End:</td><td class=dataField></td></tr>
125 |             <tr><td class=dataLabel>Totality Duration:</td><td class="dataField duration"></td></tr>
126 |         </table>
127 |         <br>
128 |         <div id="userControls">
129 |             <center>
130 |             <input type=button id="clearMarkersButton" value="Clear Markers"><br>
131 |             <label for="showDurationLinesCheckbox">Show Duration Lines</label><input type=checkbox id="showDurationLinesCheckbox" style="visibility: hidden;" checked><span id='durationLinesLoadingSpinner' class="loadingSpinner"></span>
132 |             </center>
133 |         </div>
134 |     </div>
135 | 
136 | 
137 | <script type="module">
138 | /*
139 | Greg Miller gmiller@gregmiller.net 2022
140 | Released as public domain
141 | */
142 | class MI{
143 |     static map(a){
144 |         return WE.map(a);
145 |     }
146 | 
147 |     static tileLayer(url,options){
148 |         return WE.tileLayer(url,options);
149 |     }
150 | 
151 |     static icon(options){
152 |         return L.icon(options);
153 |     }
154 | }
155 | 
156 | import {getElementCoeffs,getLocalCircumstances} from "./eclipse.js";
157 | import {computeCentralLatLonForTime, getExtremePoints, getEclipseCenter, getTotalityLimitsByLongitudeList, getPartialLimitsByLogitudeList} from "./eclipse.js";
158 | import {convertTDBToUTC,hoursToTime,prettyTime} from "./astro.js";
159 | import {drawOverlay} from "./overlay.js";
160 | 
161 | populateTimeZones();
162 | 
163 | const canvas=document.getElementById("overlayCanvas");
164 | const ctx = canvas.getContext("2d");
165 | canvas.width=window.innerWidth;
166 | canvas.height=window.innerHeight;
167 | let markerList=[];
168 | let lineList=[];
169 | let durationLines=[];
170 | 
171 | var map = MI.map('map');
172 | //map.setView([38.2738, -86.4147], 5);
173 | let mapURL="https://tile.openstreetmap.org/{z}/{x}/{y}.png";
174 | let mapAttrib='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>';
175 | let airialURL="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}";
176 | let airialAttrib="Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
177 | let mapLayer=MI.tileLayer(mapURL,{attribution: mapAttrib})
178 | let airialLayer=MI.tileLayer(airialURL,{
179 |     attribution: airialAttrib,
180 |     maxNativeZoom:19,
181 |         maxZoom:25
182 | });
183 | 
184 | var OpenTopoMapLayer = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
185 | 	maxZoom: 25,
186 | 	attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
187 | });
188 | 
189 | var Esri_WorldGrayCanvas = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
190 | 	attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
191 |     maxNativeZoom:16,
192 | 	maxZoom: 25
193 | });
194 | 
195 | /*
196 | TODO: Many more map styles at:
197 | https://leaflet-extras.github.io/leaflet-providers/preview/
198 | */
199 | 
200 | const eclipseData=computeEclipseData();
201 | mapLayer.addTo(map);
202 | //map.addLayer(mapLayer);
203 | 
204 | // Add in a crosshair for the map
205 | var crosshairIcon = MI.icon({
206 |     iconUrl: 'images/circle site.png',
207 |     iconSize:     [20, 20], // size of the icon
208 |     iconAnchor:   [10, 10], // point of the icon which will correspond to marker's location
209 | });
210 | 
211 | const p=map.getCenter();
212 | const crosshairs=WE.marker(p,{icon:crosshairIcon}).addTo(map);
213 | 
214 | map.on('move', updateDisplay, this);
215 | map.on('click', mapClick,this);
216 | 
217 | updateDisplay(null);
218 | 
219 | function mapClick(e){
220 |     const p=e.latlng;
221 |     const c=getLocalCircumstances(p.lat, p.lng,0);
222 |     let s="Not Total";
223 |     if(c.UTThirdContact-c.UTSecondContact>0) s=prettyTime(c.UTThirdContact-c.UTSecondContact);
224 | 
225 |     let m=L.marker(p);
226 |     m.addTo(map).bindTooltip(s, {permanent: true});
227 | 
228 |     markerList.push(m);
229 |     if(markerList.length>1){
230 |         const t=markerList[markerList.length-2];
231 |         let dist=(t.getLatLng().distanceTo(m.getLatLng()) * 0.0006213712);
232 | 
233 |         if(dist<.25){
234 |             dist=Math.floor(dist*5280)+"ft";
235 |         } else {
236 |             dist=dist.toFixed(2)+"mi";
237 |         }
238 |         
239 |         const line=new L.Polyline([t.getLatLng(),m.getLatLng()], {color: 'black', weight: 1});
240 |         line.addTo(map);
241 |         line.bindTooltip(dist, {permanent: true});
242 |         line.openTooltip();
243 |         lineList.push(line);
244 | 
245 |     }
246 | }
247 | 
248 | function removeAllMapLayers(){
249 |     map.removeLayer(mapLayer);
250 |     map.removeLayer(airialLayer);
251 |     map.removeLayer(OpenTopoMapLayer);
252 |     map.removeLayer(Esri_WorldGrayCanvas);
253 | }
254 | 
255 | function setMap(){
256 |     removeAllMapLayers();
257 |     map.addLayer(mapLayer);
258 | }
259 | 
260 | function setSat(){
261 |     removeAllMapLayers();
262 |     map.addLayer(airialLayer);
263 | }
264 | 
265 | function setTopo(){
266 |     removeAllMapLayers();
267 |     map.addLayer(OpenTopoMapLayer);
268 | }
269 | 
270 | function setBwMap(){
271 |     removeAllMapLayers();
272 |     map.addLayer(Esri_WorldGrayCanvas);
273 | }
274 | 
275 | function getTimeZone(){
276 |     const e=document.getElementById("timeZoneSelect");
277 |     const o=e.options[e.selectedIndex];
278 |     return {offset: o.value-0, name: o.text};
279 | }
280 | 
281 | function displayLocalCircumstances(){
282 |     const tz=getTimeZone();
283 |     const p=map.getCenter();
284 |     const c=getLocalCircumstances(p.lat, p.lng,0);
285 |     const t=document.getElementById("localCircumstancesTable");
286 |     t.rows[1].cells[1].innerHTML=(p.lat-0).toFixed(4);
287 |     t.rows[2].cells[1].innerHTML=(p.lng-0).toFixed(4);
288 |     t.rows[3].cells[1].innerHTML=(c.h-0).toFixed(1);
289 |     t.rows[4].cells[1].innerHTML=(c.mag*100).toFixed(1)+"%";
290 |     if(c.mag>0){
291 |         t.rows[5].cells[1].innerHTML=hoursToTime(c.UTFirstContact,tz);
292 |         t.rows[6].cells[1].innerHTML=hoursToTime(c.UTLastContact,tz);
293 |         t.rows[7].cells[1].innerHTML=prettyTime(c.UTLastContact-c.UTFirstContact);
294 |     } else {
295 |         t.rows[5].cells[1].innerHTML="";
296 |         t.rows[6].cells[1].innerHTML="";
297 |         t.rows[7].cells[1].innerHTML="";
298 |     }
299 | 
300 |     if(c.mag>=1){
301 |         t.rows[8].cells[1].innerHTML=hoursToTime(c.UTSecondContact,tz);
302 |         t.rows[10].cells[1].innerHTML=hoursToTime(c.UTThirdContact,tz);
303 |         t.rows[11].cells[1].innerHTML=prettyTime(c.UTThirdContact-c.UTSecondContact);
304 |     } else {
305 |         t.rows[8].cells[1].innerHTML="";
306 |         t.rows[10].cells[1].innerHTML="";
307 |         t.rows[11].cells[1].innerHTML="";
308 |     }
309 |     t.rows[9].cells[1].innerHTML=hoursToTime(c.UTMaximum,tz);
310 | }
311 | 
312 | function updateDisplay(e){
313 |     const t=displayLocalCircumstances();
314 |     crosshairs.setLatLng(map.getCenter());
315 |     //drawOverlay(ctx,map,eclipseData);
316 | }
317 | 
318 | function computeCentralCurve(e,begin,end){
319 | 
320 |     let a=new Array();
321 |     let i=begin;
322 |     while(i<=end+.1){
323 |         const p=computeCentralLatLonForTime(e,i);
324 |         if(p!=null && p.lat!=null && p.lon!=null && !isNaN(p.lat) && !isNaN(p.lon)){
325 |             a.push(new L.LatLng(p.lat,p.lon));
326 |         }
327 |         i+=.0001;
328 |     }
329 |     return a;
330 | }
331 | 
332 | function computeEclipseData(){
333 |     const e=getElementCoeffs();
334 |     const extremes=getExtremePoints(e);
335 |     const begin=e.T0+extremes.begin.t-e.Δt/60/60;
336 |     const end=e.T0+extremes.end.t-e.Δt/60/60;
337 | 
338 |     const centralCurve=computeCentralCurve(e,begin,end);
339 | 
340 |     const startLon=extremes.begin.λ;
341 |     const endLon=extremes.end.λ;
342 | 
343 |     const north=new Array();
344 |     getTotalityLimitsByLongitudeList(e,1,startLon,endLon)[0].forEach(el => {if(el!=null) north.push(new L.LatLng(el.lat,el.lon))});
345 | 
346 |     const south=new Array();
347 |     getTotalityLimitsByLongitudeList(e,-1,startLon,endLon)[0].forEach(el => {if(el!=null) south.push(new L.LatLng(el.lat,el.lon))});
348 | 
349 |     const northP=new Array();
350 |     getPartialLimitsByLogitudeList(e,1,startLon,endLon)[0].forEach(el => {if(el!=null) northP.push(new L.LatLng(el.lat,el.lon))});
351 |     
352 |     const southP=new Array();
353 |     getPartialLimitsByLogitudeList(e,-1,startLon,endLon)[0].forEach(el => {if(el!=null) southP.push(new L.LatLng(el.lat,el.lon))});
354 | 
355 |     const centerPoint=getEclipseCenter(e);
356 | 
357 |     let eclipseData={};
358 |     eclipseData.e=e;
359 |     eclipseData.extremes=extremes;
360 |     eclipseData.beginTime=begin;
361 |     eclipseData.endTime=end;
362 |     eclipseData.centralCurve=centralCurve;
363 |     eclipseData.northTotalityLimits=north;
364 |     eclipseData.southTotalityLimits=south;
365 |     eclipseData.northPartialLimits=northP;
366 |     eclipseData.southPartialLimits=southP;
367 |     eclipseData.centerPoint=centerPoint;
368 |     eclipseData.durationLines=null;
369 | 
370 |     const backgroundWorker=new Worker("backgroundworker.js",{type: "module"});
371 |     backgroundWorker.addEventListener("message",workerMessage);
372 |     backgroundWorker.postMessage(eclipseData);
373 | 
374 |     return eclipseData;
375 | }
376 | 
377 | function workerMessage(e){
378 |     const lines=e.data;
379 |     eclipseData.durationLines=lines;
380 |     document.getElementById("durationLinesLoadingSpinner").classList.remove("loadingSpinner");
381 |     document.getElementById("showDurationLinesCheckbox").style.visibility="visible";
382 |     updateDisplay();
383 | }
384 | 
385 | function clearMarkers(e){
386 |     for(let i=0;i<markerList.length;i++){
387 |         map.removeLayer(markerList[i]);
388 |     }
389 |     for(let i=0;i<lineList.length;i++){
390 |         map.removeLayer(lineList[i]);
391 |     }
392 |     markerList=[];
393 |     lineList=[];
394 | }
395 | 
396 | function durationLinesCheck(){
397 |     updateDisplay();
398 | }
399 | 
400 | function populateTimeZones(){
401 |     const date=new Date(2024,4,8);
402 |     const tz=-(date.getTimezoneOffset()/60);
403 |     const e=document.getElementById("timeZoneSelect");
404 |     for(let i=-11;i<=14;i++){
405 |         const o=document.createElement("option");
406 |         o.value=i;
407 |         if(i>=0){
408 |             o.text="UTC + "+i;
409 |         } else {
410 |             o.text="UTC - "+Math.abs(i);
411 |         }
412 |         if(i==tz) o.selected="selected";
413 |         e.add(o,null);
414 |     }
415 | 
416 | }
417 | 
418 | document.getElementById("setMapImg").addEventListener("click",setMap);
419 | document.getElementById("setSatImg").addEventListener("click",setSat);
420 | document.getElementById("setTopoImg").addEventListener("click",setTopo);
421 | document.getElementById("setBwMapImg").addEventListener("click",setBwMap);
422 | document.getElementById("clearMarkersButton").addEventListener("click",clearMarkers);
423 | document.getElementById("showDurationLinesCheckbox").addEventListener("click",durationLinesCheck);
424 | document.getElementById("timeZoneSelect").addEventListener("input",updateDisplay);
425 | </script>
426 | </body>
427 | </html>


--------------------------------------------------------------------------------
/alarm.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gmiller123456/solareclipseviewer/5c1cc8d1fc0f8d7902f15eca821e3e941d62dc65/alarm.wav


--------------------------------------------------------------------------------
/astro.js:
--------------------------------------------------------------------------------
  1 | export function hoursToTime(hours,tz){
  2 |     hours+=tz.offset/60/60;  //Convert to EDT
  3 |     let h=Math.trunc(hours);
  4 |     let m=(hours-h)*60;
  5 |     let s=Math.trunc((m-Math.trunc(m))*60);
  6 |     m=Math.trunc(m);
  7 | 
  8 |     if(h<10){h="0"+h;}
  9 |     if(m<10){m="0"+m;}
 10 |     if(s<10){s="0"+s;}
 11 | 
 12 |     let ap="am";
 13 |     if(h>=12) ap="pm";
 14 |     if(h>=13) h-=12;
 15 |     return h+":"+m+":"+s+" "+ap;
 16 | }
 17 | 
 18 | export function prettyTime(hours){
 19 |     let sign="";
 20 |     if(hours<0){
 21 |         sign="-";
 22 |         hours=-hours;
 23 |     }
 24 |     let days=0;
 25 |     if (hours>24){
 26 |         days=Math.trunc(hours/24);
 27 |         hours-=days*24;
 28 |     }
 29 |     let h=Math.trunc(hours);
 30 |     let m=(hours-h)*60;
 31 |     let s=((m-Math.trunc(m))*60).toFixed(1);
 32 |     m=Math.trunc(m);
 33 | 
 34 |     if(h>0 || days >0){
 35 |         if(s<10) s="0"+s;
 36 |         if(m<10) m="0"+m;
 37 |     }
 38 |     if(days>0){
 39 |         if(h<10) h="0"+h;
 40 |     }
 41 | 
 42 |     let t=s+"s";
 43 |     if(m!=0) t=m+"m "+t;
 44 |     if(h!=0 || days >0) t=h+"h "+t;
 45 |     if(days>0) t=days+"d "+t;
 46 |     return sign+t;
 47 | 
 48 | }
 49 | 
 50 | export function convertTDBToUTC(jd_tdb){
 51 |     //Conversion already performed using deltaT in eclipse module
 52 |     throw("TDB to UTC Not needed");
 53 |     const jd_tt = jd_tdb; //differenece in TT is negligable
 54 |     const jd_tai = jd_tt - 32.184 / 60 / 60 / 24;
 55 |     const jd_utc = jd_tai - getLeapSeconds(jd_tai) / 60 / 60 / 24;
 56 | 
 57 |     return jd_utc;
 58 | }
 59 | 
 60 | export function getLeapSeconds(jd) {
 61 |     //Source IERS Resolution B1 and http://maia.usno.navy.mil/ser7/tai-utc.dat
 62 |     //This function must be updated any time a new leap second is introduced
 63 | 
 64 |     if (jd > 2457754.5) return 37.0;
 65 |     if (jd > 2457204.5) return 36.0;
 66 |     if (jd > 2456109.5) return 35.0;
 67 |     if (jd > 2454832.5) return 34.0;
 68 |     if (jd > 2453736.5) return 33.0;
 69 |     if (jd > 2451179.5) return 32.0;
 70 |     if (jd > 2450630.5) return 31.0;
 71 |     if (jd > 2450083.5) return 30.0;
 72 |     if (jd > 2449534.5) return 29.0;
 73 |     if (jd > 2449169.5) return 28.0;
 74 |     if (jd > 2448804.5) return 27.0;
 75 |     if (jd > 2448257.5) return 26.0;
 76 |     if (jd > 2447892.5) return 25.0;
 77 |     if (jd > 2447161.5) return 24.0;
 78 |     if (jd > 2446247.5) return 23.0;
 79 |     if (jd > 2445516.5) return 22.0;
 80 |     if (jd > 2445151.5) return 21.0;
 81 |     if (jd > 2444786.5) return 20.0;
 82 |     if (jd > 2444239.5) return 19.0;
 83 |     if (jd > 2443874.5) return 18.0;
 84 |     if (jd > 2443509.5) return 17.0;
 85 |     if (jd > 2443144.5) return 16.0;
 86 |     if (jd > 2442778.5) return 15.0;
 87 |     if (jd > 2442413.5) return 14.0;
 88 |     if (jd > 2442048.5) return 13.0;
 89 |     if (jd > 2441683.5) return 12.0;
 90 |     if (jd > 2441499.5) return 11.0;
 91 |     if (jd > 2441317.5) return 10.0;
 92 |     if (jd > 2439887.5) return 4.21317 + (jd - 2439126.5) * 0.002592;
 93 |     if (jd > 2439126.5) return 4.31317 + (jd - 2439126.5) * 0.002592;
 94 |     if (jd > 2439004.5) return 3.84013 + (jd - 2438761.5) * 0.001296;
 95 |     if (jd > 2438942.5) return 3.74013 + (jd - 2438761.5) * 0.001296;
 96 |     if (jd > 2438820.5) return 3.64013 + (jd - 2438761.5) * 0.001296;
 97 |     if (jd > 2438761.5) return 3.54013 + (jd - 2438761.5) * 0.001296;
 98 |     if (jd > 2438639.5) return 3.44013 + (jd - 2438761.5) * 0.001296;
 99 |     if (jd > 2438486.5) return 3.34013 + (jd - 2438761.5) * 0.001296;
100 |     if (jd > 2438395.5) return 3.24013 + (jd - 2438761.5) * 0.001296;
101 |     if (jd > 2438334.5) return 1.945858 + (jd - 2437665.5) * 0.0011232;
102 |     if (jd > 2437665.5) return 1.845858 + (jd - 2437665.5) * 0.0011232;
103 |     if (jd > 2437512.5) return 1.372818 + (jd - 2437300.5) * 0.001296;
104 |     if (jd > 2437300.5) return 1.422818 + (jd - 2437300.5) * 0.001296;
105 |     return 0.0;
106 | }
107 | 
108 | export function JulianDateFromUnixTime(t){
109 | 	//Not valid for dates before Oct 15, 1582
110 | 	return (t / 86400000) + 2440587.5;
111 | }
112 | 
113 | export function UnixTimeFromJulianDate(jd){
114 | 	//Not valid for dates before Oct 15, 1582
115 | 	return (jd-2440587.5)*86400000;
116 | }


--------------------------------------------------------------------------------
/backgroundworker.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import {getLocalCircumstances} from "./eclipse.js";
 3 | 
 4 | function findNorthLatForDuration(lon,max,min,target){
 5 |     let result=9999;
 6 |     let count=0;
 7 |     let total;
 8 | 
 9 |     while(((max-min)>.00001) && count<10000){
10 |         const guess=(max-min)/2+min;
11 |         const c=getLocalCircumstances(guess, lon,0);
12 |         total=(c.UTThirdContact-c.UTSecondContact)*60;
13 | 
14 |         result=guess;
15 |         if(result==target){
16 |             max=min;
17 |         } else if(total>target){
18 |             min=guess;
19 |         } else {
20 |             max=guess;
21 |         }
22 |         count++;
23 |     }
24 |     if(total+.01<target) result=null;
25 |     return result;
26 | }
27 | 
28 | function findSouthLatForDuration(lon,max,min,target){
29 |     let result=-9999;
30 |     let count=0;
31 |     let total;
32 |     
33 |     while(((max-min)>.00001) && count<10000){
34 |         const guess=(max-min)/2+min;
35 |         const c=getLocalCircumstances(guess, lon,0);
36 |         total=(c.UTThirdContact-c.UTSecondContact)*60;
37 | 
38 |         result=guess;
39 |         if(result==target){
40 |             max=min;
41 |         } else if(total<target){
42 |             min=guess;
43 |         } else {
44 |             max=guess;
45 |         }
46 |         count++;
47 |     }
48 |     if(total+.01<target) result=null;
49 |     return result;
50 | }
51 | 
52 | function getTotalityDurationLines(d,target){
53 |     let north=new Array();
54 |     let south=new Array();
55 | 
56 |     for(let i=0;i<d.northTotalityLimits.length && i<d.southTotalityLimits.length;i++){
57 |         const lng=d.northTotalityLimits[i].lng;
58 |         let max=d.northTotalityLimits[i].lat;
59 |         let min=d.southTotalityLimits[i].lat;
60 |         let mid=(max-min)/2+min;
61 | 
62 |         const n=findNorthLatForDuration(lng,max,mid,target);
63 |         const s=findSouthLatForDuration(lng,mid,min,target);
64 |         if(n!=null) north.push({lat: n, lng: lng});
65 |         if(s!=null) south.push({lat: s, lng: lng});
66 |     }
67 |     return [north,south];
68 | }
69 | 
70 | 
71 | function messageReceived(e){
72 |     const eclipseData=e.data;
73 | 
74 |     const lines=new Array();
75 |     lines.push(getTotalityDurationLines(eclipseData,1));
76 |     lines.push(getTotalityDurationLines(eclipseData,2));
77 |     lines.push(getTotalityDurationLines(eclipseData,3));
78 |     lines.push(getTotalityDurationLines(eclipseData,4));
79 | 
80 |     this.self.postMessage(lines);
81 | 
82 | }
83 | 
84 | self.addEventListener('message', messageReceived, false);
85 | 
86 | 


--------------------------------------------------------------------------------
/eclipse.js:
--------------------------------------------------------------------------------
   1 | /*
   2 | Greg Miller gmiller@gregmiller.net 2023
   3 | https://www.celestialprogramming.com/
   4 | Released as public domain
   5 | */
   6 | 
   7 | //Functions for computing solar eclipses.
   8 | 
   9 | //Algorithms from various sources including:
  10 | //A Manual of Spherical and Practical Astronomy - Chauvenet 1863
  11 | //The Mathematical Theory of Eclipses According to Chauvenet's Transformation of Bessel's Method - Buchanan 1904
  12 | //Explanatory Supplement to the Astronomical Ephemeris 1961
  13 | //Explanatory Supplement to the Astronomical Almanac 1992
  14 | //Elements of Solar Eclipses - Meeus 1989
  15 | //Prediction and Analysis of Solar Eclipse Circumstances - Williams 1971
  16 | 
  17 | 'use strict';
  18 | const rad=Math.PI/180;
  19 | 
  20 | const maxiterations=20;
  21 | 
  22 | /*
  23 |  * Determines angle based on both the sin and cos, determining the appropriate quadrant in the process
  24 |  */
  25 | function solveQuadrant(sin,cos){
  26 |     if(sin>=0 && cos>=0){return Math.asin(sin);}
  27 |     if(sin<0 && cos>=0){return Math.asin(sin);}
  28 |     if(sin<0 && cos<0){return -Math.acos(cos);}
  29 |     if(sin>=0 && cos<0){return Math.acos(cos);}
  30 | }
  31 | export function getElementCoeffs(){
  32 |     return getElements2024();
  33 |     //return getElements2017();
  34 |     //return getElements1994();
  35 |     //return getElements1996();
  36 | }
  37 | 
  38 | function getElements2017(){
  39 |     const elements={};
  40 |     elements.jd=2457987.5;
  41 |     elements.Δt=69.1;
  42 |     elements.T0=18;
  43 | 
  44 |     elements.X0=-0.1295710 ;
  45 |     elements.X1= 0.5406426 ;
  46 |     elements.X2=-0.0000294 ;
  47 |     elements.X3=-0.0000081;
  48 | 
  49 |     elements.Y0=0.4854160 ;
  50 |     elements.Y1=-0.1416400;
  51 |     elements.Y2=-0.0000905;
  52 |     elements.Y3= 0.0000020;
  53 | 
  54 |     elements.d0=11.8669596;
  55 |     elements.d1=-0.0136220;
  56 |     elements.d2=-0.0000020;
  57 |     elements.d3=0.0000000;
  58 | 
  59 |     elements.L10=0.5420930;
  60 |     elements.L11=0.0001241;
  61 |     elements.L12=-0.0000118;
  62 |     elements.L13=0.0000000;
  63 | 
  64 |     elements.L20=-0.0040250;
  65 |     elements.L21=0.0001234 ;
  66 |     elements.L22=-0.0000117 ;
  67 |     elements.L23=0.0000000 ;
  68 | 
  69 |     elements.M0=89.245430;
  70 |     elements.M1=15.003940;
  71 |     elements.M2=0.000000;
  72 |     elements.M3=0.000000;
  73 | 
  74 |     elements.tanf1 = 0.0046222;
  75 |     elements.tanf2 = 0.0045992;
  76 | 
  77 |     return elements;
  78 | 
  79 | }
  80 | 
  81 | function getElements2024_2(){
  82 |     //Agrees closely with
  83 |     //https://ssp.imcce.fr/forms/solar-eclipses/2024-04-08/local-circumstances#map=13.05/38.63866/-85.78188&observer=38.64866465157928/-85.78373848702137
  84 |     const elements={};
  85 |     elements.jd=2460408.5;
  86 |     elements.Δt=69.1;
  87 |     elements.T0=18;
  88 |     
  89 |     elements.X0=-0.3182588;
  90 |     elements.X1=0.5117224;
  91 |     elements.X2=0.0000330;
  92 |     elements.X3=-0.0000085;
  93 |     
  94 |     elements.Y0=0.2197690;
  95 |     elements.Y1=0.2709652;
  96 |     elements.Y2=-0.0000592;
  97 |     elements.Y3=-0.0000047;
  98 |     
  99 |     elements.d0=7.5861809;
 100 |     elements.d1=0.0148443;
 101 |     elements.d2=-0.0000017;
 102 |     elements.d3=0.0000000;
 103 |     
 104 |     elements.L10=0.5357259;
 105 |     elements.L11=0.0000620;
 106 |     elements.L12=-0.0000128;
 107 |     elements.L13=0.0000000;
 108 |     
 109 |     elements.L20=-0.0106071;
 110 |     elements.L21=0.0000617;
 111 |     elements.L22=-0.0000127;
 112 |     elements.L23=0.0000000;
 113 |     
 114 |     elements.M0=89.5912142;
 115 |     elements.M1=15.0040824;
 116 |     elements.M2=-0.0000008;
 117 |     elements.M3=0.0000000;
 118 |     
 119 |     elements.tanf1 = 0.0046663;
 120 |     elements.tanf2 = 0.0046430;
 121 | 
 122 |     return elements;
 123 | }
 124 | 
 125 | function getElements2024(){
 126 |     const elements={};
 127 |     elements.jd=2460408.5;
 128 |     elements.Δt=69.1;
 129 |     elements.T0=18;
 130 | 
 131 |     elements.X0=-0.3182440;
 132 |     elements.X1=0.5117116;
 133 |     elements.X2=0.0000326;
 134 |     elements.X3=-0.0000084;
 135 | 
 136 |     elements.Y0=0.2197640;
 137 |     elements.Y1=0.2709589;
 138 |     elements.Y2=-0.0000595;
 139 |     elements.Y3=-0.0000047;
 140 | 
 141 |     elements.d0=7.5862002;
 142 |     elements.d1=0.0148440;
 143 |     elements.d2=-0.0000020;
 144 |     elements.d3=0.0000000;
 145 | 
 146 |     elements.L10=0.5358140;
 147 |     elements.L11=0.0000618;
 148 |     elements.L12=-0.0000128;
 149 |     elements.L13=0.0000000;
 150 | 
 151 |     elements.L20=-0.0102720;
 152 |     elements.L21=0.0000615;
 153 |     elements.L22=-0.0000127;
 154 |     elements.L23=0.0000000;
 155 | 
 156 |     elements.M0=89.591217;
 157 |     elements.M1=15.004080;
 158 |     elements.M2=0.000000;
 159 |     elements.M3=0.000000;
 160 | 
 161 |     elements.tanf1 = 0.0046683;
 162 |     elements.tanf2 = 0.0046450; 
 163 | 
 164 |     return elements;
 165 |     
 166 | }
 167 | 
 168 | function getElements1996(){
 169 |     //Example data for Oct 12, 1996
 170 |     const elements={};
 171 |     elements.Δt=63;
 172 |     elements.T0=14;
 173 | 
 174 |     elements.X0=0.296103;
 175 |     elements.X1=0.5060364;
 176 |     elements.X2=0.0000145;
 177 |     elements.X3=-0.00000644;
 178 | 
 179 |     elements.Y0=1.083058;
 180 |     elements.Y1=-0.1515218;
 181 |     elements.Y2=-0.0000102;
 182 |     elements.Y3=0.00000184;
 183 | 
 184 |     elements.d0=-7.63950;
 185 |     elements.d1=-0.015234;
 186 |     elements.d2=0.000002;
 187 | 
 188 |     elements.M0=33.40582;
 189 |     elements.M1=15.003782;
 190 | 
 191 |     elements.L10=0.559341;
 192 |     elements.L11=-0.0001067;
 193 |     elements.L12=-0.0000107;
 194 | 
 195 |     elements.L20=0.013151;
 196 |     elements.L21=-0.0001062;
 197 |     elements.L22=-0.0000106;
 198 | 
 199 |     elements.tanf1=0.0046865;
 200 |     elements.tanf2=0.0046632;
 201 | 
 202 |     return elements;
 203 | }
 204 | 
 205 | export function getElements1994(){
 206 |     //Example data for May 10, 1994
 207 |     const elements={};
 208 |     elements.Δt=61;
 209 |     elements.T0=17;
 210 | 
 211 |     elements.X0=-0.173367;
 212 |     elements.X1=0.4990629;
 213 |     elements.X2=0.0000296;
 214 |     elements.X3=-0.00000563;
 215 | 
 216 |     elements.Y0=0.383484;
 217 |     elements.Y1=0.0869393;
 218 |     elements.Y2=-0.0001183;
 219 |     elements.Y3=-0.00000092;
 220 | 
 221 |     elements.d0=17.68613;
 222 |     elements.d1=0.010642;
 223 |     elements.d2=-0.000004;
 224 | 
 225 |     elements.M0=75.90923;
 226 |     elements.M1=15.001621;
 227 | 
 228 |     elements.L10=0.566906;
 229 |     elements.L11=-0.0000318;
 230 |     elements.L12=-0.0000098;
 231 | 
 232 |     elements.L20=0.020679;
 233 |     elements.L21=-0.0000317;
 234 |     elements.L22=-0.0000097;
 235 | 
 236 |     elements.tanf1=0.0046308;
 237 |     elements.tanf2=0.0046077;
 238 | 
 239 |     return elements;
 240 | }
 241 | 
 242 | function getElements(e,t,Φ,λ,height){
 243 |     //From Meeus - Elements of Solar Eclipses
 244 |     const o={};
 245 |     o.X=e.X0 + e.X1*t + e.X2*t*t + e.X3*t*t*t;
 246 |     o.Y=e.Y0 + e.Y1*t + e.Y2*t*t + e.Y3*t*t*t;
 247 |     o.d=e.d0 + e.d1*t + e.d2*t*t;
 248 |     o.M=e.M0 + e.M1*t;
 249 |     o.Xp=e.X1 + 2*e.X2*t + 3*e.X3*t*t;
 250 |     o.Yp=e.Y1 + 2*e.Y2*t + 3*e.Y3*t*t;
 251 |     o.Mp=e.M1;
 252 |     o.L1=e.L10 + e.L11*t + e.L12*t*t;
 253 |     o.L2=e.L20 + e.L21*t + e.L22*t*t;
 254 |     o.tanf1=e.tanf1;
 255 |     o.tanf2=e.tanf2;
 256 | 
 257 |     o.H = o.M - λ - 0.00417807 * e.Δt;
 258 | 
 259 |     o.u1 = Math.atan(0.99664719*Math.tan(Φ*rad))/rad;
 260 |     o.ρsinΦp=0.99664719 * Math.sin(o.u1*rad)+height/6378140*Math.sin(Φ*rad);
 261 |     o.ρcosΦp=Math.cos(o.u1*rad) + height/6378140 * Math.cos(Φ*rad);
 262 | 
 263 |     o.ξ = o.ρcosΦp * Math.sin(o.H*rad);
 264 |     o.η = o.ρsinΦp * Math.cos(o.d*rad) - o.ρcosΦp * Math.cos(o.H*rad) * Math.sin(o.d*rad);
 265 |     o.ζ = o.ρsinΦp * Math.sin(o.d*rad) + o.ρcosΦp * Math.cos(o.H*rad) * Math.cos(o.d*rad);
 266 |     o.ξp = 0.01745329 * e.M1 * o.ρcosΦp * Math.cos(o.H*rad);
 267 |     o.ηp = 0.01745329 * (e.M1 * o.ξ * Math.sin(o.d*rad) - o.ζ * e.d1);
 268 |     o.L1p = o.L1 - o.ζ * e.tanf1;
 269 |     o.L2p = o.L2 - o.ζ * e.tanf2;
 270 | 
 271 |     o.u = o.X - o.ξ;
 272 |     o.v = o.Y - o.η;
 273 |     o.a = o.Xp - o.ξp;
 274 |     o.b = o.Yp - o.ηp;
 275 |     o.n = Math.sqrt(o.a*o.a + o.b*o.b);
 276 | 
 277 |     return o;
 278 | 
 279 | }
 280 | 
 281 | export function getLocalCircumstances(Φ,λ,height){
 282 |     //From Meeus - Elements of Solar Eclipses
 283 |     const e=getElementCoeffs();
 284 |     λ=-λ;
 285 | 
 286 |     let t=0;
 287 |     let τm=10000;
 288 | 
 289 |     let iterations=0;
 290 |     let o;
 291 |     while(Math.abs(τm)>.00001 && iterations<maxiterations){
 292 |         o=getElements(e,t,Φ,λ,height);
 293 |         τm = - (o.u*o.a + o.v*o.b)/(o.n*o.n);
 294 |         t = t + τm;
 295 |         iterations++;
 296 |     }
 297 | 
 298 |     const m = Math.sqrt(o.u*o.u + o.v*o.v);
 299 |     const G = (o.L1p - m)/(o.L1p + o.L2p);
 300 |     const A = (o.L1p - o.L2p)/(o.L1p + o.L2p);
 301 | 
 302 |     //const Pm = Math.atan2(-o.vp, o.up);
 303 |     const Pm = Math.atan2(o.u/o.v)/rad;
 304 | 
 305 |     const sinh=Math.sin(o.d*rad)*Math.sin(Φ*rad) + Math.cos(o.d*rad)*Math.cos(Φ*rad)*Math.cos(o.H*rad);
 306 |     const h=Math.asin(sinh)/rad;
 307 |     const q = Math.asin(Math.cos(Φ*rad) * Math.sin(o.H*rad) / Math.cos(h*rad));
 308 | 
 309 |     let S = (o.a*o.v - o.u*o.b)/(o.n * o.L1p);
 310 |     let τ = o.L1p/o.n * Math.sqrt(1 - S*S);
 311 | 
 312 |     let firstContact = t - τ;
 313 |     let lastContact = t + τ;
 314 | 
 315 |     for(let i=0; i<10; i++){
 316 |         const fco=getElements(e,firstContact,Φ,λ,height);
 317 | 
 318 |         S = (fco.a*fco.v - fco.u*fco.b)/(fco.n * fco.L1p);
 319 |         const τf = - (fco.u*fco.a + fco.v*fco.b)/(fco.n*fco.n) - fco.L1p/fco.n * Math.sqrt(1 - S*S);
 320 | 
 321 |         firstContact = firstContact + τf;
 322 |     }
 323 | 
 324 |     for(let i=0; i<10; i++){
 325 |         const fco=getElements(e,lastContact,Φ,λ,height);
 326 | 
 327 |         S = (fco.a*fco.v - fco.u*fco.b)/(fco.n * fco.L1p);
 328 |         const τf = - (fco.u*fco.a + fco.v*fco.b)/(fco.n*fco.n) + fco.L1p/fco.n * Math.sqrt(1 - S*S);
 329 | 
 330 |         lastContact = lastContact + τf;
 331 |     }
 332 | 
 333 |     //Interior contacts
 334 |     S = (o.a*o.v - o.u*o.b)/(o.n * o.L2p);
 335 |     τ = o.L2p/o.n * Math.sqrt(1 - S*S);
 336 | 
 337 |     let thirdContact = t - τ;
 338 |     let secondContact = t + τ;
 339 | 
 340 |     for(let i=0; i<10; i++){
 341 |         const fco=getElements(e,thirdContact,Φ,λ,height);
 342 | 
 343 |         S = (fco.a*fco.v - fco.u*fco.b)/(fco.n * fco.L2p);
 344 |         const τf = - (fco.u*fco.a + fco.v*fco.b)/(fco.n*fco.n) - fco.L2p/fco.n * Math.sqrt(1 - S*S);
 345 | 
 346 |         thirdContact = thirdContact + τf;
 347 |     }
 348 | 
 349 |     for(let i=0; i<10; i++){
 350 |         const fco=getElements(e,secondContact,Φ,λ,height);
 351 | 
 352 |         S = (fco.a*fco.v - fco.u*fco.b)/(fco.n * fco.L2p);
 353 |         const τf = - (fco.u*fco.a + fco.v*fco.b)/(fco.n*fco.n) + fco.L2p/fco.n * Math.sqrt(1 - S*S);
 354 | 
 355 |         secondContact = secondContact + τf;
 356 |     }
 357 | 
 358 |     const UTFirstContact=e.T0 + firstContact - e.Δt/60/60;
 359 |     const UTSecondContact=e.T0 + secondContact - e.Δt/60/60;
 360 |     const UTThirdContact=e.T0 + thirdContact - e.Δt/60/60;
 361 |     const UTLastContact=e.T0 + lastContact - e.Δt/60/60;
 362 |     const UTMaximum = e.T0 + t  - e.Δt/60/60;
 363 | 
 364 |     const UT=e.T0 + t;
 365 | 
 366 |     return {
 367 |         jd: e.jd, t:t, UT: UT, mag: G, 
 368 |         UTMaximum: UTMaximum, 
 369 |         UTFirstContact: UTFirstContact, 
 370 |         UTSecondContact: UTSecondContact, 
 371 |         UTThirdContact: UTThirdContact, 
 372 |         UTLastContact: UTLastContact, 
 373 |         h:h, m:m, elements: o};
 374 | }
 375 | 
 376 | /*
 377 |  * Determines the maximum eclipse at a given time, including the location and duration of said point
 378 |  *
 379 |  * From Meeus - Elements of Solar Eclipses pages 11-13
 380 |  */
 381 | export function computeCentralLatLonForTime(e,UTC){
 382 |     //From Meeus - Elements of Solar Eclipses
 383 |     const t=UTC-e.T0;
 384 | 
 385 |     const X=e.X0 + e.X1*t + e.X2*t*t + e.X3*t*t*t;
 386 |     const Y=e.Y0 + e.Y1*t + e.Y2*t*t + e.Y3*t*t*t;
 387 |     //const Z=Z0 + Z1*t + Z2*t*t + Z3*t*t*t;
 388 |     const d=e.d0 + e.d1*t + e.d2*t*t;
 389 |     const M=e.M0 + e.M1*t;
 390 |     const L1=e.L10 + e.L11*t + e.L12*t*t;
 391 |     const L2=e.L20 + e.L21*t + e.L22*t*t;
 392 | 
 393 |     const Xp=e.X1 + 2*e.X2*t + 3*e.X3*t*t;
 394 |     const Yp=e.Y1 + 2*e.Y2*t + 3*e.Y3*t*t;
 395 | 
 396 |     const dtemp=d*rad;
 397 |     const ω=1/Math.sqrt(1-0.006694385 * Math.cos(d*rad)*Math.cos(d*rad));
 398 | 
 399 |     const p=e.M1/57.2957795;
 400 |     const b=Yp - p*X*Math.sin(d*rad);
 401 |     const c=Xp + p*Y*Math.sin(d*rad);
 402 | 
 403 |     const y1=ω * Y;
 404 |     const b1=ω * Math.sin(d*rad);
 405 |     const b2=0.99664719*ω*Math.cos(d*rad);
 406 |     const B=Math.sqrt(1 -  X*X - y1*y1); //If B does not exist, there is no central eclipse at given time
 407 | 
 408 |     const Φ1=Math.asin(B*b1 + y1*b2);
 409 |     //const H=Math.asin(X/Math.cos(Φ1))/rad;
 410 |     //const cos(Φ1)*cos(H)=B*b2 - y1*b1;
 411 |     const sinH = X/Math.cos(Φ1);
 412 |     const cosH = (B*b2 - y1*b1)/Math.cos(Φ1);
 413 |     const H = solveQuadrant(sinH,cosH)/rad;
 414 | 
 415 |     const Φ = Math.atan(1.00336409 * Math.tan(Φ1))/rad;
 416 |     //const λ = M - H - 1.0027379 * Δt;
 417 |     const λ = M - H - 0.00417807 * e.Δt;
 418 | 
 419 |     const L1p=L1 - B * e.tanf1;
 420 |     const L2p=L2 - B * e.tanf2;
 421 |     const a = c - p*B*Math.cos(d*rad);
 422 |     const n = Math.sqrt(a*a + b*b);
 423 |     const duration = 7200*L2p/n;
 424 | 
 425 |     const sinh=Math.sin(d*rad)*Math.sin(Φ*rad) + Math.cos(d*rad)*Math.cos(Φ*rad)*Math.cos(H*rad);
 426 |     const h=Math.asin(sinh)/rad;
 427 | 
 428 |     const K2 = B*B + ((X*a + Y*b)*(X*a + Y*b))/(n*n);
 429 |     const K = Math.sqrt(K2);
 430 |     const width=12756*Math.abs(L2p)/K;
 431 | 
 432 |     const A = (L1p - L2p)/(L1p + L2p);
 433 | 
 434 |     return {lat: Φ, lon: -λ, magnitude: A, duration: duration, width: width};
 435 | }
 436 | 
 437 | /*
 438 |  *
 439 |  * 
 440 |  * From Meeus - Elements of Solar Eclipses
 441 |  */
 442 | function computeExtremes(e,t0){
 443 |     const r={};
 444 |     const t=t0;
 445 |     r.t=t;
 446 | 
 447 | 
 448 |     r.X=e.X0 + e.X1*t + e.X2*t*t + e.X3*t*t*t;
 449 |     r.Y=e.Y0 + e.Y1*t + e.Y2*t*t + e.Y3*t*t*t;
 450 |     //const Z=Z0 + Z1*t + Z2*t*t + Z3*t*t*t;
 451 |     r.d=e.d0 + e.d1*t + e.d2*t*t;
 452 |     r.M=e.M0 + e.M1*t;
 453 |     r.L1=e.L10 + e.L11*t + e.L12*t*t;
 454 |     r.L2=e.L20 + e.L21*t + e.L22*t*t;
 455 | 
 456 |     r.Xp=e.X1 + 2*e.X2*t + 3*e.X3*t*t;
 457 |     r.Yp=e.Y1 + 2*e.Y2*t + 3*e.Y3*t*t;
 458 | 
 459 |     r.ω=1/Math.sqrt(1-0.006694385 * Math.cos(r.d*rad)*Math.cos(r.d*rad));
 460 |     r.p=e.M1/57.2957795;
 461 |     r.b=r.Yp - r.p*r.X*Math.sin(r.d*rad);
 462 |     r.c=r.Xp + r.p*r.Y*Math.sin(r.d*rad);
 463 | 
 464 |     r.y1=r.ω * r.Y;
 465 |     r.b1=r.ω * Math.sin(r.d*rad);
 466 |     r.b2=0.99664719*r.ω*Math.cos(r.d*rad);
 467 | 
 468 |     let temp=1 -  r.X*r.X - r.y1*r.y1;
 469 |     if(temp<0){ //avoid rounding errors, eclipse does not exist if < 0
 470 |         temp=0;
 471 |     }
 472 |     r.B=Math.sqrt(temp); //If B does not exist, there is no central eclipse at given time
 473 | 
 474 |     r.Φ1=Math.asin(r.B*r.b1 + r.y1*r.b2);
 475 |     const sinH=r.X/Math.cos(r.Φ1);
 476 |     const cosH=(r.B*r.b2 - r.y1*r.b1)/Math.cos(r.Φ1);
 477 |     r.H = solveQuadrant(sinH,cosH)/rad;
 478 | 
 479 |     r.Φ = Math.atan(1.00336409 * Math.tan(r.Φ1))/rad;
 480 |     //const λ = M - H - 1.0027379 * Δt;
 481 |     r.λ = -(r.M - r.H - 0.00417807 * e.Δt); //Meeus treats East long as negative, inverted here
 482 |     r.L1p=r.L1 - r.B * e.tanf1;
 483 |     r.L2p=r.L2 - r.B * e.tanf2;
 484 |     r.a = r.c - r.p*r.B*Math.cos(r.d*rad);
 485 |     r.n = Math.sqrt(r.a*r.a + r.b*r.b);
 486 |     r.duration = 7200*r.L2p/r.n;
 487 | 
 488 |     r.sinh=Math.sin(r.d*rad)*Math.sin(r.Φ*rad) + Math.cos(r.d*rad)*Math.cos(r.Φ*rad)*Math.cos(r.H*rad);
 489 |     r.h=Math.asin(r.sinh)/rad;
 490 | 
 491 |     r.K2 = r.B*r.B + ((r.X*r.a + r.Y*r.b)*(r.X*r.a + r.Y*r.b))/(r.n*r.n);
 492 |     r.K = Math.sqrt(r.K2);
 493 |     r.width=12756*Math.abs(r.L2p)/r.K;
 494 | 
 495 |     r.A = (r.L1p - r.L2p)/(r.L1p + r.L2p);
 496 | 
 497 |     return r;
 498 | }
 499 | 
 500 | function computeEstimate(e){
 501 |     //From Meeus - Elements of Solar Eclipses
 502 |     const ω=1/Math.sqrt(1-0.006694385 * Math.cos(e.d0*rad)*Math.cos(e.d0*rad));
 503 |     const u=e.X0;
 504 |     const a=e.X1;
 505 |     const v=ω*e.Y0;
 506 |     const b=ω*e.Y1;
 507 |     const n=Math.sqrt(a*a + b*b);
 508 | 
 509 |     const S=(a*v - u*b)/n;
 510 |     const τ=-(u*a + v*b)/(n*n)
 511 |     const τ1=τ - Math.sqrt(1-S*S)/n;
 512 |     const τ2=τ + Math.sqrt(1-S*S)/n;
 513 | 
 514 |     //Hours before (τ1), and after (τ2) T0
 515 |     return {τ1: τ1,τ2: τ2};
 516 | }
 517 | 
 518 | function refineEstimate(e,t){
 519 |     //From Meeus - Elements of Solar Eclipses
 520 |     const X=e.X0 + e.X1*t + e.X2*t*t + e.X3*t*t*t;
 521 |     const Y=e.Y0 + e.Y1*t + e.Y2*t*t + e.Y3*t*t*t;
 522 |     const d=e.d0 + e.d1*t + e.d2*t*t;
 523 |     const Xp=e.X1 + 2*e.X2*t + 3*e.X3*t*t;
 524 |     const Yp=e.Y1 + 2*e.Y2*t + 3*e.Y3*t*t;
 525 | 
 526 |     const ω=1/Math.sqrt(1-0.006694385 * Math.cos(e.d0*rad)*Math.cos(e.d0*rad));
 527 |     const u=X;
 528 |     const a=Xp;
 529 |     const v=ω*Y;
 530 |     const b=ω*Yp;
 531 |     const n=Math.sqrt(a*a + b*b);
 532 | 
 533 |     const S=(a*v - u*b)/n;
 534 |     const τ=-(u*a + v*b)/(n*n)
 535 |     const τ1=τ - Math.sqrt(1-S*S)/n;
 536 |     const τ2=τ + Math.sqrt(1-S*S)/n;
 537 | 
 538 |     //Hours before (τ1), and after (τ2) T0
 539 |     return {τ1: τ1,τ2: τ2};
 540 | 
 541 | }
 542 | 
 543 | export function getExtremePoints(e){
 544 |     const est=computeEstimate(e);
 545 |     const est2=refineEstimate(e,est.τ1);
 546 |     const est3=refineEstimate(e,est.τ2);
 547 | 
 548 |     const beginCircumstances=computeExtremes(e,est.τ1+est2.τ1);
 549 |     const endCircumstances=computeExtremes(e,est.τ2+est3.τ2);
 550 |     return {begin: beginCircumstances, end: endCircumstances};
 551 | }
 552 | 
 553 | export function getLatLonEclipseAtNoon(e){
 554 |     //From Meeus - Elements of Solar Eclipses
 555 |     let t=0;
 556 |     for(let i=0;i<20;i++){
 557 |         t= - (e.X0 + t*t*(e.X2 + t*e.X3))/e.X1;
 558 |     }
 559 | 
 560 |     const Y=e.Y0 + e.Y1*t + e.Y2*t*t + e.Y3*t*t*t;
 561 |     const d=e.d0 + e.d1*t + e.d2*t*t;
 562 |     const M=e.M0 + e.M1*t;
 563 |     const ω=1/Math.sqrt(1-0.006694385 * Math.cos(d*rad)*Math.cos(d*rad));
 564 | 
 565 |     const β = Math.asin(ω * Y)/rad;
 566 |     const d1 = Math.asin(ω * Math.sin(d*rad))/rad;
 567 |     let Φ1;
 568 |     let Φ;
 569 |     let λ;
 570 |     if(β + d1 > 90){
 571 |         Φ1 = 180 - β + d1;
 572 |         Φ = Math.atan(1.00336409 * Math.tan(Φ1*raD))/rad;
 573 |         λ = - (M - 180 - 0.00417807 * e.Δt);
 574 |     } else if(β + d1 < -90){
 575 |         Φ1 = -(180 + β + d1);
 576 |         Φ = Math.atan(1.00336409 * Math.tan(Φ1*rad))/rad;
 577 |         λ = - (M + 180 - 0.00417807 * e.Δt);
 578 |     } else {
 579 |         Φ1 = β + d1;
 580 |         Φ = Math.atan(1.00336409 * Math.tan(Φ1*rad))/rad;
 581 |         λ = - (M - 0.00417807 * e.Δt);
 582 |     }
 583 |     if(λ<-180){λ+=360;}
 584 | 
 585 |     const UT = e.T0 + t - e.Δt/60/60;
 586 |     return {UT: UT, lat: Φ, lon: λ};
 587 | }
 588 | 
 589 | /*
 590 |  * Determines the center line at a given longitude for the particular eclipse
 591 |  * Inputs: 
 592 |  * e: Local Circumstances at the given time
 593 |  * λ: Longitude where one wishes to find the center line
 594 |  */
 595 | export function getCenterLineByLongitude(e,λ){
 596 |     return getLimitsForLogitude(e,λ,0,1,0);
 597 | }
 598 | 
 599 | /*
 600 |  * Determines totality limits for a range of longitudes
 601 |  * Inputs: 
 602 |  * e: Local Circumstances at the given time
 603 |  * northsouth: Degrees north/south
 604 |  * startLon: Start Longitude
 605 |  * endLon: End Longitude
 606 |  */
 607 | export function getTotalityLimitsByLongitudeList(e,northsouth,startLon,endLon){
 608 |     return getLimitsByLongitudeAsList(e,northsouth,1,startLon,endLon);
 609 | }
 610 | 
 611 | /*
 612 |  * Determines partial limits for a range of longitudes
 613 |  * Inputs: 
 614 |  * e: Local Circumstances at the given time
 615 |  * northsouth: Degrees north/south
 616 |  * startLon: Start Longitude
 617 |  * endLon: End Longitude
 618 |  */
 619 | export function getPartialLimitsByLogitudeList(e,northsouth,startLon,endLon){
 620 |     return getLimitsByLongitudeAsList(e,northsouth,0,startLon,endLon);
 621 | }
 622 | 
 623 | function getLimitsByLongitudeAsList(e,northsouth,G,startLon,endLon){
 624 |     const eqPoints=new Array();
 625 |     const polarPoints=new Array();
 626 | 
 627 |     for(let i=startLon;i<=endLon;i+=.01){
 628 |         const eq=getLimitsForLogitude(e,i,northsouth,G,0);
 629 |         const polar=getLimitsForLogitude(e,i,northsouth,G,89.9 * Math.sign(e.Y0));
 630 | 
 631 |         if(polar!=null  && eq!=null){
 632 |             if(Math.abs(eq.lat-polar.lat)<.1){
 633 |                 eqPoints.push(eq);
 634 |             } else {
 635 |                 eqPoints.push(eq);
 636 |                 polarPoints.push(polar);
 637 |             }
 638 |         } else {
 639 |             eqPoints.push(null);
 640 |             polarPoints.push(null);
 641 |         }
 642 |     }
 643 | 
 644 |     return [eqPoints,polarPoints];
 645 | }
 646 | 
 647 | function getLimitsForLogitude(e,λ,northsouth,G,startΦ){
 648 |     //From Meeus - Elements of Solar Eclipses
 649 |     let t=0;
 650 |     let Φ=startΦ;
 651 |     
 652 |     let i=0;
 653 |     let ΔΦ=1000;
 654 |     let τ=1000;
 655 |     while((Math.abs(τ)>.0001 || Math.abs(ΔΦ)>.0001) && i<20){
 656 |         const X=e.X0 + e.X1*t + e.X2*t*t + e.X3*t*t*t;
 657 |         const Y=e.Y0 + e.Y1*t + e.Y2*t*t + e.Y3*t*t*t;
 658 |         const d=e.d0 + e.d1*t + e.d2*t*t;
 659 |         const M=e.M0 + e.M1*t;
 660 |         const Xp=e.X1 + 2*e.X2*t + 3*e.X3*t*t;
 661 |         const Yp=e.Y1 + 2*e.Y2*t + 3*e.Y3*t*t;
 662 |         const L1=e.L10 + e.L11*t + e.L12*t*t;
 663 |         const L2=e.L20 + e.L21*t + e.L22*t*t;
 664 | 
 665 |         const H = M + λ - 0.00417807 * e.Δt;
 666 |     
 667 |         const height=0;
 668 |         const u1 = Math.atan(0.99664719*Math.tan(Φ*rad))/rad;
 669 |         const ρsinΦp=0.99664719 * Math.sin(u1*rad)+height/6378140*Math.sin(Φ*rad);
 670 |         const ρcosΦp=Math.cos(u1*rad) + height/6378140 * Math.cos(Φ*rad);
 671 |     
 672 |         const ξ = ρcosΦp * Math.sin(H*rad);
 673 |         const η = ρsinΦp * Math.cos(d*rad) - ρcosΦp * Math.cos(H*rad) * Math.sin(d*rad);
 674 |         const ζ = ρsinΦp * Math.sin(d*rad) + ρcosΦp * Math.cos(H*rad) * Math.cos(d*rad);
 675 |         const ξp = 0.01745329 * e.M1 * ρcosΦp * Math.cos(H*rad);
 676 |         const ηp = 0.01745329 * (e.M1 * ξ * Math.sin(d*rad) - ζ * e.d1);
 677 |         const L1p = L1 - ζ * e.tanf1;
 678 |         const L2p = L2 - ζ * e.tanf2;
 679 | 
 680 |         const u = X - ξ;
 681 |         const v = Y - η;
 682 |         const a = Xp - ξp;
 683 |         const b = Yp - ηp;
 684 |         const n = Math.sqrt(a*a + b*b);
 685 |     
 686 |         τ = - (u*a + v*b)/(n*n);
 687 |         const W = (v*a - u*b)/n;
 688 |         const Q = ((b * Math.sin(H*rad) * ρsinΦp + a*(Math.cos(H*rad) * Math.sin(d*rad) * ρsinΦp + Math.cos(d*rad)*ρcosΦp)))
 689 |                     / (57.29578 * n);
 690 |     
 691 |         //northsouth = 1 for northnet limit, -1 for southern limit
 692 |         const E=L1p - G * (L1p + L2p);
 693 |         ΔΦ = (W + northsouth * Math.abs(E))/Q;
 694 | 
 695 |         t = t + τ;
 696 |         Φ = Φ + ΔΦ;
 697 |         i++;
 698 |     }
 699 |     if (Math.abs(τ)>.0001 || Math.abs(ΔΦ)>.0001){return null;}
 700 |     
 701 |     const UT= e.T0 + t;
 702 |     
 703 |     Φ=(90+Φ)%180;
 704 |     if(Φ<0)Φ+=180;
 705 |     Φ-=90;
 706 |     return {t: t, lat: Φ, lon: λ};
 707 | }
 708 | 
 709 | function computeOutlinePoint(be,Q,umbra){
 710 |     //The Explanatory Supplement to the Astronomical Ephemeris 1961
 711 |     //Prediction and Analysis of Solar Eclipse Circumstances - Williams 1971
 712 |     //P220
 713 |     const e=Math.sqrt(0.00672267);
 714 |     const sind=Math.sin(be.d*rad);
 715 |     const cosd=Math.cos(be.d*rad);
 716 |     const ρ1=Math.sqrt(1-e*e*cosd*cosd);
 717 |     const ρ2=Math.sqrt(1-e*e*sind*sind);
 718 |     const sind1=sind/ρ1;
 719 |     const cosd1=Math.sqrt(1-e*e)*cosd/ρ1;
 720 | 
 721 |     const sind1d2=e*e*sind*cosd/(ρ1*ρ2); //P220 (bottom)
 722 |     const cosd1d2=Math.sqrt(1-e*e)/(ρ1*ρ2);
 723 |     
 724 |     Q*=rad;
 725 | 
 726 |     const sinQ=Math.sin(Q);
 727 |     const cosQ=Math.cos(Q);
 728 | 
 729 |     let tanf=be.tanf1;
 730 |     let l=be.l1;
 731 |     if(umbra){
 732 |         l=be.l2;
 733 |         tanf=be.tanf2;
 734 |     }
 735 | 
 736 |     let ξ=be.x - l*sinQ;
 737 |     let η=(be.y - l*cosQ)/ρ1;
 738 |     let ζ1=Math.sqrt(1 - ξ*ξ - η*η);
 739 | 
 740 |     let ζ=ρ2*(ζ1*cosd1d2 - η*sind1d2);
 741 |     let L = l - ζ*tanf;
 742 | 
 743 |     ξ=be.x - L*sinQ;
 744 |     η=(be.y - L*cosQ)/ρ1;
 745 |     ζ1=Math.sqrt(1 - ξ*ξ - η*η);
 746 | 
 747 |     //for(let i=0;i<100;i++){
 748 |         ζ=ρ2*(ζ1*cosd1d2 - η*sind1d2);
 749 |         L = l - ζ*tanf;
 750 | 
 751 |         ξ=be.x - L*sinQ;
 752 |         η=(be.y - L*cosQ)/ρ1;
 753 |         ζ1=Math.sqrt(1 - ξ*ξ - η*η);
 754 |     //}
 755 | 
 756 |     const cosϕ1sinθ=ξ;
 757 |     const cosϕ1cosθ=ζ1*cosd1 - η*sind1;
 758 | 
 759 |     const θ=Math.atan2(cosϕ1sinθ,cosϕ1cosθ)/rad; //C.51
 760 |     
 761 |     let λ=be.H - θ; //C.53, C.22
 762 |     const ϕ1=Math.asin(η*cosd1 + ζ1*sind1); //C.52
 763 |     let ϕ=Math.atan((1/Math.sqrt(1-e*e))*Math.tan(ϕ1))/rad; //C.54
 764 |     if(ϕ>90) ϕ-=180;
 765 |     if(ϕ<-90) ϕ+=180;
 766 | 
 767 |     if(λ>180) λ=λ-360;
 768 |     return {lat: ϕ, lon: -λ};
 769 | }
 770 | 
 771 | function propperAngle(d){
 772 |     //return d;
 773 |     let t=d;
 774 |     if(t<0){t+=360;}
 775 |     if(t>=360) {t-=360;}
 776 |     return t;
 777 | }
 778 | 
 779 | function getOutlineCurveQRange(be,l){
 780 |     //Exp Sup 1961
 781 |     const msq=be.x*be.x + be.y*be.y; //Derived from x=mSinM, y=mCosM p228
 782 |     const m=Math.sqrt(msq);
 783 |     const tanM=be.x/be.y; //Derived from x=mSinM, y=mCosM p228
 784 |     const M=Math.atan2(be.x,be.y);
 785 |     const denom=2*l*m;
 786 |     const numer=m*m + l*l - 1;
 787 |     const cosQM=(m*m + l*l - 1)/(2*l*m);
 788 |     let Q1=propperAngle((Math.acos(cosQM)+M)/rad); 
 789 |     let Q2=propperAngle((-Math.acos(cosQM)+M)/rad); 
 790 | 
 791 |     //TODO: This probably only works for the 2024 eclipse
 792 |     if(isNaN(Q1) || isNaN(Q2)){
 793 |         Q2=0;
 794 |         Q1=360;
 795 |     }
 796 | 
 797 |     if(Q1<Q2) Q1+=360;
 798 | 
 799 |     return {start: Q2, end: Q1};
 800 | }
 801 | 
 802 | /*
 803 |  * Computes the eclipse outline at a particular time
 804 |  * Input
 805 |  * t: Time, hours (Day of eclipse)
 806 |  */
 807 | export function computeOutlineCurve(t){
 808 |     const el=getElementCoeffs();
 809 |     const be={};
 810 |     be.x= el.X0 +  el.X1*t +  el.X2*t*t +  el.X3*t*t*t;
 811 |     be.y= el.Y0 +  el.Y1*t +  el.Y2*t*t +  el.Y3*t*t*t;
 812 |     be.d= el.d0 +  el.d1*t +  el.d2*t*t;
 813 |     be.μ= el.M0 +  el.M1*t;
 814 |     be.Xp= el.X1 + 2* el.X2*t + 3* el.X3*t*t;
 815 |     be.Yp= el.Y1 + 2* el.Y2*t + 3* el.Y3*t*t;
 816 |     be.L1= el.L10 +  el.L11*t +  el.L12*t*t;
 817 |     be.L2= el.L20 +  el.L21*t +  el.L22*t*t;
 818 |     be.tanf1=el.tanf1;
 819 |     be.tanf2=el.tanf2;
 820 | 
 821 |     be.l1=be.L1;
 822 |     be.l2=be.L2;
 823 |     be.Δt=el.Δt;
 824 |     be.H = be.μ - 0.00417807 * be.Δt;
 825 | 
 826 |     const prange=getOutlineCurveQRange(be,be.l1);
 827 |     const urange=getOutlineCurveQRange(be,be.l2);
 828 | 
 829 |     const penumbra=new Array();
 830 |     const umbra=new Array();
 831 |     
 832 |     let p=computeOutlinePoint(be,prange.start,false);
 833 |     let i=0;
 834 |     while((isNaN(p.lat) || !isNaN(p.lon)) && i<.3){
 835 |         p=computeOutlinePoint(be,prange.start+i,false);
 836 |         i+=.001;
 837 |     }
 838 |     penumbra.push(p);
 839 |     
 840 | 
 841 |     for(let i=prange.start;i<prange.end;i+=.1){
 842 |         penumbra.push(computeOutlinePoint(be,i,false));
 843 |     }
 844 |     
 845 |     p=computeOutlinePoint(be,prange.end,false);
 846 |     i=0;
 847 |     while((isNaN(p.lat) || isNaN(p.lon)) && i<.3){
 848 |         p=computeOutlinePoint(be,prange.end-i,false);
 849 |         i+=.001;
 850 |     }
 851 |     penumbra.push(p);
 852 | 
 853 |     for(let i=0;i<360;i+=.1){
 854 |         umbra.push(computeOutlinePoint(be,i,true));
 855 |     }
 856 |     
 857 |     return {umbra: umbra, penumbra: penumbra};
 858 | }
 859 | 
 860 | 
 861 | /*
 862 |  * Computes the Rise and Set curves of an eclipse
 863 |  * Input
 864 |  * t: Time, hours (Day of eclipse)
 865 |  */
 866 | export function getRiseSetCurves(){
 867 |     let t=-3;
 868 |     const e=getElementCoeffs();
 869 |     const list1=new Array();
 870 |     const list2=new Array();
 871 |     const list3=new Array();
 872 |     const list4=new Array();
 873 | 
 874 |     let maxlat=-100;
 875 |     let minlat=100;
 876 |     let nStart;
 877 |     let sStart;
 878 | 
 879 |     while(t<.5){
 880 |         const be=getElements(e,t,0,0,0);
 881 |         const p=computeRiseSetPoints(be);
 882 |         if(!isNaN(p[0].lat)){
 883 |             list1.push(p[0]);
 884 |             if(p[0].lat>maxlat){ maxlat=p[0].lat; nStart=p[0].lon;}
 885 |             if(p[0].lat<minlat){ minlat=p[0].lat; sStart=p[0].lon;}
 886 |         }
 887 |         if(!isNaN(p[1].lat)){
 888 |             list2.unshift(p[1]);
 889 |             if(p[1].lat<minlat){ minlat=p[1].lat; sStart=p[1].lon;}
 890 |             if(p[1].lat<minlat){ minlat=p[1].lat; sStart=p[1].lon;}
 891 |         }
 892 |         t+=.01;
 893 |     }
 894 |     t=.5;
 895 | 
 896 |     maxlat=-100;
 897 |     minlat=100;
 898 |     let nEnd;
 899 |     let sEnd;
 900 | 
 901 |     while(t<4){
 902 |         const be=getElements(e,t,0,0,0);
 903 |         const p=computeRiseSetPoints(be);
 904 |         if(!isNaN(p[0].lat)) list3.push(p[0]);
 905 |         if(!isNaN(p[1].lat)) list4.unshift(p[1]);
 906 |         if(!isNaN(p[0].lat)){
 907 |             list3.push(p[0]);
 908 |             if(p[0].lat>maxlat){ maxlat=p[0].lat; nEnd=p[0].lon;}
 909 |             if(p[0].lat<minlat){ minlat=p[0].lat; sEnd=p[0].lon;}
 910 |         }
 911 |         if(!isNaN(p[1].lat)){
 912 |             list4.unshift(p[1]);
 913 |             if(p[1].lat>maxlat){ maxlat=p[1].lat; nEnd=p[1].lon;}
 914 |             if(p[1].lat<minlat){ minlat=p[1].lat; sEnd=p[1].lon;}
 915 |         }
 916 |         t+=.01;
 917 |     }
 918 |     return {setting: list1.concat(list2), rising: list3.concat(list4), nStart: nStart, sStart: sStart, nEnd: nEnd, sEnd: sEnd};
 919 | 
 920 | }
 921 | 
 922 | function computeRiseSetPoints(be){
 923 |     //From Explanatory Supplement 1961ed
 924 |     //TODO: Flattening of the Earth
 925 |     //P232 rise set curve
 926 |     const ζ=0;
 927 |     const M=Math.atan2(be.X,be.Y);
 928 |     const m=Math.sqrt(be.X*be.X + be.Y*be.Y);
 929 | 
 930 |     const cosγM=(m*m + 1 - be.L1*be.L1) / (2*m); //Without flattening
 931 | 
 932 |     const γM=Math.acos(cosγM);
 933 |     const γM2=2*Math.PI-γM;
 934 | 
 935 |     const γ1=γM+M;
 936 |     const γ2=γM2+M;
 937 | 
 938 |     let ll1=computeRiseSetPoint(be,γ1);
 939 |     let ll2=computeRiseSetPoint(be,γ2);
 940 |     return [ll1,ll2];
 941 | }
 942 | 
 943 | function computeRiseSetPoint(be,γ){
 944 |     //From Explanatory Supplement 1961ed
 945 |     const ζ=0;
 946 |     const η=Math.cos(γ);
 947 |     const ξ=Math.sin(γ);
 948 | 
 949 |     const sind=Math.sin(be.d*rad);
 950 |     const cosd=Math.cos(be.d*rad);
 951 | 
 952 |     const cosϕsinθ=ξ;
 953 |     const cosϕ1cosθ=-η*sind+ζ*cosd;
 954 | 
 955 |     const tanθ=cosϕsinθ/cosϕ1cosθ;
 956 |     const θ=Math.atan2(cosϕsinθ,cosϕ1cosθ);
 957 |     const λ=-(be.H*rad-θ);
 958 | 
 959 |     const sinϕ=η*cosd+ζ*sind;
 960 |     const ϕ=Math.asin(sinϕ);
 961 | 
 962 |     return {lat: ϕ/rad, lon: (λ<=Math.PI) ? λ/rad : λ/rad-360};
 963 | }
 964 | 
 965 | export function getMaxEclipseAtRiseSetPoints(){
 966 |     let t=-4;
 967 |     const list=new Array();
 968 |     while(t<4){
 969 |         const e=getElementCoeffs();
 970 |         const be=getElements(e,t,0,0,0);
 971 |         list.push(getMaxEclipseAtRiseSetPoint(be));
 972 |         t+=.01;
 973 |     }
 974 | 
 975 |     return list;
 976 | }
 977 | 
 978 | function getΔ(Q,be){
 979 |     //From Explanatory Supplement 1961ed
 980 |     const sinγQ=be.X*Math.cos(Q) - be.Y*Math.sin(Q);
 981 |     const γQ=Math.asin(sinγQ);
 982 |     const γ=γQ+Q;
 983 |     const ξ=Math.sin(γ);
 984 |     const η=Math.cos(γ)
 985 |     const xξ=be.X-ξ;
 986 |     const yη=be.Y-η;
 987 |     const Δ=Math.sqrt(xξ*xξ + yη*yη);
 988 |     return Δ;
 989 | }
 990 | 
 991 | function getMaxEclipseAtRiseSetPoint(be){
 992 |     //From Exp Sup 1961 P231
 993 |     const sind=Math.sin(be.d*rad);
 994 |     const cosd=Math.cos(be.d*rad);
 995 | 
 996 |     const bp=-be.Yp + be.Mp*be.X*sind;
 997 |     const c1p=be.Xp + be.Mp*be.Y*sind + be.Mp*be.L1*be.tanf1*cosd;
 998 |         
 999 |     
1000 |     let Q = Math.atan2(bp,c1p);
1001 |     const Δa=getΔ(Q,be);
1002 |     const Δb=getΔ(Q-Math.PI,be);
1003 |     //continue with the point where Δ<=be.l
1004 | 
1005 |     const l=be.L1;
1006 |     if(Δa<l){
1007 |         Q=Q;
1008 |     } else if(Δb<l){
1009 |         Q-=Math.PI;
1010 |     }
1011 | 
1012 |     const sinγQ=be.X*Math.cos(Q) - be.Y*Math.sin(Q);
1013 |     const γQ=Math.asin(sinγQ);
1014 |     const γ=γQ+Q;
1015 |     const η=Math.cos(γ)
1016 |     
1017 |     const cosϕsinθ=Math.sin(γ);
1018 |     const ζ=0; //Maybe?
1019 |     const cosϕcosθ=-η*sind+ζ*cosd;
1020 |     
1021 |     const cotθ = cosϕcosθ/cosϕsinθ;
1022 |     const θ=Math.atan(1/cotθ)/rad;
1023 |     const λ=-(be.H-θ);
1024 |     const sinϕ=η*cosd+ζ*sind;
1025 |     const ϕ=Math.asin(sinϕ)/rad;
1026 | 
1027 |     return {lat: ϕ, lon: λ}
1028 |     
1029 | }
1030 | 
1031 | function getGreatestEclipseTime(e){
1032 |     //From Explanatory Supplement 1961ed
1033 |     const be0=getElements(e,0,0,0,0);
1034 | 
1035 |     const x0xpy0yp=be0.X*be0.Xp + be0.Y*be0.Yp;
1036 |     const n1=be0.Xp*be0.Xp + be0.Yp*be0.Yp;
1037 |     const t=-(be0.X*be0.Xp + be0.Y*be0.Yp)/n1;
1038 | 
1039 |     return t;
1040 | }
1041 | 
1042 | 
1043 | /*
1044 |  * Determines the greatest eclipse for the particular elements
1045 |  * Input
1046 |  * elements: Besselian Elements for the eclipse
1047 |  */
1048 | export function getGreatestEclipse(elements){
1049 |     const t=getGreatestEclipseTime(elements);
1050 |     return(computeCentralLatLonForTime(elements,t+elements.T0));
1051 | }
1052 | 
1053 | function getPenumbraStartStopTimes(elements){
1054 |     //From Explanatory Supplement 1961ed
1055 |     const be=getElements(elements,0,0,0,0);
1056 |     const rad=Math.PI/180;
1057 |     const e=Math.sqrt(0.00672267);
1058 |     
1059 |     be.x=be.X;
1060 |     be.y=be.Y;
1061 |     be.xp=be.Xp;
1062 |     be.yp=be.Yp;
1063 |     be.l1=be.L1;
1064 |     
1065 |     be.μ=be.H;
1066 |     
1067 |     const ρ1=Math.sqrt(1-e*e*Math.cos(be.d*rad)*Math.cos(be.d*rad));
1068 |     const m=Math.sqrt(be.x*be.x + be.y*be.y);
1069 |     
1070 |     const y1=be.y/ρ1;
1071 |     const m1=Math.sqrt(be.x*be.x + y1*y1);
1072 |     
1073 |     const ρ=m/m1;
1074 |     
1075 |     const n1=Math.sqrt(be.xp*be.xp + be.yp*be.yp);
1076 |     const sinψ = (be.x*be.yp - be.xp*be.y)/(n1*(be.l1 + ρ));
1077 |     const ψ=Math.asin(sinψ);
1078 |     const cosψ=Math.cos(ψ);  //use negatvie for first contact, and positive for last contact
1079 |     
1080 |     const t1=((be.l1 + ρ)/n1)*(-cosψ) - (be.x*be.xp + be.y*be.yp)/(n1*n1);
1081 |     const t2=((be.l1 + ρ)/n1)*( cosψ) - (be.x*be.xp + be.y*be.yp)/(n1*n1);
1082 | 
1083 |     return {start: t1, end: t2};
1084 | }
1085 | 
1086 | function getPenumbraStartStopPoints(be){
1087 |     const rad=Math.PI/180;
1088 |     const e=Math.sqrt(0.00672267);
1089 |     
1090 |     be.x=be.X;
1091 |     be.y=be.Y;
1092 |     be.μ=be.H;
1093 |     
1094 |     //P220
1095 |     const ρ1=Math.sqrt(1-e*e*Math.cos(be.d*rad)*Math.cos(be.d*rad));
1096 |     const ρ2=(1-e*e*Math.sin(be.d*rad)*Math.sin(be.d*rad));
1097 |     const sind1=Math.sin(be.d*rad)/ρ1;
1098 |     const cosd1=Math.sqrt(1-e*e)*Math.cos(be.d*rad)/ρ1;
1099 |     const sind1d2=e*e*Math.sin(be.d*rad)*Math.cos(be.d*rad)/(ρ1*ρ2);
1100 |     const cosd1d2=Math.sqrt(1-e*e)/(ρ1*ρ2);
1101 |     const m=Math.sqrt(be.x*be.x + be.y*be.y);
1102 |     
1103 |     const y1=be.y/ρ1;
1104 |     const m1=Math.sqrt(be.x*be.x + y1*y1);
1105 |     
1106 |     const ξ=be.x/m1;
1107 |     const η1=y1/m1;
1108 |     const ζ1=0;
1109 |     
1110 |     const cosϕ1sinθ=ξ;
1111 |     const cosϕ1cosθ=-η1*sind1+ζ1*cosd1;
1112 |     const sinϕ1=     η1*cosd1+ζ1*sind1;
1113 |     const tanθ=cosϕ1sinθ/cosϕ1cosθ;
1114 |     const θ=Math.atan2(cosϕ1sinθ,cosϕ1cosθ)/rad;
1115 |     const λ=-(be.μ-θ);
1116 |     const tanϕ1=(η1*cosd1+ζ1*sind1)/(ξ/Math.sin(θ*rad));
1117 |     const tanϕ=tanϕ1/Math.sqrt(1-e*e);
1118 |     const ϕ=Math.atan(tanϕ)/rad;
1119 | 
1120 |     return {lat: ϕ, lon: λ};
1121 |     
1122 | }
1123 | 
1124 | /*
1125 |  * Determines the start and end times for the Penumbra of the given eclipse
1126 |  * Input
1127 |  * elements: Besselian Elements for the given eclipse
1128 |  */
1129 | export function getPenumbraBeginAndEndInfo(elements){
1130 |     const times=getPenumbraStartStopTimes(elements);
1131 |     const start=getPenumbraStartStopPoints(getElements(elements,times.start,0,0,0));
1132 |     const end=getPenumbraStartStopPoints(getElements(elements,times.end,0,0,0));
1133 |     
1134 |     //const baseTime=elements.T0+elements.Δt/60.0/60.0;
1135 |     return {
1136 |             start: {lat: start.lat, lon: start.lon, time: times.start},
1137 |             end: {lat: end.lat, lon: end.lon, time: times.end}
1138 |         };
1139 | }
1140 | 


--------------------------------------------------------------------------------
/eclipsemap.webmanifest:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "Eclipse Map - Celestial Programming",
 3 |     "short_name": "Eclipse Map",
 4 |     "description": "A map showing the path and local circumstances for the 2024 Solar Eclipse.",
 5 |     "icons": [
 6 |       {
 7 |         "src": "images/icon-32.png",
 8 |         "sizes": "32x32",
 9 |         "type": "image/png"
10 |       },
11 |       {
12 |         "src": "images/icon-512.png",
13 |         "sizes": "512x512",
14 |         "type": "image/png"
15 |       }
16 |     ],
17 |     "start_url": "/apps/SolarEclipseViewer/viewer.html",
18 |     "display": "fullscreen",
19 |     "theme_color": "#B12A34",
20 |     "background_color": "#B12A34"
21 |   }


--------------------------------------------------------------------------------
/images/bwmap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gmiller123456/solareclipseviewer/5c1cc8d1fc0f8d7902f15eca821e3e941d62dc65/images/bwmap.png


--------------------------------------------------------------------------------
/images/circle site.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gmiller123456/solareclipseviewer/5c1cc8d1fc0f8d7902f15eca821e3e941d62dc65/images/circle site.png


--------------------------------------------------------------------------------
/images/icon-32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gmiller123456/solareclipseviewer/5c1cc8d1fc0f8d7902f15eca821e3e941d62dc65/images/icon-32.png


--------------------------------------------------------------------------------
/images/icon-512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gmiller123456/solareclipseviewer/5c1cc8d1fc0f8d7902f15eca821e3e941d62dc65/images/icon-512.png


--------------------------------------------------------------------------------
/images/map.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gmiller123456/solareclipseviewer/5c1cc8d1fc0f8d7902f15eca821e3e941d62dc65/images/map.png


--------------------------------------------------------------------------------
/images/satellite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gmiller123456/solareclipseviewer/5c1cc8d1fc0f8d7902f15eca821e3e941d62dc65/images/satellite.png


--------------------------------------------------------------------------------
/images/screenshot1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gmiller123456/solareclipseviewer/5c1cc8d1fc0f8d7902f15eca821e3e941d62dc65/images/screenshot1.png


--------------------------------------------------------------------------------
/images/screenshot2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gmiller123456/solareclipseviewer/5c1cc8d1fc0f8d7902f15eca821e3e941d62dc65/images/screenshot2.png


--------------------------------------------------------------------------------
/images/screenshot3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gmiller123456/solareclipseviewer/5c1cc8d1fc0f8d7902f15eca821e3e941d62dc65/images/screenshot3.png


--------------------------------------------------------------------------------
/images/topo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gmiller123456/solareclipseviewer/5c1cc8d1fc0f8d7902f15eca821e3e941d62dc65/images/topo.png


--------------------------------------------------------------------------------
/overlay.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | Greg Miller gmiller@gregmiller.net 2022
  3 | https://www.celestialprogramming.com/
  4 | Released as public domain
  5 | */
  6 | 
  7 | export function drawOverlay(ctx,map,eclipseData){
  8 |     const zoom=map.getZoom();
  9 |     
 10 |     ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
 11 |     const central=drawLineOverlay(ctx,map,eclipseData.centralCurve, {color: 'black', weight: 2});
 12 |     const limitNorthT=drawLineOverlay(ctx,map,eclipseData.northTotalityLimits, {color: 'red', weight: 2});
 13 |     const limitSouthT=drawLineOverlay(ctx,map,eclipseData.southTotalityLimits, {color: 'red', weight: 2});
 14 |     const limitNorthP=drawLineOverlay(ctx,map,eclipseData.northPartialLimits, {color: 'black', weight: 1,});
 15 |     const limitSouthP=drawLineOverlay(ctx,map,eclipseData.southPartialLimits, {color: 'black', weight: 1});
 16 | 
 17 |     if(zoom>=4){
 18 |         ctx.font = "1em Georgia";
 19 |         ctx.textAlign="center";
 20 |         ctx.textBaseline="bottom";
 21 |         drawLabel(ctx,map,"Totality Center Line",central);
 22 | 
 23 |         ctx.textBaseline="top";
 24 |         drawLabel(ctx,map,"Partial Edge",limitSouthP);
 25 |         drawLabel(ctx,map,"Totality Edge",limitSouthT);
 26 | 
 27 |         ctx.textBaseline="bottom";
 28 |         drawLabel(ctx,map,"Totality Edge",limitNorthT);
 29 |         drawLabel(ctx,map,"Partial Edge",limitNorthP);
 30 |     }
 31 | 
 32 |     if(eclipseData.durationLines!=null && document.getElementById("showDurationLinesCheckbox").checked){
 33 |         for(let i=0;i<eclipseData.durationLines.length;i++){
 34 |             const l1=drawLineOverlay(ctx,map,eclipseData.durationLines[i][0], {color: '#00000099', weight: 1});
 35 |             const l2=drawLineOverlay(ctx,map,eclipseData.durationLines[i][1], {color: '#00000099', weight: 1});
 36 |             if(zoom>=7){
 37 |                 ctx.font = ".75em Georgia";
 38 |                 ctx.textBaseline="top";
 39 |                 drawLabel(ctx,map,""+(i+1)+" minute",l1);
 40 |                 ctx.textBaseline="bottom";
 41 |                 drawLabel(ctx,map,""+(i+1)+" minute",l2);
 42 |             }
 43 | 
 44 |         }
 45 |     }
 46 | }
 47 | 
 48 | function drawLabel(ctx,map,text,points){
 49 |     const o=map._getMapPanePos();
 50 |     const o1=map.getPixelOrigin();
 51 |     const p1=map.project(points.first);
 52 |     const p2=map.project(points.last);
 53 | 
 54 |     const x1=p1.x+(o.x-o1.x);
 55 |     const x2=p2.x+(o.x-o1.x);
 56 |     const y1=p1.y+(o.y-o1.y);
 57 |     const y2=p2.y+(o.y-o1.y);
 58 | 
 59 |     const angle=Math.atan2(y2-y1,x2-x1);
 60 |     //ctx.strokeStyle="rgba(255,255,255,.75)";
 61 | 
 62 |     ctx.save();
 63 |     ctx.translate(x1,y1);
 64 |     ctx.rotate(angle);
 65 | 
 66 |     //ctx.strokeText(text,0,0);
 67 |     ctx.fillText(text,0,0);
 68 | 
 69 |     ctx.restore()
 70 | }
 71 | 
 72 | function drawLineOverlay(ctx,map,points,options){
 73 |     const bounds=map.getBounds();
 74 |     const n=bounds._northEast.lat+.01;
 75 |     const e=bounds._northEast.lng+.01;
 76 |     const s=bounds._southWest.lat-.01;
 77 |     const w=bounds._southWest.lng-.01;
 78 |     
 79 |     let firstPoint=null;
 80 |     let lastPoint=null;
 81 | 
 82 |     const o=map._getMapPanePos();
 83 |     const o1=map.getPixelOrigin();
 84 | 
 85 |     ctx.beginPath();
 86 |     ctx.strokeStyle=options.color;
 87 |     ctx.lineWidth=options.weight;
 88 | 
 89 |     const p=map.project(points[0]);
 90 |     ctx.moveTo(p.x+(o.x-o1.x),p.y+(o.y-o1.y));
 91 | 
 92 |     for(let i=1;i<points.length;i++){
 93 |         const t=points[i];
 94 |         if(t.lat<=n && t.lat>=s  && t.lng<=e && t.lng>=w){
 95 |             if(firstPoint==null) firstPoint=i;
 96 |             lastPoint=i;
 97 |             const p=map.project(points[i]);
 98 |             ctx.lineTo(p.x+(o.x-o1.x),p.y+(o.y-o1.y));
 99 |         }
100 |     }
101 |     ctx.stroke();
102 |     const mid=Math.floor((lastPoint-firstPoint)/2)+firstPoint;
103 |     return {first: points[mid], last: points[mid+1]};
104 | }
105 | 


--------------------------------------------------------------------------------
/todo.txt:
--------------------------------------------------------------------------------
 1 | Standalone countdown timer
 2 | Save markers in local storage
 3 | Jitter on penumbra shadow animation
 4 | 
 5 | Weather
 6 | Cloud forecast overlay (display % in info list)
 7 | 
 8 | Search for major cities
 9 | Window resize doesn't work well - Appears to be an issue with map bounds checking
10 | Allow link to location, time, eclipse, etc (and Time Zone)
11 | Time zone lookup fails after crossing the international date line
12 | Account for partial limit crossing pole
13 | Rise and set curves need to account for Earth flattening
14 | 
15 | 


--------------------------------------------------------------------------------
/tzmap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gmiller123456/solareclipseviewer/5c1cc8d1fc0f8d7902f15eca821e3e941d62dc65/tzmap.png


--------------------------------------------------------------------------------
/viewer.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | <head>
  4 |     <title>Solar Eclipse Map</title>
  5 |     <meta charset="utf-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
  7 |     <link rel="manifest" href="eclipsemap.webmanifest">
  8 |     <link rel="icon" href="images/icon-32.png">
  9 |     <style>
 10 |         .linklike{
 11 |             color: blue;
 12 |             text-decoration: underline;
 13 |             cursor: pointer;
 14 |         }
 15 |         .buttonlike{
 16 |             font-size: 1.5em;
 17 |             padding: 5px;
 18 |             display: inline-block;
 19 |         }
 20 | 
 21 |         #map {
 22 |             z-index: 1;
 23 |             position: absolute;
 24 |             height: 100vh;
 25 |             width: 100vw;
 26 |         }
 27 |         body{
 28 |             padding:0px;
 29 |             margin:0px;
 30 |         }
 31 |         #overlayCanvas{
 32 |             position: absolute;
 33 |             z-index: 100;
 34 |             pointer-events: none;
 35 |         }
 36 | 
 37 |         #infoBox{
 38 |             position: absolute;
 39 |             z-index:100;
 40 |             top: 20px;
 41 |             margin-left: 10px;
 42 |             border-radius: 10px;
 43 |             background-color: rgba(255,255,255,.5);
 44 |         }
 45 | 
 46 |         #countdownDiv{
 47 |             display: inline-block;
 48 |             vertical-align: top;
 49 |         }
 50 |         #data{
 51 |             display: inline-block;
 52 |         }
 53 | 
 54 |         .dataLabel{
 55 |             text-align: right;
 56 |         }
 57 |         .duration{
 58 |             font-size: 2em;
 59 |             font-weight: bold;
 60 |         }
 61 |         #mapselectdiv{
 62 |             padding: 10px;
 63 |             border-radius: 10px;
 64 |             position: fixed;
 65 |             bottom: 10px;
 66 |             left: 10px;
 67 |             z-index: 100;
 68 |             background-color: rgba(255,255,255,.75);
 69 |             border:solid black;
 70 |         }
 71 | 
 72 |         @media screen and (max-width:800px){
 73 |             #infoBox{
 74 |                 font-size: .5em;
 75 |             }
 76 |             .linklike{
 77 |                 font-size: 1.5em;
 78 |             }
 79 |             .buttonlike{
 80 |                 font-size: 2.5em;
 81 |             }
 82 |         }
 83 | 
 84 |         @media screen and (max-height:500px){
 85 |             #infoBox{
 86 |                 font-size: .5em;
 87 |             }
 88 |         }
 89 | 
 90 |         .loadingSpinner {
 91 |             width: 1em;
 92 |             height: 1em;
 93 |             border: 2px solid #000;
 94 |             border-bottom-color: transparent;
 95 |             border-radius: 50%;
 96 |             display: inline-block;
 97 |             box-sizing: border-box;
 98 |             animation: loadingSpinnerRotate 1s linear infinite;
 99 |         }
100 | 
101 |         @keyframes loadingSpinnerRotate {
102 |             0% {
103 |                 transform: rotate(0deg);
104 |             }
105 |             100% {
106 |                 transform: rotate(360deg);
107 |             }
108 |         } 
109 | 
110 |         #controls{
111 |             z-index: 99;
112 |             position: absolute;
113 |             width: 99%;
114 |             display: flex;
115 |         }
116 | 
117 |         #timeSlider{
118 |             width: 100%;
119 |             flex-grow: 100;
120 |         }
121 | 
122 |         #timeSliderLabel{
123 |             background: #ffffff99;
124 |             border-radius: 5px;
125 |             padding: 2px;
126 |             margin-left: 5px;
127 |         }
128 | 
129 |         input[type="range"]{
130 |             -webkit-appearance: none;
131 |             appearance: none;
132 |             background: transparent;
133 |             cursor: pointer;
134 |             
135 |         }
136 | 
137 |         /***** Chrome, Safari, Opera, and Edge Chromium *****/
138 |         input[type="range"]::-webkit-slider-runnable-track {
139 |         background: #053a5f;
140 |         height: 0.5rem;
141 |         }
142 | 
143 |         /******** Firefox ********/
144 |         input[type="range"]::-moz-range-track {
145 |         background: #053a5f;
146 |         height: 0.5rem;
147 |         }        
148 |         /***** Thumb Styles *****/
149 |         /***** Chrome, Safari, Opera, and Edge Chromium *****/
150 |         input[type="range"]::-webkit-slider-thumb {
151 |         -webkit-appearance: none; /* Override default look */
152 |         appearance: none;
153 |         background-color: white;
154 |         height: 1rem;
155 |         width: .5rem;    
156 |         }
157 |     </style>
158 | </head>
159 | <body>
160 |     <div id="map"></div>
161 |     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
162 |     integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
163 |     crossorigin=""/>
164 |     
165 |     <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
166 |         integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
167 |         crossorigin=""></script>
168 |     
169 |     <canvas id="overlayCanvas"></canvas>
170 |     <div id="mapselectdiv">
171 |         <img id="setMapImg" src="images/map.png">
172 |         <img id="setSatImg" src="images/satellite.png">
173 |         <img id="setTopoImg" src="images/topo.png">
174 |         <img id="setBwMapImg" src="images/bwmap.png">
175 |     </div>
176 |     <div id="controls">
177 |         <div style="flex-grow: 100;">
178 |             <input id="timeSlider" min=-3 max=3 step=.001 type=range>
179 |         </div>
180 |         <label id="timeSliderLabel" for="timeSlider">12:43:02 pm</label>
181 |     </div>
182 |     <div id="infoBox">
183 |         <div id="data">
184 |             <table id="localCircumstancesTable">
185 |                 <tr><td class="dataLabel">Time Zone:</td><td id="timeZoneDisplay"></td></tr>
186 |                 <tr><td class=dataLabel>Lat:</td><td class=dataField></td></tr>
187 |                 <tr><td class=dataLabel>Lon:</td><td class=dataField></td></tr>
188 |                 <tr><td class=dataLabel>Sun Alt:</td><td class=dataField></td></tr>
189 |                 <tr><td class=dataLabel>Magnitude:</td><td class=dataField></td></tr>
190 |                 <tr><td class=dataLabel>Partial Start:</td><td class=dataField></td></tr>
191 |                 <tr><td class=dataLabel>Partial End:</td><td class=dataField></td></tr>
192 |                 <tr><td class=dataLabel>Partial Duration:</td><td class=dataField></td></tr>
193 |                 <tr><td class=dataLabel>Totality Start:</td><td class=dataField></td></tr>
194 |                 <tr><td class=dataLabel>Maximum Eclipse:</td><td class=dataField></td></tr>
195 |                 <tr><td class=dataLabel>Totality End:</td><td class=dataField></td></tr>
196 |                 <tr><td class=dataLabel>Totality Duration:</td><td class="dataField duration"></td></tr>
197 |             </table>
198 |             <br>
199 |             <div id="userControls">
200 |                 <center>
201 |                     <input type=button id="clearMarkersButton" value="Clear Markers"><br>
202 |                     <input type=button id="locationButton" value="Go To Current Location"><br>
203 |                     <table>
204 |                         <tr><td align="right"><label for="autoUpdatePosition">Auto Update Location</label></td><td><input type=checkbox id="autoUpdatePosition"></td></tr>
205 |                         <tr><td align="right"><label for="showDurationLinesCheckbox">Show Duration Lines</label></td><td><input type=checkbox id="showDurationLinesCheckbox" style="visibility: hidden;" checked><span id='durationLinesLoadingSpinner' class="loadingSpinner"></span><br></td></tr>
206 |                         <tr><td align="right"><label for="showCountdownCheckbox">Show Countdown</label></td><td><input type=checkbox id="showCountdownCheckbox" checked></td></tr>
207 |                         <tr><td align="right"><label for="realTimeCheckbox">Real Time Shadow</label></td><td><input type=checkbox id="realTimeCheckbox"></td></tr>
208 |                     </table>
209 |                 </center>
210 |             </div>
211 |         </div>
212 |         <div id="countdownDiv">
213 |             <table id="countdownTable">
214 |                 <tr><td class="dataLabel">Partial Start:</td><td class="dataField"></td></tr>
215 |                 <tr><td class="dataLabel">Totality Start:</td><td class="dataField"></td></tr>
216 |                 <tr><td class="dataLabel">Totality End:</td><td class="dataField"></td></tr>
217 |                 <tr><td class="dataLabel">Partial End:</td><td class="dataField"></td></tr>
218 |             </table>
219 |             <br><br>
220 |             <center>
221 |                 <table>
222 |                     <tr><td align="right"><label for="tenSecondWarning">Ten Second Alarms</label></td><td><input type=checkbox checked id="tenSecondWarning" ></td></tr>
223 |                     <tr><td align="right"><label for="oneMinuteWarning">One Minute Alarms</label></td><td><input type=checkbox checked id="oneMinuteWarning" ></td></tr>
224 |                     <tr><td align="right"><label for="fiveMinuteWarning">Five Minute Alarms</label></td><td><input type=checkbox checked id="fiveMinuteWarning" ></td></tr>
225 |                 </table>
226 |                 <input type="button" id="warningButton" value="Test Alarm Tone"><br><br>
227 |                 <a class="linklike" id="simulationHref">Simulation Mode</a>
228 |                 <div style="display: none" id="simulationModeDiv">
229 |                     <a onclick="simulationTimeClick(-1);" class="linklike buttonlike">-01</a>
230 |                     <a onclick="simulationTimeClick(1);" class="linklike buttonlike">+01</a> Min<br>
231 |                     <a onclick="simulationTimeClick(-5);" class="linklike buttonlike">-05</a>
232 |                     <a onclick="simulationTimeClick(5);" class="linklike buttonlike">+05</a> Min<br>
233 |                     <a onclick="simulationTimeClick(-30);" class="linklike buttonlike">-30</a>
234 |                     <a onclick="simulationTimeClick(30);" class="linklike buttonlike">+30</a> Min
235 |                 </div>
236 |             </center>
237 | </div>
238 |     </div>
239 | 
240 | <script>
241 |     if("serviceWorker" in navigator) {
242 |         window.addEventListener('load', () => {
243 |             navigator.serviceWorker.register("ServiceWorker.js")
244 |                 .then((serviceWorkerReg) => { 
245 |                     console.log(`registered ${serviceWorkerReg}`) 
246 |                 })
247 |                 .catch((e) => {
248 |                     console.log(`Error registring ${e}`) 
249 |                 })
250 |         })
251 |     }
252 | 
253 | </script>
254 | <script type="module">
255 | /*
256 | Greg Miller gmiller@gregmiller.net 2022
257 | https://www.celestialprogramming.com/
258 | Released as public domain
259 | */
260 | 
261 | import {initUI,simulationTimeClick} from "./UI.js";
262 | initUI();
263 | 
264 | window.simulationTimeClick=simulationTimeClick;
265 | </script>
266 | </body>
267 | </html>


--------------------------------------------------------------------------------