index.html

<!DOCTYPE html>
<html>
  <head>
    <title>leaflet-map template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <!-- Load Leaflet: instructions at http://leafletjs.com/download.html -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>
    <!-- Leaflet Control Geocoder https://github.com/perliedman/leaflet-control-geocoder -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
    <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
    <!-- Leaflet Coordinates Control from https://github.com/zimmicz/Leaflet-Coordinates-Control -->
    <link rel="stylesheet" href="Control.Coordinates.css" />
    <script type="text/javascript" src="Control.Coordinates.js"></script>
    <!-- Leaflet Zoom Label from https://github.com/unbam/Leaflet.ZoomLabel -->
    <link rel="stylesheet" href="L.Control.ZoomLabel.css">
    <script type="text/javascript" src="L.Control.ZoomLabel.js"></script>
    <!-- load jQuery: instructions at https://code.jquery.com/ -->
    <script   src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
    crossorigin="anonymous"></script>
    <!-- load css  -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- div to display map; add more for title and caption if desired -->
    <div id="map"></div>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>