slow zoom and center

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

    Posted 26 Oct Link to this post

    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>

  2. Rumen
    Admin
    Rumen avatar
    13278 posts

    Posted 31 Oct Link to this post

    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
    Try our brand new, jQuery-free Angular 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 31 Oct in reply to Rumen Link to this post

    Understood

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

  4. Rumen
    Admin
    Rumen avatar
    13278 posts

    Posted 31 Oct Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. David
    David avatar
    221 posts
    Member since:
    Mar 2014

    Posted 31 Oct Link to this post

    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

  6. Rumen
    Admin
    Rumen avatar
    13278 posts

    Posted 03 Nov Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. David
    David avatar
    221 posts
    Member since:
    Mar 2014

    Posted 06 Nov in reply to Rumen Link to this post

    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?

  8. Rumen
    Admin
    Rumen avatar
    13278 posts

    Posted 09 Nov Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top