This is a migrated thread and some comments may be shown as answers.

shapeClick not working

3 Answers 34 Views
Map
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 02 Jul 2015, 09:09 PM

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
                    //
                    var circle = new draw.Circle(circleGeometry, {
                        fill: {
                            color: e.dataItem.Color,
                            opacity: 0.7
                        },
                        stroke: {
                            width: 0
                        }
                    });
 
                    // Draw the 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
                    //
                    var circle = new draw.Circle(circleGeometry, {
                        fill: {
                            color: e.dataItem.Color,
                            opacity: 0.7
                        },
                        stroke: {
                            width: 0
                        }
                    });
 
                    // Draw the 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
                    //
                    var circle = new draw.Circle(circleGeometry, {
                        fill: {
                            color: e.dataItem.Color,
                            opacity: 0.7
                        },
                        stroke: {
                            width: 0
                        }
                    });
 
                    // Draw the 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
                    //
                    var circle = new draw.Circle(circleGeometry, {
                        fill: {
                            color: e.dataItem.Color,
                            opacity: 0.7
                        },
                        stroke: {
                            width: 0
                        }
                    });
 
                    // Draw the 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" }
                }
            }
        }
    });
 

 

3 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 06 Jul 2015, 10:28 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Matt
Top achievements
Rank 1
answered on 06 Jul 2015, 08:12 PM

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

0
T. Tsonev
Telerik team
answered on 08 Jul 2015, 02:18 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Map
Asked by
Matt
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Matt
Top achievements
Rank 1
Share this question
or