Changing Map layer value field

2 posts, 0 answers
  1. Kat
    Kat avatar
    3 posts
    Member since:
    Mar 2014

    Posted 02 Mar 2015 Link to this post


    I'm trying to use the map to display the open and click results of an email campaign. When the page loads I want to display a bubble layer that represents the number of opens for the campaign. When the user clicks on certain panel in a panelbar, I want to instead display a bubble layer with the number of clicks for the campaign. I've been able to get it to switch back and forth successfully, but every time I do I encounter some nasty lag that I need to find a way to get rid of.

    Here's the html for the map itself:
    02.    .Name("CampaignMap")
    03.    .Center(37.828127, -98.579404)
    04.    .Zoom(4)
    05.    .Zoomable(false)
    06.    .Pannable(false)
    07.    .Wraparound(false)
    08.    .Controls(controls => controls.Navigator(false).Zoom(false))
    09.    .Layers(layers =>
    10.    {
    11.        layers.Add()
    12.            .Type(MapLayerType.Tile)
    13.            .UrlTemplate(" zoom #/#= x #/#= y #.png")
    14.            //.Subdomains("a", "b", "c")
    15.            .Attribution("© <a href=''>OpenStreetMap contributors</a>");
    17.        layers.Add()
    18.            .Type(MapLayerType.Bubble)
    19.            .Style(style => style
    20.                .Fill(fill => fill.Color("#00BFFF").Opacity(0.4))
    21.                .Stroke(stroke => stroke.Width(0))
    22.            )
    23.            .DataSource(dataSource => dataSource
    24.                  .Read(read => read.Action("InstCoords", "Email", new { id = @Model.CampaignId }))
    25.            )
    26.            .LocationField("Location")
    27.            .ValueField("Opens");
    28.    })
    29.            )

    This is the method the map reads from in my controller:
    2.public ActionResult InstCoords(int id)
    4.    IEnumerable<CampaignInstOpens> coords = reportRepository.GetMapCoords(id);
    5.    return Json(coords);

    reportRepository.GetMapCoords(id) builds a SQL string which retrieves the number of opens, the number of clicks, latitude, and longitude for each building that was targeted by the campaign.

    All of the above code seems to work fine on the initial page load - all of the data for number of opens displays in a bubble layer. What I'm trying to accomplish is when the user clicks a certain button I want to switch the bubble layer from using the "Opens" as the value field to using "Clicks," but this causes a huge amount of lag and freezes the page for several seconds. Like I said, my Read() function already grabs the data for both opens and clicks, so it seems to be like switching shouldn't be such a huge issue since it already has all the data it needs.

    Here is the function I'm using to switch the value field:
    01.function SwitchMap(e) {
    02.    var index = $(e.item).index(); // this refers to a panelbar's selected index
    03.    var layer = $("#CampaignMap").data("kendoMap").layers[1];
    04.    if (index == 0) {
    05.        layer.options.valueField = "Opens";
    06. = "#00BFFF";
    07.    }
    08.    else {
    09.        layer.options.valueField = "Clicks";
    10. = "#008000";
    11.    }
    12.    layer.reset();

    Can someone help me figure out how to switch back and forth between value fields without the horrible lag?
  2. T. Tsonev
    T. Tsonev avatar
    2794 posts

    Posted 04 Mar 2015 Link to this post


    I can suggest that you render both layers initially and just toggle the visibility between them:
    .Layers(layers => {

    function SwitchMap(e) {
        var index = $(e.item).index(); // this refers to a panelbar's selected index
        var map = $("#CampaignMap").data("kendoMap");

        var activeLayer = map.layers[index === 0 ? 1 : 2];
            var hiddenLayer = map.layers[index === 0 ? 2 : 1];

        activeLayer.element.css("opacity", 1);
           hiddenLayer.element.css("opacity", 0);

    It's not terribly efficient, but will make the switch instantaneous.
    I hope this helps.

    T. Tsonev

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top