shapeClick not working

[Matt]

I've been working on a map project, and I had shapeClick working, but suddenly it stopped working.  I was working on other parts of the page, but I don't think any of them would have caused this problem.  I've been banging my head against it for 2 hours, and I still have no idea why it won't trigger the shapeClick event any more.

 Here's the function I'm using to create the map and the onShapeClick function as well.  I've got multiple bubble layers, but the one I've been trying to click on the bubbles for is the first one with the dataSource: BLOCKS.

function createMap() {
        $("#map").kendoMap({
            center: [38.268107, -97.744821], zoom: 4,//These two options may be something to set to div options
            height: 400,
            layers: [{
                type: "bing",
                imagerySet: "aerialWithLabels",
                key: "Ajo4NRDLFtd7zTT_LKi4lHrCZCWahx69-ZjmruTcGlBNdIPDUD--iWmlmWl5We_E"
            }, {
                type: "bubble",
                dataSource: BLOCKS,
                locationField: "Location",
                valueField: "Value",
                symbol: function(e) {
                    var map = $("#map").data("kendoMap");

                    var location = e.location;
                    var circleGeometry = new geom.Circle(e.center, e.dataItem.Value);
                    //var rectGeometry = new geom.Rect([e.center[0] - 20, e.center[1] - 10], [e.center[0] + 20, e.center[1] + 10]);

                    //alert(e.dataItem);
                    //alert(e.shape);

                    // Draw the circle shape
                    //
                    // http://docs.telerik.com/kendo-ui/api/javascript/dataviz/drawing/circle
                    var circle = new draw.Circle(circleGeometry, {
                        fill: {
                            color: e.dataItem.Color,
                            opacity: 0.7
                        },
                        stroke: {
                            width: 0
                        }
                    });

                    // Draw the text
                    //
                    // http://docs.telerik.com/kendo-ui/api/javascript/dataviz/drawing/text
                    var text = new draw.Text(e.dataItem.Name, e.center, {//e.dataItem.Name
                        font: "12px sans-serif"
                    });

                    // Align it in the circle center
                    //
                    // http://docs.telerik.com/kendo-ui/api/javascript/drawing#methods-align
                    // http://docs.telerik.com/kendo-ui/api/javascript/drawing#methods-vAlign
                    draw.align([text], circle.bbox(), "center");
                    draw.vAlign([text], circle.bbox(), "center");

                    circle.dataItem = e.dataItem;
                    circle.bubbleType = "block";
                    //alert(1);
                    $(circle).click(function () {
                        alert(this);
                        alert(this.dataItem);
                    });
                    //alert(2);
                    text.dataItem = e.dataItem;
                    text.bubbleType = "block";
                    $(text).click(function () {
                        alert(this);
                        alert(this.dataItem);
                    });
                    var symbol = new draw.Group();
                    symbol.append(circle, text);
                    symbol.dataItem = e.dataItem;
                    symbol.bubbleType = "block";
                    $(symbol).click(function () {
                        alert(this);
                        alert(this.dataItem);
                    });

                    return symbol;
                }
            }, {
                type: "shape",
                dataSource: shapes
            }
            , {
                type: "bubble",
                dataSource: pingBubbles,
                locationField: "Location",
                valueField: "Value",
                symbol: function (e) {
                    var map = $("#map").data("kendoMap");

                    var location = e.location;
                    var circleGeometry = new geom.Circle(e.center, e.dataItem.Value);
                    //var rectGeometry = new geom.Rect([e.center[0] - 20, e.center[1] - 10], [e.center[0] + 20, e.center[1] + 10]);

                    //alert(e.dataItem);
                    //alert(e.shape);

                    // Draw the circle shape
                    //
                    // http://docs.telerik.com/kendo-ui/api/javascript/dataviz/drawing/circle
                    var circle = new draw.Circle(circleGeometry, {
                        fill: {
                            color: e.dataItem.Color,
                            opacity: 0.7
                        },
                        stroke: {
                            width: 0
                        }
                    });

                    // Draw the text
                    //
                    // http://docs.telerik.com/kendo-ui/api/javascript/dataviz/drawing/text
                    var text = new draw.Text(e.dataItem.Name, e.center, {//e.dataItem.Name
                        font: "12px sans-serif"
                    });

                    // Align it in the circle center
                    //
                    // http://docs.telerik.com/kendo-ui/api/javascript/drawing#methods-align
                    // http://docs.telerik.com/kendo-ui/api/javascript/drawing#methods-vAlign
                    draw.align([text], circle.bbox(), "center");
                    draw.vAlign([text], circle.bbox(), "center");

                    circle.dataItem = e.dataItem;
                    circle.bubbleType = "ping";
                    text.dataItem = e.dataItem;
                    text.bubbleType = "ping";
                    var symbol = new draw.Group();
                    symbol.append(circle, text);
                    symbol.dataItem = e.dataItem;
                    symbol.bubbleType = "ping";

                    return symbol;
                }
            }, {
                type: "bubble",
                dataSource: incidentBubbles,
                locationField: "Location",
                valueField: "Value",
                symbol: function (e) {
                    var map = $("#map").data("kendoMap");

                    var location = e.location;
                    var circleGeometry = new geom.Circle(e.center, e.dataItem.Value);
                    //var rectGeometry = new geom.Rect([e.center[0] - 20, e.center[1] - 10], [e.center[0] + 20, e.center[1] + 10]);

                    //alert(e.dataItem);
                    //alert(e.shape);

                    // Draw the circle shape
                    //
                    // http://docs.telerik.com/kendo-ui/api/javascript/dataviz/drawing/circle
                    var circle = new draw.Circle(circleGeometry, {
                        fill: {
                            color: e.dataItem.Color,
                            opacity: 0.7
                        },
                        stroke: {
                            width: 0
                        }
                    });

                    // Draw the text
                    //
                    // http://docs.telerik.com/kendo-ui/api/javascript/dataviz/drawing/text
                    var text = new draw.Text(e.dataItem.Name, e.center, {//e.dataItem.Name
                        font: "12px sans-serif"
                    });

                    // Align it in the circle center
                    //
                    // http://docs.telerik.com/kendo-ui/api/javascript/drawing#methods-align
                    // http://docs.telerik.com/kendo-ui/api/javascript/drawing#methods-vAlign
                    draw.align([text], circle.bbox(), "center");
                    draw.vAlign([text], circle.bbox(), "center");

                    circle.dataItem = e.dataItem;
                    circle.bubbleType = "incident";
                    text.dataItem = e.dataItem;
                    text.bubbleType = "incident";
                    var symbol = new draw.Group();
                    symbol.append(circle, text);
                    symbol.dataItem = e.dataItem;
                    symbol.bubbleType = "incident";

                    return symbol;
                }
            }, {
                type: "bubble",
                dataSource: SELECTEDBLOCKS,
                locationField: "Location",
                valueField: "Value",
                symbol: function (e) {
                    var map = $("#map").data("kendoMap");

                    var location = e.location;
                    var circleGeometry = new geom.Circle(e.center, e.dataItem.Value);
                    //var rectGeometry = new geom.Rect([e.center[0] - 20, e.center[1] - 10], [e.center[0] + 20, e.center[1] + 10]);

                    //alert(e.dataItem);
                    //alert(e.shape);

                    // Draw the circle shape
                    //
                    // http://docs.telerik.com/kendo-ui/api/javascript/dataviz/drawing/circle
                    var circle = new draw.Circle(circleGeometry, {
                        fill: {
                            color: e.dataItem.Color,
                            opacity: 0.7
                        },
                        stroke: {
                            width: 0
                        }
                    });

                    // Draw the text
                    //
                    // http://docs.telerik.com/kendo-ui/api/javascript/dataviz/drawing/text
                    var text = new draw.Text(e.dataItem.Name, e.center, {//e.dataItem.Name
                        font: "12px sans-serif"
                    });

                    // Align it in the circle center
                    //
                    // http://docs.telerik.com/kendo-ui/api/javascript/drawing#methods-align
                    // http://docs.telerik.com/kendo-ui/api/javascript/drawing#methods-vAlign
                    draw.align([text], circle.bbox(), "center");
                    draw.vAlign([text], circle.bbox(), "center");

                    circle.dataItem = e.dataItem;
                    circle.bubbleType = "block";
                    text.dataItem = e.dataItem;
                    text.bubbleType = "block";
                    var symbol = new draw.Group();
                    symbol.append(circle, text);
                    symbol.dataItem = e.dataItem;
                    symbol.bubbleType = "block";

                    return symbol;
                }
            }
            ],
            shapeClick: onShapeClick
        });
    }

    function onShapeClick(e) {
        alert('hola');
    }

As you can see, I tried adding click events to the symbol as well, but that's not working either.

 In case it matters, here's the DataSource definition for BLOCKS:

var BLOCKS = new kendo.data.DataSource({
        type: "odata",
        schema: {
            data: "data",
            model: {
                fields: {
                    BlockId: { type: "number" },
                    Name: { type: "string" },
                    Value: { type: "number" },
                    Location: { type: "object" },
                    Color: { type: "string" },
                    CurrentRouteName: { type: "string" },
                    VehicleId: { type: "number" },
                    VehicleName: { type: "string" },
                    EmployeeId: { type: "number" },
                    EmployeeName: { type: "string" }
                }
            }
        }
    });

 

 

[T. Tsonev]

Hi,

I tried to reproduce the issue in this snippet, but without success.

Can you try modify the snippet to better match your scenario?

Apologies for the caused inconvenience.

Regards,
T. Tsonev
Telerik

 

 

[Matt]

I figured it out.  It only happens when I have multiple bubble layers.  The last layer (bottom most in the html) is the only one which triggers the shapeClick event.  The shapes on the other layers don't trigger it.

I can make this work for my application, but if you get it fixed so the other layers will trigger the event as well then please let me know.

 Thanks

[T. Tsonev]

Hi,

This seems to be a somewhat tricky problem. The SVG element will not pass events through unless you specify pointer-events: none.
That means we can process events only for one of the layers unless we do some kind of event forwarding which seems hacky from the onset.

Perhaps a more sane approach is to allow layers to share a single drawing surface. Each can own a group on the root level to get the z-index sorted.
This might break existing code so perhaps it should be hidden behind a flag.

Does this make sense?

Regards,
T. Tsonev
Telerik