Map Bubble unable to change size

[Matt]

var bubbles = [{
            "Item": "1",
            "Value": "840",
            "Location": [32.7, -97.744821]
        }];
    function createMap() {
        $("#map").kendoMap({
            center: [38.268107, -97.744821], zoom: 4,
            height: 400,
            layers: [{
                type: "bing",
                imagerySet: "aerialWithLabels",
                key: "MyBingKey"
            },
            {
                type: "bubble",
                dataSource: bubbles,
                locationField: "Location",
                valueField: "Value"
            }],
            shapeCreated: function (e) {
                alert('shape created');
            }
        });
    }

 

Right now I'm just trying to get familiar with the functionality of map bubbles to see if I can use them for what I need.  Unfortunately I'm having an issue with the size of the bubbles.  Everything I've read in the examples makes me think that changing the Value of the bubble should automatically change the size of the bubble.  However, it doesn't seem to matter what I set the Value to, it is always the same size (about an inch diameter). 

I'm not sure what I'm doing wrong.

[Matt]

I also tried adding a label to the bubble the same way I would to a regular shape, but for some reason it always puts it behind the bubble.  I have to change the opacity to less than 0.5 to be able to see the label.

shapeCreated: function (e) {
                //alert('shape created '+e.shape.Value);
                var shape = e.shape;
                shape.fill("#88f");
                shape.opacity(0.5);

                // Calculate shape bounding box
                var bbox = e.shape.bbox();
                var center = bbox.center();

                // Create the label
                var labelText = "Label";//e.shape.dataItem.properties.abbrev;
                var label = new kendo.drawing.Text(labelText);
                var labelCenter = label.bbox().center();

                // Position the label
                label.position([
                  center.x - labelCenter.x,
                  center.y - labelCenter.y
                ]);

                // Render the label on the layer surface
                e.layer.surface.draw(label);
            }

 

On another note about Bubbles: In shapeCreated how can I get the attributes of the object being passed to the map's bubble layer's datasource?  

 

[Matt]

I found the dataItem attribute of e.shape which I can use to get attributes, but I still can't put the label in front of the bubble or control the size of the bubble.

[T. Tsonev]

Hello,

My recommendation is to override the bubble rendering entirely by using a custom symbol.
I have an existing demo here that I've adapted it to match your scenario more closely.

I hope this helps.

Regards,
T. Tsonev
Telerik

 

 

[Matt]

Thank you so much.  That got it working.  When I first tried the custom symbol it kept throwing an error, but then I realized the kendo.all.min.js and jquery.min.js files I was using were older versions.  Once I updated them to the new ones it started working properly.

 

[Matt]

I'm running into another issue.  I'm not sure if it's related to doing the symbol thing or not, but in case it is, I'm going to put it in here.

I'm trying to do something when the bubble is clicked on based on the data item, but unfortunately when I try to get the data item it says it's undefined.

shapeClick: function (e) {
                alert(e.shape);
                alert(e.shape.dataItem);
                alert(e.shape.dataItem.Id);
}

alert(e.shape); says it's got an object, but e.shape.dataItem says undefined, and e.shape.dataItem.Id throws an error because it assumes that e.shape.dataItem is not undefined, but is in fact an object.

The parameter for shapeCreated also contains a shape property, but that one has a dataItem containing the data used to create the shape.  This dataItem in shapeCreated is the same as I get in symbol, but in symbol it doesn't go through the shape field.  Instead of e.shape.dataItem it's just e.dataItem.  I tried doing an alert with e.dataItem in shapeClick as well, but it said that was undefined too.

 

 

[Matt]

I was able to verify that it only has this problem after doing a custom symbol.  So I'm losing the dataItem from the shape after doing the custom symbol.  Is there any way around that?

[T. Tsonev]

Hi,

The shape reference you get is the same as the one you return as a symbol.

We can simply attach the data item to effectively forward it to the event handlers:
symbol: function(e) {
  var symbol = ...

  symbol.dataItem = e.dataItem;
  return symbol;
}

This is the updated snippet. I hope this helps.

Regards,
T. Tsonev
Telerik

 

 

[Matt]

I was already planning to try that this morning, but for some reason it's not working for me. 

Here's my new symbol function:

 

symbol: function(e) {
                    var map = $("#map").data("kendoMap");

                    var location = e.location;
                    var circleGeometry = new geom.Circle(e.center, 20);

                    // 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
                    draw.align([text], circle.bbox(), "center");
                    draw.vAlign([text], circle.bbox(), "center");

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

                    return symbol;
                }
            }

and shapeClick is just doing alert(e.shape.dataItem);  It still says undefined.

I tried changing the symbol function in the dojo page to this:

symbol: function(e) {
            var map = $("#map").data("kendoMap");

            var location = e.location;

            var circleGeometry = new geom.Circle(e.center, 20);

            var circle = new draw.Circle(circleGeometry, {
                fill: {
                    color: "#fff",
                    opacity: 0.7
                },
                stroke: {
                    width: 0
                }
            });

            var text = new draw.Text("Foo", e.center, {
                font: "12px sans-serif"
            });

            draw.align([text], circle.bbox(), "center");
            draw.vAlign([text], circle.bbox(), "center");

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

            return symbol;
          }

but now it won't even display any bubbles.  I'm not sure why.  It displays them just fine on mine. 

Adding some alerts I was able to figure out that it's dying on

draw.align([text], circle.bbox(), "center");

but I don't see why.  Everything looks good to me.

[Matt]

I figured it out.  I needed to add the dataItem to the circle and the text objects.

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

now shapeClick's e.shape.dataItem is the object I need.

 

[T. Tsonev]

Hi,

Right, I've missed that out. It might happen so that the click reaches some of the sub-shapes first.

One idea to get around this is to create a "click target" - a translucent rectangle that will receive all user events, masking the elements below. For example:
symbol.append(circle, text);
var hitZone = kendo.drawing.Path.fromRect(symbol.bbox(), {
  fill: {
    color: "#fff",
    opacity: 0
  },
  stroke: null,
  cursor: "pointer"
});
hitZone.dataItem = e.dataItem.
symbol.append(hitZone);

I hope this helps.

Regards,
T. Tsonev
Telerik