Edit this page

shapeMouseEnter

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.

Event Data

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

The parent layer instance.

e.shape kendo.drawing.Element

The the shape instance.

e.sender kendo.dataviz.ui.Map

The source widget instance.

e.originalEvent Object

The source jQuery event instance

Example - bind to the map shapeMouseEnter event on initialization

<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() {
            console.log("shape mouseenter");
        }
    });
</script>

Example - bind to the map shapeMouseEnter event after initialization

<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) {
        console.log("shape mouseenter");
    });
</script>

Example - Highlight Shapes on shapeMouseEnter/shapeMouseLeave

<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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy