This is a migrated thread and some comments may be shown as answers.

Update map markers with Ajax call

3 Answers 287 Views
Map
This is a migrated thread and some comments may be shown as answers.
Gonzalo
Top achievements
Rank 1
Gonzalo asked on 30 May 2014, 10:25 AM
Hi,

I want to update the map markers on a click event but I can't find a way of binding them to the markers object:

@(Html.Kendo().Map()
.Name("map")
.Center(51.514198, -0.093100)
.Zoom(15)
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Tile)
.UrlTemplateId("http://tile2.opencyclemap.org/transport/#= zoom #/#= x #/#= y #.png")
.Subdomains("a", "b", "c")
.;

layers.Add()
.Type(MapLayerType.Marker)
.DataSource(dataSource => dataSource
.Read(read => read.Action("RefreshChart", "Map").Data("additionalInfo"))
)
.LocationField("LongAndLot")

.TitleField("Title")
.Tooltip(tool => tool.ShowOn(TooltipShowOnEvent.Click).Events(e => e.Show("onClick")));


})
)


Ajax call:

var dataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
$.ajax({
type: "POST",
url: controllerName + '/RefreshChartAjax',
contentType: "application/json; charset=utf-8",
dataType: 'json',
data: JSON.stringify({ country: country, startDate: startDate, endDate: endDate, groupedBy: groupedBy }),
success: function (data) {
options.success(data);
}
});
}
}
}); 

$("#map").kendoMap({ dataSource: dataSource });?????

How do I bind the dataSource to the Layers/Markers object?

Thanks!

3 Answers, 1 is accepted

Sort by
0
Gonzalo
Top achievements
Rank 1
answered on 30 May 2014, 01:53 PM
Hi,

I figured it out:

$("#map").data("kendoMap").layers["zero-based index for the layer where your markers are"].dataSource.data(result from the ajax call);

for example: $("#map").data("kendoMap").layers[1].dataSource.data(result);

Regards.
Gonzalo.


0
Dimo
Top achievements
Rank 1
answered on 20 May 2017, 02:16 PM
Hi! How to make kendoui map to re-read it web service data from web api?
0
Preslav
Telerik team
answered on 23 May 2017, 02:58 PM
Hi Dimo,

Based on the provided information, I assume that you are interested in the DataSource read method:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-read

Regards,
Preslav
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Map
Asked by
Gonzalo
Top achievements
Rank 1
Answers by
Gonzalo
Top achievements
Rank 1
Dimo
Top achievements
Rank 1
Preslav
Telerik team
Share this question
or