Leaflet Map with Scroll Wheel Zoom Disabled


		
<!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
    // pass option to turn scroll wheel zoom off
    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);
    
</script>

</body>

</html>