Hide/Show Map Layers

[David]

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?

[Marin Bratanov]

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

[David]

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?

 

[David]

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.

[Marin Bratanov]

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:

• getting started with the map widget itself: http://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/map/overview.
• changing map settings dynamically: http://www.telerik.com/forums/add-layer-dynamically-to-map#mpTqKPpq9kaYohRAvMtJXQ.
• look into using a data source that you can update: http://www.telerik.com/forums/best-way-to-draw-chart-with-dynamically-changing-data.

Regards,

Marin Bratanov
Progress Telerik

[David]

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

[David]

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();

        }