Add layer dynamically to map

[ITServices]

Hello guys, I was wondering how could I add a new layer to the dinamically. My map contains two layers with opacity 0 and I would like to add a third layer to use it like principal.
My code by the moment is this:

@(Html.Kendo().Map()
            .Name("mapwrapper")
            .Center(0, 0)
            .Zoom(2)
            .MaxZoom(16)
            .MinZoom(6)
            .Controls(controls=> controls.Navigator(false).Zoom(zoom=>zoom.Position(MapControlPosition.TopLeft)))
            .Layers(layers =>
            {
                layers.Add()
                     .Type(MapLayerType.Tile)
                     .UrlTemplateId("http://#= subdomain #.TILE_SERVER_URL.com/GeoTileServer/#= x #/#= y #/#= zoom #")
                     .Subdomains("tile1", "tile2", "tile3").Opacity(0);

                
                layers.Add()
                   .Type(MapLayerType.Bing)
                   .ImagerySet(MapLayersImagerySet.AerialWithLabels)
                   .Key("PUBLIC_API_KEY").Opacity(0);

                layers.Add()
                 .Style(style => style.Fill(fill => fill.Opacity(0.5).Color("#4C8FFD")))
                 .Type(MapLayerType.Shape)
                 .DataSource(dataSource => dataSource.GeoJson());


            })
                .Events(events => events
                    .PanEnd("panEnd")
                    .ZoomStart("clearCanvas")
                    .ZoomEnd("zoomEnd")
                    .Click("onMapClick")
                    .ShapeCreated("onShapeCreated")
            )
        )

Then in the document ready by javascript I add the third layer like this:

 $(document).ready(function () {
 var shapes22 = {
                        type: "tile",
                        urlTemplate : "http://#= subdomain #.tile2.opencyclemap.org/transport/#= zoom #/#= x #/#= y #.png",
                        subdomains : [ "a", "b", "c" ],
                        attribution : "© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>." + "Tiles courtesy of <a href='http://www.opencyclemap.org/'>Andy Allan</a>"
                    }

        $("#mapwrapper").data('kendoMap').layers.push(shapes22);
         $("#mapwrapper").data('kendoMap').options.layers.push(shapes22);

        var layers = $(".k-layer");
        layers[2].style.opacity = 1;
}

The object looks good but the map never start downloading the tiles, so like the first two layers have an opacity=0 and the third never download the tiles I get a blank map.

Any solution with this.
Thanks a lot.

[Alexander Popov]

Hi Nick,

I already addressed this query in the support ticket you opened, but I will share my reply here as well. 
Dynamically adding layers is currently not supported out of the box, however it could be achieved using some workarounds. I would suggest checking the following example:

• Re-initialize the Map widget with new options
• Add layer and use the internal reset method to render it

Regards,
Alexander Popov
Telerik

 

 

[ITServices]

Hi Alexander,

Thanks a lot for your workarounds, we are using one of them now and it makes the trick.

I have just updated to the last version of kendo mvc, I was just wondering if a fix for this has been added or if is it on your list of features to include in next versions.

Is there any place where I can check which features have been added to the library on the last versions?

Thanks a lot.

[Alexander Popov]

Hi Nick,

You can get familiar with the changes we introduce by reading the release notes.
At this point, adding layers at runtime is still not supported out of the box and we have not planned any changes in that regard. I would however, encourage you to submit a new feature request on our feedback portal.

Regards,
Alexander Popov
Telerik

 

 

[Tex]

Is there any updated support for this (I have the 2016.2.504 release).  There seems to be a problem with option 2 if you panthe map before you add the layer as seen here: http://dojo.telerik.com/efIJu.

To see the problem, click run then pan the map and click the add layer button.  You can click twice to make it work but I like this method and would love to figure out what's breaking with the pan.

[Alexander Popov]

Hello Tex,

I am afraid the functionality you are after is still not supported out of the box. You can try using the other workaround I suggested, as it does not exhibit this behavior.

Regards,
Alexander Popov
Telerik

 

 

[Tex]

Thanks Alexander, I really just wanted the ability to show/hide a layer based on user interaction (with it not displayed by default) so I added the layer to the map on create and immediately hid it.  When/If the user wants to see that layer, I show it and then hide it again if they don't want to see it.  It's not perfect but it works around the pan issue for me.