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.

A tornado storm report marker selected.
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AerisWeather 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 AerisWeather('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>

Last modified: July 30, 2020