Street Address Display Options

[Arnie Shore]

I don't know whether this is a Leaflet question or one for OpenStreetMap API, but I wonder whether there's options in displaying street address and postal codes. 

I note the difference in where the postal code is displayed relative to the other address elements in, say, German versus US addresses.  Thanks.

[Bodo Minea]

Could you provide some more info on what you are attempting to achieve? Do you want address labels on the map, are they currently missing or not suitable to your needs? Do you want to get the address for a point or for where the user clicks on a map?

The issue could be either basemap (layer, etc.) related or might involve the Overpass API (that's how the API for consumers is called), but you'd have to describe your use case better.

În vin., 24 iun. 2022 la 15:25, Arnie Shore <sho...@gmail.com> a scris:

I don't know whether this is a Leaflet question or one for OpenStreetMap API, but I wonder whether there's options in displaying street address and postal codes. 

I note the difference in where the postal code is displayed relative to the other address elements in, say, German versus US addresses.  Thanks.

--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/CAMN8bjmUodFeoAoESpvS7KXZuPnvGuw3GYiBQqEYe%2BcJWcu3iA%40mail.gmail.com.

--

Cu stimă,

Minea Claudiu Bogdan

(+40) 722 992 306

https://www.linkedin.com/in/mineabogdan

https://www.facebook.com/b0dominea

[Bill Frost]

Hi Arnie,

It's a bit of both and unless there is a Leaflet plugin you will need
to interrogate the returned country code and adjust the address
format. Sing out if you need help or want to see a JSFiddle.

I've been tiling historical military maps and displaying the modern
location via a draggable Leaflet marker. Naturally, if you want the
address shown within an HTML <div> outside Leaflet, then just use
Leaflet to find where the user clicked:

georefNewMarker.on('click', selectNewFeature);
// lots of code
selectNewFeature(e) {
currentLat = e.latlng.lat;
currentLon = e.latlng.lng;
// lots of code
}

To display the marker on a Leaflet map with the modern address, pass
the lat, lon into Nominatm and its OpenStreetMap reverse geocode API
will return the places format. See documentation at
https://nominatim.org/release-docs/latest/api/Output/

Here is an abridged version of the code that returns a modern address
straight into the marker:

async function quickGeocode() {
const URL = `https://nominatim.openstreetmap.org/reverse?lat=${currentLat}&lon=${currentLon}&format=json&zoom=18&addressdetails=1`;
try {
const fetchResult = fetch(URL)
const response = await fetchResult;
const jsonData = await response.json();
if (jsonData) currentMarker.modernaddress = jsonData.display_name;
} catch (e) {
throw Error(e);
}
}

This is where I finish, but you now need the country code and postcode
- include addressdetails=1 in your API call. It returns data
including:

"address": { "city": "London", "state_district": "Greater London",
"state": "England", "postcode": "SW1A 2DU", "country": "United
Kingdom", "country_code": "gb" },

Depending on the number of countries you need to support, read the
contry_code and adjust the postcode display to suit with an IF
statement, a SWITCH statement or some deep level of abstraction if
that is what you prefer.

Leaflet geocoding plugins are at https://leafletjs.com/plugins.html#geocoding.

Good luck,

Bill