Tooltip on custom symbol for bubble layer

2 posts, 0 answers
  1. Matt
    Matt avatar
    38 posts
    Member since:
    Nov 2014

    Posted 06 Nov 2015 Link to this post

    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"
                    },
              
                },

  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 11 Nov 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top