leaflet-plain-javascript/index.html

<!DOCTYPE html>
<html>

<head>

    <title>Simple Leaflet Map Display Example</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Import Leaflet library ans its CSS  -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />

    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>


    <!-- Style for Leaflet -->
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
        }
        
        #map {
            width: 100%;
            height: 50vh;
        }
        
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
        
        .info {
            padding: 6px 8px;
            font: 14px/16px Arial, Helvetica, sans-serif;
            background: white;
            background: rgba(255, 255, 255, 0.8);
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
            border-radius: 5px;
        }
        
        .info h4 {
            margin: 0 0 5px;
            color: #777;
        }
        
        .legend {
            text-align: left;
            line-height: 18px;
            color: #555;
        }
        
        .legend i {
            width: 18px;
            height: 18px;
            float: left;
            margin-right: 8px;
            opacity: 0.7;
        }
        
        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        /* css to customize Leaflet default styles  */
        
        .popupCustom .leaflet-popup-tip,
        .popupCustom .leaflet-popup-content-wrapper {
            color: #234c5e;
            border-radius: 1px;    
        }

        .leaflet-popup-close-button {
            display: none; 
        }
    </style>

    <!-- Style for the HTML page -->
    <style>
        .item1 {
            grid-area: header;
        }
        
        .item2 {
            grid-area: menu;
        }
        
        .item3 {
            grid-area: main;
        }
        
        .item4 {
            grid-area: right;
        }
        
        .grid-container {
            display: grid;
            grid-template-areas: 'header header header header header' 'menu main main main right';
            grid-gap: 10px;
            padding: 10px;
        }
        
        .grid-container>div {
            background-color: rgba(255, 255, 255, 0.8);
            text-align: center;
            padding: 20px 0;
            font-size: 15px;
        }
    </style>

</head>

<body>

    <div class="grid-container">
        <div class="item1">
            <h1>Simple Leaflet Example</h1>
        </div>
        <div class="item2"></div>
        <div class="item3">
            <div id='map'></div>
        </div>
        <div class="item4" id="more"></div>
    </div>

    <script src="./pois.js" type="text/javascript"></script>

    <script src="./leaflet-map.js" type="text/javascript"></script>

</body>

</html>