Tooltip on custom symbol for bubble layer

[Matt]

I'm trying to add a tooltip for a custom symbol in a bubble layer.

 

I tried adding it directly to the symbol, and I've tried adding it to the layer.  If I add it to the symbol it throws an error and won't display any.  If I add it to the layer it  just doesn't display the tooltip.

 


            {
                type: "bubble",
                dataSource: SELVEHICLEWITHSTUFF,
                locationField: "Location",
                valueField: "Value",              
                symbol: function (e) {
                    //alert('selVehicle symbol '+e.center+' '+e.location);
                    var map = $("#map2").data("kendoMap");

                    //alert(1);
                    var location = e.location;
                    if (e.location == null || e.location == [0, 0]) {
                        //alert(e.dataItem.Name);
                        var symbol = new draw.Group();
                        return symbol;
                    }
                    else {
                        if (e.dataItem.Type == "Ping") {
                            //alert('hola');
                            var rect = new geom.Rect(
                                e.center,  // Position of the top left corner
                                [e.dataItem.Value, e.dataItem.Value] // Size of the rectangle
                            );
                            var imgString = "/Content/Arrows/Blue/"+e.dataItem.Name+".png";                            
                            var image = new draw.Image(imgString, rect);

                            return image;
                        }
                        else {
                            //alert(2);
                            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
                            //alert(3);
                            var circle = new draw.Circle(circleGeometry, {
                                fill: {
                                    color: "#0f0",
                                    opacity: 0.7
                                },
                                stroke: {
                                    width: 0
                                }
                            });
                            //alert(4 +' '+e.dataItem.Color);

                            // 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"
                            });
                            //alert(5+' '+e.dataItem.Name);

                            // 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
                            ////////These two lines are throwing errors here, but not in otp.mvc.  Not sure why.
                            //draw.align([text], circle.bbox(), "center");
                            //draw.vAlign([text], circle.bbox(), "center");
                            //alert(6);

                            circle.dataItem = e.dataItem;
                            circle.bubbleType = e.dataItem.Type;
                            //alert(7);
                            text.dataItem = e.dataItem;
                            text.bubbleType = e.dataItem.Type;
                            //alert(8);
                            var symbol = new draw.Group();
                            symbol.append(circle, text);
                            symbol.dataItem = e.dataItem;
                            symbol.bubbleType = e.dataItem.Type;
                            //symbol.kendoTooltip({
                            //    filter: "a",
                            //    content: "Testing",
                            //    width: 220,
                            //    height: 280,
                            //    position: "top"
                            //});
                            //alert(9);

                            return symbol;
                        }
                    }
                },
                tooltip: {
                    content: "Austin, TX"
                },
          
            },

[T. Tsonev]

Hello,

Sorry for the delay.

We can use the same approach as in the Display Shape Tooltips article as the bubble layer is a kind of shape layer.
I've modified the snippet to demonstrate.

I hope this helps.

Regards,
T. Tsonev
Telerik