Questionnaire Assistance Centers (QACs) are spaces, donated by community partners, where staff from the Local Census Office or the partner organization are available to answer questions about completing the questionnaire, provide special language assistance and answer general questions.

This is a short term thing – the QACs are only open for 4 weeks or so – and the only initial requirement was dumping the points on the map and showing information when you click on them. So I dumped the shape file into Postgres, published the layer with GeoServer, and added it to an app as a vector layer (KML).

For the most part this code was proudly pilfered from one of the OpenLayers samples. Here we’ll add the layer to the map and set some select events. I made the census_qac_layers a global variable so I could get at it later. Note I took out the enormous URL so the page wouldn’t explode, but this was it (it will probably ask you to pull it up in Google Earth).

// QAC Centers for Census
    census_qac_centers = new OpenLayers.Layer.Vector("Census QAC Centers", {
        projection: map.displayProjection,
        strategies: [new OpenLayers.Strategy.Fixed()],
        protocol: new OpenLayers.Protocol.HTTP({
            url: "http://enormous-url",
            format: new OpenLayers.Format.KML({
                extractStyles: true,
                extractAttributes: true
            })
        })
    });
    census_qac_centers.setVisibility(false);
    map.addLayer(census_qac_centers);
    select = new OpenLayers.Control.SelectFeature(census_qac_centers);
    census_qac_centers.events.on({
        "featureselected": onFeatureSelect,
        "featureunselected": onFeatureUnselect,
        "stopClick": true
    });
    map.addControl(select);
    select.activate(); 

And here are the onFeatureSelect and onFeatureUnselect functions we referenced. They’ll handle creating the popups.

/* Functions for Census QAC Centers */
    function onPopupClose(evt) {
            select.unselectAll();
        }
        function onFeatureSelect(event) {
            var feature = event.feature;
            // Since KML is user-generated, do naive protection against
            // Javascript.
            var content = "<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description;
            if (content.search("<script") != -1) {
                content = "Content contained Javascript! Escaped content below.<br />" + content.replace(/</g, "<");
            }
            popup = new OpenLayers.Popup.FramedCloud("chicken",
                 feature.geometry.getBounds().getCenterLonLat(),
                 new OpenLayers.Size(100,100),
                 content,
                 null, true, onPopupClose);
            feature.popup = popup;
            map.addPopup(popup);
        }
        function onFeatureUnselect(event) {
            var feature = event.feature;
            if(feature.popup) {
                map.removePopup(feature.popup);
                feature.popup.destroy();
                delete feature.popup;
            }
        }

Done and done. Our map now has the pox, and each pustule will pop up the QAC information. I gave the KML output a little styling, which is literally as simple as dropping a couple of files like this in your layer folder (here’s description.ftl):

${partner_na.value} <br />
${street.value} <br />
${phone.value} <br />
Hours: ${hours.value} <br />
<br />
Langauges served: ${language_s.value}

Being at least nominally an agile guy, I (a) release early and often and (b) fully expect changes. So we tossed it out there, looked at it, and decided it didn’t make sense to show all the QAC’s at once. What people would really want to do is show just the locations that support their language. I don’t want to click through 111 locations hunting for a QAC that supports Hindi.

The last thing I wanted to do was make a bunch of separate layers/views/styles for different languages, and an individual QAC can support multiple languages, further complicating the matter.

CQL to the rescue.

CQL, the Contextual Query Language, is a formal language for representing queries to information retrieval systems such as web indexes, bibliographic catalogs and museum collection information. The design objective is that queries be human readable and writable, and that the language be intuitive while maintaining the expressiveness of more complex languages.

CQL was developed by the Library of Congress and OGC used it as a basis for its filter encoding spec (I *think*). GeoServer fully supports the OGC filter encoding sped, but sending it over HTML makes for a horrid mess, as you writing and URL encoding XML. GeoServer also supports plain old CQL, which is quite a bit easier. I needed to add a line to the layer declaration to hold a CQL_Filter parameter.

// QAC Centers for Census
    census_qac_centers = new OpenLayers.Layer.Vector("Census QAC Centers", {
        projection: map.displayProjection,
        strategies: [new OpenLayers.Strategy.Fixed()],
        protocol: new OpenLayers.Protocol.HTTP({
            url: "http://enormous-url",
            'params' : { 'CQL_FILTER' : ''},
            format: new OpenLayers.Format.KML({
                extractStyles: true,
                extractAttributes: true
            })
        })
    });

Next I made a standard HTML radio button list, with the value being the language.

<input type="radio" name="qac_centers" value="English"> English<br />
<input type="radio" name="qac_centers" value="Arabic"> Arabic<br />
<input type="radio" name="qac_centers" value="Chinese"> Chinese<br />
<input type="radio" name="qac_centers" value="French"> French<br />

Etc. Now for some jQuery goodness.

    // Census QAC Stuff
    $("input[name='qac_centers']").attr("checked", false)
    $("input[name='qac_centers']").change(
        function()
        {
            census_qac_centers.setVisibility(true);
            filterval = "language_s like '%" + $("input[name='qac_centers']:checked").val() + "%'";
            census_qac_centers.refresh({
                force: true,
                params: {
                    "CQL_FILTER": filterval
                }
            });
        }
    );

Let’s walk through this. First, we set all the radio buttons to be unchecked (Firefox likes to remember that stuff from session to session). Next we detect whenever a change occurs (i.e. a radio button is checked) and run a function. We set the layer to visible, grab the language value of the checked radio button, and create the CQL filter. It’ll end up looking something like this, where language_s is the field name we’re querying:

language_s like '%Spanish%'

I’m doing a like operation because the field has a comma delimited list of languages it supports. This next bit does the heavy lifting.

census_qac_centers.refresh({
      force: true,
      params: {
                    "CQL_FILTER": filterval
                }
 });

Here we take the CQL_FILTER parameter we added to the layer, and we’re dropping in the CQL we created. The layer is refreshed with the new URL, and only the features that match our CQL filter will come back. A user clicks on German, only the German QAC’s show up.

The CQL Filter option is available on any layer in GeoServer (not just vector), and with the parameter option in OpenLayers it’s very easy to dynamically change the content of a layer. We were able to turn around this request in an extremely short amount of time (a couple of hours, a large portion of which was navel-gazing design) and in a way that’s easy to extract from the application when the QAC’s go away in a month.

You can view it on GeoPortal, second accordion tab on the left.

Google has added photos from Flickr, Panoramio and Picasa to Street View. One had to figure this was coming, given the fanfare around Bing’s recent addition of Flickr photos. Check out this historic area in Prague.

Both Bing’s and Google’s photo integration offerings have different strengths. Bing’s Photosynth allows for a 3D-ish feel you don’t get in Street View. Street View allows for the integration of a lot more pictures, essentially adding area that the Street View cameras couldn’t get at, like pedestrian areas or this view of the same plaza from the top of a tower. And while it’s only significant to a percent or two of us, Street View is usable from Linux (Flash), while I haven’t had any luck with Bing (Moonlight FOSS implementation of Silverlight). In any event, I think we all win in this race.

Google also added a nearby option to its standard search page, which is extremely handy. Google can derive your location by IP or you can specify your location.

For web based maps, I have to agree with The Map Room – the NY Times site has the nicest site I’ve seen.

There was a lot of news out of the ESRI FedUC this month. After reading summaries and summaries of summaries, aside from the usual round of ArcGIS desktop improvements, it looks like the big new items are:

• ESRI is partnering with Amazon to offer cloud rental of AGS on their EC2 service. This is a good move for ESRI and its customers, though you’ll need an ELA to qualify. Rent-what-you-need cloud space is ideal for CPU-stomping AGS, though we’ll need some metrics to see what the long term cost savings would be.
• Volunteered Geographic Information, or VGI (must we hyphenate everything?), ala OpenStreetMap. Surveying, Mapping and GIS has a good summary of the topic and the concerns involved. Hopefully it’ll involve direct integration with projects like OpenStreetMap and not reinventing/branding the wheel.
• Support for the iPhone. According to James Fee, they basically took their old slideshow and did a find-replace on Windows Mobile with iPhone. Anybody stuck with Windows Mobile doing data collection out in the field should be dancing in the streets.

Ars cites a study showing just how spatially boring we humans are. Researches collected customer cell phone location information from cell phone providers found that you can predict someone’s location and movement patters up to 93% of the time. Just threw your cell phone in the back of a moving chicken truck with out of state plates? They probably predicted you’d do that too. If you’re wondering how people can get that information from your cell phone without asking you, check this out and prepare to freak.

And finally, in the are-you-kidding-me department, big content has asked the Office of the US Trade Representative to denounce countries that encourage FOSS. The International Intellectual Property Alliance, which is made up of such luminaries as the RIAA and MPAA, asked USTR to add Brazil, India, Indonesia, Philippines, Thailand, and Vietnam to its 301 list (countries we give meaningful frowns to) because they encouraged the use of open source software. As an example (via Ars),

Indonesia’s policy “weakens the software industry and undermines its long-term competitiveness” because open source software “encourages a mindset that does not give due consideration to the value to intellectual creations [and] fails to build respect for intellectual property rights.”

Many US agencies, including the Department of Defense, have also endorsed using FOSS. The IIPA apparently forgot to put the US on the list of countries we should denounce.

@font-face has been around since CSS2, and the first browser to take advantage of it was Internet Explorer 4(!). It fell out of favor for quite a while, for two reasons:

• Licensing. Yes, fonts are licensed believe it or not, and since rendering your font means downloading the font to the user’s PC, that’s a problem. For the overwhelming majority of fonts sitting on your PC (my Linux brethren notwithstanding), you aren’t allowed to stick them on your web site.
• Formats, which is related to licensing. Microsoft came up with the EOT format, which tries to get around the licensing problem via DRM-ish stuff. Nobody bit on that solution. There was TrueDoc, a format used by Netscape, but when they were unable to open source those bits it faded into history. Then there are SVG, TrueType, OpenType, and WOFF formats. Good grief! No wonder they can’t agree on a HTML5 video codec.

In today’s world, most browsers (Webkit/Safari/Chrome, Firefox, Opera) support both TrueType and OpenType fonts, so that is your target format. We’ll talk about Internet Explorer in a bit. For this example we’ll use the excellent Fontin font. Drop it somewhere in your web site directory – here we’ll say we stuck them in a folder called fonts.

@font-face {
font-family: "Fontin";
src: local("Fontin"), url(fonts/Fontin-Regular.otf) format("opentype");
}

Here we’re creating our own font family, which we’re naming “Fontin”. Note we didn’t have to call it Fontin just because that’s the name of the font – any old name will do.  Next we’re specifying the source for the font, with two options. The first tells the browser to look on the local machine for a font called Fontin and use it if there is one, saving the user a download. You may not want this if there are a lot of disparate versions of the font you want to use floating around, but Fontin is stable. The second source argument tells the browser to grab the font from the web server.

Specify the Fontin range of fonts (regular, bold, and italic) like so:

@font-face {
font-family: "Fontin";
src: local("Fontin"), url(fonts/Fontin-Regular.otf) format("opentype");
}
@font-face {
font-family: "Fontin";
src: local("Fontin"), url(fonts/Fontin-Bold.otf) format("opentype");
font-weight: bold;
}
@font-face {
font-family: "Fontin";
src: local("Fontin"), url(fonts/Fontin-Italic.otf) format("opentype");
font-style: italic;
}

Now I’ll set up a fontin class that we can add to whatever tags we want to use that font in. Note I give alternate, bail-out fonts in the font family stack just in case.

.fontin {
font-family: Fontin, Arial, Helvetica, serif;
font-size: 14px;
}

Internet Explorer still only supports the EOT format, but that isn’t too big of a problem. First, you’ll need to convert your TTF or OTF font file to an EOT format. There are a lot of ways to do that, but this site does a bangup job, even going directly from OTF to EOT. Then we’ll add another line to our @font-face blocks.

@font-face {
font-family: "Fontin";
src: url("fonts/Fontin-Regular.eot");
src: local("Fontin"), url(fonts/Fontin-Regular.otf) format("opentype");
}
@font-face {
font-family: "Fontin";
src: url("fonts/Fontin-Bold.eot");
src: local("Fontin"), url(fonts/Fontin-Bold.otf) format("opentype");
font-weight: bold;
}
@font-face {
font-family: "Fontin";
src: url("fonts/Fontin-Italic.eot");
src: local("Fontin"), url(fonts/Fontin-Italic.otf) format("opentype");
font-style: italic;
}

Notice the extra src line in each @font-face block pointing to the EOT files? That’s all that is required. Browsers ignore CSS lines they don’t understand, so IE picks up on the EOT and ignores the rest, and vice versa for the other browsers.

Font embedding is a great way to add a typographic flare to your web site, but don’t overdo it. Downloading the font files is time and bandwidth for your users, and with these sorts of things, less is often more.*

*The great lesson of District 9 – a few well done special effects beats a two hour CGI crapstorm. This applies equally well to web design.

First, via Vector One, Cynthia Dietz, Map Librarian at the University of Stony Brook NY, wronte an excellent paper called Geospatial Web Services, Open Standards, and Advances in Interoperability: A Selected, Annotated Bibliography. From the abstract:

This paper is designed to help GIS librarians and information specialists follow developments in the emerging field of geospatial Web services (GWS). When built using open standards, GWS permits users to dynamically access, exchange, deliver, and process geospatial data and products on the World Wide Web, no matter what platform or protocol is used.

Next up, via InfoQ, comes an interesting piece from the Harvard Business Review titled What Really Motivates Workers. Most studies have found it isn’t money that motivates workers, but the other assumption, that it’s recognition, isn’t the case either.

In a recent survey we invited more than 600 managers from dozens of companies to rank the impact on employee motivation and emotions of five workplace factors commonly considered significant: recognition, incentives, interpersonal support, support for making progress, and clear goals. “Recognition for good work (either public or private)” came out number one. Unfortunately, those managers are wrong.

As it turns out, they found the #1 motivator for employees is progress – the sense that people are making headway in their jobs or are overcoming obstacles.

Finally, ESRI put out a good video on their YouTube channel called Social Media and Geo-Services: Real-time modeling of the disaster situation in Haiti. It showcases some of the abilities of ArcGIS Explorer, which is my mind is one of ESRI’s best, least hyped products.

Doh!

Unfortunately, when I head over to Bing Maps I get one of these.

Thank you, Microsoft. No luck trying to run it via Moonlight, Novell’s open source Silverlight implementation, either. Sigh.

First you had some quotes from Steve Jobs of this ilk:

Apple does not support Flash because it is so buggy. Whenever a Mac crashes more often than not it’s because of Flash. No one will be using Flash. The world is moving to HTML5.

Ouch.

Adobe quickly put out a statement that they never ship Flash with known crash bugs (I’m not sure whether they did themselves any service with that remark), and then someone quickly proved they did. If you click on this link your browser will likely explode. It’s a Flash bug first reported in 2008. Only the 10.1 beta is safe.*

With support for HTML5 video and canvas, Flash is in trouble. If you’re using anything but IE, check this out. No Flash or Silverlight or Java here – just HTML5 canvas and JavaScript. The biggest supports under the Flash tent are market share, the lack of a specified coded for HTML5 video and, ironically, Internet Explorer, since they don’t offer much in the way of HTML5 support yet. If there was a HTML5 standard video codec and IE supported it, I don’t think their market share would last long. Big sites like YouTube are already experimenting with HTML5 video (h.264). And with breakout gadgets like the iPhone and (less likely) iPad not supporting Flash, consumers will demand alternatives.

Every time I hear about devs (some of my co-workers included) choosing the Flex API for AGS I have to bite my lip. With the life span of web mapping sites they’re probably more than safe going with Flash – it’s slide will likely be long and slow. But I think that slide is becoming inevitable.

*btw, if you have a supported graphics card the 10.1 beta will hit the GPU rather than clobber your CPU. It’ll keep your media center PC from eating itself.

First, I’m using jQuery for this, so stick a reference to the Google CDN in your head.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">

</script>

Happy cloud is happy.

Next, you need an image to go blundering about on your web page. If you don’t want it to obscure the page underneath it, you’re going to have to do some creative transparency. Here I made a cloud with a radial shading so the edges are less transparent than the middle. But you could use or make anything you want here. I used and recommend Inkscape if you don’t have a favorite vector graphics editor yet.

We’re going to use the image as a background to a div, which you should stick in whatever container div you want the image to roam around in, probably at the bottom. I stuck it in a div creatively named “page-head”.

<div id="cloud"></div>

Now let’s style that div a bit.

/* moving image */
#cloud {
position: relative;
top: 10px;
left: 0;
width: 299px;
height: 173px;
background: transparent url(img/cloud.png) no-repeat scroll 0 0;
}

Nothing special here. Use the top property to move the image up or down to where you want it. Note I’m setting the left property even though I’m starting it the default (0). This is important as you’ll see in a minute.

Now on to the JavaScript.

$(document).ready(function() {
animateCloud();
});

function animateCloud() {
$("#cloud").animate({
'left':  $("#page-head").width() - $("#cloud").width() - parseInt($("#cloud").css("left")) }, 50000, 'linear', function() {            animateCloud();        });
}

When the page is ready, we call the animateCloud function. From there we’re running a jQuery animation where we change the left property of the could by the container width – the width of the cloud image – the current left property of the image. So when the image is at the starting position, we get the width of the container – the width of the cloud div, since the starting left property of the cloud is 0. This is why we had to specify the position even though it’s 0 – if you didn’t, jQuery would return a NaN for this value. So the image goes across the screen over the course of 50 seconds (50000ms), and when it gets to the end it calls itself again. This time we set the left to 0, since container width – cloud div width – cloud div left property will equal 0. Back it moves, calls itself, ad nauseam.

Told you you’d be disappointed.