@panoramax/web-viewer 3.2.3-develop-7f50ae7f → 3.2.3-develop-54fea60b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "3.2.3-develop-7f50ae7f",
+  "version": "3.2.3-develop-54fea60b",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/components/core/Viewer.js

@@ -296,9 +296,14 @@ export default class Viewer extends Basic {
 	 * @memberof Panoramax.components.core.Viewer#
 	 */
 	onceFirstPicLoaded() {
-		return this.oncePSVReady().then(() => new Promise(resolve => {
-			this.psv.addEventListener("picture-loaded", resolve, {once: true});
-		}));
+		return this.oncePSVReady().then(() => {
+			if(this.psv.getPictureMetadata()) { return Promise.resolve(); }
+			else {
+				return new Promise(resolve => {
+					this.psv.addEventListener("picture-loaded", resolve, {once: true});
+				});
+			}
+		});
 	}
 
 	/** @private */

package/src/components/menus/PictureLegend.js

@@ -49,6 +49,8 @@ export default class PictureLegend extends LitElement {
 	connectedCallback() {
 		super.connectedCallback();
 
+		this._prevSearches = {};
+
 		this._parent.onceReady().then(() => {
 			this._onPicChange(this._parent.psv.getPictureMetadata());
 			this._parent.psv.addEventListener("picture-loaded", () => {
@@ -63,15 +65,21 @@ export default class PictureLegend extends LitElement {
 		this._caption = picMeta?.caption;
 		
 		if(picMeta) {
-			this._addrTimer1 = setTimeout(() => {
-				this._addrTimer2 = setTimeout(() => this._addr = "", 500);
-
-				reverseGeocodingNominatim(picMeta.gps[1], picMeta.gps[0])
-					.then(addr => {
-						clearTimeout(this._addrTimer2);
-						this._addr = addr;
-					});
-			}, 500);
+			const coordsHash = `${picMeta.gps[0]}/${picMeta.gps[1]}`;
+			if(this._prevSearches[coordsHash]) {
+				this._addr = this._prevSearches[coordsHash];
+			}
+			else {
+				this._addrTimer2 = setTimeout(() => this._addr = "", 250);
+				this._addrTimer1 = setTimeout(() => {
+					reverseGeocodingNominatim(picMeta.gps[1], picMeta.gps[0])
+						.then(addr => {
+							clearTimeout(this._addrTimer2);
+							this._addr = addr;
+							this._prevSearches[coordsHash] = addr;
+						});
+				}, 750);
+			}
 		}
 		else {
 			this._addr = "";

package/src/components/ui/SearchBar.js

@@ -246,7 +246,7 @@ export default class SearchBar extends LitElement {
 	}
 
 	/**
-	 * Limit search calls to every 250ms
+	 * Limit search calls to every 500ms
 	 * @private
 	 */
 	_throttledSearch() {
@@ -255,7 +255,7 @@ export default class SearchBar extends LitElement {
 			delete this._throttler;
 		}
 
-		this._throttler = setTimeout(this._search.bind(this), 250);
+		this._throttler = setTimeout(this._search.bind(this), 500);
 	}
 
 	/**
@@ -277,6 +277,8 @@ export default class SearchBar extends LitElement {
 		this._results = null;
 
 		this.searcher(this.value).then(data => {
+			if(this._icon !== "loading") { return; }
+
 			this._icon = "empty";
 			if(!data || data.length == 0) {
 				this._results = [];

package/src/utils/geocoder.js

@@ -18,6 +18,67 @@ function geocoderParamsToURLString(params) {
 	return new URLSearchParams(p).toString();
 }
 
+/**
+ * Transforms Nominatim search result into a nice-to-display address.
+ * @param {object} addr The Nominatim API "address" property
+ * @returns {string} The clean-up string for display
+ * @private
+ */
+function nominatimAddressToPlaceName(addr) {
+	// API format @ https://nominatim.org/release-docs/develop/api/Output/#addressdetails
+	if(!addr || typeof addr != "object") { return ""; }
+
+	let res = "";
+
+	// House n°-like
+	if(addr.house_number) { res = addr.house_number; }
+	else if(addr.house_name) { res = addr.house_name; }
+	else {
+		const potentialNames = [
+			"emergency", "historic", "military", "natural", "landuse", "place", "railway", "man_made",
+			"aerialway", "boundary", "amenity", "aeroway", "club", "craft", "leisure", "office",
+			"mountain_pass", "shop", "tourism", "bridge", "tunnel", "waterway", "park"
+		];
+		for(let pn of potentialNames) {
+			if(addr[pn]) {
+				res = addr[pn];
+				break;
+			}
+		}
+	}
+
+	// Street-like
+	let street;
+	if(addr.road && addr.road.length > 6) { street = addr.road; }
+	else {
+		const potentialNames = [
+			// Hamlet-like
+			"hamlet", "croft", "isolated_dwelling",
+			// Zone Indus-like
+			"farm", "farmyard", "industrial", "commercial", "retail", "city_block", "residential",
+			// Quarter-like
+			"neighbourhood", "allotments", "quarter"
+		];
+		for(let pn of potentialNames) {
+			if(addr[pn]) {
+				street = addr[pn];
+				break;
+			}
+		}
+	}
+
+	if(street && res.length > 0) { res += (addr.house_number ? " " : ", ")+street; }
+	else if(street) { res = street; }
+
+	// City
+	if(addr.village || addr.town || addr.city || addr.municipality) {
+		if(res.length > 0) { res += ", "; }
+		res += addr.village || addr.town || addr.city || addr.municipality;
+	}
+
+	return res;
+}
+
 /**
  * Nominatim (OSM) geocoder, ready to use for our Map
  * @private
@@ -37,13 +98,14 @@ export function forwardGeocodingNominatim(config) {
 			const finalRes = { features: [] };
 			const listedNames = [];
 			res.features.forEach(f => {
-				if(!listedNames.includes(f.properties.display_name)) {
+				const plname = nominatimAddressToPlaceName(f.properties.address) || f.properties.display_name;
+				if(!listedNames.includes(plname)) {
 					finalRes.features.push({
 						place_type: ["place"],
-						place_name: f.properties.display_name,
+						place_name: plname,
 						bounds: new maplibregl.LngLatBounds(f.bbox),
 					});
-					listedNames.push(f.properties.display_name);
+					listedNames.push(plname);
 				}
 			});
 			return finalRes;
@@ -53,35 +115,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`)
 		.then(res => res.json())
-		.then(res => {
-			let addr = "";
-
-			if(res?.address) {
-				if(res.address.house_number) { addr = res.address.house_number; }
-
-				// Street/place/hamlet
-				let street;
-				if(res.address.road && res.address.road.length > 6) {
-					street = res.address.road;
-				}
-				else if(res.address.hamlet) {
-					street = res.address.hamlet;
-				}
-				else if(res.address.isolated_dwelling) {
-					street = res.address.isolated_dwelling;
-				}
-				if(street && addr.length > 0) { addr += " "+street; }
-				else if(street) { addr = street; }
-
-				// City
-				if(res.address.village || res.address.town || res.address.city) {
-					if(addr.length > 0) { addr += ", "; }
-					addr += res.address.village || res.address.town || res.address.city;
-				}
-			}
-
-			return addr;
-		});
+		.then(res => nominatimAddressToPlaceName(res?.address));
 }
 
 /**

package/tests/utils/__snapshots__/geocoder.test.js.snap

@@ -38,7 +38,7 @@ Object {
           "lng": -1.7,
         },
       },
-      "place_name": "Paris, Île-de-France, France métropolitaine, France",
+      "place_name": "Paris",
       "place_type": Array [
         "place",
       ],