The jQuery JavaScript library allows you to select any element on a webpage and modify it. I will assume you already know how it works, or at least what it’s for. Now, say you have a table containing the following:

<tr id="123" class="employee">
  <td class="name">John Smit</td>
  <td><img src="..." class="image" /></td>
</tr>
<tr id="983" class="employee">
  <td class="name">Juan Smith</td>
  <td><img src="..." class="image" /></td>
</tr>
<tr id="219" class="superhero">
  <td class="name">Mr. Incredible</td>
  <td><img src="..." class="image" /></td>
</tr>

Selecting only the employee elements (assuming that the class “employee” is not used elsewhere) can be done via ‘$(“.employee”)’. For example:

$(".employee").css("color", "red");

would set the names of both employees to red. Similarly, it’s easy enough to select a specific row and hide the person’s name:

$("#219.name").hide();

But what if you have a situation where a certain element is being passed to your function as an object? You have the variable ‘myRow’, for example; and it’s an unknown (to you) element on your page. And now you want to hide only the image within that row. You don’t know the id you’ve been given, you just have the object. Even if you get the object’s id out via myRow.attr(“id”), how can you pass it to your jQuery selector? And how can you select and hide the image? Using something like

$("#219.image").hide();

would not work, because (even assuming you get the ID in there somehow) the “image” element is two levels down. The row with id 219 does not have a child of the “image” class. It has a classless child which in turn has a child of the “image” class. So the selector “#219.image” will return nothing. This seems like quite the unsolvable problem. (EDIT: see the comments for a way to do this without jQuery as suggested by Barry Rowlingson.)

It turns out that jQuery already has a neat, pre-packaged solution for this conundrum. It’s the .find() function, and in our example, it could be used like this:

myRow.find(".image").hide();

Very simple, and very useful! Pass it an element on your page, and you can select any child of a given class.

We are working on a project where we have a django app that dynamically calls mapserver to generate an image of a region with a set of selected properties. We wanted to be able to pass cgi substitution parameters for a list of entities to highlight. Here is how we did it.

UMN Mapserver supports the concept of variable substitution which is documented nicely here. Since version 6 of mapserver, you must define a validation pattern when setting up substitition. A default value is optional but we will be using that too. So lets contrive a simple scenario. You have a layer of municipal boundaries and you want to be able to highlight zero or more of those boundaries on the map. To do that, we will add two nearly identical municipal layer definitions to our map file:

  LAYER
    NAME 'Municipality_Outlines'
    TYPE POLYGON
    DUMP true
    TEMPLATE none
    CONNECTIONTYPE postgis
    CONNECTION "dbname='test' host=localhost port=5433 user='{282B61123232131231}' password='{282B6123423423423}' sslmode=disable"
    DATA 'the_geom FROM "municipality" USING UNIQUE id USING srid=4326'
    METADATA
      'ows_title' 'municipality_outlines'
      'ows_srs'   'EPSG:4326'
    END
    STATUS OFF
    TRANSPARENCY 100
    PROJECTION
      'init=epsg:4326'
    END
    LABELITEM 'name'
    CLASS
      NAME 'Municipalities'
      STYLE
        WIDTH 3.0
        OUTLINECOLOR 5 200 200
        COLOR -1 -1 -1
      END
    END
  END

  LAYER
    NAME 'Selected_Municipalities'
    TYPE POLYGON
    DUMP true
    TEMPLATE foo
    CONNECTIONTYPE postgis
    CONNECTION "dbname='test' host=localhost port=5433 user='{282B61D4012321321}' password='{312312312443223423}' sslmode=disable"
    DATA 'the_geom FROM "municipality" USING UNIQUE id USING srid=4326'
    FILTER "id in( %municipalitylist% )"
    METADATA
      'ows_title' 'selected_municipalities'
      'ows_srs'   'EPSG:4326'
      'municipalitylist_validation_pattern' '^[0-9,]+$'
      'default_municipalitylist' '0'
    END
    STATUS OFF
    TRANSPARENCY 100
    PROJECTION
      'init=epsg:4326'
    END
    CLASS
      NAME 'Selected Municipalities'
      STYLE
        WIDTH 2.5
        OUTLINECOLOR 255 255 000
        COLOR -1 -1 -1
      END
    END
  END

So the interesting parts are the FILTER and METADATA sections in the Selected_Municipalities layer.

• The filter part basically applies a where clause to our layer sql definition. What is smart about this filter is that it uses an SQL ‘in’ clause to allow multiple values (record id’s in this case) to be used as the filter.
• The municipalitylist_validation_pattern is the next interesting bit. I have set it to a regular expression that will allow any number of numbers and commas. The validation pattern is there to prvent sql injection attacks into our database.
• The default_municipalitylist is set to 0 and will basically allow the user not to specify anything in the url for the municipality list and the query to still be valid without actually selecting anything.

http://llocalhost/cgi-bin/mapserv?map=TEST&SERVICE=WMS&VERSION=1.3.0&
REQUEST=GetMap&BBOX=-27,26,-25,30&CRS=EPSG:4326&
WIDTH=1498&HEIGHT=749&LAYERS=Municipality_Outlines,Selected_Municipalities&
STYLES=&FORMAT=image/PNG

Our map with no selection

http://llocalhost/cgi-bin/mapserv?map=TEST&SERVICE=WMS&VERSION=1.3.0&
REQUEST=GetMap&BBOX=-27,26,-25,30&CRS=EPSG:4326&
WIDTH=1498&HEIGHT=749&LAYERS=Municipality_Outlines,Selected_Municipalities&
STYLES=&FORMAT=image/PNG&municipalitylist=5

One item selected using our filter

http://llocalhost/cgi-bin/mapserv?map=TEST&SERVICE=WMS&VERSION=1.3.0&
REQUEST=GetMap&BBOX=-27,26,-25,30&CRS=EPSG:4326&
WIDTH=1498&HEIGHT=749&LAYERS=Municipality_Outlines,Selected_Municipalities&
STYLES=&FORMAT=image/PNG&municipalitylist=5,7

I recently posted a list of software I use to build GeoSpatially enabled web applications. One more tool I should mention is Selenium. Selenium is a web testing suite which includes an extension to Firefox that lets you ‘write’ test units by interactively using your web site. When you run a unit test, the actions you carried out on the site are replayed and the test passes or fails based on whether the recording replay could be completed. Interestingly, the recorded script can be edited and saved out in different languages (perl, php, python etc). I didn’t have much luck getting this latter feature to work and I also had some problems getting test units to run repeatably for some of my ajax driven pages – though I am still new to the software so perhaps I will figure out my issues given further reading of the docs. Linux User Magazine has a nice article about Selenium which is well worth a read.

In the last few weeks I needed to implement some charting / graphing for a project. Here are two great options:

1) The Google Chart API is a web service that you can call from your web page and it will embed a chart into your page based on the data you send it. They have many nice options for creating good looking charts, and even include some options for creating simple thematic maps.

Advantage: Offload the work to Google and benefit from the maintenance and cool new features they provide.

Disadvantage: I found it sometimes a bit slow to return the chart and Google naysayers may prefer not to hand over control of important parts of their app to Google. Also I think the API is a little less intuitive than the Flot api.

The Google Chart API

2) The Flot Jquery plotting library. While it may lack all of  the bells and whistles of the Google Chart API, Flot has some bells and whistles of its own. If you have used OpenLayers before, you will find Flot familiar in that it just attaches itself to a div and renders into that. With some add-ons you are able to make interactive charts e.g. where you can zoom in and out of the chart, click on elements to find out more about them and so on.

Advantage: A ‘natural fit’ if you are already using jquery. Also you control everything so no need to worry about dependency on Google services.

Disadvantage: Doesn’t have quite the range of charting options that the google API has.

Flot Jquery Plugin