Dashboard Template

Sotirios Zormpas hi,
I noticed that this website also uses the open-source map you shared. I’m very interested in the red area feature displayed on the map. Can this be used in this great database? Thank you.

Sotirios Zormpas ok, thank you very much for your explanation - understood now!

Well, I wonder if I can provide kind of (shared)link like in google maps, so clients can see the map too. On the other hand they would need ninox to see the records when clicking on iconcs, so I guess I would need to buy licenses for clients and that wouldnt be worth it , so I will need to stay with google maps.

Sotirios Zormpas Thank you for your help.

Sotirios Zormpas 
Hi friend, I found that the database cannot use the following code in the 'On Open' trigger. Is this an issue?

openTable("Dashboard")

Sotirios  thank you friend~

Sotirios Zormpas 
Hello friend, I have added the "cluster maps" feature into the code below, but it doesn't display the aggregated statistical numbers. What could be the problem?

let _accounts := (select Accounts);
let myGeoJson := {
        type: "FeatureCollection",
        features: _accounts.{
            type: "Feature",
            properties: {
                id: raw(Id),
                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>

 <script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/leaflet.markercluster.js'></script>
 <link href='https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/MarkerCluster.css' rel='stylesheet' />
 <link href='https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/MarkerCluster.Default.css' rel='stylesheet' />

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

 <script>
     setTimeout(function(){

         var alidadeSmooth = L.tileLayer('" +
Settings[Id = 5].Value +
"', {
              maxZoom: 20,
              attribution: '" +
Settings[Id = 6].Value +
"'
});

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

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

        var map = L.map('map')
               .addLayer(alidadeSmooth)
            .setView([40.416775, -3.703790], 6);

        var LeafIcon = L.Icon.extend({
                            options: {
                            shadowUrl: 'https://share.ninox.com/m3s3wdhmqxasol3sukknnu51lok48u7ndf7l',
                            iconSize:     [27.6, 44.6],
                            iconAnchor:   [13.8, 44.6],
                            shadowSize:   [41, 41],
                            shadowAnchor: [10, 41],
                            }
        });

        var redIcon = new LeafIcon({iconUrl: 'https://share.ninox.com/n6z5enqxwdjjg97hkbs7vwpoygnkmzp8ok67'}),
            greenIcon = new LeafIcon({iconUrl: 'https://share.ninox.com/b3d6tidb2syba20fyaevy4n3hpv0saecpilj'}),
            blueIcon = new LeafIcon({iconUrl: 'https://share.ninox.com/18zvxhey2pf7ichgppv5fb275monke6pt6p7'});

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

        var markers = L.markerClusterGroup();

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

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

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

        markers.addLayer(activeStatusLayer);
        markers.addLayer(suspendedStatusLayer);
        markers.addLayer(deactivatedStatusLayer);

        map.addLayer(markers);

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

     },1000);
 </script>

")

Sotirios Zormpas 

It seems more complicated than I thought. Could you please help me with another question? How can I set the map to display only the global range, excluding the area within the red box?

Sotirios Zormpas 

Is it possible to display only one map overall, regardless of the zoom level?

Sotirios Zormpas Hi friend, maybe the translation didn’t quite capture what I meant. I’ve made the following GIF to show what I mean. When the map is zoomed out to the smallest level, multiple map tiles appear. However, I only want to display one complete globe map. Is this achievable?

Sotirios Zormpas thanks'