Update map markers with Ajax call

4 posts, 0 answers
  1. Gonzalo
    Gonzalo avatar
    11 posts
    Member since:
    May 2013

    Posted 30 May 2014 Link to this post

    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!
  2. Gonzalo
    Gonzalo avatar
    11 posts
    Member since:
    May 2013

    Posted 30 May 2014 in reply to Gonzalo Link to this post

    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.


  3. Dimo
    Dimo avatar
    23 posts
    Member since:
    Nov 2008

    Posted 20 May Link to this post

    Hi! How to make kendoui map to re-read it web service data from web api?
  4. Preslav
    Admin
    Preslav avatar
    203 posts

    Posted 23 May Link to this post

    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.
Back to Top