10.1 Mapping data from a database

Last week, we learned how to “post” user based input into a server side database.  This week, we will learn how to “get” data from the database and display user input on our maproom.  The terminology for “post” and “get” is a common one in web development.  jQuery uses these terms.  Last week, we used .post to add data, this week we will use .get to get data.

Step 1: Starter Code

The starter code is a variation of where we left off from the previous tutorial.  We have added the following UI improvements:

  • added visual icons that differentiate one category from another
  • added form validation

These changes are reflected in the highlighted lines below:

Step 2:  Add a button to turn the drawing manager (edit mode) on/off

In the previous tutorial, the map started with edit mode on by default.  This will rarely be a desired user interface.  We want to enable edit mode by some user action.  Add a button that toggles this interaction.  First, add the button code in the body tag, in the side panel:

Next, add the function that enables edit mode (toggleEditMode()), and also uses jQuery to modify the button accordingly:

 

Step 3:  Add a checkbox for public layer

Now let’s add a checkbox that will allow users to toggle the public data layer on and off.  The following input box has an onclick event to the function up206b.addPublicLayer().  Add this to the body section within the side panel (below the header):

The onclick function on the edit button is defined as toggleEditMode(). Add that function as shown below. This function turns the drawing manager tools on or off, and it also changes the style of the button.  At this point, the check box does not do anything, as the function to add public layer does not exist. Add the following function to your code:

This function does a variety of things. First, it checks to see if the user has turned the checkbox on or not. It then determines the bounding box of the current map, packs it into an object variable (data), and finally, sends a request to a server side script to grab the data (getdata.php). The request also has a callback function (up206b.parseData) to do something with the data that the server returns. This is the function that will parse the data from the server and map it for us.

Leave a Reply