I've been working on a map project, and I had shapeClick working, but suddenly it stopped working. I was working on other parts of the page, but I don't think any of them would have caused this problem. I've been banging my head against it for 2 hours, and I still have no idea why it won't trigger the shapeClick event any more.
Here's the function I'm using to create the map and the onShapeClick function as well. I've got multiple bubble layers, but the one I've been trying to click on the bubbles for is the first one with the dataSource: BLOCKS.
function createMap() {
$("#map").kendoMap({
center: [38.268107, -97.744821], zoom: 4,//These two options may be something to set to div options
height: 400,
layers: [{
type: "bing",
imagerySet: "aerialWithLabels",
key: "Ajo4NRDLFtd7zTT_LKi4lHrCZCWahx69-ZjmruTcGlBNdIPDUD--iWmlmWl5We_E"
}, {
type: "bubble",
dataSource: BLOCKS,
locationField: "Location",
valueField: "Value",
symbol: function(e) {
var map = $("#map").data("kendoMap");
var location = e.location;
var circleGeometry = new geom.Circle(e.center, e.dataItem.Value);
//var rectGeometry = new geom.Rect([e.center[0] - 20, e.center[1] - 10], [e.center[0] + 20, e.center[1] + 10]);
//alert(e.dataItem);
//alert(e.shape);
// 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
//
// http://docs.telerik.com/kendo-ui/api/javascript/drawing#methods-align
// http://docs.telerik.com/kendo-ui/api/javascript/drawing#methods-vAlign
draw.align([text], circle.bbox(), "center");
draw.vAlign([text], circle.bbox(), "center");
circle.dataItem = e.dataItem;
circle.bubbleType = "block";
//alert(1);
$(circle).click(function () {
alert(this);
alert(this.dataItem);
});
//alert(2);
text.dataItem = e.dataItem;
text.bubbleType = "block";
$(text).click(function () {
alert(this);
alert(this.dataItem);
});
var symbol = new draw.Group();
symbol.append(circle, text);
symbol.dataItem = e.dataItem;
symbol.bubbleType = "block";
$(symbol).click(function () {
alert(this);
alert(this.dataItem);
});
return symbol;
}
}, {
type: "shape",
dataSource: shapes
}
, {
type: "bubble",
dataSource: pingBubbles,
locationField: "Location",
valueField: "Value",
symbol: function (e) {
var map = $("#map").data("kendoMap");
var location = e.location;
var circleGeometry = new geom.Circle(e.center, e.dataItem.Value);
//var rectGeometry = new geom.Rect([e.center[0] - 20, e.center[1] - 10], [e.center[0] + 20, e.center[1] + 10]);
//alert(e.dataItem);
//alert(e.shape);
// 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
//
// http://docs.telerik.com/kendo-ui/api/javascript/drawing#methods-align
// http://docs.telerik.com/kendo-ui/api/javascript/drawing#methods-vAlign
draw.align([text], circle.bbox(), "center");
draw.vAlign([text], circle.bbox(), "center");
circle.dataItem = e.dataItem;
circle.bubbleType = "ping";
text.dataItem = e.dataItem;
text.bubbleType = "ping";
var symbol = new draw.Group();
symbol.append(circle, text);
symbol.dataItem = e.dataItem;
symbol.bubbleType = "ping";
return symbol;
}
}, {
type: "bubble",
dataSource: incidentBubbles,
locationField: "Location",
valueField: "Value",
symbol: function (e) {
var map = $("#map").data("kendoMap");
var location = e.location;
var circleGeometry = new geom.Circle(e.center, e.dataItem.Value);
//var rectGeometry = new geom.Rect([e.center[0] - 20, e.center[1] - 10], [e.center[0] + 20, e.center[1] + 10]);
//alert(e.dataItem);
//alert(e.shape);
// 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
//
// http://docs.telerik.com/kendo-ui/api/javascript/drawing#methods-align
// http://docs.telerik.com/kendo-ui/api/javascript/drawing#methods-vAlign
draw.align([text], circle.bbox(), "center");
draw.vAlign([text], circle.bbox(), "center");
circle.dataItem = e.dataItem;
circle.bubbleType = "incident";
text.dataItem = e.dataItem;
text.bubbleType = "incident";
var symbol = new draw.Group();
symbol.append(circle, text);
symbol.dataItem = e.dataItem;
symbol.bubbleType = "incident";
return symbol;
}
}, {
type: "bubble",
dataSource: SELECTEDBLOCKS,
locationField: "Location",
valueField: "Value",
symbol: function (e) {
var map = $("#map").data("kendoMap");
var location = e.location;
var circleGeometry = new geom.Circle(e.center, e.dataItem.Value);
//var rectGeometry = new geom.Rect([e.center[0] - 20, e.center[1] - 10], [e.center[0] + 20, e.center[1] + 10]);
//alert(e.dataItem);
//alert(e.shape);
// 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
//
// http://docs.telerik.com/kendo-ui/api/javascript/drawing#methods-align
// http://docs.telerik.com/kendo-ui/api/javascript/drawing#methods-vAlign
draw.align([text], circle.bbox(), "center");
draw.vAlign([text], circle.bbox(), "center");
circle.dataItem = e.dataItem;
circle.bubbleType = "block";
text.dataItem = e.dataItem;
text.bubbleType = "block";
var symbol = new draw.Group();
symbol.append(circle, text);
symbol.dataItem = e.dataItem;
symbol.bubbleType = "block";
return symbol;
}
}
],
shapeClick: onShapeClick
});
}
function onShapeClick(e) {
alert('hola');
}
As you can see, I tried adding click events to the symbol as well, but that's not working either.
In case it matters, here's the DataSource definition for BLOCKS:
var BLOCKS = new kendo.data.DataSource({
type: "odata",
schema: {
data: "data",
model: {
fields: {
BlockId: { type: "number" },
Name: { type: "string" },
Value: { type: "number" },
Location: { type: "object" },
Color: { type: "string" },
CurrentRouteName: { type: "string" },
VehicleId: { type: "number" },
VehicleName: { type: "string" },
EmployeeId: { type: "number" },
EmployeeName: { type: "string" }
}
}
}
});