@panoramax/web-viewer 4.0.1-develop-16812d39 → 4.0.2-develop-9d664bb8

package/docs/reference/components/core/Viewer.md

@@ -114,7 +114,7 @@ Component properties. All of [Basic properties](Basic.md/#Panoramax.components.c
 | [psv] | <code>object</code> |  | [Any option to pass to Photo component](../ui/Photo.md/#Panoramax.components.ui.Photo) as an object.<br />Example: `psv="{'transitionDuration': 500, 'picturesNavigation': 'pic'}"` |
 | [url-parameters] | <code>string</code> | <code>true</code> | Should the component add and update URL query parameters to save viewer state ? |
 | [focus] | <code>string</code> | <code>&quot;pic&quot;</code> | The component showing up as main component (pic, map) |
-| [geocoder] | <code>string</code> | <code>&quot;nominatim&quot;</code> | The geocoder engine to use (nominatim, ban) |
+| [geocoder] | <code>string</code> | <code>&quot;nominatim&quot;</code> | The geocoder engine to use (nominatim, ban, or URL to a standard [GeocodeJSON-compliant](https://github.com/geocoders/geocodejson-spec/blob/master/draft/README.md) API) |
 | [widgets] | <code>string</code> | <code>true</code> | Use default set of widgets ? Set to false to avoid any widget to show up, and use slots to populate as you like. |
 | [picture] | <code>string</code> |  | The picture ID to display |
 | [sequence] | <code>string</code> |  | The sequence ID of the picture displayed |

package/docs/reference/components/ui/widgets/GeoSearch.md

@@ -16,7 +16,11 @@ Ready-to-use geocoder search bar.
 
 **Example**  
 ```html
+<!-- Default geocoder -->
 <pnx-widget-geosearch _parent=${viewer} />
+
+<!-- Custom-URL geocoder -->
+<pnx-widget-geosearch geocoder="https://photon.komoot.io/api" _parent=${viewer} />
 ```
 <a name="Panoramax.components.ui.widgets.GeoSearch+properties"></a>
 
@@ -28,5 +32,5 @@ Component properties.
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| [geocoder] | <code>string</code> | <code>&quot;nominatim&quot;</code> | The geocoder engine to use (nominatim, ban) |
+| [geocoder] | <code>string</code> | <code>&quot;nominatim&quot;</code> | The geocoder engine to use (nominatim, ban, or URL to a standard [GeocodeJSON-compliant](https://github.com/geocoders/geocodejson-spec/blob/master/draft/README.md) API) |
 

package/package.json

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

package/src/components/core/Viewer.js

@@ -95,7 +95,7 @@ export default class Viewer extends PhotoViewer {
 	 * @property {object} [psv] [Any option to pass to Photo component](#Panoramax.components.ui.Photo) as an object.<br />Example: `psv="{'transitionDuration': 500, 'picturesNavigation': 'pic'}"`
 	 * @property {string} [url-parameters=true] Should the component add and update URL query parameters to save viewer state ?
 	 * @property {string} [focus=pic] The component showing up as main component (pic, map)
-	 * @property {string} [geocoder=nominatim] The geocoder engine to use (nominatim, ban)
+	 * @property {string} [geocoder=nominatim] The geocoder engine to use (nominatim, ban, or URL to a standard [GeocodeJSON-compliant](https://github.com/geocoders/geocodejson-spec/blob/master/draft/README.md) API)
 	 * @property {string} [widgets=true] Use default set of widgets ? Set to false to avoid any widget to show up, and use slots to populate as you like.
 	 * @property {string} [picture] The picture ID to display
 	 * @property {string} [sequence] The sequence ID of the picture displayed

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

@@ -2,10 +2,14 @@
 import maplibregl from "!maplibre-gl";
 
 import { LitElement, html } from "lit";
-import { forwardGeocodingBAN, forwardGeocodingNominatim } from "../../../utils/geocoder";
+import { forwardGeocodingBAN, forwardGeocodingStandard, forwardGeocodingNominatim } from "../../../utils/geocoder";
 import "./GeoSearch.css";
 
-const GEOCODER_ENGINES = { "ban": forwardGeocodingBAN, "nominatim": forwardGeocodingNominatim };
+const GEOCODER_ENGINES = {
+	"ban": forwardGeocodingBAN,
+	"standard": forwardGeocodingStandard,
+	"nominatim": forwardGeocodingNominatim
+};
 
 /**
  * Ready-to-use geocoder search bar.
@@ -14,7 +18,11 @@ const GEOCODER_ENGINES = { "ban": forwardGeocodingBAN, "nominatim": forwardGeoco
  * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
  * @example
  * ```html
+ * <!-- Default geocoder -->
  * <pnx-widget-geosearch _parent=${viewer} />
+ * 
+ * <!-- Custom-URL geocoder -->
+ * <pnx-widget-geosearch geocoder="https://photon.komoot.io/api" _parent=${viewer} />
  * ```
  */
 export default class GeoSearch extends LitElement {
@@ -22,7 +30,7 @@ export default class GeoSearch extends LitElement {
 	 * Component properties.
 	 * @memberof Panoramax.components.ui.widgets.GeoSearch#
 	 * @type {Object}
-	 * @property {string} [geocoder=nominatim] The geocoder engine to use (nominatim, ban)
+	 * @property {string} [geocoder=nominatim] The geocoder engine to use (nominatim, ban, or URL to a standard [GeocodeJSON-compliant](https://github.com/geocoders/geocodejson-spec/blob/master/draft/README.md) API)
 	 */
 	static properties = {
 		geocoder: {type: String},
@@ -54,7 +62,7 @@ export default class GeoSearch extends LitElement {
 	connectedCallback() {
 		super.connectedCallback();
 
-		this._geocoderEngine = GEOCODER_ENGINES[this.geocoder];
+		this._geocoderEngine = GEOCODER_ENGINES[this.geocoder] || (config => GEOCODER_ENGINES.standard(config, this.geocoder));
 		this._parent?.onceMapReady?.().then(() => {
 			this._geolocate = this._geolocateCtrl.onAdd(this._parent.map);
 			this._geolocate.setAttribute("slot", "pre");
@@ -84,7 +92,7 @@ export default class GeoSearch extends LitElement {
 		else {
 			return this._geocoderEngine({
 				query,
-				limit: 3,
+				limit: 5,
 				//bbox: this._parent.map.getBounds().toArray().map(d => d.join(",")).join(","),
 				proximity: this._parent.map.getCenter().lat+","+this._parent.map.getCenter().lng,
 			}).then(data => {

package/src/utils/geocoder.js

@@ -22,65 +22,38 @@ function geocoderParamsToURLString(params) {
 
 /**
  * Transforms Nominatim search result into a nice-to-display address.
- * @param {object} addr The Nominatim API "address" property
+ * @param {object} props The Nominatim API feature properties
  * @returns {string} The clean-up string for display
  * @private
  */
-function nominatimAddressToPlaceName(addr) {
+function nominatimAddressToPlaceName(props) {
 	// 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",
-			// Fallback to road if nothing else found
-			"road"
-		];
-		for(let pn of potentialNames) {
-			if(addr[pn]) {
-				street = addr[pn];
-				break;
-			}
-		}
-	}
+	const nameKind = [
+		"house_name", "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"
+	].find(pn => props?.address?.[pn]);
 
-	if(street && res.length > 0) { res += (addr.house_number ? " " : ", ")+street; }
-	else if(street) { res = street; }
+	const localityKind = [
+		"hamlet", "croft", "isolated_dwelling",
+		"farm", "farmyard", "industrial", "commercial", "retail", "city_block", "residential",
+		"neighbourhood", "allotments", "quarter",
+	].find(pn => props?.address?.[pn]);
 
-	// City
-	if(addr.village || addr.town || addr.city || addr.municipality) {
-		if(res.length > 0) { res += ", "; }
-		res += addr.village || addr.town || addr.city || addr.municipality;
-	}
+	const stprops = {
+		type: props?.addresstype || props?.type,
+		name: (props?.name?.length > 0 ? props.name : null) || (nameKind ? props.address[nameKind] : undefined),
+		housenumber: props?.address?.house_number,
+		street: props?.address?.road,
+		locality: localityKind ? props.address[localityKind] : undefined,
+		city: props?.address?.village || props?.address?.town || props?.address?.city || props?.address?.municipality,
+		county: props?.address?.county,
+		state: props?.address?.state,
+		country: props?.address?.country,
+	};
 
-	return res;
+	return geocodeJsonToPlaceName(stprops);
 }
 
 /**
@@ -102,7 +75,7 @@ export function forwardGeocodingNominatim(config) {
 			const finalRes = { features: [] };
 			const listedNames = [];
 			res.features.forEach(f => {
-				const plname = nominatimAddressToPlaceName(f.properties.address) || f.properties.display_name;
+				const plname = nominatimAddressToPlaceName(f.properties) || f.properties.display_name;
 				if(!listedNames.includes(plname)) {
 					finalRes.features.push({
 						place_type: ["place"],
@@ -124,11 +97,105 @@ export function reverseGeocodingNominatim(lat, lon) {
 
 /**
  * Base adresse nationale (FR) geocoder, ready to use for our Map
- * @param {object} config Configuration sent by MapLibre GL Geocoder, following the geocoderApi format ( https://github.com/maplibre/maplibre-gl-geocoder/blob/main/API.md#setgeocoderapi )
- * @returns {object} GeoJSON Feature collection in Carmen GeoJSON format
+ * @param {object} config Configuration sent by MapLibre GL Geocoder, following the geocoderApi format ( https://maplibre.org/maplibre-gl-geocoder/types/MaplibreGeocoderApiConfig.html )
+ * @returns {object} GeoJSON Feature collection in Carmen GeoJSON format ( https://maplibre.org/maplibre-gl-geocoder/types/CarmenGeojsonFeature.html )
  * @private
  */
 export function forwardGeocodingBAN(config) {
+	return forwardGeocodingStandard(config, AdresseDataGouvBaseURL());
+}
+
+/**
+ * Transforms GeocodeJSON search result into a nice-to-display address.
+ * @param {object} props The GecodeJSON API feature properties
+ * @returns {string} The clean-up string for display
+ * @private
+ */
+function geocodeJsonToPlaceName(props) {
+	// API format @ https://github.com/geocoders/geocodejson-spec/blob/master/draft/README.md
+	if(!props || typeof props != "object") { return ""; }
+
+	// P1 = main name, P2=locality-like, P3=country+high-level admin
+	let p1 = props.name;
+	let p2 = [], p3 = [];
+
+	switch(props.type) {
+	case "hamlet":
+	case "croft":
+	case "isolated_dwelling":
+	case "neighbourhood":
+	case "allotments":
+	case "quarter":
+	case "farm":
+	case "farmyard":
+	case "industrial":
+	case "commercial":
+	case "retail":
+	case "city_block":
+	case "residential":
+	case "locality":
+	case "district":
+		p3.push(props.city);
+		p3.push(props.county);
+		p3.push(props.state);
+		p3.push(props.country);
+		break;
+	case "city":
+		p3.push(props.county);
+		p3.push(props.state);
+		p3.push(props.country);
+		break;
+	case "region":
+		p3.push(props.county);
+		p3.push(props.state);
+		p3.push(props.country);
+		break;
+	case "country":
+		break;
+	case "house":
+	case "housenumber":
+		p2.push(props.housenumber);
+		p2.push(props.street);
+		p2.push(props.locality);
+		p2.push(props.district);
+		p3.push(props.city);
+		p3.push(props.county);
+		p3.push(props.state);
+		p3.push(props.country);
+		break;
+	case "street":
+	default:
+		p2.push(props.street);
+		p2.push(props.locality);
+		p2.push(props.district);
+		p3.push(props.city);
+		p3.push(props.county);
+		p3.push(props.state);
+		p3.push(props.country);
+		break;
+	}
+
+	p2 = p2.filter(v => v);
+	p2 = p2.filter((v,i) => v != p1 && (i === 0 || p2[i-1] !== v));
+	p2 = p2.length > 0 ? (props.housenumber ? p2.slice(0,2).join(" ") : p2.shift()) : null;
+	if(p2 === p1) { p2 = null; }
+
+	p3 = p3.filter(v => v);
+	p3 = p3.filter((v,i) => v != p1 && (!p2 || !p2.includes(v)) && (i === 0 || p3[i-1] !== v));
+
+	let res = [p1, p2, p3.shift()].filter(v => v);
+
+	return res.join(", ");
+}
+
+/**
+ * Standard forward geocoder
+ * @param {object} config Configuration sent by MapLibre GL Geocoder, following the geocoderApi format ( https://maplibre.org/maplibre-gl-geocoder/types/MaplibreGeocoderApiConfig.html )
+ * @param {string} endpoint The URL endpoint (everything before the /?q=...)
+ * @returns {object} GeoJSON Feature collection in Carmen GeoJSON format ( https://maplibre.org/maplibre-gl-geocoder/types/CarmenGeojsonFeature.html )
+ * @private
+ */
+export function forwardGeocodingStandard(config, endpoint) {
 	// Transform parameters into BAN format
 	const params = { q: config.query, limit: config.limit };
 	if(typeof config.proximity === "string") {
@@ -137,18 +204,37 @@ export function forwardGeocodingBAN(config) {
 		params.lon = lon;
 	}
 
-	const toPlaceName = p => [p.name, p.district, p.city].filter(v => v).join(", ");
-	const placeTypeToZoom =  { "housenumber": 20, "street": 18, "locality": 15, "municipality": 12 };
+	const placeTypeToZoom =  {
+		"house": 20,
+		"housenumber": 20,
+		"street": 18,
+		"locality": 15,
+		"district": 13,
+		"municipality": 12,
+		"city": 12,
+		"county": 8,
+		"region": 7,
+		"state": 7,
+		"country": 5
+	};
 	
-	return fetch(`${AdresseDataGouvBaseURL()}/search/?${geocoderParamsToURLString(params)}`)
+	return fetch(`${endpoint}/?${geocoderParamsToURLString(params)}`)
 		.then(res => res.json())
 		.then(res => {
-			res.features = res.features.map(f => ({
-				place_type: ["place"],
-				place_name: toPlaceName(f.properties),
-				center: new maplibregl.LngLat(...f.geometry.coordinates),
-				zoom: placeTypeToZoom[f.properties.type],
-			}));
-			return res;
+			const finalRes = { features: [] };
+			const listedNames = [];
+			(res.features || []).forEach(f => {
+				const plname = geocodeJsonToPlaceName(f.properties);
+				if(!listedNames.includes(plname) && f.properties.type != "other") {
+					finalRes.features.push({
+						place_type: ["place"],
+						place_name: plname,
+						center: new maplibregl.LngLat(...f.geometry.coordinates),
+						zoom: placeTypeToZoom[f.properties.type],
+					});
+					listedNames.push(plname);
+				}
+			});
+			return finalRes;
 		});
-}
+}

package/src/utils/services.js

@@ -45,7 +45,7 @@ export function InternetFastTestFile() {
  * @returns {string} The Base Adresse Nationale URL (must support /search calls).
  */
 export function AdresseDataGouvBaseURL() {
-	return "https://data.geopf.fr/geocodage";
+	return "https://data.geopf.fr/geocodage/search";
 }
 
 /**

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

@@ -2,7 +2,6 @@
 
 exports[`forwardGeocodingBAN works 1`] = `
 Object {
-  "attribution": "BAN",
   "features": Array [
     Object {
       "center": Object {
@@ -16,11 +15,6 @@ Object {
       "zoom": 20,
     },
   ],
-  "licence": "ODbL 1.0",
-  "limit": 1,
-  "query": "8 bd du port",
-  "type": "FeatureCollection",
-  "version": "draft",
 }
 `;