PrintThe previous page demonstrated the use of form elements, but not in the context of a working web map. As mentioned earlier, one form element that's commonly used in a web-mapping context is a dropdown list that provides access to a subset of a larger dataset. So let's take a look at an example like that.
Open this rather boring County Viewer app, try it out, and have a look at its source code. This app loads into memory data from a shapefile of US counties. When the user selects a state and clicks the Show button, the app loops through all of the county features and adds overlays for the ones that are in the selected state. This approach is a bit inelegant -- having the data in a database and retrieving just the needed features is probably better -- but it can be "good enough" in certain scenarios. Here are the important aspects of the code worth noting:
- The page's layout is defined on lines 24-44 using the same EasyUI layout and datagrid classes we saw earlier in the lesson. Note the fieldset and its embedded form elements. Also note the empty table that is set up, including an id column that is hidden. This column will come into play when we get to the code that opens the info window over the correct county when its associated row is clicked in the table.
- At the top of the JavaScript section of the page is a block of code (lines 55-77) that populates the dropdown list (select element) with a list of hard-coded states using jQuery syntax. Given the location of the code (not embedded within a function), it gets executed once when the page first loads.
- The initMap() function, like earlier examples we've seen, initializes the map, instantiates an InfoWindow and sets in motion the parsing of the shapefile. Other tasks it carries out include:
a. inserting a "Please wait..." message in the msg div situated just beneath the sidebar table,
b. disabling the Show and Clear buttons,
c. defining a getBounds() method for the Polygon class (used later in the code to anchor the InfoWindow). (The definition of this method is discussed, among other places, in this Stack Overflow post.)
- Unlike earlier examples in which the shpLoad() and dbfLoad() functions initiated execution of the render() function when the two files were finished loading, in this app those functions call on a function called enableForm(). That function simply removes the "Please wait..." message and enables the two buttons.
- The Show button is wired to execute the process() function when clicked. This function obtains the value of the option chosen by the user from the select element and passes that value on to the render() function.
- The render() function is thus executed every time the user selects a different state and clicks Show. The first thing render() does is make a call to a function that clears the map of any overlays associated with the previously selected state. (More on that function below.)
- The bulk of the code in the render() function -- for handling features from a polygon shapefile -- we've seen earlier in the course. A loop is set up to iterate through all of the features in the specified shapefile and add them to the map as overlays.
- The key difference in this version of render() is that within the loop there is an if expression (line 158) that looks for a match between the state that was passed into the function and the state of the county being processed in the current iteration of the loop.
- Other important things happening within the render() function's loop include:
a. The polygon is added to the counties array (which was defined as a global) at position i (the loop iterator variable).
b. The bounds of the polygon are retrieved from the getBounds() function discussed above and then unioned with the bounds of all the other features processed to that point.
c. The county's name and position within the loop are passed to the addToSidebar() function.
- The addToSidebar() function uses jQuery syntax to create a new table row, append it to the end of the table body and append td elements to the row for the two values passed into the function.
- Back in the render() function, after all of the shapefile features have been processed by the loop, two steps are taken:
a. A handler is set up (lines 198-202) for the datagrid's onClickRow event. This event is defined such that the index position of the clicked row (i.e., 0 for the first row, 1 for the second, etc.) and a reference to the row itself are passed along to the callback function for the developer to code against. In this case, row.id is used to get the value held in the id column for the clicked row. That value is passed to the myclick() function, which triggers the click event on the appropriate county polygon.
b. The Map's fitBounds() method is used to zoom in on the selected state.
- Finally, the clearMap() function does three things:
a. It closes the map's info window if it's open.
b. It gets a reference to the datagrid's rows, iterates through those rows and "turns off" the visibility of each of the polygons in the counties array by passing null to the setMap() method. This is the recommended method for removing an overlay from a map.
c. It wipes out the rows in the datagrid and removes all of the tr elements from the sidebar table. (As the comment in the code implies, clearing the sidebar table gave your instructor fits for a while.)
With that, you've seen an example of how to incorporate form elements into a Google API-based web map. Moving on to the next section, we'll shift gears to another advanced topic: "scraping" data off of other websites.