Changing Map layer value field

[Kat]

Hi,

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:

01.@(Html.Kendo().Map()
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("http://tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png")
14.            //.Subdomains("a", "b", "c")
15.            .Attribution("© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>");
16.
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:

1.[AcceptVerbs(HttpVerbs.Post)]
2.public ActionResult InstCoords(int id)
3.{
4.    IEnumerable<CampaignInstOpens> coords = reportRepository.GetMapCoords(id);
5.    return Json(coords);
6.}

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.        layer.options.style.fill.color = "#00BFFF";
07.    }
08.    else {
09.        layer.options.valueField = "Clicks";
10.        layer.options.style.fill.color = "#008000";
11.    }
12.    layer.reset();
13.}

Can someone help me figure out how to switch back and forth between value fields without the horrible lag?

[T. Tsonev]

Hi,

I can suggest that you render both layers initially and just toggle the visibility between them:
.Layers(layers => {
  layers.Add()...;
  layers.Add().Opacity(0)...;
});

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.

Regards,
T. Tsonev
Telerik