Accessing Marker Data When Clicked and Display In Popup
The following example will demonstrate how to access marker data upon selection as well as how to show that data in a popup.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Xweather JavaScript SDK - Basic Interactive Map App</title>
<script defer src="https://cdn.aerisapi.com/sdk/js/1.2.6/aerisweather.min.js"></script>
<link rel="stylesheet" href="https://cdn.aerisapi.com/sdk/js/1.2.6/aerisweather.css">
<style>
#app {
font-family: 'Helvetica','Arial',sans-serif;
height: 600px;
margin: 30px auto;
width: 1000px;
}
.info-popup div.content {
width: 240px;
overflow: hidden;
}
.info-popup div.title {
font-weight: bold;
text-align: center;
font-size: 1.2em;
width: 100%;
height: 1.3em;
}
.info-popup div.row {
width: 100%;
height: 1.1em;
padding-top: 4px;
}
.info-popup div.label {
font-weight: bold;
width: 95px;
float: left;
}
.info-popup div.value {
width: 135px;
float: left;
padding-left: 4px;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
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,
layers: 'stormreports'
},
panels: {
layers: {
buttons: [{
id: 'radar',
title: 'Radar',
value: 'radar:70'
},{
id: 'stormreports',
value: 'stormreports',
title: 'Storm Reports',
}]
},
legends: {
position: {
pin: 'bottomleft',
translate: { x: 10, y: -30 }
}
},
timeline: {
position: {
translate: {x: 0, y: -15}
}
}
}
});
//Show storm report marker info when selected
app.map.on('marker:click', (e) => {
if (e.data) {
let data = e.data.data || {};
const source = data.awxjs_source;
if (source == 'stormreports') {
const popupContent = getStormReportMarkerContent(aeris,data);
//Take html returned from function and show in popup
e.data.marker.unbindPopup().bindPopup(popupContent, {
className: 'info-popup',
maxWidth : 500,
}).openPopup();
}
}
});
//Function uses extracted marker data and returns html for popup
const getStormReportMarkerContent = (aeris, data) => {
const latPos = Math.abs(data.loc.lat) + ((data.loc.lat < 0) ? 'S' : 'N');
const lonPos = Math.abs(data.loc.long) + ((data.loc.long < 0) ? 'W' : 'E');
let details = '';
if (data.report.cat === 'hail') {
if (!utils.isEmpty(data.report.detail.hailIN)) {
details = `
<div class="row">
<div class="label">Hail Diameter:</div>
<div class="value">${(data.report.detail.hailIN).toFixed(2)} in</div>
</div>`;
}
}
if (data.report.cat === 'wind') {
if (!utils.isEmpty(data.report.detail.windSpeedMPH)) {
details = `
<div class="row">
<div class="label">Wind Speed:</div>
<div class="value">${data.report.detail.windSpeedMPH} mph</div>
</div>`;
}
}
if (data.report.cat === 'rain') {
if (!utils.isEmpty(data.report.detail.rainIN)) {
details = `
<div class="row">
<div class="label">Rainfall:</div>
<div class="value">${(data.report.detail.rainIN).toFixed(2)} in</div>
</div>`;
}
}
return (`<div class="content">
<div class="title">${utils.strings.toName(data.report.type)}</div>
<div class="row">
<div class="label">Location:</div>
<div class="value">${data.report.name}</div>
</div>
<div class="row">
<div class="label">Date:</div>
<div class="value">${utils.dates.format(new Date(data.report.timestamp * 1000), 'h:mm a, MMM D, YYYY')}</div>
</div>
${details}
<div class="row">
<div class="label">Reporter:</div>
<div class="value">${data.report.reporter}</div>
</div>
<div class="row">
<div class="label">WFO:</div>
<div class="value">${(data.report.wfo).toUpperCase()}</div>
</div>
${!utils.isEmpty(data.report.comments) ? `
<div class="row">
<div class="label">Comments</div>
<div class="value">${data.report.comments}</div>
</div>` : ''}
</div>`);
};
});
};
</script>
</body>
</html>