How to update map without reload all page?

[Ilya]

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]

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. 

Sample Link: http://www.syncfusion.com/downloads/support/forum/127781/ze/map_refresh-1095262142  

Thanks, 

Dharani. 

[Ilya]

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]

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 

http://www.syncfusion.com/downloads/support/forum/127781/ze/Holod_r_1_syncfusion780936742 

 

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]

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]

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.