Per permettere ad un utente di indicare un indirizzo valido, possiamo utilizzare il servizio di Open Street Map (OSM) Nominatim.
Ho impostato un progetto di esempio che utilizza React e Typescript, con custom Hooks, che ne mostra l’implementazione e utilizzo.
L’indirizzo del repository GitHub è:
https://github.com/rallets/react-open-street-map-nominatim
Utilizza anche altre librerie, giusto perchè sono quelle che utilizzo normalmente, ma dovrebbe essere semplicissimo sostituirle con qualsiasi altra, in quanto il cuore delle funzioni sono estratte in custom hooks (useDebounce e useOpenStreetMapNominatim).
L’idea del componente custom, è di limitare al massimo le interazioni con OSM, per evitare di essere bannati facendo query non necessarie.
NB. Vi consiglio di leggere bene le condizioni d’uso sul loro sito.
L’utente, quindi:
– in seguito ad un lookup, seleziona un indirizzo tra quelli proposti.
– a questo punto può scegliere di modificarlo.
– se invece proponiamo già un indirizzo, ad esempio perchè già salvato in un database, può modificarlo con una pulsante di modifica “esplicito”.
– mentre una modifica/ricerca è in corso, è possibile fare il “rollback” e tornare al precedente indirizzo valido selezionato.
In questo modo abbiamo sempre “memorizzato” un indirizzo valido, ed è possibile evitare ulteriori verifiche.
Fammi sapere se l’hai trovato utile!
Qui alcuni screenshot del componente in azione
