We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to update map without reload all page?

Hello. I have a question about map. 

I need update info about temperatures in building at my map. This map gets data from List<MeasurementData> (I will take this values from DB in future). It looks right when i load the page: map gets the values and draw right color of rooms. 

But i need something else. Can syncfusion refresh data for map and map without refreshing all page? For example i want load the page watch it 1-2 hours. If the temperature drops lower - room will be recolored from green to red. 

I understand that refreshing of colors need redraw all map, but i dont want refresf all page every 5-10 sec. Can you consult me, how to do it, if it is possible? 

Take a look, please, at About.aspx. There is my building. Project.7z is more then 30MB and a cant add it to post. I load it on my Gdrive. Link is below.


5 Replies

DD Dharanidharan Dharmasivam Syncfusion Team December 9, 2016 06:22 AM UTC

Hi Ilya, 

Thanks for using Syncfusion product. 

We have analyzed your query. If you need not to reload the entire page on button click means, you can use onClientClick with return type as false. In the sample we have changed the background color of map in button click. You can change this with respect to your scenario. Kindly find the code snippet below, 

<asp:button ID="btninsert" runat="server" text="Button" OnClientClick="mapRefresh(); return false;" /> 

function mapRefresh() { 
            //Taking instance of map 
            var map = $("#ControlsSection_selection").ejMap("instance"); 
            map.model.background = "cyan"; 


While refreshing the map, the page is not get reloaded. 

For your reference we have attached the sample. Kindly find the sample from below location. 


IL Ilya December 9, 2016 12:31 PM UTC

Thank you for ansver. In is ot all what i want(( My temperatures (DB1-4_value for example) will be update every 1 min. And i need refresh not only the map, but values in the list <MeasurementData> too!

For example:

 List<MeasurementData> measurementResults = new List<MeasurementData>
                new MeasurementData { Room = "Room_2", Description = "2", Temperature1 = DB1_value, Temperature2 = DB2_value},
                new MeasurementData { Room = "Room_1", Description = "1", Temperature1 = DB3_value, Temperature2 = DB4_value },

If i do this (regenerate a list) i'll get a text picture. I get new numbers over rooms, but it refresh all my page and don't fill rooms with color:

        protected void Button2_Click(object sender, EventArgs e)
            (this.selection.Layers[0] as ShapeLayer).DataSource = Measurement_Result.GetMeasurementResults();  

If i refresh map, with your tips, what you wrote, i just fill backgroubdcolor((

Please give me 1 more tip. How to refill list of the data for the map, and redraw it with new data, without reload all page? 

AT Anandaraj T Syncfusion Team December 14, 2016 02:23 PM UTC

Hi Ilya, 
Thanks for the update. 
Query: How to refill list of the data for the map, and redraw it with new data, without reload all page? 
We suggest you to update the map dynamically using an AJAX request to avoid refreshing the entire page.  
We have modified the sample in our previous update with AJAX request and it can be downloaded from the following link 
Please refer the following code snippet to achieve this 
        public static string GetMapData(){ 
            List<MeasurementData> result = Measurement_Result.GetMeasurementResults(); 
            Random r = new Random(); 
            for(int i=0; i<result.Count; i++) 
                result[i].Temperature1 = r.Next(0, 100) < 50 ? 11: 13; 
                result[i].Temperature2 = r.Next(16, 55); 
            //Returns new data to the AJAX method 
            return new JavaScriptSerializer().Serialize(result); 
<asp:Button ID="Button1" runat="server" Text="Обновить данные" OnClientClick="updateData();return false;" /> 
        //Method to update the map without refreshing the page 
        function updateData() { 
            $.support.cors = true; 
                url: 'About.aspx/GetMapData', 
                type: 'post', 
                contentType: 'application/json; charset=utf-8', 
                dataType: 'json', 
                success: function (data) { 
                    //Update the map with data returned by server 
                    var map = $("#selection").ejMap("instance"); 
                    map.model.layers[0].dataSource = JSON.parse(data.d); 
Please let us know if you have any concern. 

IL Ilya March 20, 2017 07:49 AM UTC

Hello again! 

I need revive this theme)) What i need: add auto-refresh of this map. I added 1 row in the code for redrawind a map every 5 sec: 

        //Method to update the map without refreshing the page 
        function updateData() { 
            $.support.cors = true; 
                url: 'About.aspx/GetMapData', 
                type: 'post', 
                contentType: 'application/json; charset=utf-8', 
                dataType: 'json', 
                success: function (data) { 
                    //Update the map with data returned by server 
                    var map = $("#selection").ejMap("instance"); 
                    map.model.layers[0].dataSource = JSON.parse(data.d); 
     setInterval(updateData, 5000);
It works well, but after about in 1 hour this page will working slowelly. 

How can you repeat this:
1. Open page with map.
2. Be sure that refreshing and tooltips over rooms work okay.
3. Do not close or change the page about 1 hour (it is very imnortent! changing page will break an experiment).
4. lets check it out. The tooltips working very slowelly and i looks like slideshow. In about 2 hours the site will be not responding. 

Can you check this moment? I need 24/7 usability of my site. Thanks. 
PS I used your last example, just added 1 row setInterval(updateData, 5000).

DD Dharanidharan Dharmasivam Syncfusion Team March 23, 2017 12:55 PM UTC

Hi Ilya, 
Sorry for the inconvenience. 
We can able to reproduce the reported issue and we have logged issue report for the reported issue. We have created branch incident under your account for better follow up. Kindly follow up with that incident for further details on the reported issue. 

Live Chat Icon For mobile
Up arrow icon