Create a Custom Map App Data Source

Create a custom data source and add it to an interactive map app. The following example will setup a vector data source that loads a custom list of facilities and renders them on the map.
Custom interactive map app data source example
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Aeris JavaScript SDK - Custom Interactive Map App Data Source</title>
    <script defer src="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.min.js"></script>
    <link rel="stylesheet" href="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.css">
 
    <style>
    #map {
        height: 400px;
        margin: 30px auto;
        width: 800px;
    }
    </style>
 
</head>
<body>
 
<div id="app"></div>
 
<script>
 
    const facilitiesSources = {
        locations: {
            url: 'https://demos.aerisweather.com/map-app/data/retail.json',
            icon: {
                url: 'https://demos.aerisweather.com/map-app/assets/icons/icon-facility.svg'
            }
        }
    };
 
    const fetchData = (limit) => {
        return fetch(facilitiesSources.locations.url)
            .then((response) => response.json())
            .then((json) => {
                const results = [];
                const count = json.length;
                let n = 0;
 
                // randomly add results based on the limit for demonstration purposes
                while (n < limit) {
                    const index = Math.round(Math.random() * (count - 1));
                    results.push(json[index]);
                    n += 1;
                }
 
                return results;
            });
    };
 
    // local cache for all returned results that get pushed to the datasource
    // whenever we update the current data to display
    let payload = [];
 
    window.onload = () => {
 
        const aeris = new Xweather('CLIENT_ID', 'CLIENT_SECRET');
        const utils = aeris.utils;
 
        aeris.apps().then((apps) => {
            const app = new apps.InteractiveMapApp('#app', {
                map: {
                    strategy: 'leaflet',
                    zoom: 4,
                    center: { lat: 37, lon: -93 },
                    layers: 'radar'
                },
                panels: {
                    layers: {
                        buttons: [{
                            id: 'radar',
                            value: 'radar:80',
                            title: 'Radar'
                        },{
                            id: 'satellite',
                            value: 'satellite:75',
                            title: 'Satellite'
                        },{
                            id: 'alerts',
                            value: 'alerts',
                            title: 'Alerts'
                        }]
                    }
                }
            });
 
            // create a custom vector data source with id `facilities`
            // we set the initial data on the data source by passing our `payload` cache to the `data.items`
            // configuration option for the data source
            const facilities = app.addSource('facilities', 'vector', {
                data: {
                    items: payload,
 
                    // return the coordinate for each result based on the remote source's unique
                    // property structure so the data source knows where each item is located
                    coordinate: (data) => {
                        const { lat, lon } = data;
                        return { lat, lon };
                    }
                },
                style: {
                    marker: data => {
                        const icon = facilitiesSources.locations.icon;
                        return {
                            icon: {
                                url: icon.url
                            },
                            size: [30, 30]
                        };
                    }
                }
            });
 
            app.on('ready', async () => {
                app.map.addSource(facilities);
 
                // function to update the data source by appending new results to the local cache
                // and sending the new payload to the data source via `update()`
                const updateDataSource = (results) => {
                    payload = payload.concat(results);
                    facilities.update({ items: payload });
                }
 
                // fetch initial data set of 5 results
                updateDataSource(await fetchData(5));
 
                // fetch new results every few seconds to mimic progressively adding to and updating
                // the data source data currently on the map
                setInterval(async () => {
                    updateDataSource(await fetchData(2));
                }, 5000);
            });
        });
 
    };
 
</script>
 
</body>
</html>
Create an interactive map app using Google Maps Accessing marker data to display in popups