In this post we’ll continue our discussion of the ProgressbarControl Google Maps Utility class for enhancing your users’ experience during long running operations. This time we’ll examine the ProgressbarControl in more detail by reviewing a sample application.
Click here to see the demonstration and click the ‘Add Destroyed Homes’ button to add the markers to the map and watch the ProgressbarControl update as the markers are added. We’ll discuss the code used to create the ProgressbarControl below the image. You can view the code used to generate this simple demonstration by right clicking the web page and selecting View Page Source.
We will be loading the contents of an xml file containing approximately 200 residences destroyed in the San Diego Witch Fire. Each address in the file is loaded as a marker on the map. Because this is a large number of markers to add to a map it makes sense to use a ProgressbarControl that updates your user with the current status of the operation.
The initialize( ) function, as seen below, creates the basic structure of the map including map types and controls and at the end of this function makes a call to the loadFiresIntoMemory() function. This function opens the WitchFireResidenceDestroyed.xml file, loops through each record creating a marker for each address, and finally placing the marker into an array variable called ‘batch’. We will use the ‘batch’ variable later in our code to access each marker and add it to the map. All of this takes place as the map initially loads.
We can get away with loading the markers into memory because there are only 230 rows in the file, but this would not be a good idea if you have a really large dataset due to the performance hit of loading a large number of records.
Before we can access the ProgressbarControl we need to reference the progressbarcontrol.js file as seen below. This is done near the top of the file.
Now that we have a reference to progressbarcontrol.js we can create a new instance of ProgressbarControl. We add the following line of code to the initialize() function just below the call to loadFiresIntoMemory().
The initialize function should appear as follows:
Toward the bottom of the file you will see a button called ‘Add Destroyed Homes’. The ‘onclick’ event for this button will call a JavaScript function called ‘loadProgressBar()’. We are going to create this function next.
Next, we create the loadProgressBar() function that will be called when the ‘Add Destroyed Homes’ button is clicked.
Inside the loadProgressBar() function we initialize the ProgressbarControl using the start() method as seen above. The ProgressbarControl.start() method is used to display the progress bar on the map. In addition, we pass in a numeric value that defines the maximum value for the bar. In this case we are getting the size of our array using the length property. Remember that the ‘batch’ variable is an array containing GMarkers for each address in the xml file.
Next, we use the array.length method again to set a variable called ‘maxNum’ which will be used as a counter in a function we will create later.
Finally, we call the setTimeout() JavaScript function. This function is used to set a timer. Since the browser will not update the screen unless it has time to do so, we use setTimeout with a 1 millisecond delay in between each update. The setTimeout() function also accepts a function reference which will be called after the delay. In this case, the addMarkers() function will be called after the delay. We’ll discuss this function next.
Near the top of addMarkers() we called the ProgressbarControl.updateLoader() method which will update the progress of the control by a value of 1. Next, we pull the next GMarker out of the ‘batch’ array and add it to the map with GMap2.addOverlay. Finally, we check the value of ‘num’ to see if it is less than ‘maxNum’. Remember that ‘maxNum’ is set to the total number of GMarker objects loaded in the ‘batch’ array. This number should be 230. The ‘num’ value gets updated each time the ‘addMarkers()’ function is called until it is less than or equal to ‘maxNum’.
