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.