Dashboard Template

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>
")