Hide/Show Map Layers

7 posts, 0 answers
  1. David
    David avatar
    221 posts
    Member since:
    Mar 2014

    Posted 10 Aug Link to this post

    Normally the following approach works for me:

                window.onload = function () {
                    
                    var map = $find("<%=RadMap1.ClientID%>").get_kendoWidget();
                    map.layers[3].hide();
                }

    However, in particular case this approach hides layers, but on map.layers[3].show() it does not show layer.

    I also tried to play with opacity: map.layers[3].options.opacity = 0.9, but no luck

    Any thoughts?

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3916 posts

    Posted 15 Aug Link to this post

    Hi David,

    In case this is related to your support ticket where the map disappears, perhaps something in the cocnrete case is causing an issue (like a template).

    Also, the window.onload is too early to access IScriptControls, you should do that in Sys.Application.Load in the earliest: http://docs.telerik.com/devtools/aspnet-ajax/general-information/get-client-side-reference#important-ms-ajax-events.

    As a general rule, I would suggest you consider using the Kendo Map widget directly, without the RadMap wrapper. Complex functionality and re-creation of the map with new settings is much easier with the Kendo Map as it is a jQuery widget.

    Regards,

    Marin Bratanov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. David
    David avatar
    221 posts
    Member since:
    Mar 2014

    Posted 15 Aug in reply to Marin Bratanov Link to this post

    Hi Marin,

        This is unrelated case to one we discuss in support ticket.

         I tried to implement Sys.Application.Load approach, but having "sys is undefined" message. I tried to make it available, but had some config issues.

        I also tried to call same logic from code behind as javascript after PreRender, but for some reason var map = $find("<%=RadMap1.ClientID%>").get_kendoWidget(); was returning null.

    Also, i tried to set up opacity from code behind as radmap1.LayersCollection.Item(3).Opacity=0. Which was hiding layer ok but i could not to reset opacity back from client map.layers[3].options.opacity = 0.9

    Any other recommendations?

     

  4. David
    David avatar
    221 posts
    Member since:
    Mar 2014

    Posted 15 Aug Link to this post

    Also, not sure how use of Kendo Map widget directly is easier. If it is, i don't mind to try, just not sure how to start.

    If you can point me to some example that does similar logic, it would be nice.

  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3916 posts

    Posted 18 Aug Link to this post

    Hi David,

    To use the Sys.Application.Load event (or the entire Sys namespace coming from MS AJAX), the scripts must be added after the script manager tag, preferrably at the end of  the form.

    Calling the script from the code-behind is likely to suffer from the same issue -executing too early. You would still need to use the Sys.Application.Load event: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/troubleshooting/executing-javascript-code-from-server.

    On using the Kendo Map directly for such a scenario - I suggest the following resources:

    Regards,

    Marin Bratanov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. David
    David avatar
    221 posts
    Member since:
    Mar 2014

    Posted 18 Aug in reply to Marin Bratanov Link to this post

    Hi Marin,

    I put Sys.Application.Load into the end of the form and i was able to call it. Unfortunately, it didn't solve the issue. I tried to look into Kendo Map way, but it was a little unclear.

    Eventually, i had to rearrange my layers to solve this issue, which removes urgency from the situation for now.

    Thank you for the help

  7. David
    David avatar
    221 posts
    Member since:
    Mar 2014

    Posted 21 Aug Link to this post

    Also, if somebody struggles with the same issue, another solution that worked for me was:

      window.onload = function () {        

                var layers = $(".k-layer");
              
                layers[3].style.opacity = 0;
                layers[4].style.opacity = 0;

            }

            function SliderValueChanged(sender, args) {

                var slider_value = sender.get_value();
                var map = $find("<%=mapPortsCountry.ClientID%>").get_kendoWidget();

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

                map.layers[1].hide();
                map.layers[2].hide();
                map.layers[3].hide();

                var newvalue = sender.get_value() + 1;
             
                if (slider_value == 0) {
                    map.layers[1].show();
                } else if (slider_value == 1) {
                    map.layers[2].show();
                } else if (slider_value == 2) {
                    map.layers[3].show();            
                }

                $find("<%=mapPortsCountry.ClientID%>").repaint();

            }  

Back to Top