I have a bubble layer where I'm overriding the bubble with a symbol. Currently I'm just doing a custom circle so I can put text on top of the bubble, and have easier control of the color.
I'm actually using this method to display various types of data on the map, and for one of them I was thinking it would be better if I could put an image on the map in that location instead of drawing a circle. I've been looking through the documentation, but haven't found a way to do this yet.
Is it possible? It seems like it should be.
In case it's helpful, here's the symbol function I'm using on my bubble layer:
symbol: function (e) {
var map = $("#map").data("kendoMap");
var location = e.location;
var circleGeometry = new geom.Circle(e.center, e.dataItem.Value);
// 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, {
font: "12px sans-serif"
});
// Align it in the circle center
draw.align([text], circle.bbox(), "center");
draw.vAlign([text], circle.bbox(), "center");
// Associate the dataItem with the objects going into the symbol
circle.dataItem = e.dataItem;
text.dataItem = e.dataItem;
var symbol = new draw.Group();
symbol.append(circle, text);
symbol.dataItem = e.dataItem;
return symbol;
}