@panoramax/web-viewer 4.0.1-develop-35288366 → 4.0.1-develop-6b70d6bf

package/docs/09_Develop.md

@@ -54,6 +54,10 @@ This allows a flexible way to interact with viewer for users. Prioritization of
 
 This means that, when developing, if you want to check if your attributes are well-defined, you may want to get rid of URL search parameters, as well as remove the `pnx-map-parameters` local storage item. Otherwise, they may not be read as they are lower priority than others.
 
+### Third-party services URL
+
+All third-party services URL (like geocoding API, OSM iD editor) are grouped into a dedicated `src/utils/services.js` file. You can easily change them to deploy a custom version of the viewer.
+
 ## Testing
 
 We're trying to make Panoramax as reliable and secure as possible. To ensure this, we rely heavily on code testing. A variety of testing tools is made available:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "4.0.1-develop-35288366",
+  "version": "4.0.1-develop-6b70d6bf",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/components/ui/widgets/OSMEditors.js

@@ -1,12 +1,12 @@
 import { LitElement, html, nothing, css } from "lit";
 import { fa } from "../../../utils/widgets";
 import { josmBboxParameters } from "../../../utils/utils";
+import { IdEditorURL } from "../../../utils/services";
 import { faLocationDot } from "@fortawesome/free-solid-svg-icons/faLocationDot";
 import { faSatelliteDish } from "@fortawesome/free-solid-svg-icons/faSatelliteDish";
 import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons/faExternalLinkAlt";
 
 const JOSM_REMOTE_URL = "http://127.0.0.1:8111";
-const ID_URL = "https://www.openstreetmap.org/edit?editor=id";
 
 /**
  * OSM Editors component offers direct links to OpenStreetMap's iD and JOSM editors.
@@ -126,7 +126,7 @@ export default class OSMEditors extends LitElement {
 				"photo_overlay": "panoramax",
 				"photo": `panoramax/${this._pic.id}`,
 			};
-			const idUrl = idOpts && `${ID_URL}#${new URLSearchParams(idOpts).toString()}`;
+			const idUrl = idOpts && `${IdEditorURL()}#${new URLSearchParams(idOpts).toString()}`;
 
 			return html`
 				<pnx-link-button

package/src/utils/geocoder.js

@@ -1,6 +1,8 @@
 // DO NOT REMOVE THE "!": bundled builds breaks otherwise !!!
 import maplibregl from "!maplibre-gl";
 
+import { NominatimBaseUrl, AdresseDataGouvBaseURL } from "./services";
+
 /**
  * Transforms a set of parameters into an URL-ready string
  * It also removes null/undefined values
@@ -94,7 +96,7 @@ export function forwardGeocodingNominatim(config) {
 		viewbox: config.bbox,
 	};
 
-	return fetch(`https://nominatim.openstreetmap.org/search?${geocoderParamsToURLString(params)}&format=geojson&polygon_geojson=1&addressdetails=1`)
+	return fetch(`${NominatimBaseUrl()}/search?${geocoderParamsToURLString(params)}&format=geojson&polygon_geojson=1&addressdetails=1`)
 		.then(res => res.json())
 		.then(res => {
 			const finalRes = { features: [] };
@@ -115,7 +117,7 @@ export function forwardGeocodingNominatim(config) {
 }
 
 export function reverseGeocodingNominatim(lat, lon) {
-	return fetch(`https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lon}&zoom=18&format=jsonv2`)
+	return fetch(`${NominatimBaseUrl()}/reverse?lat=${lat}&lon=${lon}&zoom=18&format=jsonv2`)
 		.then(res => res.json())
 		.then(res => nominatimAddressToPlaceName(res?.address));
 }
@@ -138,7 +140,7 @@ export function forwardGeocodingBAN(config) {
 	const toPlaceName = p => [p.name, p.district, p.city].filter(v => v).join(", ");
 	const placeTypeToZoom =  { "housenumber": 20, "street": 18, "locality": 15, "municipality": 12 };
 	
-	return fetch(`https://api-adresse.data.gouv.fr/search/?${geocoderParamsToURLString(params)}`)
+	return fetch(`${AdresseDataGouvBaseURL()}/search/?${geocoderParamsToURLString(params)}`)
 		.then(res => res.json())
 		.then(res => {
 			res.features = res.features.map(f => ({

package/src/utils/index.js

@@ -2,10 +2,11 @@ import * as geocoder from "./geocoder";
 import * as i18n from "./i18n";
 import * as map from "./map";
 import * as picture from "./picture";
+import * as services from "./services";
 import * as utils from "./utils";
 import * as widgets from "./widgets";
 
-export { geocoder, i18n, map, picture, utils, widgets };
+export { geocoder, i18n, map, picture, services, utils, widgets };
 export {default as API} from "./API";
 export {default as PhotoAdapter} from "./PhotoAdapter";
 export {default as URLHandler} from "./URLHandler";

package/src/utils/services.js

@@ -0,0 +1,57 @@
+/*
+ * Settings that may be useful to change for special cases (e.g. offline implementation).
+ * Most users will be fine with the defaults.
+ */
+
+
+/**
+ * OpenStreetMap iD editor URL
+ * @returns {string} The editor URL
+ */
+export function IdEditorURL() {
+	return "https://www.openstreetmap.org/edit?editor=id";
+}
+
+
+/* -----------------------------------------------------
+ * Internet speed tests
+ */
+
+/**
+ * Get the threshold fast internet speed value.
+ *
+ * @returns {number} the minimum speed in MBps for internet to be considered "fast"
+ */
+export function InternetFastThreshold() {
+	return 10;
+}
+
+/**
+ * Get the fast internet speed test file.
+ *
+ * @returns {string} URL for the file to use for internet speed testing.
+ */
+export function InternetFastTestFile() {
+	return "https://panoramax.openstreetmap.fr/images/05/ca/2c/98/0111-4baf-b6f3-587bb8847d2e.jpg";
+}
+
+
+/* -----------------------------------------------------
+ * Geocoding-related settings
+ */
+
+/**
+ * Get the Adresse Data Gouv FR base URL for geocoding API.
+ * @returns {string} The Adresse Data Gouv URL (must support /search calls).
+ */
+export function AdresseDataGouvBaseURL() {
+	return "https://api-adresse.data.gouv.fr";
+}
+
+/**
+ * Get the Nominatim base URL for geocoding API.
+ * @returns {string} The Nominatim URL (must support /search & /reverse calls).
+ */
+export function NominatimBaseUrl() {
+	return "https://nominatim.openstreetmap.org";
+}

package/src/utils/utils.js

@@ -1,3 +1,5 @@
+import { InternetFastTestFile, InternetFastThreshold } from "./services";
+
 export const BASE_PANORAMA_ID = "geovisio-fake-id-0";
 
 export const COLORS = {
@@ -245,9 +247,7 @@ export function isInIframe() {
 }
 
 
-const INTERNET_FAST_THRESHOLD = 10; // MBit/s
 const INTERNET_FAST_STORAGE = "pnx-internet-fast";
-const INTERNET_FAST_TESTFILE = "https://panoramax.openstreetmap.fr/images/05/ca/2c/98/0111-4baf-b6f3-587bb8847d2e.jpg";
 
 /**
  * Check if Internet connection is high-speed or not.
@@ -258,7 +258,7 @@ export function isInternetFast() {
 	// Check if downlink property is available
 	try {
 		const speed = navigator.connection.downlink; // MBit/s
-		return Promise.resolve(speed >= INTERNET_FAST_THRESHOLD);
+		return Promise.resolve(speed >= InternetFastThreshold());
 	}
 	// Fallback for other browsers
 	catch(e) {
@@ -271,14 +271,14 @@ export function isInternetFast() {
 
 			// Run download testing
 			const startTime = (new Date()).getTime();
-			return fetch(INTERNET_FAST_TESTFILE+"?nocache="+startTime)
+			return fetch(`${InternetFastTestFile()}?nocache=${startTime}`)
 				.then(async res => [res, await res.blob()])
 				.then(([res, blob]) => {
 					const size = parseInt(res.headers.get("Content-Length") || blob.size); // Bytes
 					const endTime = (new Date()).getTime();
 					const duration = (endTime - startTime) / 1000; // Transfer time in seconds
 					const speed = (size * 8 / 1024 / 1024) / duration; // MBits/s
-					const isFast = speed >= INTERNET_FAST_THRESHOLD;
+					const isFast = speed >= InternetFastThreshold();
 					sessionStorage.setItem(INTERNET_FAST_STORAGE, isFast ? "true" : "false");
 					return isFast;
 				})