From a9377855a291cff50703e3723925e163e5525dc5 Mon Sep 17 00:00:00 2001 From: Paul Jones Date: Fri, 13 Sep 2024 14:47:40 -0600 Subject: [PATCH] Clean up Maps, using Leaflet instead --- assets/images/iss-icon.png | Bin 0 -> 6416 bytes index.html | 24 ++++++++++---------- scripts/index-page.js | 45 ++++++++++++++++++++++++++++++------- scripts/iss-api.js | 14 +++++++++--- styles/home.css | 14 ++++++++++-- styles/home.css.map | 2 +- styles/home.scss | 15 +++++++++++-- 7 files changed, 86 insertions(+), 28 deletions(-) create mode 100644 assets/images/iss-icon.png diff --git a/assets/images/iss-icon.png b/assets/images/iss-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..6c493f23cd8fdf178c59a7762c487edb93928117 GIT binary patch literal 6416 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 literal 0 HcmV?d00001 diff --git a/index.html b/index.html index fa46aa6..f446904 100644 --- a/index.html +++ b/index.html @@ -3,14 +3,14 @@ - HÆKÆSHIP: Extraterrestrial Networking Site - + +
@@ -63,9 +63,7 @@

Our Past and Now

@@ -105,13 +103,15 @@

Buzz-Connect With Us

- - + + + + - - - + + + + - - \ No newline at end of file + \ No newline at end of file diff --git a/scripts/index-page.js b/scripts/index-page.js index 34eb86d..2ab5c96 100644 --- a/scripts/index-page.js +++ b/scripts/index-page.js @@ -1,29 +1,58 @@ import { ISSApi } from "./iss-api.js"; let map; -//holds the ISS marker let marker; const issApiInstance = new ISSApi; - - const getIssPositionApiCall = async () => { try { const issPosition = await issApiInstance.getIssPosition(); return issPosition; - } catch(error){ + } catch (error) { console.error(error) } } +let prevPosition = null; + const issPosititoData = async () => { - const position = await getIssPositionApiCall(); - const { latitude, longitude } = position.iss_position; - const iframe = document.getElementById('map-iframe'); - iframe.src = `https://www.google.com/maps/embed/v1/place?key=AIzaSyB5IlpYhATifj2bSew0y2eahEjxri15PuM&q=${latitude},${longitude}&zoom=4`; + try { + const { latitude, longitude } = await issApiInstance.getIssPosition(); + + const issIcon = L.icon({ + iconUrl: './assets/images/iss-icon.png', + iconSize: [32, 32], + iconAnchor: [16, 16], + }); + + if (!map) { + map = L.map('map').setView([latitude, longitude], 3); + L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {}).addTo(map); + marker = L.marker([latitude, longitude], {icon: issIcon, rotationAngle: 0, rotationOrigin: 'center center'}).addTo(map); + } else { + const newLatLng = [latitude, longitude]; + if (prevPosition) { + const angle = calculateAngle(prevPosition, newLatLng); + marker.setRotationAngle(angle); + } + map.setView(newLatLng, 3); + marker.setLatLng(newLatLng); + } + prevPosition = [latitude, longitude]; + } catch (error) { + console.error("Error updating ISS position:", error); + } +} + +function calculateAngle(prev, next) { + const dx = next[1] - prev[1]; + const dy = next[0] - prev[0]; + const angle = Math.atan2(dy, dx) * 180 / Math.PI; + return angle; } await issPosititoData(); +setInterval(issPosititoData, 10000); //auto-response const formResponse = document.querySelector(".form__response"); diff --git a/scripts/iss-api.js b/scripts/iss-api.js index bca6425..0d86c65 100644 --- a/scripts/iss-api.js +++ b/scripts/iss-api.js @@ -1,10 +1,18 @@ export class ISSApi { constructor() { - this.baseUrl = "http://api.open-notify.org/iss-now.json"; + this.baseUrl = "https://api.wheretheiss.at/v1/satellites/25544"; } async getIssPosition() { - const issPosition = await axios.get(this.baseUrl); - return issPosition.data; + try { + const response = await axios.get(this.baseUrl); + return { + latitude: response.data.latitude, + longitude: response.data.longitude + }; + } catch (error) { + console.error("Error fetching ISS position:", error); + throw error; + } } } \ No newline at end of file diff --git a/styles/home.css b/styles/home.css index 9dab784..c930ec2 100644 --- a/styles/home.css +++ b/styles/home.css @@ -158,11 +158,21 @@ h2 { cursor: pointer; } -#map-iframe { +.leaflet-marker-icon { + background: none; + border: none; + transform-origin: center center; +} + +#map { width: 100%; + height: 20vw; border-radius: 25px; border: 5px solid #e5e5e5; - height: 30rem; +} +#map .leaflet-control-zoom, +#map .leaflet-control-attribution { + display: none; } #button-up { diff --git a/styles/home.css.map b/styles/home.css.map index 7a686d2..f479cbb 100644 --- a/styles/home.css.map +++ b/styles/home.css.map @@ -1 +1 @@ -{"version":3,"sources":["home.scss","home.css"],"names":[],"mappings":"AAAA;EACI,sBAAA;EACA,uBAAA;EACA,aAAA;ACCJ;;ADEA;EACI,mBAAA;ACCJ;;ADEA;EACI,yBAAA;EACA,oBAAA;EACA,YAAA;ACCJ;;ADEA;EACI,uBAAA;EACA,cAAA;ACCJ;;ADEA;EACI,qBAAA;EACA,cAAA;ACCJ;ADCI;EACI,cAAA;ACCR;;ADGA;EACI,iBAAA;EACA,kBAAA;EACA,oBAAA;ACAJ;;ADGA;EACI,uBAAA;EACA,mBAAA;ACAJ;ADEI;EACI,aAAA;EACA,8BAAA;ACAR;ADGI;EAII,iBAAA;ACJR;ADCQ;EACI,cAAA;ACCZ;ADKQ;EACI,aAAA;EACA,mBAAA;ACHZ;ADOI;EACI,qBAAA;EACA,kBAAA;ACLR;;ADWA;EACI,aAAA;ACRJ;ADSI;EACI,eAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;ACPR;;ADYI;EACI,aAAA;EACA,kBAAA;ACTR;ADWI;EACI,eAAA;EACA,kBAAA;EACA,iBAAA;ACTR;ADWI;EACI,YAAA;EACA,aAAA;EACA,oBAAA;KAAA,iBAAA;EACA,yBAAA;EACA,mBAAA;ACTR;ADWI;EACI,YAAA;EACA,aAAA;EACA,kBAAA;ACTR;;ADeI;EACI,WAAA;EACA,aAAA;EACA,oBAAA;KAAA,iBAAA;EACA,yBAAA;EACA,mBAAA;ACZR;ADeI;EACI,aAAA;EACA,qCAAA;EACA,SAAA;ACbR;ADgBI;EACI,qBAAA;ACdR;ADiBI;EACI,WAAA;EACA,iBAAA;EACA,oBAAA;KAAA,iBAAA;EACA,yBAAA;EACA,mBAAA;ACfR;;ADoBI;EACI,aAAA;ACjBR;ADmBI;EACI,UAAA;EACA,YAAA;EACA,oBAAA;EACA,0BAAA;EACA,eAAA;EACA,uBAAA;ACjBR;ADmBI;EACI,eAAA;ACjBR;ADmBI;EACI,UAAA;EACA,aAAA;EACA,sBAAA;ACjBR;ADoBI;EACI,qBAAA;AClBR;ADqBI;EACI,YAAA;EACA,aAAA;EACA,yBAAA;EACA,mBAAA;EACA,mBAAA;ACnBR;ADqBQ;EACI,YAAA;ACnBZ;ADuBI;EACI,YAAA;EACA,YAAA;EACA,mBAAA;EACA,yBAAA;EACA,uBAAA;EACA,gBAAA;ACrBR;ADsBQ;EACI,eAAA;ACpBZ;;ADyBA;EACI,WAAA;EACA,mBAAA;EACA,yBAAA;EACA,aAAA;ACtBJ;;ADyBA;EACI,eAAA;EACA,cAAA;EACA,aAAA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,uBAAA;ACtBJ;;ADyBA;EACI,6BAAA;EACA,oDAAA;EACA,eAAA;EACA,WAAA;EACA,sBAAA;EACA,eAAA;ACtBJ;;ADyBA;EACI,WAAA;EACA,YAAA;EACA,gBAAA;EACA,MAAA;EACA,OAAA;EACA,kBAAA;EACA,WAAA;ACtBJ;ADwBI;EACI,kBAAA;EACA,mBAAA;EACA,kBAAA;EACA,kFAAA;EAIA,kCAAA;ACzBR;AD4BI;EACI;IAAI,UAAA;ECzBV;ED0BM;IAAK,UAAA;ECvBX;EDwBM;IAAK,UAAA;ECrBX;EDsBM;IAAM,UAAA;ECnBZ;AACF","file":"home.css"} \ No newline at end of file +{"version":3,"sources":["home.scss","home.css"],"names":[],"mappings":"AAAA;EACI,sBAAA;EACA,uBAAA;EACA,aAAA;ACCJ;;ADEA;EACI,mBAAA;ACCJ;;ADEA;EACI,yBAAA;EACA,oBAAA;EACA,YAAA;ACCJ;;ADEA;EACI,uBAAA;EACA,cAAA;ACCJ;;ADEA;EACI,qBAAA;EACA,cAAA;ACCJ;ADCI;EACI,cAAA;ACCR;;ADGA;EACI,iBAAA;EACA,kBAAA;EACA,oBAAA;ACAJ;;ADGA;EACI,uBAAA;EACA,mBAAA;ACAJ;ADEI;EACI,aAAA;EACA,8BAAA;ACAR;ADGI;EAII,iBAAA;ACJR;ADCQ;EACI,cAAA;ACCZ;ADKQ;EACI,aAAA;EACA,mBAAA;ACHZ;ADOI;EACI,qBAAA;EACA,kBAAA;ACLR;;ADWA;EACI,aAAA;ACRJ;ADSI;EACI,eAAA;EACA,kBAAA;EACA,YAAA;EACA,eAAA;ACPR;;ADYI;EACI,aAAA;EACA,kBAAA;ACTR;ADWI;EACI,eAAA;EACA,kBAAA;EACA,iBAAA;ACTR;ADWI;EACI,YAAA;EACA,aAAA;EACA,oBAAA;KAAA,iBAAA;EACA,yBAAA;EACA,mBAAA;ACTR;ADWI;EACI,YAAA;EACA,aAAA;EACA,kBAAA;ACTR;;ADeI;EACI,WAAA;EACA,aAAA;EACA,oBAAA;KAAA,iBAAA;EACA,yBAAA;EACA,mBAAA;ACZR;ADeI;EACI,aAAA;EACA,qCAAA;EACA,SAAA;ACbR;ADgBI;EACI,qBAAA;ACdR;ADiBI;EACI,WAAA;EACA,iBAAA;EACA,oBAAA;KAAA,iBAAA;EACA,yBAAA;EACA,mBAAA;ACfR;;ADoBI;EACI,aAAA;ACjBR;ADmBI;EACI,UAAA;EACA,YAAA;EACA,oBAAA;EACA,0BAAA;EACA,eAAA;EACA,uBAAA;ACjBR;ADmBI;EACI,eAAA;ACjBR;ADmBI;EACI,UAAA;EACA,aAAA;EACA,sBAAA;ACjBR;ADoBI;EACI,qBAAA;AClBR;ADqBI;EACI,YAAA;EACA,aAAA;EACA,yBAAA;EACA,mBAAA;EACA,mBAAA;ACnBR;ADqBQ;EACI,YAAA;ACnBZ;ADuBI;EACI,YAAA;EACA,YAAA;EACA,mBAAA;EACA,yBAAA;EACA,uBAAA;EACA,gBAAA;ACrBR;ADsBQ;EACI,eAAA;ACpBZ;;ADyBA;EACI,gBAAA;EACA,YAAA;EACA,+BAAA;ACtBJ;;ADyBA;EACI,WAAA;EACA,YAAA;EACA,mBAAA;EACA,yBAAA;ACtBJ;ADwBI;;EAEI,aAAA;ACtBR;;AD0BA;EACI,eAAA;EACA,cAAA;EACA,aAAA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,uBAAA;ACvBJ;;AD0BA;EACI,6BAAA;EACA,oDAAA;EACA,eAAA;EACA,WAAA;EACA,sBAAA;EACA,eAAA;ACvBJ;;AD0BA;EACI,WAAA;EACA,YAAA;EACA,gBAAA;EACA,MAAA;EACA,OAAA;EACA,kBAAA;EACA,WAAA;ACvBJ;ADyBI;EACI,kBAAA;EACA,mBAAA;EACA,kBAAA;EACA,kFAAA;EAIA,kCAAA;AC1BR;AD6BI;EACI;IAAI,UAAA;EC1BV;ED2BM;IAAK,UAAA;ECxBX;EDyBM;IAAK,UAAA;ECtBX;EDuBM;IAAM,UAAA;ECpBZ;AACF","file":"home.css"} \ No newline at end of file diff --git a/styles/home.scss b/styles/home.scss index fe284a8..3e8a8ff 100644 --- a/styles/home.scss +++ b/styles/home.scss @@ -178,11 +178,22 @@ h2 { } } -#map-iframe { +.leaflet-marker-icon { + background: none; + border: none; + transform-origin: center center; +} + +#map { width: 100%; + height: 20vw; border-radius: 25px; border: 5px solid #e5e5e5; - height: 30rem; + + .leaflet-control-zoom, + .leaflet-control-attribution { + display: none; + } } #button-up {