OpenStreetMap Integration in Portal with Leaflet

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.

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:

1
<!-- Container for the map -->
2
<div id="map-container" style="width: 100%; height: 300px;"></div>
3

4
<!-- Load leaflet CSS & JS -->
5
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
6
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

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

1
let poiMap = null;
2
let lastMarker = null;
3

4
(() => {
5
    // Reset address form fields
6
    SetValue("#{FLD:2779}#", "");
7
    SetValue("#{FLD:2781}#", "");
8
    SetValue("#{FLD:2778}#", "");
9
    SetValue("#{FLD:2776}#", "");
10
    SetValue("#{FLD:2855}#", "");
11
    SetValue("#{FLD:2777}#", "");
12
    SetValue("#{FLD:2782}#", "");
13
    SetValue("#{FLD:2856}#", "");
14
    SetValue("#{FLD:2857}#", "");
15

16
    let poiValue = GetValue("#{FLD:2773}#");
17
    if (!poiValue || poiValue == "" || typeof poiValue  === 'undefined') {
18
        //console.log("poiValue is undefined or empty!");
19
        return;
20
    }
21

22
function updateMap(lat, lon, label) {
23
    const mapContainer = document.getElementById("map-container");
24
    if (!mapContainer || typeof L === 'undefined') {
25
        //console.log("mapContainer is undefined!");
26
        return;
27
    }
28

29
    // Initialize map if there is none
30
    if (!mapContainer._leaflet_id) {
31
        poiMap = L.map(mapContainer).setView([lat, lon], 13);
32
        //console.log(poiMap);
33
        mapContainer._leaflet_map = poiMap; // merken!
34

35
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
36
            attribution: '&copy; OpenStreetMap contributors'
37
        }).addTo(poiMap);
38
    } else {
39
        poiMap = mapContainer._leaflet_map;
40
        //console.log(poiMap);
41
        poiMap.setView([lat, lon], 13);
42
    }
43

44
    // Renew marker
45
    if (lastMarker) {
46
        poiMap.removeLayer(lastMarker);
47
    }
48
    lastMarker = L.marker([lat, lon]).addTo(poiMap).bindPopup(label).openPopup();
49
}
50

51
    let query = encodeURIComponent(poiValue);
52
    //console.log(query);
53
    let url = `https://nominatim.openstreetmap.org/search?format=json&accept-language=de&addressdetails=1&limit=1&q=${query}`;
54
    //console.log(url);
55

56
    fetch(url)
57
        .then(response => response.json())
58
        .then(data => {
59
        if (data.length > 0) {
60
            let result = data[0];
61
            //console.log(result);
62
            // Set address fields
63
            SetValue("#{FLD:2779}#", result.address.road || "");
64
            SetValue("#{FLD:2781}#", result.address.house_number|| "");
65
            SetValue("#{FLD:2778}#", result.address.postcode || "");
66
            SetValue("#{FLD:2776}#", result.address.city|| "");
67
            SetValue("#{FLD:2855}#", result.address.city|| "");
68
            SetValue("#{FLD:2777}#", result.address.state|| "");
69
            SetValue("#{FLD:2782}#", result.address.country|| "");
70
            SetValue("#{FLD:2856}#", result.lat || "");
71
            SetValue("#{FLD:2857}#", result.lon || "");
72
            // Update map
73
            updateMap(result.lat, result.lon, result.display_name);
74
            } else {
75
                alert("No search results found!");
76
            }
77
        });
78
})();

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”:

1
{
2
    "place_id": 112819066,
3
    "licence": "Data © OpenStreetMap contributors, ODbL 1.0. http://osm.org/copyright",
4
    "osm_type": "way",
5
    "osm_id": 316433983,
6
    "lat": "49.0135248",
7
    "lon": "8.4043592",
8
    "class": "historic",
9
    "type": "castle",
10
    "place_rank": 30,
11
    "importance": 0.3751571465506199,
12
    "addresstype": "historic",
13
    "name": "Schloss Karlsruhe",
14
    "display_name": "Schloss Karlsruhe, 1, Schlossbezirk, Innenstadt-West Östlicher Teil, Innenstadt-West, Karlsruhe, Baden-Württemberg, 76131, Deutschland",
15
    "address": {
16
        "historic": "Schloss Karlsruhe",
17
        "house_number": "1",
18
        "road": "Schlossbezirk",
19
        "neighbourhood": "Innenstadt-West Östlicher Teil",
20
        "suburb": "Innenstadt-West",
21
        "city": "Karlsruhe",
22
        "state": "Baden-Württemberg",
23
        "ISO3166-2-lvl4": "DE-BW",
24
        "postcode": "76131",
25
        "country": "Deutschland",
26
        "country_code": "de"
27
    },
28
    "boundingbox": [
29
        "49.0130412",
30
        "49.0140237",
31
        "8.4032308",
32
        "8.4054431"
33
    ]
34
}