Create bubbles from geojson with Kendo UI - kendo-ui

Question

I have a geojson file with a collection of points:
{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"name": "Point one",
},
"geometry": {
"type": "Point",
"coordinates": [13,52]
}
},...
By default those points are displayed as a standard location marker.
$("#map").kendoMap({
center: [52, 13],
zoom: 10,
layers: [{
type: "shape",
dataSource: {
type: "geojson",
transport: {
read: function(e) {
e.success(myPoints);
}
}
}
}]
});
});
But I want to display the points as bubbles. Searching for; how to display geojson data with kendo ui, then I only find tutorials of layer type: shape in combination with geojson polygons. If I read the kendo ui tutorials for type bubble, then there is a value field to define the radius, which is not defined in geojson data. How to edit the standard marker display of geojson points? Or how to setup the properties of a bubble layer with respect to a geojson data input?

Answer 1

Through the layerDefaults.marker.shape you can customize the marker and even set a custom icon for the marker, as shown here.
To show bubbles with different size add a bubble layer. Here is a dojo with a GeoJSON map and a bubble layer, with the bubble diameter being based on population value.
Edit:
The bubble layer expects data in the following format
[
{
"City":"City A",
"Country":"USA",
"MyValueField":123456789,
"MyLocationField":[
45.2,
24.33
]
},
{
"City":"City B",
"Country":"USA",
"MyValueField":123456789,
"MyLocationField":[
34.47,
95.28
]
}
]
If the endpoint returns the data in a different format you can use the schema.parse function to parse the response in the expected format:
{
type: "bubble",
dataSource: {
transport: {
read: {
url: "https://get/my/data",
dataType: "json"
}
},
schema: {
parse: function(response) {
// parse response to match expected format
return response;
}
}
},
locationField: "MyLocationField", //The Map accepts a [Latitude, Longitude] format for its locations field
valueField: "MyValueField"
}