Disable the Mouse-wheel Zoom in the Map

Environment

Product	Progress® Kendo UI® Map for jQuery
Operating System	Windows 10 64bit
Visual Studio Version	Visual Studio 2017
Preferred Language	JavaScript

Description

How can I disable the mouse-wheel zoom in the Kendo UI for jQuery Map?

Solution

The following example demonstrates how to disable the mouse-wheel zoom in the Map widget.

    <div id="map"></div>
    <div style="height: 1000px; color: #fff; background: purple; font-size: 24px; text-align: center;">Very high div</div>
    <script>
      function createMap() {
        $("#map").kendoMap({
          center: [30.268107, -97.744821],
          zoom: 3,
          layers: [{
            type: "tile",
            urlTemplate: "http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
            subdomains: ["a", "b", "c"],
            attribution: "&copy; <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>"
          }],
          markers: [{
            location: [30.268107, -97.744821],
            shape: "pinTarget",
            tooltip: {
              content: "Austin, TX"
            }
          }]
        });          

        $("#map").unbind("mousewheel");
        $("#map").unbind("DOMMouseScroll");
      }

      $(document).ready(createMap);
    </script>

See Also

• Basic Usage of the Map (Demo)
• Using the API of the Map (Demo)
• JavaScript API Reference of the Map