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: "© <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>