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.