Map Bubble unable to change size

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

    Posted 11 Jun 2015 Link to this post

    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.

  2. Matt
    Matt avatar
    38 posts
    Member since:
    Nov 2014

    Posted 11 Jun 2015 in reply to Matt Link to this post

    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?  

     

  3. Kendo UI is VS 2017 Ready
  4. Matt
    Matt avatar
    38 posts
    Member since:
    Nov 2014

    Posted 11 Jun 2015 in reply to Matt Link to this post

    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.
  5. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 15 Jun 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Matt
    Matt avatar
    38 posts
    Member since:
    Nov 2014

    Posted 17 Jun 2015 in reply to T. Tsonev Link to this post

    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.

     

  7. Matt
    Matt avatar
    38 posts
    Member since:
    Nov 2014

    Posted 17 Jun 2015 Link to this post

    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.

     

     

  8. Matt
    Matt avatar
    38 posts
    Member since:
    Nov 2014

    Posted 18 Jun 2015 in reply to Matt Link to this post

    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?
  9. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 19 Jun 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. Matt
    Matt avatar
    38 posts
    Member since:
    Nov 2014

    Posted 19 Jun 2015 in reply to T. Tsonev Link to this post

    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.

  11. Matt
    Matt avatar
    38 posts
    Member since:
    Nov 2014

    Posted 19 Jun 2015 in reply to Matt Link to this post

    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.

     

  12. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 23 Jun 2015 Link to this post

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