Posted 16 Dec 2013 Link to this post
Posted 18 Dec 2013 Link to this post
<
div
id
=
"map"
data-role
data-center
"[30, -97]"
data-zoom
"3"
data-layers
"[{ type: 'shape', dataSource: { type: 'geojson', transport: { read: '../../demos/mvc/content/dataviz/map/countries-users.geo.json' } }, style: { fill: { opacity: 0.7 } } }]"
data-bind
"{ events: { shapeCreated: onShapeCreated, shapeCreated: onShapeCreated, shapeMouseLeave: onShapeMouseLeave } }"
></
>
var scale = chroma.scale(["white", "green"]).domain([1, 1000]);
var viewModel = kendo.observable({
onShapeCreated: function onShapeCreated(e) {
var shape = e.shape;
var users = shape.dataItem.properties.users;
if (users) {
var color = scale(users).hex();
shape.fill(color);
}
},
onShapeMouseEnter: function onShapeMouseEnter(e) {
e.shape.options.set("fill.opacity", 1);
onShapeMouseLeave: function onShapeMouseLeave(e) {
e.shape.options.set("fill.opacity", 0.7);
center: [30, -97]
});
$(function() {
kendo.bind($("#map"), viewModel);
})
Posted 20 Dec 2013 Link to this post
$("#map").data("kendoMap").layers[0(the index of your shape layer)].dataSource.transport.options.read.url = "your url goes here"
$("#map").data("kendoMap").layers[0(the index of your shape layer)].dataSource.read()
Posted 30 Nov 2017 Link to this post
Posted 04 Dec 2017 Link to this post