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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to update map without reload all page?

Thread ID:

Created:

Updated:

Platform:

Replies:

127781 Dec 8,2016 01:34 PM UTC Mar 23,2017 12:55 PM UTC ASP.NET Web Forms 5
loading
Tags: Map
Ilya
Asked On December 8, 2016 01:34 PM UTC

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.

https://drive.google.com/open?id=0B2RgdnBQvJGfSU9yNlNBbVIwQkU


Dharanidharan Dharmasivam [Syncfusion]
Replied On 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.NET: 
<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"; 
            map.refresh(); 
        } 

Screenshot: 
 

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. 

Thanks, 
Dharani. 


Ilya
Replied On 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? 


Anandaraj T [Syncfusion]
Replied On 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 
 
[C#] 
        [WebMethod] 
        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); 
        } 
 
[ASPX] 
<asp:Button ID="Button1" runat="server" Text="Обновить данные" OnClientClick="updateData();return false;" /> 
 
<script> 
        //Method to update the map without refreshing the page 
        function updateData() { 
 
            $.support.cors = true; 
            $.ajax({ 
                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); 
                    map.refresh(); 
                } 
            }); 
        } 
    </script> 
 
Please let us know if you have any concern. 
 
Regards, 
Anand 


Ilya
Replied On 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: 

[ASPX] 
<script> 
        //Method to update the map without refreshing the page 
        function updateData() { 
            $.support.cors = true; 
            $.ajax({ 
                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); 
                    map.refresh(); 
                } 
            }); 
        } 
     setInterval(updateData, 5000);
    <script> 
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).

Dharanidharan Dharmasivam [Syncfusion]
Replied On 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. 
 
Thanks, 
Dharani. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;