Back to all docs
API Reference / dataviz / ui / Map / shapeMouseEnter
New to Kendo UI for jQuery? Start a free 30-day trial

ShapeMouseEnter

events

Fired when the mouse enters a shape.

Important

This event will fire reliably only for shapes that have set fill color. The opacity can still be set to 0 so the shapes appear to have no fill.

shapeMouseEnter

Event Data

e.layer kendo.dataviz.map.layer.Shape

The parent layer instance.

e.shape kendo.drawing.Element

The shape instance.

e.sender kendo.dataviz.ui.Map

The source widget instance.

e.originalEvent Object

The source jQuery event instance

<div id="map"></div>
<script>
    $("#map").kendoMap({
        zoom: 3,
        center: [0, 0],
        layers: [{
          type: "shape",
          dataSource: {
            type: "geojson",
            data: [{
              "type": "Polygon",
              "coordinates": [
                [[0, 10], [0, 20], [10, 20], [10, 10], [0, 10]]
              ]
            }, {
              "type": "Polygon",
              "coordinates": [
                [[0, 0], [0, 10], [10, 10], [10, 0], [0,0]]
              ]
            }]
          },
          style: {
            fill: {
              color: "#aaa"
            }
          }
        }],
        shapeMouseEnter: function() {
/* The result can be observed in the DevTools(F12) console of the browser. */
            console.log("shape mouseenter");
        }
    });
</script>
<div id="map"></div>
<script>
    $("#map").kendoMap({
        zoom: 3,
        center: [0, 0],
        layers: [{
          type: "shape",
          dataSource: {
            type: "geojson",
            data: [{
              "type": "Polygon",
              "coordinates": [
                [[0, 10], [0, 20], [10, 20], [10, 10], [0, 10]]
              ]
            }, {
              "type": "Polygon",
              "coordinates": [
                [[0, 0], [0, 10], [10, 10], [10, 0], [0,0]]
              ]
            }]
          },
          style: {
            fill: {
              color: "#aaa"
            }
          }
        }]
    });

    var map = $("#map").data("kendoMap");
    map.bind("shapeMouseEnter", function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
        console.log("shape mouseenter");
    });
</script>
<div id="map"></div>
<script>
  $("#map").kendoMap({
    zoom: 3,
    layers: [{
      type: "shape",
      dataSource: {
        type: "geojson",
        data: [{
          "type": "Polygon",
          "coordinates": [
            [[0, 10], [0, 20], [10, 20], [10, 10], [0, 10]]
          ]
        }, {
          "type": "Polygon",
          "coordinates": [
            [[0, 0], [0, 10], [10, 10], [10, 0], [0,0]]
          ]
        }]
      },
      style: {
        // Simulate no fill with a fully transparent color
        fill: {
          color: "#fff",
          opacity: 0
        }
      }
    }],
    shapeMouseEnter: function(e) {
      e.shape.fill("#00f", 1);
    },
    shapeMouseLeave: function(e) {
      e.shape.fill("#fff", 0);
    }
  });
</script>
Not finding the help you need?
Contact Support