This article demonstrates how to create a relatively simple Virtual Earth map application using data read from a MySQL database. The data is read using PHP, and JavaScript is used to implement some client-side functionality.

The application was created for the University of Dallas' Biology Department to plot student field data. This field data consists of sample points that attempt to determine if the point is a wetland or not. The determination is based on three indicators: hydrology, vegetation, and soil. Two of these indicators have to indicate a wetland for the point to be determined a wetland. The application allows all three indicators and the final wetland determination to be displayed as individual layers. Individual student teams can also be displayed, as well as the entire dataset.

The finished application can be found at http://www.biomarcy.com/wetlands/map.php.  Here is a screen shot of the wetland layer with all teams displayed:

This is actually a very simple application. Although it uses JavaScript, it does not use AJAX to transfer the pushpins to the client. Instead, PHP reads the data points from MySQL and creates the JavaScript required to plot the pushpins. This is effective for a small application like this, but it is not scalable. An application with more data points should probably use AJAX with XML or JSON to transfer the pushpin data on demand.

The display application is implemented as one large PHP file. Here is the header:

ERROR [include_code_listing plugin]: File Not Found (/usr/www/users/winwaed/geowebguru/img/2009/wetland_header.txt)

Most of this should be self explanatory HTML header boiler plate. Of note is the wetland_config.php include. This includes a number of configuration parameters which should not be stored in a public area. The most important of these are $dbserver, $dbuser, and $dbpassword which store the information required to open the MySQL database. $title is also defined here for convenience.

After the header boiler plate, we include the Virtual Earth control and then start the main JavaScript definition. This definition starts with a few global variables. These refer to the Virtual Earth map object, individual map layers, and icon specifications. We only use three icons but we use them a lot. Therefore it is a good idea to keep global references to them.

Next we define some JavaScript callbacks. The wetland determination setting and each indicator all have their own layer. The user can select which to be displayed by pressing one of the layer selection buttons. These buttons call these callbacks to switch the required layer on, and all other layers off:

ERROR [include_code_listing plugin]: File Not Found (/usr/www/users/winwaed/geowebguru/img/2009/wetland_layer_select.txt)

Next we start to create the Virtual Earth map. We create a new map object and set the map style and position. Then we create the four data layers, and the three icon specifications. These are all global variables. Here is the code:

ERROR [include_code_listing plugin]: File Not Found (/usr/www/users/winwaed/geowebguru/img/2009/wetland_create_map.txt)

We are now ready to dive into the PHP to fetch the data. Our first PHP function create_dropdown is called to create the HTML for a dropdown box that allows the team to be selected. The dropdown box will be created in a form that calls the map page with the required team as a parameter. The parameter $pairs specifies the team names and their symbols. The symbol is a character ('0' or a letter of the alphabet) that is used as an identifier here.

After this definition, we open the database (winwaed_wetland) and read the team names and symbols. If a team was requested in the URL parameter 'team', then this is checked against the available teams. The default is "All Teams" with symbol "0". Here is the code:

ERROR [include_code_listing plugin]: File Not Found (/usr/www/users/winwaed/geowebguru/img/2009/wetland_team_select.txt)

Now that we have the team data, we can get the required data points. Two SQL statements are available according to whether we are selecting all teams or just one team. We then loop over each data row extracting the position, and results. A caption ($desc) is created from the field data and teams:

ERROR [include_code_listing plugin]: File Not Found (/usr/www/users/winwaed/geowebguru/img/2009/wetland_get_points.txt)

We are now ready to create the JavaScript that actually plots the pushpins on the map. We create a pushpin shape for each layer. These have identical captions, but have different symbols according to their respective wetland indication. There are three options: wetland (blue circle), not a wetland (yellow circle), and insufficient data (white circle). Here is the code, including the closing '}' of the data loop:

ERROR [include_code_listing plugin]: File Not Found (/usr/www/users/winwaed/geowebguru/img/2009/wetland_create_layers.txt)

Next we tidy things up by closing the database, close the PHP section, set the layer visibility (ShowWetland), finish the JavaScript, and the HTML header:

ERROR [include_code_listing plugin]: File Not Found (/usr/www/users/winwaed/geowebguru/img/2009/wetland_tidy_up.txt)

After closing the HTML header, we finally come to the HTML body:

ERROR [include_code_listing plugin]: File Not Found (/usr/www/users/winwaed/geowebguru/img/2009/wetland_body.txt)

After the title, the main map div myMap is defined. This is followed by a key defined in HTML, and the layer-selection buttons. Finally, a small form includes a drop down list of the available teams created using the PHP function create_dropdown that was defined above. When the user selects a new team, this form simply calls the same page but with the team's symbol (identifier) as a POST parameter.

Although this example is quite long, you can see that in reality it is fairly simple. PHP reads data from a MySQL database. This is used to create JavaScript code which, in turn, is plotted on the map. Data selection uses two different methods: client level layer selection, and server-side team selection. It might be tempting to have used layer selection for the teams, but this would have resulted in a large number of layers. A better alternative which would scale better, would be to use XML to JSON to transfer the pushpin data.