ThinkGeo.com    |     Documentation    |     Premium Support

Need Loading Message when loading data into map

Is there a way to get a "Loading..." message or image to display on the map when the map data is being loaded?


 


We have overridden the DrawCore method on the InMemoryFeatureLayer which then pulls data from a ArcGIS web service load load a point layer.  While this code executes to then add the points to the map, I am looking for a way to display a message on the map to indicate that the data is loading.


 


Any guidance would be appreciated.


 


Thanks,



Jeff



Hello Jeff, 
  
 OpenLayers has provides two client-side events I think maybe fit your requirements. 
  
 They are “OnMapCreating ” and “OnMapCreated ” event.  
  
 The OnMapCreating event is fire when map begin loading the layers. 
   
 var OnMapCreating = function(map){  
 // You can use JavaScript code to show a loading message. 
 }  
  
 and after everything is ready, 
  
 var OnMapCreated = function(map){  
 // Use JavaScript code to remove the message and notice the user. 
 }  
  
 If it’s not working or not fit your situation, please let us know. 
  
 Regards, 
  
 Gary

I have tried both of those events and they both fire before the data is actually loaded into the map.  they are fired before and after the map is drawn, but the data is populated up to a minute after that point. 
  
 Thanks, 
  
 Jeff

Hello Jeff, 



Also we have DrawingProgressChanged event, you can show the message when you begin load the data from ArcGIS and close the message when you  get the status of points has drawn, here is the event code: 


worldLayer.DrawingProgressChanged += new EventHandler<DrawingProgressChangedEventArgs>(worldLayer_DrawingProgressChanged);

void worldLayer_DrawingProgressChanged(object sender, DrawingProgressChangedEventArgs e)
        {
            //e.ProgressPercentage;
            //e.FeaturesToDraw;
            //e.FeaturesDrawn;
        }



Regards, 



Gary



Gary, thanks for the reply.   The DrawingProgressChanged event takes place after the code in DrawCore is already done retrieving the data from the external ESRI web service.  We need something that will trigger at the beginning of the DrawCore and then allow us to control some type of client side javascript to display a loading message. 
  
 Thanks, 
  
 Jeff

Hello Jeff, 
  
 We have a property in MapTools named LoadingImage, it will shows when the drawing begin, and ends when the drawing end, if you will do your data require in the drawcore method, I think this can help. 
  
  Map1.MapTools.LoadingImage.Enabled = true; 
  
                 //Map1.MapTools.LoadingImage.Width = 64; 
                 //Map1.MapTools.LoadingImage.Height = 64; 
                 //Map1.MapTools.LoadingImage.ImageUri = new Uri(new Uri(Request.Url.AbsoluteUri), "loading.gif"); 
  
 You can set the height and width, and if you like, you can make your own loading image that looks beautiful. 
  
 Let me know if you have problems with this. 
  
 Regards, 
  
 Gary

That doesn’t work because the actual loading of the data ino the map is fairly quick, it is the retrieving the data from ESRI web services that is slow and executing this within the drawcore does not appear to be a place that displays the loading image. 
  
 Jeff

Hello Jeff,  
  
 If you have override your drawcore method, is that means you will finish all the things in it(require the data, add the Pointshape), if so, I think your drawcore method will keep drawing until you finished it, so it’s working using LoadingImage.  
  
 If not, sorry I’m not really understanding what you have done, could you please provide some sample code?  
  
 Regards,  
  
 Gary

Gary, we have all of the code in  the drawcore method and the loading image is definately not displaying when the web page is being loaded. 
  
 I have tried adding the javascript events for onmapcreating, and all server side events for the map and aspx page, and all of those events fire before the drawcore starts to execute. 
  
 Which code would you want to see?    
  
 ASPX PAGE 
 <cc1:map ID="Map1" runat="server" Height="100%" Width="100%" OnClientDrawEnd="trackShapeFinished();" OnClientClick="trackShapeFinished();">
</cc1:map>

DRAWCORE - code to load the data the call to LoadPointLayerARCClass takes a minute or so
If currentZoomLevel IsNot Nothing Then
If UserHasRestriction = False Then
If CurrentLevel >= 15 Then
'If there is no restriction and you are zoomed in enough, then show it
ClassInformation = "PROCESSING LOADING..."
LoadPointLayerARCClass(canvas.CurrentWorldExtent(), "project")
currentZoomLevel.Draw(canvas, MyBase.InternalFeatures, New Collection(Of SimpleCandidate)(), labelsInAllLayers)
System.Diagnostics.Debug.WriteLine("Drawing Complete" & Now & vbCrLf)
ClassInformation = "COMPLETE"
Else
'UserInformationLabel.Text = "You need to keep zooming in to be able to select contacts, you are at Zoom Level: " & CurrentLevel
Exit Sub
End If
Else
'If you have a restriction then no matter what the zoom level zoom to the bounding box of the restriction
System.Diagnostics.Debug.WriteLine("LoadPointLayerARCClass " & Now & vbCrLf)
LoadPointLayerARCClass(canvas.CurrentWorldExtent(), "project")
currentZoomLevel.Draw(canvas, MyBase.InternalFeatures, New Collection(Of SimpleCandidate)(), labelsInAllLayers)
System.Diagnostics.Debug.WriteLine("Drawing Complete" & Now & vbCrLf)
End If




Thanks,

 Jeff

Hello Jeff, 
  
 Thanks for your sample code, could you please reorganize your code? 
  
 The most interesting part to me is the DrawCore method you have override. 
  
 Regards, 
  
 Gary

Here is the code in the drawcore.   
  
  
       Dim DM As New DMGlobal
        Dim currentZoomLevel As ZoomLevel = MyBase.ZoomLevelSet.GetZoomLevelForDrawing(canvas.CurrentWorldExtent, canvas.Width, canvas.MapUnit)
        Dim checkZoomLevel As ZoomLevel = MyBase.ZoomLevelSet.GetZoomLevel(canvas.CurrentWorldExtent, canvas.Width, canvas.MapUnit)
        Dim CurrentLevel As Integer = MyBase.ZoomLevelSet.GetZoomLevels.IndexOf(checkZoomLevel) + 1  'Gets the number of the zoom level

        If WebData.Length > 0 Then
            Dim MRestriction As String = DM.GetXMLFieldValue(WebData, “MAPRESTRICTION”)
            If MRestriction.Trim.Length > 0 Then
                'Zoom to the restriction and more if less than the visible point zoom lenvel
                Dim MyPoly As New PolygonShape(MRestriction)

                UserHasRestriction = True
            Else
                UserHasRestriction = False
            End If
        Else
            'Base the retrieved points on the current zoom level
            UserHasRestriction = False
        End If

        If currentZoomLevel IsNot Nothing Then
            If UserHasRestriction = False Then
                If CurrentLevel >= 15 Then
                    'If there is no restriction and you are zoomed in enough, then show it
                     ClassInformation = “PROCESSING LOADING…”
                     LoadPointLayerARCClass(canvas.CurrentWorldExtent(), “project”)
                     currentZoomLevel.Draw(canvas, MyBase.InternalFeatures, New Collection(Of SimpleCandidate)(), labelsInAllLayers)
                     ClassInformation = “COMPLETE”
                Else
                    'UserInformationLabel.Text = "You need to keep zooming in to be able to select contacts, you are at Zoom Level: " & CurrentLevel
                    Exit Sub
                End If
            Else
                'If you have a restriction then no matter what the zoom level zoom to the bounding box of the restriction
                 LoadPointLayerARCClass(canvas.CurrentWorldExtent(), “project”)
                 currentZoomLevel.Draw(canvas, MyBase.InternalFeatures, New Collection(Of SimpleCandidate)(), labelsInAllLayers)
            End If

        End If


Jeff, 
  
 Thanks a lot, I will working on this and let you know the result as soon as possible. 
  
 Regards, 
  
 Gary

Thanks,  if you need more code or want to do a web meeting to see anything just let me know. 
  
 Jeff

Hello Jeff, 



Sorry I made some mistake before, in Web Edition client side code always raises after the server code. So during the drawing, it actually runs on the server side. We cannot run client script until the server side code is finished. Which means you cannot change client side status using the code above. 



There is a workaround but not exactly accuracy to notice from “loading” to “complete”, the only precondition is that you must using single tile: 



1) On the server side, split this layer to two layers. 

Layer One is set the layer from 1 – 15 with a fixed style and fixed data. 

Layer Two loads data dynamically.  



2) Now we can use the LoadingImage like above, but the difference is that we need hook the event.  

First find the layer in the JavaScript like: 




var markers = map.getLayer('MarkerOverlay'); 
 

Then hook the “loadstar” and “loadend” event on this client layer to show information: 


layer.events.register(type, obj, listener);
 

You can find the event details in : 

dev.openlayers.org/releases/OpenLay...er-js.html

Then because we have split the layer to two layers, so the layer that dynamically load data doesn’t draw from level 1-15; when it’s 16 or upper zoom level, we will actually draw this layer and this event will raise.  



Notice: If you are using Multiple tile, it doesn’t work good, because every tile will fetch data dynamically, which means the loading image will display until all tiles are loading finished. 



Regards, 



Gary