New to Kendo UI for jQuery? Start a free 30-day trial

EventToView

methods

Retrieves relative (view) coordinates that correspond to this mouse event. Layer elements positioned on these coordinates will appear under the mouse cursor.

View coordinates are no longer valid after a map reset.

eventToView

Parameters:eObject|jQuery.Event

The DOM or jQuery mouse event.

Returns:kendo.geometry.Point

The relative (view) coordinates that correspond to this mouse event.

<style>
    .box {
        position: absolute;
        display: block;
        width: 10px;
        height: 10px;
        margin: -5px 0 0 -5px;
        background: red;
    }
</style>
<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "tile",
            urlTemplate: "https://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
            attribution: "&copy; OpenStreetMap"
        }]
    });

    var map = $("#map").data("kendoMap");
    $("#map").click(function(e) {
        var view = map.eventToView(e);
        $("<span class='box'></span>")
        .css({ top: view.y, left: view.x })
        .appendTo(map.scrollElement);
    });
</script>