Add layer dynamically to map

7 posts, 0 answers
  1. Nick
    Nick avatar
    15 posts
    Member since:
    Nov 2007

    Posted 28 Oct 2014 Link to this post

    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.

  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 30 Oct 2014 Link to this post

    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:
    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Nick
    Nick avatar
    15 posts
    Member since:
    Nov 2007

    Posted 09 Jan 2015 in reply to Alexander Popov Link to this post

    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.


  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 13 Jan 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Tex
    Tex avatar
    2 posts
    Member since:
    Jun 2013

    Posted 24 Jun in reply to Alexander Popov Link to this post

    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.

  7. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 28 Jun Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  8. Tex
    Tex avatar
    2 posts
    Member since:
    Jun 2013

    Posted 29 Jun in reply to Alexander Popov Link to this post

    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.

Back to Top
Kendo UI is VS 2017 Ready