Leaflet and Census TIGERweb


Fig 1 – Sample Leaflet interface to the US Census Bureau’s new TIGERweb WMS service with Bing Maps background

Ref: http://silverlight.onterrasys.com/MapSavvyLeaflet/

US Bureau of the Census – some background

1990 Census
The 1990 Census line data made a revolutionary leap from GBF-DIME format to TIGER, Topologically Integrated Geographic Encoding and Referencing, and also adopted CD-ROM media distribution. In the early 90′s I wrote a few TIGER translation programs for AutoCAD users and users of a popular (now defunct) desktop GIS package called Atlas*GIS. TIGER was useful for its linear data, but was more often used for the boundary polygons that could be tied to Census population demographic data. The line features of the 1990 TIGER were based on the older 1980 GBF-DIME enhanced with USGS 1:100,000 DLG features. GBF DIME was notable for the tell tale zigzag streets in urban areas.

2000 Census
By the mid 90’s Open GIS Consortium (OGC) was actively working on OpenGIS standards. As the internet continued ramping up, OGC released the OpenGIS Web Map Server (WMS) Specification in 2000. Even though Census data releases are a year or so after the actual census, it was several more years before the Census Bureau started investigating alternative WMS services for distributing data. In the meantime boundaries were available for internet and ftp download in ESRI shp and E00 formats. This was convenient, but requires self hosting web solutions.

2010 Census
Ever since the 2000 WMS specification there were hopes for a service distribution of census TIGER/Line. Not until the end of 2011 was this belatedly realized as TIGERweb. But of course by the mid 2000s internet mapping began changing radically with the popularity of Google Maps, GPS, Bing Maps, Open Street Maps, and now ubiquitous mobile devices. The Census Bureau will need to continue evolving to meet the challenges of these rapid changes.

TIGERweb 2011
So why not use the TIGERweb for an experimental look at some more recent web tools? TIGERweb Viewer UI is based on the ESRI Silverlight APIs. Silverlight is a powerful UI technology, but it is destined to be supplanted by html5. As browser market fragmentation and mobile devices force adoption of standards based technologies, proprietary plugins are just not making the transition, at least for public facing web apps.


Fig 2 – TIGERweb Viewer based on ESRI Silverlight API

TIGERweb Viewer seems oddly designed. Rather than the clean, spare look popular today, TIGERweb Viewer seems to be a throwback to an earlier internet. Unusual matrice animations with rotating panels and creepy crawling boundary selectors seem a bit out of place in the modern web. Even though technically possible, and simple to implement in Silverlight, such distractions do nothing to make the UI endearing. After the first blink most users will inevitably recall early internet flashing text and PowerPoint decks filled with animated gifs. Anyone remember the irritation of Clippy?

However, TIGERweb WMS Service is a wide open door for standards based javascript libraries. One of the more elegant available tools is LeafletJS. This is a “lightweight” js map library that works well with jQuery and abstracts away some of the complexity of supporting a fragmenting mobile browser world.

Leaflet is Open Source BSD-licensed with an active contributing community and available on github. It uses newer html5 technologies available in A-grade browsers, but includes fall back for older browsers. It’s nice to have touch events and the geolocation api.

The Leaflet api provides a convenient L.TileLayer.WMS object that transforms a WMS endpoint into a slippy tile map. Performance isn’t as good as a static tile pyramid, but it isn’t bad and simplifies life immensely.

  var censusTracts = new L.TileLayer.WMS("http://tigerweb.geo.census.gov/ArcGIS/services/tigerWMS/MapServer/WMSServer",
  {
    layers: 'Census Tracts',
    format: 'image/png',
    transparent: true,
    attribution: TigerAttribution
  });

Bing Maps
Unlike Google Maps, Microsoft Bing allows licensed access to tile servers. For development, non-profit, and education uses, this is just a matter of registering for a Bing key. Adding a Bing Maps layer with Leaflet is possible using https://gist.github.com/1221998. Once this Leaflet Bing extension javascript is referenced into a page, adding Bing Map styles is simply a matter of adding L.TileLayer.Bing.

var BingAerialWithLabels = new L.TileLayer.Bing(bingkey, "AerialWithLabels",
{
  maxZoom: 21,
  attribution: BingAttribution
});

Fig 3 – Leaflet Census TIGER WMS with Bing Maps Road style

TIGER/Line 2010 accuracy has been upgraded substantially, but you can occasionally see some discrepancies against Bing Aerial.

Fig 4 – Leaflet Census TIGER WMS with Bing Maps Aerial with Labels style

Once all of the WMS and Bing L.TileLayers are instantiated, a new L.Map with the desired L.TileLayer set is declared this way:

            map = new L.Map('mapDiv',
                    {
                        center: new L.LatLng(39.748, -104.981),
                        zoom: 8,
                        layers: [censusStates, censusCounties, censusTracts, censusBlockGrps, censusBlocks]
                    });

Leaflet also provides a simple L.Control.Layers for a user layer control panel:

            var baseMaps = {
                "BingRoads": BingRoad,
                "BingAerial": BingAerial,
                "BingAerialWithLabels": BingAerialWithLabels
            };

            var overlayMaps = {
                "States": censusStates,
                "Counties": censusCounties,
                "Tracts": censusTracts,
                "BlockGroups": censusBlockGrps,
                "Blocks": censusBlocks,
                "Lakes": censusArealHydrography,
                "Rivers Streams": censusLinearHydrography,
                "LocalRoads": censusLocalRoads,
                "SecondaryRoads": censusSecondaryRoads,
                "PrimaryRoads": censusPrimaryRoads,
                "Nexrad": nexrad
            };

            var layersControl = new L.Control.Layers(baseMaps, overlayMaps,
            {
                collapsed: !L.Browser.touch
            });
            map.addControl(layersControl);

Fig 5 – Leaflet L.Control.Layers

TIGERweb WMS GetFeatureInfo is available for queries. For example:

http://tigerweb.geo.census.gov/ArcGIS/services/tigerWMS/MapServer/WMSServer?Service=WMS&Version=1.1.1&Request=GetFeatureInfo&Layers=Counties&SRS=EPSG:4326&BBOX=-122.5,37.75,-122.25,38.0&width=1000&height=1000&QUERY_LAYERS=Counties&INFO_FORMAT=text/xml&X=100&Y=100

<?xml version="1.0"?>
<FeatureInfoResponse xmlns="http://www.esri.com/wms" xmlns:esri_wms="http://www.esri.com/wms">
<FIELDS
  HU100="111214" --HousingUnits
  POP100="252409"
  INTPTLON="-122.7459738"
  INTPTLAT="+38.0518169"
  CENTLON="-122.7485752"
  CENTLAT="+38.0551413"
  STGEOMETRY="Polygon"
  UR="Null"
  STATE="06"
  OID="27590357299439"
  NAME="Marin County"
  BASENAME="Marin"
  MTFCC="G4020"
  METDIV="41884"
  LSADC="06"
  GEOID="06041"
  FUNCSTAT="A"
  CSA="488"
  COUNTY="041"
  COUNTYCC="H1"
  CBSA="41860"
  AREAWATER="797420433"
  AREALAND="1347585521"
  COUNTYNS="00277285"/>
</FeatureInfoResponse>

jQuery makes XMLHttpRequest communication easy, but TIGERweb WMS doesn’t expose an open ClientAccessPolicy.xml, so a self hosted proxy is required.

            $.ajax({
                type: "GET",
                url: getInfoURL,
                dataType: "xml",
                success: GetFeatureInfo
            });

Fig 6 – Leaflet Popup panel with the results of TIGERweb WMS GetFeatureInfo request

Some Caveats

TIGERweb
1) The TIGERweb WMS furnishes images for all the TIGER boundary and line features. However, there doesn’t seem to be a WMS layer for labels like those on the TIGERweb Viewer. There is an undocumented label service that might be useful.

http://tigerweb.geo.census.gov/ArcGIS/rest/services/Labels/MapServer/export

2) WMS GetFeatureInfo requests can provide information from the polygon stack, but the lack of a cross-domain policy file on the TIGERweb WMS server means that a pass through proxy service needs to be hosted on the same server as the Leaflet web app. This proxy service simply provides the same GetFeatureInfo result to the client while avoiding cross-domain issues.

Leaflet
1) Bing javascript
The Bing javascript extension seemed to run into a problem with intersect at this line:
if (zoom = coverage.zoomMin && coverage.bbox.intersects(bounds))

Removing the intersect(bounds) clause seemed to get things working without noticeable problems:
if (zoom = coverage.zoomMin )

2) Leaflet seems to have problems with TileLayer ordering. Bing TileLayers can mask other features if directly added to the map layer set.

3) There are some odd behaviors on Amazon Kindle Fire, possibly due to the Silk web browser’s EC2 caching.

4) Leaflet L.Control.Layers doesn’t work consistently in the mobile browsers I tested. The collapsed layer control icon never opened for iPhone or Kindle Fire. Adding the suggested option collapsed: !L.Browser.touch keeps the layer control open instead of closing when untouched. This wouldn’t be a problem except that mobile devices don’t have the screen space for extra panels.

5) The default attribution for Bing gets quite lengthy, especially when displaying Aerial vendor meta data. Turning this off and deferring to the Bing Maps Logo frees up more screen space which is at a premium on mobile devices.

Summary

Census Bureau’s new TIGERweb is a great step forward for users of TIGER data. Hopefully the momentum will continue forward to include demographic data. SF1 data joined to TIGER polygons would be a more useful service. Adding an OGC WFS service would be the ideal, but WFS always has problems with potentially very large result sets, so I’m not sure this is practical on a public OGC service.

Since the first time I saw Leaflet I’ve been intrigued with its elegance and the potential for abstracting away some of the issues surrounding web apps targeted at mobile and touch clients. In spite of a few minor issues Leaflet is one of the best javascript map apis I’ve used. I believe the issues I ran into are on a bug list and could be resolved by next release.

This bare bones CensusTest project took only a few hours over the weekend to write using Leaflet.

Fig 7 – Lower Manhattan

Comments are closed.