Crescent moon visibility maps for every Islamic month, powered by the Yallop criterion.
IslamicMonth.com generates interactive world maps showing where the new crescent moon can be sighted on the evening of each Islamic month. Visibility zones are calculated using the Yallop criterion and rendered with D3.js on HTML Canvas.
- Visibility maps for every month of the current Islamic year
- Five visibility categories — from easily naked-eye visible to not visible
- Location-aware — detects your city via browser geolocation or manual search
- Local sighting info — shows your personal visibility category and description
- Responsive — mobile-first layout with interactive cards
- Fast — pure Canvas rendering, ~120 kB gzipped
| Layer | Technology |
|---|---|
| Framework | Angular 21 (standalone components, signals) |
| Maps | D3.js + HTML Canvas (Natural Earth projection) |
| Geocoding | OpenStreetMap Nominatim |
| Styling | SCSS + Bootstrap 5 (grid only) |
| Deploy | GitHub Actions → IIS |
# Clone
git clone https://github.com/VirginMaryIslamicCenter/Moon-Sighting-Maps.git
cd Moon-Sighting-Maps
# Install
npm install
# Dev server (http://localhost:4200)
ng serve
# Production build
ng buildsrc/
├── app/
│ ├── components/ # Moon map canvas component
│ ├── pages/ # Home shell & month detail page
│ ├── services/ # Location, moon-data, geocoding services
│ └── models/ # TypeScript interfaces
├── assets/ # Icons, OG image, favicon
└── index.html
MIT © IslamicMonth.com
Built with ❤️ by the Virgin Mary Islamic Center team