slow zoom and center

[David]

My map has around 3000 shapes, i am trying to recenter it in javascript. Center and zoom take 5 sec each.

var map = $find("<%=RadMap1.ClientID%>").get_kendoWidget();
 
var latitude = 30;
var longitude = 5;
map.center([latitude, longitude]);
map.zoom(2.35);

just in case here is my map definition

  <telerik:RadMap runat="server" ID="RadMap1" Height="640px"
                            UseSpringAnimations="False"
                            MaxZoom="5.5" MinZoom="2.1"
                            Zoomable="true">
                <ClientEvents OnShapeCreated="shapeCreated" OnShapeMouseEnter="shapeMouseEnter"
                              OnShapeMouseLeave="shapeMouseLeave" OnShapeClick="shapeClick"
                              OnShapeFeatureCreated="onShapeFeatureCreated"
                              OnMarkerCreated="markerCreated" OnPan="OnPan"/>
                <LayersCollection>
                    <telerik:MapLayer Type="Shape" ClientDataSourceID="dsBase" Opacity="0.9">
                        <StyleSettings>
                            <FillSettings Color="#1996E4"/>
                            <StrokeSettings Color="#FFFFFF" />
                        </StyleSettings>
                    </telerik:MapLayer>
                    <telerik:MapLayer Type="Shape" ClientDataSourceID="RadClientDataSource1" Opacity="0.9">
                        <StyleSettings>
                            <FillSettings Color="#1996E4"/>
                            <StrokeSettings Color="#FFFFFF" />
                        </StyleSettings>
                    </telerik:MapLayer>
                    <telerik:MapLayer Type="Shape" ClientDataSourceID="BubblesDataSource" Opacity="0.9">
                        <StyleSettings>
                            <FillSettings Color="#1996E4"/>
                            <StrokeSettings Color="#FFFFFF" />
                        </StyleSettings>
                    </telerik:MapLayer>
                </LayersCollection>
            </telerik:RadMap>

[Rumen]

Hello David,

RadMap is powered by Kendo Map, which is a client-side widget.

Possible, built-in data optimization or interaction performance options are not available. Basically, everything that is bound is rendered, and panning or zooming re-renders the entire layer. 
Due to that, it is recommended data optimization to be done manually by filtering data or affecting the precision of the shapes fetched by the GeoJSON data-source.

For example, in this demo—http://demos.telerik.com/aspnet-ajax/map/examples/data-binding/client-side-data-binding/defaultcs.aspx—we had the same problems. Due to that the data-source is filtered based on user's decision via the dropdown. Also, the precision of the shapes is reduced, i.e., the geographic are cut in half in order to reduce the amount of the loaded data. If the bubble layer, precision is not an option, although some sort of filtering should be a valid option to improve the performance.  Although, such a filtering should be implemented by the application developer based on the precise application requirements. 

If, however, you think this is a point of improvment for Kendo Map, you can put your suggestion in Kendo's User Voice portal, so that the community share their opinion and vote for it (http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback).

Regards,
Rumen
Progress Telerik

[David]

Understood

Is there a way, to display some kind of "busy" icon during map transition?

[Rumen]

Hello,

You can show RadAjaxLoading panel until the page is completely rendered/loaded - https://docs.telerik.com/devtools/aspnet-ajax/controls/ajaxloadingpanel/how-to/show-ajaxloadingpanel-on-initial-page-load. See also this demo - http://demos.telerik.com/aspnet-ajax/ajaxloadingpanel/functionality/explicit-show-hide/defaultcs.aspx.

Regards,
Rumen
Progress Telerik

[David]

Rumen,

i am not sure how it will work considering i am re centering on the client side with no postback. Am i missing something?  

Thank you

[Rumen]

Hi,

In the event which you fire to center the map you can show the Kendo loading indicator and hide it after a couple of seconds. Here are some example which you can check for ideas:

https://docs.telerik.com/kendo-ui/api/javascript/ui/ui#methods-progress
https://docs.telerik.com/kendo-ui/controls/charts/how-to/appearance/show-overlay-while-loading
https://docs.telerik.com/kendo-ui/controls/layout/window/how-to/display-loading-overlay

Regards,
Rumen
Progress Telerik

[David]

Rumen,

  These are excellent examples, but all little bit outside of my scenario.

Can i ask you to create a simple project with map and client side action of zoom, that fires overlay and closes it when zoom is done, please?

[Rumen]

Hello,

You are requesting a feature which is not offered out of the box by the map component and for this reason I can provide only guidance of how to achieve it:

The Kendo map offers two events which can help you to show a loading indicator: 
https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/map#events-zoomStart
and
https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/map#events-zoomEnd

You can get reference to the Kendo map object, show a loading gif over the map in the zoomStart and hide it in the zoomEnd event.

Another advice is to reduce the shapes over the map, since their rendering depends only on the browser and hardware power of the used machine.

Regards,
Rumen
Progress Telerik