Merge pull request #34 from Elyahu41/map-in-location-modal

Map in location modal

_includes/modals/location.html

@@ -1,4 +1,4 @@
-<div class="modal fade modal-xl" id="locationModal" tabindex="-1" aria-hidden="true">
+<div class="modal fade" id="locationModal" tabindex="-1" aria-hidden="true">
 	<div class="modal-dialog">
 		<div class="modal-content">
 			<div class="modal-header">
@@ -8,17 +8,18 @@ <h3 class="modal-title"> Location information for <span data-zfReplace="Location
 			<div class="modal-body">
 				<p>(<span data-zfReplace="locationLat"></span>, <span data-zfReplace="locationLng"></span>)</p>
                 <p class="lang lang-hb">
-                    <b data-zfFind="locationElev">Elevation: </b><br>
+                    <b data-zfFind="locationElev">Elevation: </b><span data-zfFind="luachAmudehHoraah"> (disabled in the Amudeh Horaah Calendar)</span><br>
                     <b data-zfFind="locationTimeZone">Timezone: </b>
                 </p>
                 <p class="lang lang-et">
-                    <b data-zfFind="locationElev">Elevation: </b><br>
+                    <b data-zfFind="locationElev">Elevation: </b><span data-zfFind="luachAmudehHoraah"> (disabled in the Amudeh Horaah Calendar)</span><br>
                     <b data-zfFind="locationTimeZone">Timezone: </b>
                 </p>
                 <p class="lang lang-en">
-                    <b data-zfFind="locationElev">Elevation: </b><br>
+                    <b data-zfFind="locationElev">Elevation: </b><span data-zfFind="luachAmudehHoraah"> (disabled in the Amudeh Horaah Calendar)</span><br>
                     <b data-zfFind="locationTimeZone">Timezone: </b>
                 </p>
+                <div data-zfFind="locationMap" style="width: 100%; aspect-ratio: 1/1;"></div>
                 <hr>
                 <p class="lang lang-hb">כשמתפללים את העמידה, צריך לחזור פניו כנגד ארץ ישראל, ירושלים, המקדש, והבית קדשי הקדשים (ברכות בבלי 30a, לפי מלכים א' 8:35-48 & דברי הימים ב' 6:32). קביעת הכיוון של זה ניתן לעשות דרך שיטת "קו הרומב", ש"מצייר" קו מהמיקום של אדם לנקודה מסוימת (שבמקרה שלנו, זה יהיה הר הבית). לאחר שהקו מצויר, אתה מצופה להתפלל בכיוון שבו הקו מצויר דרך התאמת הכיוון שלך לזווית המעלות שלו (אפשרי דרך מצפן).</p>
                 <p class="lang lang-et">When praying the Amidah, one should direct himself towards Israel, Jerusalem, the temple mount and the Kodesh Hakodashim area (Berakhot Bavli 30a, based on Kings I 8:35-48 & Chronicles II 6:32). Determining which direction that is in can be done through the "Rhumb line" method, which "draws" a line from one's location to a specific point (which in our case, would be the Temple mount). Once the line is drawn, you are expected to pray in the direction the line is drawn in through matching your direction with its degree angle (possible via a compass).</p>

assets/css/style.css

@@ -242,4 +242,8 @@ body.lang-en .lang:not(.lang-en) {
 
 li[data-zfFind="FastDays"] h5 {
   margin-bottom: 0;
+}
+
+#locationModal img {
+  max-height: none;
 }

assets/js/zmanimListUpdater.js

@@ -5,6 +5,7 @@ import { OhrHachaimZmanim, AmudehHoraahZmanim, methodNames } from "./ROYZmanim.j
 import WebsiteLimudCalendar from "./WebsiteLimudCalendar.js";
 import { settings } from "./settings/handler.js";
 import { ChaiTables } from "./chaiTables.js";
+import * as leaflet from "../libraries/leaflet/leaflet-src.esm.js"
 
 import icsExport from "./icsHandler.js";
 import { HebrewNumberFormatter } from "./WebsiteCalendar.js";
@@ -150,10 +151,42 @@ class zmanimListUpdater {
 		locationModal.querySelector('[data-zfReplace="locationLat"]').innerHTML = geoLocation.getLatitude().toString()
 		locationModal.querySelector('[data-zfReplace="locationLng"]').innerHTML = geoLocation.getLongitude().toString()
 
-		locationModal.querySelectorAll('[data-zfFind="locationElev"]').forEach(elevElem =>
-			elevElem.insertAdjacentText('afterend', geoLocation.getElevation().toString()))
-		locationModal.querySelectorAll('[data-zfFind="locationTimeZone"]').forEach(elevElem =>
-			elevElem.insertAdjacentText('afterend', geoLocation.getTimeZone()))
+		locationModal.querySelectorAll('[data-zfFind="locationElev"]').forEach(elevElem => {
+			if (elevElem.nextSibling.nodeType == Node.TEXT_NODE)
+				elevElem.nextSibling.remove();
+
+			elevElem.insertAdjacentText('afterend', geoLocation.getElevation().toFixed(1))
+		})
+		locationModal.querySelectorAll('[data-zfFind="locationTimeZone"]').forEach(tzElem => {
+			if (tzElem.nextSibling.nodeType == Node.TEXT_NODE)
+				tzElem.nextSibling.remove();
+
+			tzElem.insertAdjacentText('afterend', geoLocation.getTimeZone())
+		})
+
+		/** @type {HTMLElement} */
+		const locationMapElem = locationModal.querySelector('[data-zfFind="locationMap"]')
+
+		this.locationMap = null;
+		locationModal.addEventListener('shown.bs.modal', () => {
+			this.locationMap = leaflet.map(locationMapElem, {
+				dragging: false,
+				minZoom: 16,
+				touchZoom: 'center',
+				scrollWheelZoom: 'center'
+			}).setView([geoLocation.getLatitude(), geoLocation.getLongitude()], 13);
+			leaflet.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+				attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+			}).addTo(this.locationMap);
+			leaflet.polyline([
+				[geoLocation.getLatitude(), geoLocation.getLongitude()],
+				[harHabait.getLatitude(), harHabait.getLongitude()]
+			], { color: 'red' }).addTo(this.locationMap)
+		})
+		locationModal.addEventListener('hidden.bs.modal', () => {
+			this.locationMap.remove();
+			this.locationMap = null
+		});
 
 		this.zmanFuncs.coreZC.setCandleLightingOffset(settings.candleLighting());