External content by Sébastien Anselment, July, 2025; 

If you need functionality in processes for e.g. point of interests search, navigation, display in maps data from OpenStreetMap is very userful. The integration to the WEBCON portal can be easily realised with Leaflet. This software is the leading open-source JavaScript library for mobile-friendly interactive maps.

Links

• https://www.openstreetmap.org/
• https://leafletjs.com

Form fields

Create all needed form fields for the address data and set the following form rule in the form field "POI":

HTML form field

The integration in WEBCON is done with a HTML form field containing this code:

Form Rule

Create a local or a global (with parameters) form rule "OSM Integration" with "JavaScript mode" as "edit mode" with the following javascript code. Just chose your form fields or parameters in the list to put them in the javascript code section where the WEBCON functions "GetValue" and "SetValue" are used. Add this form rule in the tab "Style and behavior" of the form search field "POI" as shown before.

Screenshot

JS Code

The language of the result data (e.g. coutry, state, city) can be set with the parameter "accept-language" in the query url. Be aware of the correct quotes (backtick).

let url = `https://nominatim.openstreetmap.org/search?format=json&accept-language=de&addressdetails=1&limit=1&q=${query}`;

JSON result object

This is the returned object for the query "Schloss Karlsruhe":

Screenshot of the form in the portal