Create ability to pick location manually

Author: AlexFlipnote

package.json

@@ -12,6 +12,7 @@
     "build": "node build.js"
   },
   "dependencies": {
+    "leaflet": "^1.9.4",
     "sortablejs": "^1.15.6"
   },
   "devDependencies": {

src/images/icons/marker_icon.png

@@ -17,6 +17,15 @@ function faviconURL(u) {
   )
 }
 
+class ManualPosition {
+  constructor(lat, lon) {
+    this.coords = {
+      latitude: lat,
+      longitude: lon
+    }
+  }
+}
+
 function createBookmark(
   el, name, url,
   {
@@ -90,9 +99,14 @@ if (isExtension) {
     }
 
     if (items.wkey) {
-      navigator.geolocation.getCurrentPosition(function(position) {
+      if (items.wManualLocation) {
+        const position = new ManualPosition(items.wlat, items.wlon)
         getWeather(items, position, items.wkey, items.wlanguage)
-      })
+      } else {
+        navigator.geolocation.getCurrentPosition((position) => {
+          getWeather(items, position, items.wkey, items.wlanguage)
+        })
+      }
     }
 
     const bookmarks = document.getElementById("bookmarks")

src/js/index.js

@@ -1,7 +1,9 @@
 import * as manifest from "../manifest.json"
 import Sortable from "sortablejs"
+
 import { extensionSettings } from "./utils/settings.js"
 import { isFirefox } from "./utils/browser.js"
+import { WorldMap } from "./utils/map.js"
 import { HexClock } from "./utils/timeManager.js"
 import { weatherLanguages, dateLocales } from "./utils/lists.js"
 
@@ -10,6 +12,8 @@ if (findVersion) {
   findVersion.textContent = manifest.version
 }
 
+const userMap = new WorldMap()
+
 function createAlert(message, css="") {
   const notification = document.getElementById("notification")
   const alert = document.createElement("div")
@@ -38,6 +42,9 @@ function saveOptions(message, css="") {
     customfont: document.getElementById("customfont").value,
     customfontgoogle: document.getElementById("customfontgoogle").checked,
     wkey: document.getElementById("wkey").value,
+    wlat: userMap.marker ? userMap.marker.getLatLng().lat : 0,
+    wlon: userMap.marker ? userMap.marker.getLatLng().lng : 0,
+    wManualLocation: document.getElementById("wManualLocation").checked,
     hexbg: document.getElementById("hexbg").checked,
     temp_type: document.getElementById("temp_type").value,
     showSettings: document.getElementById("show-settings").checked,
@@ -51,6 +58,27 @@ function saveOptions(message, css="") {
   })
 }
 
+function createMapInit(items) {
+  const getMap = document.getElementById("map")
+  getMap.style.display = "block"
+
+  try {
+    userMap.createMap("map", items.wlat, items.wlon)
+  } catch {
+    return // Ignore error
+  }
+
+  userMap.map.on("click", (e) => {
+    const { lat, lng } = e.latlng
+    userMap.setMarker(lat, lng)
+    const wlat = document.getElementById("wlat")
+    const wlon = document.getElementById("wlon")
+    wlat.textContent = lat.toFixed(4)
+    wlon.textContent = lng.toFixed(4)
+    saveOptions(`Weather location set: Lat ${lat.toFixed(4)}, Lon ${lng.toFixed(4)}`, "change")
+  })
+}
+
 // Restores select box and checkbox state using the preferences
 // stored in chrome.storage.
 function restoreOptions() {
@@ -75,6 +103,27 @@ function restoreOptions() {
     wlanguage.value = items.wlanguage
     wlanguage.onchange = () => { saveOptions(`Weather language set: ${wlanguage.value || "default"}`, wlanguage.value ? "change" : "remove") }
 
+    const wManualLocation = document.getElementById("wManualLocation")
+    wManualLocation.checked = items.wManualLocation
+    wManualLocation.onchange = () => {
+      saveOptions(`Weather manual location set: ${wManualLocation.checked}`, wManualLocation.checked ? "add" : "remove")
+
+      if (wManualLocation.checked) {
+        createMapInit(items)
+      } else {
+        document.getElementById("map").style.display = "none"
+      }
+    }
+
+    if (items.wManualLocation) {
+      createMapInit(items)
+    }
+
+    const wlat = document.getElementById("wlat")
+    const wlon = document.getElementById("wlon")
+    wlat.textContent = items.wlat.toFixed(4) || "0.0000"
+    wlon.textContent = items.wlon.toFixed(4) || "0.0000"
+
     const fmtTime = document.getElementById("fmt_time")
     fmtTime.value = items.fmt_time
     fmtTime.onchange = () => { saveOptions(`Time format set: ${fmtTime.value || "default"}`, fmtTime.value ? "change" : "remove") }

src/js/options.js

@@ -0,0 +1,46 @@
+import leaflet from "leaflet"
+
+export class WorldMap {
+  constructor() {
+    // Default values
+    this.lat = 20
+    this.lon = 0
+
+    this.map = null
+    this.marker = null
+  }
+
+  createMap(targetId, lat, lon) {
+    this.lat = lat
+    this.lon = lon
+
+    this.map = leaflet.map(
+      targetId,
+      {
+        preferCanvas: true,
+        attribution: "&copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>",
+        maxBounds: [[-90, -180], [90, 180]],
+        maxBoundsViscosity: 1.0
+      }
+    )
+    this.map.setView([this.lat, this.lon], 3)
+    leaflet.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(this.map)
+    this.marker = leaflet.marker([this.lat, this.lon], {
+      icon: leaflet.icon({
+        iconUrl: "images/icons/marker_icon.png",
+        iconSize: [25, 41],
+        iconAnchor: [12, 41]
+      })
+    }).addTo(this.map)
+  }
+
+  setMarker(lat, lon) {
+    this.lat = lat
+    this.lon = lon
+    this.marker.setLatLng([lat, lon])
+  }
+
+  getCoordinates() {
+    return { lat: this.lat, lon: this.lon }
+  }
+}

src/js/utils/map.js

@@ -16,6 +16,9 @@ export const extensionSettings = {
   bookmarksTopSitesEnabled: false,
   bookmarksTopSitesAmount: 5,
   wkey: "",
+  wlat: 0,
+  wlon: 0,
+  wManualLocation: false,
   temp_type: "celcius",
   hexbg: false,
   showSettings: true,

src/js/utils/settings.js

@@ -4,7 +4,7 @@
   "name": "AlexFlipnote/Homepage",
   "description": "A website that gives you a clean homepage.",
   "homepage_url": "https://alexflipnote.dev/homepage/",
-  "version": "2.3.0",
+  "version": "2.3.1",
 
   "chrome_url_overrides": {
     "newtab": "index.html"
@@ -44,6 +44,7 @@
   ],
 
   "host_permissions": [
-    "https://api.openweathermap.org/*"
+    "https://api.openweathermap.org/*",
+    "https://*.tile.openstreetmap.org/*"
   ]
 }

src/manifest.json

@@ -209,7 +209,7 @@ <h1 class="no-margin">24h HEX Background</h1>
       </div>
 
       <div class="box-container">
-        <h1 class="no-margin">OpenWeather key</h1>
+        <h1 class="no-margin">Weather (From OpenWeatherMap)</h1>
         <p>
           To get your own weather key, go to <a href="https://home.openweathermap.org/api_keys" target="_blank">https://home.openweathermap.org/api_keys</a> to recive one.
         </p>
@@ -230,6 +230,14 @@ <h1 class="no-margin">OpenWeather key</h1>
             <option value="fahrenheit">Fahrenheit (°F)</option>
           </select>
         </label>
+        <label>
+          <input type="checkbox" id="wManualLocation"> Pick a location manually instead
+        </label>
+        <div id="map">
+          <div class="map-coords">
+            <span id="wlat"></span>, <span id="wlon"></span>
+          </div>
+        </div>
       </div>
 
       <div class="box-container">

src/options.html

@@ -31,7 +31,7 @@ <h2>Permissions Used</h2>
           Your location data is never stored, it's used temporarily by your browser to fetch the
           weather from <a href="https://openweathermap.org/" class="emerald-text">OpenWeatherMap</a> with an API key
           and your coordinates are not transmitted to any other party.
-          If weather is turned off, geolocation is not used.
+          If weather is turned off or you have enabled manual location, geolocation is not used.
         </li>
         <li><b>topSites</b>: Used to fetch your most visited sites for displaying bookmarks if you enable that feature. If disabled, this permission is not used.</li>
         <li><b>favicon</b>: Used to fetch the favicon of your most visited sites for displaying bookmarks. If disabled, this permission is not used.</li>