Examples
Accessing marker data to display in popups

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>