Sotirios Zormpas  Agreed 

Sotirios Zormpas 

Hi Sotirios.  Adding the Documents one after the other in the same Widget, 

Add the fitst data, next save and place the widget empty again, add then next and next to finish click Cancel

Sotirios Zormpas Hi Sotirios. That was exactly the idea. Thanks.

Sotirios Zormpas  Hi friend, I have set the location to display in real time. How do I configure the Ninox API and write to the Ninox address? I look forward to your help.

let _accounts := (select Accounts);
let myGeoJson := {
        type: "FeatureCollection",
        features: _accounts.{
            type: "Feature",
            properties: {
                id: raw('身份标识'),
                name: "<b>" + 'First Name' + "  " + 'Last Name' + ",  " + age(DOB) + " yrs" + "</b>",
                status: text(Status)
            },
            geometry: {
                type: "Point",
                coordinates: [longitude(Address), latitude(Address)]
            }
        }
    };
html("
<link rel='stylesheet' href='https://unpkg.com/leaflet@1.9.4/dist/leaflet.css'
     integrity='sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY='
     crossorigin=''/>

<script src='https://unpkg.com/leaflet@1.9.4/dist/leaflet.js'
     integrity='sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo='
     crossorigin=''></script>

<div id='map' style='height: 100%; width: 100%;'></div>

<script>
    setTimeout(function(){
        var alidadeSmooth = L.tileLayer('" +
Settings['身份标识' = 5].Value +
"', {
              maxZoom: 20,
              attribution: '" +
Settings['身份标识' = 6].Value +
"'
        });

        var stadiaOutdoors = L.tileLayer('" +
Settings['身份标识' = 7].Value +
"', {
              maxZoom: 20,
              attribution: '" +
Settings['身份标识' = 6].Value +
"'
        });

        var stamenToner = L.tileLayer('" +
Settings['身份标识' = 8].Value +
"', {
              maxZoom: 20,
              attribution: '" +
Settings['身份标识' = 6].Value +
"'
        });

        // Initialize map without setView
        var map = L.map('map').addLayer(alidadeSmooth);

        var markerOptions = {
            radius: 20,
            weight: 2,
            opacity: 1,
            fillOpacity: 0.5
        };

        function onEachFeature(feature, layer) {
           layer.bindTooltip(feature.properties.name);
           layer.on('click', function(e) {
                    ui.popupRecord(feature.properties.id);
           });
        }

        var activeStatusLayer = L.geoJSON(" +
myGeoJson +
", {
            filter: function(feature, layer) {
                return (feature.properties.status === 'Active');
            },
            pointToLayer: function (feature, latlng) {
                return L.circleMarker(latlng, markerOptions);
            },
            style: {color: '#00FF00'},
            onEachFeature: onEachFeature
        }).addTo(map);

        var suspendedStatusLayer = L.geoJSON(" +
myGeoJson +
", {
            filter: function(feature, layer) {
                return (feature.properties.status === 'Suspended');
            },
            pointToLayer: function (feature, latlng) {
                return L.circleMarker(latlng, markerOptions);
            },
            style: {color: '#005AFF'},
            onEachFeature: onEachFeature
        }).addTo(map);

        var deactivatedStatusLayer = L.geoJSON(" +
myGeoJson +
", {
            filter: function(feature, layer) {
                return (feature.properties.status === 'Deactivated');
            },
            pointToLayer: function (feature, latlng) {
                return L.circleMarker(latlng, markerOptions);
            },
            style: {color: '#FF0000'},
            onEachFeature: onEachFeature
        }).addTo(map);

        var baseMaps = {
             'Alidade Smooth': alidadeSmooth,
             'Stadia Outdoors': stadiaOutdoors,
             'Stamen Toner': stamenToner,
        };

        var overlayMaps = {
             '<span style=""color: #00FF00"">Active</span>': activeStatusLayer,
             '<span style=""color: #005AFF"">Suspended</span>': suspendedStatusLayer,
             '<span style=""color: #FF0000"">Deactivated</span>': deactivatedStatusLayer,
        };
        var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);

        // Current location tracking
        var currentLocationMarker = null;

        if (navigator.geolocation) {
            navigator.geolocation.watchPosition(
                function(position) {
                    var lat = position.coords.latitude;
                    var lng = position.coords.longitude;

                    if (currentLocationMarker) {
                        map.removeLayer(currentLocationMarker);
                    }

                    currentLocationMarker = L.marker([lat, lng], {
                        icon: L.divIcon({
                            className: 'current-location-marker',
                            html: '<div style=""background-color: #1E90FF; border: 2px solid white; border-radius: 50%; width: 15px; height: 15px;""></div>'
                        })
                    }).addTo(map);

                    currentLocationMarker.bindPopup('当前位置<br>纬度: ' + lat.toFixed(6) + '<br>经度: ' + lng.toFixed(6))
                        .openPopup();

                    map.setView([lat, lng], 15);
                },
                function(error) {
                    console.error('获取位置失败:', error);
                    // Set default view if geolocation fails
                    map.setView([40.416775, -3.703790], 6);
                },
                {
                    enableHighAccuracy: true,
                    maximumAge: 0,
                    timeout: 5000
                }
            );
        } else {
            console.error('浏览器不支持地理定位');
            // Set default view if geolocation is not supported
            map.setView([40.416775, -3.703790], 6);
        }

    },1000);
</script>
")