ThinkGeo.com    |     Documentation    |     Premium Support

Javascript to refresh InMemoryFeatureLayer

#1

Hi,


I have followed the solution in thread (Moving Markers gis.thinkgeo.com/Support/Dis...fault.aspx) to implement moving markers using DefaultByJavascript.aspx.


The Map control is placed outside the UpdatePanel and the timer is inside the UpdatePanel. The timer will trigger a postback back to the Server to retrieve all the new markers position from the database. Then it will call javascript Map1.GetMapParser().sendMarkersRequest() to refresh the markers.


Now I need to add an InMemoryFeatureLayer between the ShapeFileLayer and the InMemoryMarkerLayer (using CustomOverlays) to draw a few lines on the map, and these lines positions will be retrieved from the database in each timer postback. What is the javascript function that I can use to refresh the InMemoryFeatureLayer?


Thanks.


Best Regards,


YV 



#2

YV 


Here is a sample shows how to do it.  Generally, you need to refresh the overlay you want to update on the client-side and then update the line shape of InMemoryFeatureLayer in the Tick event in the server-side. Let me know if you have any issues.
 
Thanks,
 
Ben

438-Post5326.zip (101 KB)

#3

Hi Ben,


Many thanks for your great help. It works. : )


Best Regards,


YV


 



#4

That’s great, let us know if we can make your coding easier. 
  
 Ben 


#5

Hi Ben,


I have an issue when running your sample application for a long time.


When running Default.aspx (UpdatePanel hosts the Map Control), the Memory Usage & VM Size in the task manager raises up quickily and causes the browser to response slowly.


When running DefaultByJavascript.aspx (Map Control outside the UpdatePanel), the Memory Usage & VM Size raises up much slower, but eventually it will cause the browser to response slow, just a matter of time.


Is there anyway to prevent this to happen?


Is there any alternative other than UpdatePanel? Such as using Page Method to transfer the features or layers object and let the map control client api to redraw the map?


Thanks.


Best Regards,


YV



#6

YV, 
  
 Actually, the UpdatePanel is just a shortcut for using Ajax in Asp.net. It makes your code much simple and meanwhile it has some performance penalty as it did some extra stuff. There are known issues in our products which might lead to some memory leak, we will try our best to reduce it as far as we we could. Also I found when using javascript to manage a big DOM tree, it causes memory leak on client side. I tried opening GoogleMap with Drip, which is a tool helps to find out the memoryleak , and find the Memoryleak too, so maybe there are some javascript issues which leads to some leak, maybe.  
   
  
  
 The better solution about refreshing features is using CallBack, creating your own Ajax request by XmlHttpRequest or using some third part library (Microsoft Ajax Library), that means there are a bunch of javascript you have to write though. Also, our map control is based on OpenLayers library, directly use OpenLayers’ Client API in our Web Edition is also a good choice. 
  
 Thanks, 
  
 Ben 
  


#7

Hi Ben,


Thanks for your response.


Do you have any example on using OpenLayer API with MapSuite Web Edition control?


Thanks.


Best Regards,


YV



#8




 


YV,


There are many samples in the forum working with OpenLayers classes/APIs, Here are 2 of them, please have a look at the samples there.


gis.thinkgeo.com/Support/Dis...fault.aspx


gis.thinkgeo.com/Support/Dis...fault.aspx


Btw, besides directly using OpenLayers APIs, here is our own client API list, please have a look.


gis.thinkgeo.com/Support/DiscussionForums/tabid/143/aff/20/aft/4902/afv/topic/Default.aspx


Thanks,


Ben


 



#9

Hi Ben,


Thanks for the links.


When I use OpenLayers API to add the marker on the browser side (using addMarker(new OpenLayers.Marker(...)), the marker did show up on the map. But if I pan the map or zoom the map, the marker will disappear.


Is there any way to remain the marker added from OpenLayers after panning and zooming just like those markers added from the server side?


Thanks.


Best Regards,


YV



#10

YV,  
  
 Every time the viewport is changed, we will check the marker overlay and only show the markers on the current viewport. As a result you need to create a new marker overlay instead of adding the markers independently to the map. So that means on client side, you need to create an “OpenLayers.Markers” and add your makers to it.   
  
 Thanks, 
  
 Ben

#11

Hi Ben,


Got it. Thanks for all the help.


 


Best Regards,


YV



#12

That’s my pleasure, YV.

#13

Hi Ben,


I have created two web pages using your sample solution Post5326.


1. DefaultByOpenLayers.aspx: Use OpenLayers API and Microsoft AJAX library to draw a moving marker in a new location each time the timer elapsed.


2. DefaultByFullPostBack.aspx: Use full post back, without updatepanel, to draw a moving marker in a new loaction each time the timer epased.


When I run these 2 pages, both of the them seem like having memory leaks issues, especially DefaultByFullPostBack.aspx.


Have I implemented them in a wrong way? I would appreciate it if you could you take a look on the attached solution. Thanks.


Best Regards,


YV



519-Post5326.zip (108 KB)

#14




 


YV,


We found the problem in your code and it's about the OpenLayers function “destroy”. Here is the documentation and you can find why you have this problem. 





 


dev.openlayers.org/releases/...er.destroy


---------------------------------------------------


destroy




    
        
            destroy: function()
        
    


Destroy the marker.  You must first remove the marker from any layer which it has been added to, or you will get buggy behavior.  (This can not be done within the marker since the marker does not know which layer it is attached to.)


 


Thanks,


Ben



 



#15

Hi Ben,


Thanks for the advice on OpenLayers. I'll try it out.


How about the full PostBack approach? Is there any way to get rid of the memory leak?


Thanks.


Best Regards,


YV



#16

YV, 
  
 We tried your full postback sample but didn’t see the memory leak. The memory usage does go up but it will get down later, up and down again and again. This is how GC works and I think that’s fine.  
  
 On the client part, as the whole Dom tree is refresh after a postback, I don’t think there will have a memory leak in your sample. But if you are using update panel, it’s possible to have some memory leak if our client part script is not that great. We have fixed some leak problem and we’ll always keep one eye on this stuff. Let me know if you find any issues about the performance. 
  
 Thanks, 
  
 Ben

#17

Hi Ben,


I'm surprised that you didn't see any memory leak in DefaultByFullPostBack.aspx.


I have used sIEve-0.0.8.exe and Task Manager both to monitor the memory usage and both have shown that DefaultByFullPostBack.aspx has memory leak. Yes, as you said, the memory usage will go down sometimes but that happen too rare (it usually happens only after 10 time the timer elapsed) and the memory that it released is too small comparing to the memory that is used each time the timer epased. I only need to run DefaultByFullPostBack.aspx for about 15 minutes, the memory usage is already 10 times bigger.


I'm using MapSuite 3.1.16.0, which version are you using?


Thanks.


Best Regards,


YV



#18

YV, 
  
 I recreated it this time. Last time we changed the interval to 1s and tested it for a couple minutes, maybe something is different there. This time we leave the interval to 10s and keep it running for 30 minutes, and the leak is quite obvious. Sorry I made it wrong last time. 
  
 I’ve report it in our Tracking system and we will have a look at this problem. Please use the client side (no PostBack) one for now. 
  
 Thanks, 
  
 Ben

#19

Hi Ben,


For the OpenLayers approach, I have followed your suggestion to remove the marker from the marker layer before I call destroy on the marker. But there is still memory leak with this approach. Please find the source code below. Have I done anything wrong?


Thanks.


Best Regards,


YV


 


 



var olMap;
var masterIcon; 
var OnMapCreated = function(map) { 
olMap = map; 
var markers = new OpenLayers.Layer.Markers("MarkerOverlay"); 
markers.id = "MarkerOverlay"; 
map.addLayer(markers); 
var size = new OpenLayers.Size(21, 25); 
var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h); 
masterIcon = new OpenLayers.Icon("/Post5326/theme/default/img/marker_blue.gif", size, offset); 
var marker = new OpenLayers.Marker(new OpenLayers.LonLat(-123, 40), masterIcon.clone()); 
markers.addMarker(marker); 
window.setInterval('RefreshMap()', 5000); } 

function RefreshMap() { 
var markerOverlay = olMap.getLayer("MarkerOverlay"); 
for (i = 0; i < markerOverlay.markers.length; i++) 
{ 
var marker = markerOverlay.markers[i]; 
markerOverlay.removeMarker(marker); 
marker.destroy(); 
} 

PageMethods.GetMarker(getMarkerMethodCompleted); 
} 

function getMarkerMethodCompleted(result, context, methodName) 
{ 
var marker = new OpenLayers.Marker(new OpenLayers.LonLat(result.Longitude, result.Latitude), masterIcon.clone()); 
var markerOverlay = olMap.getLayer("MarkerOverlay"); 
markerOverlay.addMarker(marker); 
}


#20

YV, 
  
 You are doing pretty cool stuff!  
  
 Marker is not the only object with memory leak in OpenLayers, for example, event handler or controls also have the problem. This problem has been added in our TODO list and we will have a fight with it. 
  
 Thanks, 
  
 Ben