Leaflet Map with a Default Marker


<!DOCTYPE html>

<html>

<head>

<title>Leaflet Web Map</title>

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

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

<!-- set width and height styles for map -->
<style>
#map {
    width: 960px;
    height:500px;
}
</style>

</head>

<body>

    <!-- place holder for map -->
    <div id="map"></div>

<script>

    //  create map object, tell it to live in 'map' div and give initial latitude, longitude, zoom values 
    var map = L.map('map', {scrollWheelZoom:false}).setView([43.64701, -79.39425], 15);

    //  add base map tiles from OpenStreetMap and attribution info to 'map' div
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    // create  marker object, add to map at point specified
    var marker = L.marker([43.64701, -79.39425]).addTo(map);

</script>

</body>

</html>