<h1>Trifid interactive map</h1>

    <!-- our script needs jQuery -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js" charset="utf-8"></script>

    <!-- Aladin Lite container at requested dimensions -->
    <div id="aladin-lite-div" style="width:700px;height:400px;"></div>

    <input id="DSS" type="radio" name="survey" value="P/DSS2/color" checked><label for="DSS">DSS color<label>
    <input id="DSS-blue" type="radio" name="survey" value="P/DSS2/blue"><label for="DSS-blue">DSS blue<label>
    <input id="2MASS" type="radio" name="survey" value="P/2MASS/color"><label for="2MASS">2MASS<label>
    <input id="allwise" type="radio" name="survey" value="P/allWISE/color"><label for="allwise">AllWISE<label>
    <input id="glimpse" type="radio" name="survey" value="P/GLIMPSE360"><label for="glimpse">GLIMPSE 360<label>


    <!-- Aladin Lite JS code -->
    <script type="text/javascript" src="https://aladin.cds.unistra.fr/AladinLite/api/v3/latest/aladin.js" charset="utf-8"></script>

    <!-- Creation of Aladin Lite instance with initial parameters -->
    <script type="text/javascript">
        let aladin;
        A.init.then(() => {
            aladin = A.aladin('#aladin-lite-div', {survey: "P/DSS2/color", fov:1.5, target: "M 20"});

            $('input[name=survey]').change(function() {
                aladin.setImageSurvey($(this).val());
            });

            var marker1 = A.marker(270.332621, -23.078944, {popupTitle: 'PSR B1758-23', popupDesc: 'Object type: Pulsar'});
            var marker2 = A.marker(270.63206, -22.905550, {popupTitle: 'HD 164514', popupDesc: 'Object type: Star in cluster'});
            var marker3 = A.marker(270.598121, -23.030819, {popupTitle: 'HD 164492', popupDesc: 'Object type: Double star'});
            var markerLayer = A.catalog({color: '#800080'});
            aladin.addCatalog(markerLayer);
            markerLayer.addSources([marker1, marker2, marker3]);

            aladin.addCatalog(A.catalogFromSimbad('M 20', 0.2, {shape: 'plus', color: '#5d5', onClick: 'showTable'}));
            aladin.addCatalog(A.catalogFromVizieR('J/ApJ/562/446/table13', 'M 20', 0.2, {shape: 'square', sourceSize: 8, color: 'red', onClick: 'showPopup'}));

            var footprintLayer = A.graphicOverlay({color: '#2345ee', lineWidth: 3});
            aladin.addOverlay(footprintLayer);
            footprintLayer.addFootprints([A.polygon([[270.62172, -23.04858], [270.59267, -23.08082], [270.62702, -23.10701], [270.64113, -23.09075], [270.63242, -23.08376], [270.63868, -23.07631], [270.63131, -23.07021], [270.63867, -23.06175]])]);

            aladin.displayJPG('https://cdn.eso.org/images/screen/eso0930a.jpg');
        });
    </script>