Star Map Filter - en webbaserad stjärnkarta med avancerad filtrering

Har du någonsin tittat upp på natthimlen och undrat vilka stjärnor du faktiskt ser? Som både utvecklare och astronomiintresserad bestämde jag mig för att bygga något som kombinerar dessa två passioner - ett interaktivt verktyg som gör rymden mer tillgänglig för alla.




Projektet: Star Map Filter

Efter flera veckors kodande är jag stolt över att presentera Star Map Filter starmapfilter.netlify.app - en webbaserad stjärnkarta som visar vilka stjärnor som är synliga från din exakta position i realtid.


Vad gör appen speciell?

Platsbaserad astronomi

Appen använder din GPS-position för att beräkna exakt vilka stjärnor som är synliga från din plats just nu. Inga generiska stjärnkartor - detta är din personliga vy av kosmos.


Avancerad filtrering

Du kan filtrera över 100 stjärnor baserat på:

- Ljusstyrka (magnitud): Från mycket ljusa (-2.0) till svaga (6.0)

- Avstånd: 1 till 3000 ljusår bort

- Ålder: 0 till 15 miljarder år gamla

- Massa: 0.1 till 50 solmassor


Mobilvänlig design

Perfekt för att ta med ut under stjärnklar himmel! Appen är optimerad för touch-kontroller och fungerar smidigt på alla enheter.


Tekniska utmaningar och lösningar

Astronomiska beräkningar i realtid

Den största utmaningen var att implementera korrekta astronomiska beräkningar i JavaScript. Appen konverterar mellan olika koordinatsystem och kräver beräkningar av lokal siderisk tid som tar hänsyn till jordens rotation och din geografiska position.


Canvas-optimering för prestanda

Med över 100 stjärnor som ska renderas smooth i 60fps var prestanda kritisk. Jag använde requestAnimationFrame för effektiv rendering och optimerade ritningsalgoritmer för att endast rita synliga stjärnor.


Responsiv design utan ramverk

Hela appen är byggd i vanilla JavaScript - inget React, Vue eller Angular. Detta gav full kontroll över prestanda men krävde noggrann planering av komponentarkitekturen.


Vad jag lärde mig


Astronomi möter kod

Att implementera verklig astronomi i kod gav mig djupare förståelse för både himmelens mekanik och precision i beräkningar. Varje grad och minut spelar roll när man ska visa exakt vad som är synligt.


Användarvänlighet är king

Även den mest avancerade tekniken är värdelös om användaren inte förstår hur den fungerar. Jag spenderade lika mycket tid på UI/UX som på astronomiska algoritmer.


Mobile-first utveckling

Eftersom många kommer använda appen utomhus var mobil-optimering avgörande. Touch-kontroller, stora knappar och tydlig kontrast blev viktiga designbeslut.


Framtida utveckling


Projektet är långt ifrån färdigt! 

Kommande funktioner inkluderar:

- Konstellationslinjer för att visa stjärnbilder

- Planetpositioner i realtid

- Tidskontroller för att se himlen vid olika tider

- Deep space-objekt som nebulosor och galaxer

- Förbättrad navigation med kompass-integration


Öppen källkod och community


Hela projektet är öppen källkod på GitHub (https://github.com/paubel/Interactive-Star-Map). Jag välkomnar bidrag från andra utvecklare och astronomi-entusiaster!


Om du har idéer för förbättringar eller hittar buggar, skapa gärna en issue eller pull request.


Prova själv


Testa Star Map Filter nu: starmapfilter.netlify.app


Nästa gång du är ute på en klar natt, ta fram telefonen och se vilka stjärnor du faktiskt tittar på. Kanske upptäcker du att den ljusa stjärnan är Vega, 25 ljusår bort, eller att den röda pricken är jättestjärnan Arcturus.


Kosmos väntar på att bli utforskad - låt tekniken vara din guide bland stjärnorna!


Följ mig på GitHub för fler projekt på korsningen mellan teknologi och vetenskap. Har du frågor om utvecklingen eller astronomi? Hör av dig!


Kommentarer