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.
<!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>