Progress bar while loading markers

[Attila]

I have a kendoMap with dataSource transport read which loads the locations for the markers. Because it loads thousands of coordinates I would need a progress bar on the map to let the user know that the map is loading. Is this possible? I'm using Bing type map.

 

$("#map").kendoMap({
            center: centerCoordinates,
            zoom: zoomLevel,
            layerDefaults: {
                bing: {
                    culture: "hu-HU"
                }
            },
            layers: [
                {
                    type: "bing",
                    imagerySet: "road",
                    key:"XXXXXXXXXXXXX"
                },
                {
                    dataSource: {
                        transport: {
                            read: {
                                url: url,
                                type: 'GET',
                                contentType: "application/json; charset=utf-8",
                                dataType: 'json',
                                data: json
                            }
                        }
                    },
                    type: "marker",
                    locationField: "LatLng",
                    titleField: "Name",
                    shape: "pin"
                }],
            markerActivate: function(e) {
                e.marker.element.addClass(e.marker.dataItem.Color);
            },
            markerClick: function (e) {
                //some more code exists here...
            },
            zoomEnd: zoomEndControl,
            pan: panControl,
            panEnd: panEndControl
        });

 

[Tsvetomir]

Hi Attila,

The loading of a large amount of the data is a common scenario and we have created a how-to article which demonstrates how to show a loading indicator. More information can be found here:

https://docs.telerik.com/kendo-ui/controls/charts/how-to/appearance/show-overlay-while-loading

You could display a kendo progress using the requestStart and requestEnd event handlers. 

Below you will find a small sample which demonstrates how to display a progress indicator while the data is loading:

• https://dojo.telerik.com/EBapUYEK

Kind regards,
Tsvetomir
Progress Telerik