tests/LeafletTest1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Leaflet Test 1 (Leaflet Quick Start Guide)</title>
    <!-- Reference: https://leafletjs.com/examples/quick-start/ -->
    <link rel="stylesheet" href="../resources/libs/leaflet/1.3.4/leaflet.css"/>
    <script src="../resources/libs/leaflet/1.3.4/leaflet.js"></script>
    <style>
        html, body, #map {
            height: 100%;
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    var map = L.map("map").setView([39.9062, 116.3912], 13);

    L.tileLayer('https://server.arcgisonline.com/arcgis/rest/services/world_imagery/mapserver/tile/{z}/{y}/{x}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 19,
        id: 'world_imagery',
    }).addTo(map);

    {
        var marker = L.marker([39.9062, 116.3912]).addTo(map);
        var circle = L.circle([39.9062, 116.3912], {
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0.5,
            radius: 500
        }).addTo(map);
        var polygon = L.polygon([
            [39.8962, 116.3812],
            [39.8962, 116.4012],
            [39.9162, 116.4012],
            [39.9162, 116.3812]
        ]).addTo(map);
        marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
        circle.bindPopup("I am a circle.");
        polygon.bindPopup("I am a polygon.");
    }

    {
        var popup = L.popup()
            .setLatLng([39.9262, 116.3912])
            .setContent("I am a standalone popup.")
            .openOn(map);
    }

    {
        // function onMapClick(e) {
        //     alert("You clicked the map at " + e.latlng);
        // }
        // map.on("click", onMapClick);
    }

    {
        var popup_ = L.popup();

        function onMapClick(e) {
            popup_.setLatLng(e.latlng)
                .setContent("You clicked the map at " + e.latlng.toString())
                .openOn(map);
        }

        map.on('click', onMapClick);
    }
</script>
</body>
</html>