"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.
10 Answers, 1 is accepted
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?
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
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.
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);
}
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.
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
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.
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.
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