Klokan's starred items in Google Reader

Introducing Closure Linter

2010-08-31T22:45:00Z

When collaborating with lots of engineers as we do here at Google, it’s important to keep a consistent coding style. To this end, we recently open sourced the Google JavaScript Style Guide.

Today we’re happy to announce we’re open sourcing a tool that will help you follow that style guide with minimal manual effort - the Closure Linter.

Take for example, this code:

var x = 10
var y=20;

for(var i = 0;i < 10; i++ ) {
  x += i;
   y -= i;
}

var z = [10, 20,];

x = y + z[0]
    + 10;

When we run gjslint --strict fixme.js we get

Line 1, E:0010: (New error) Missing semicolon at end of line
Line 2, E:0002: Missing space before "="
Line 2, E:0002: Missing space after "="
Line 4, E:0002: Missing space before "("
Line 4, E:0002: Missing space after ";" in for statement
Line 4, E:0001: Extra space before ")"
Line 6, E:0006: (New error) Wrong indentation: expected any of {2} but got 3
Line 9, E:0121: Illegal comma at end of array literal
Line 12, E:0120: Binary operator should go on previous line "+"
Found 9 errors, including 2 new errors, in 1 files (0 files OK).

Even better, if we run fixjsstyle --strict fixme.js, 7 of the 9 errors are automatically fixed for us!

We hope you can use the Closure Linter to improve your style consistency while simultaneously saving time. More information on how to get started can be found on the How to Use Closure Linter page.

We welcome comments and questions in the discussion forum.

Posted by Robby Walker and Andy Perelson, Software Engineers

This Var is My Var

2010-08-30T20:34:00Z

The Closure Compiler you know is very different than the Closure Compiler that’s familiar to Google engineers. The defaults at Google are much stricter. It forbids duplicate global variable declarations, performs type-checking, and restricts a number of other patterns that are common in non-Closure-style JavaScript. By default, the “Google build” of Closure Compiler is like running the "open source build" of Closure Compiler with the --warning_level VERBOSE flag.

Why? Almost every contributor to Closure Tools works on web applications. We want to be able to share code. Part of that means we should be able to fix the shared code, and integrate it into all our apps quickly so that, for example, fixes for IE9 will make it out to production within a reasonable time. To integrate those changes safely, we need to be confident that they won’t break anything. Compiler restrictions help us do that. Sometimes those restrictions are obvious...sometimes less so.

Suppose Joey writes some library code:

Joey.prototype.eatHotDogs = function(hotDogs) {
  for (i = 0; i < hotDogs.length; i++) {
    this.eat(hotDogs[i]);
  }
};

Next summer, Nathan writes an application to feed Joey HotDogs by the boxful:

Nathan.prototype.runHotDogContest = function(player, boxes) {
  for (i = 0; i < boxes.length; i++) {
    player.eatHotDogs(this.unpackHotDogs(boxes[i]));
  }
};

Surprisingly, when Nathan runs his code in a browser, it tries to feed Joey an infinite number of hot dogs and crashes the browser.

The problem, of course, is that JavaScript "helpfully" declares variables for you if you forgot. No one declared i, so a variable i got magicked into the global scope. When Joey originally wrote his code, he tested it and it worked fine. But when Nathan tried to use it, he found that eatHotDogs() was "resetting" the i in his loop every time he called it.

In this example, Nathan was directly calling the problematic method, and the bug was relatively easy to spot. In the general case, these bugs are "non-localized" —missing var in one file may trigger a bug in an unrelated file that hasn’t been touched in years. Or it may cause a bug years later in unrelated new code. For a library shared across many codebases, non-localized bugs can stop progress quickly because it’s so hard to know where to start looking.

In VERBOSE mode, Closure Compiler enforces that all variables must be declared with the var or function or catch keywords. Global variables may only be declared once. The Google JS style guide has naming conventions to make these collisions even less likely.

This rule has some corollaries that have a big impact on how we write JavaScript. For one, there must be a way to declare variables that are "owned" by the surrounding page, and not by the code under compilation. So Closure Compiler has externs files, which allow you to declare external variables. Conversely, external variables may not conflict with your code. If you use the default externs, you will not be able to name a variable Node because it will conflict with DOM Nodes.

Try running Closure Compiler with --warning_level=VERBOSE mode and see what you find in your code!

Posted by Nick Santos, Software Engineer

Mapping with Google Fusion Tables

2010-08-28T15:37:00Z

My workplace, United Nations Association of Norway (UNA Norway), has 700 member schools across the country. We wanted to include a map on our webpage to show all our members. The map should be automatically updated when new schools are added or removed. From previous experience, I knew that having 700 markers on a single map is problematic. Google Fusion Tables overcomes this limitation in a clever way.

Especially for nerds: We use SugarCRM to keep track of our members. SugarCRM is highly customisable and it's easy to add extra fields for latitude and longitude positions. I wrote a PHP script which synchronises a SugarCRM database (MySQL) with Google Fusion Tables. The script first checks if the last modifed date or the number of rows are equal. If not, the script loops through all rows (members) in the SugarCRM database. If the member exist in Fusion Tables, it's updated if modified date is different. If the member don't exist in Fusion Tables, it's inserted. Fusion Tables members that don't exist in SugarCRM database are deleted. This script helped me to get started.

When the data are available in Google Fusion Tables, it's easy to create an embeddable map:

Full screen view

Google Fusion Tables avoids the browser limitation of showing maximum 200 markers by generating transparent PNG tiles instead of indvidual markers. This url shows you a PNG image of our member schools around Oslo:

Royalty-free H.264 is a big win for HTML5, big loss for Flash

2010-08-26T22:00:00Z

Update: Mozilla responds, saying that by 2014 (when the original fee-free license for H.264 would have expired) chances are the codec won't be relevant anymore.

So far, one of the main arguments against widespread implementation of HTML5 video has been the uncertain licensing future of the H.264 standard. Proponents of Flash video and organizations committed to license-free software, like the Mozilla foundation, said that while H.264 was currently royalty-free (and would remain so until 2015), there was no guarantee that MPEG LA wouldn't start charging licensing fees later on.

In that event, if HTML5 had supplanted Flash as the de facto standard for video on the web, it would have meant that organizations and possibly even end users would have found themselves saddled with onerous fees after 2015.

That theoretical stumbling block has disappeared. MPEG LA has announced that H.264 will be royalty-free forever so long as video encoded with the standard is free to end users. This means sites like YouTube and vimeo will never be charged licensing fees to serve video on the web; presumably, it also means that Apple will continue to pay licensing fees to sell videos in the iTunes Store.

Mozilla's Firefox browser doesn't currently support HTML5 video (via H.264, that is -Ed); the uncertainty of H.264's licensing future meant Mozilla wanted to stick with Ogg Theora, a video codec Mozilla believed would be unencumbered by patenting issues. With MPEG LA's announcement that H.264 will be royalty-free in perpetuity, it's likely only a matter of time before Firefox joins browsers like Safari, Chrome, and Internet Explorer 9 in fully supporting HTML5.

This is good news for almost everyone except Adobe. Adobe's main argument against moving away from the current Flash-dominated web video landscape to one with a truly open standard like HTML5 is now invalid. While Flash may continue to hold onto its grip on interactive web content, MPEG LA's announcement likely points to an end to Flash's dominance in video. This is also the last nail in the coffin for any possibility of Flash running in iOS -- with possibly the biggest obstacle to widespread implementation of HTML5 video now gone, there's zero incentive for Apple to hitch its wagon to Flash.

[Via Macworld]

TUAW Royalty-free H.264 is a big win for HTML5, big loss for Flash originally appeared on The Unofficial Apple Weblog (TUAW) on Thu, 26 Aug 2010 17:00:00 EST. Please see our terms for use of feeds.

Read | Permalink | Email this | Comments

British Library Catalog

2010-08-25T14:23:00Z

Image via WikipediaThe British Library has made their catalog freely available for research.

As part of its work to open its metadata to wider use beyond the traditional library community, the British Library is making copies of its main catalogue and British National Bibliography datasets available for research purposes. Files are initially being made available in XML and structured in an RDF/DC format (see sample). Files are distributed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
The British Library is currently investigating options for structuring its catalogue information as linked data and is collaborating with a number of organisations in examining the issues associated with making bibliographic metadata available in this way.

British Library to share millions of catalogue records (bl.uk)

iTunes U breaks 300 million downloads

2010-08-25T18:00:00Z

iTunes U lets students (or anyone, really) listen in on lectures, classes and other programs from the world's top educational institutions. In fact, more than 800 universities participate, and this week Apple announced the delivery of 300 million iTunes U downloads.

Students can use iTunes U to find lectures and other materials related to their studies, of course, but really anyone with an interest in continued education can browse the store's contents for audio or video that meets their areas of interest. For example, here's a collection from the Stanford Historical Society, and another from Japan's Keio University. All iTunes U content is free.

Congratulations to Apple and the participating institutions.

TUAW iTunes U breaks 300 million downloads originally appeared on The Unofficial Apple Weblog (TUAW) on Wed, 25 Aug 2010 13:00:00 EST. Please see our terms for use of feeds.

Read | Permalink | Email this | Comments

A commitment to openness via Data.gov Provides Access to A Wealth of Geospatial Data

2010-08-19T15:52:00Z

You may have heard about the data.gov web portal - a resource from the Feds designed to increase public access to high value, machine readable datasets. Data.gov increases the ability of the public to easily find, download, and use datasets that are generated and typically held by the Federal Government. Data.gov provides descriptions of the Federal datasets (metadata), information about

CSS3 Transitions and Transforms in Gmail for the iPad

2010-08-18T22:30:00Z

The Mobile Gmail team recently announced a new stacked cards interface for the iPad. In this interface we make use of CSS3 transitions and transforms to provide a more intuitive interface that has a look and feel that is similar to native applications. In this post we will describe CSS3 transitions and transforms and how they were used to develop this interface. All of the CSS and JavaScript examples currently work only in WebKit-based browsers, such as Safari on the iPad. However, Mozilla-based browsers have their own versions of WebKit-based extensions that use the ‘-moz’ prefix, and that should behave similarly.

CSS3 Transitions

CSS3 transitions allow the browser to animate the change of a CSS property from an initial value to a final value. A transition is configured by setting four CSS properties on an HTML element:

-webkit-transition-property
-webkit-transition-duration
-webkit-transition-timing-function
-webkit-transition-delay

The -webkit-transition-property property identifies the CSS properties where changes to the property will trigger a transition between the old value of the property and the new value. The -webkit-transition-duration property specifies, in milliseconds, the length of time over which the transition should take place. The -webkit-transition-timing-function property describes the speed at which the transition progresses over the duration of the transition. For example, -webkit-transition-timing-function: ease-in-out describes a transition that will proceed slowly at the beginning and the end of the transition, but that will proceed quickly during the middle of the transition. You can also provide a custom, cubic-bezier function for a higher degree of control over the timing. The -webkit-transition-delay property specifies a delay, measured in milliseconds, before the transition begins.

The transition properties can also be set simultaneously using the -webkit-transition property, by simply specifying them in the above order. Once the transitions properties are set and up to the point where the value of -webkit-transition-property is changed, all modifications of the specified CSS properties will trigger transitions.

CSS3 Transforms

CSS3 transforms allow the rendering of an HTML element to be modified using 2D and 3D transformations such as rotation, scaling, and translations. Transforms are applied by setting the -webkit-transform CSS property with the desired list of transforms. Each transform takes the form of a transformation function, such as translate3d or rotate, and a list of parameters enclosed in brackets. For example, to move an object to the right by 100 pixels and rotate it by 45 degrees you can use the -webkit-transform property:

-webkit-transform: translate(100px, 0) rotate(45deg);

Using -webkit-transform as the transition property when moving an element is advantageous relative to using the standard top and left properties because transitions using -webkit-transform are hardware-accelerated in Safari. An exception here is that it seems that 2D translations are not hardware-accelerated. But, since any 2D translation is equivalent to a corresponding 3D translation with the same translations in the x and y and no translation in the z axis, it is easy to use a hardware accelerated translate3d(x, y, 0) transform instead of a non-hardware accelerated translate(x, y) transform.

Terminology

There are a few terms here that begin with ‘trans,’ and they can easily be confused if you are not familiar with them. Here they are again:

Transition: An implicit animation of CSS properties between an initial and a final value.
Transform: A modification to the appearance of an HTML element by manipulating it in a 2D or 3D space.
Translation: A particular type of transformation that moves the HTML element in 2D or 3D space.

Stacked Cards Interface

In the stacked cards interface, cards representing selected conversations transition onto the screen when their corresponding conversation is selected, and transition off of the screen when it is deselected.

When cards are selected, they are transitioned out from underneath the conversation list on the left side of the application into the selected conversation area on the right side of the application. To move the card onto the screen, we set an initial transform, configure the transition, and finally apply the desired final transform to the element.

To simplify the layout, the un-transformed position of each card is its normal position in the selected conversation area. This allows the card to have no translation applied when in this position, although it will need a translation to animate the movement. Initially the card has a transform that translates it to the left. The z-index property is used to ensure that the card will render underneath the conversation list. The rotation of the card is also initially applied, since we chose not to have the card rotate as it transitions onto the screen.

card.style.WebkitTransform =
‘translate3d(-700px, 0, 0) rotate(5deg)’;

Since the particular translation and rotation can vary, we chose to apply this property using JavaScript rather than including it in the CSS class applied to the card. It is important that the CSS3 transition is not yet applied because we do not want this transform to be a transition. Moreover, it is important that the card is rendered at its initial transform before the transition is configured and the destination transform is applied. This is easily achieved by wrapping these next steps in a call to window.setTimeout with a timeout of 0 ms.

window.setTimeout(function() {
  card.style.WebkitTransition =
    ‘-webkit-transform 300ms ease-in-out’;
  card.style.WebkitTransform = 
    ‘translate3d(0, 0, 0) rotate(5deg)’; 
}, 0);

Completion of the Transition

It is useful to know when the transition is complete. In the stacked cards interface, we use this to improve performance by setting display:none on obscured cards so that they do not need to be rendered. Adding an event listener allows the application to be notified when the transition has completed.

element.addEventListener(‘webkitTransitionEnd’, listener, false);

Interrupting a Transition

In some cases, you may want to change a transition while it is in progress. For example, if the user unselected a conversation while the corresponding card was still animating onto the screen, we might apply a new transition to send the card back off of the screen again. When you apply a new CSS value while a transition is already in progress, a new transition will occur between the current value of the property in the transition and the new value that you apply. For example, suppose a card is halfway through it’s transition onto the screen, and we apply this CSS transform:

card.style.WebkitTransform = 
   ‘translate3d(-700px, 0, 0) rotate(5deg)’;

Since the transition properties are still configured, a new transition will occur. The initial value for the transition will be the halfway point - approximately translated3d(-350px, 0, 0) rotate(5deg). The final value will be translate3d(-700px, 0, 0) rotate(5deg). The full duration of the transition will still apply, so the card will move about half as quickly as it usually does. It is possible to determine the current transform applied to an HTML element using the WebKitCSSMatrix and to use this to recalculate more appropriate transition parameters, but this is outside the scope of this post.

Conclusion
I hope that this introduction to CSS3 transitions and transforms has been useful, and that the insight into the implementation of Mobile Gmail on the iPad has been interesting. Based on positive feedback, the Mobile Gmail team is looking forward to making more use of transitions and transforms in the future.

By Liam Asher Segel-Brown, Software Engineering Intern, Google Mobile

A developer preview for the Chrome Web Store

2010-08-19T18:15:00Z

Today, we released a developer preview of the Chrome Web Store. Besides brand new documentation, we now allow developers to upload their apps using the developer registration flow of the Google Chrome Extensions Gallery.

The Chrome Web Store will be launching later this year. In the meantime, we’ll continue to share news on apps and the store through blog posts on the Chromium and Google Code blogs. We also encourage you to join our discussion group for apps for updates on our efforts.

By Rahul Roy-chowdhury, Google Chrome Team

Browsing spatially referenced Djatoka images with OpenLayers

2010-08-23T12:49:14Z

A while back my colleague Hugh Cayless wrote a Djatoka layer for use with OpenLayers. It is deployed at UNC's library, allowing you to view over 3000 North Carolina Maps. View the source on any map and you'll quickly get a sense of how it's rigged up. You pass a URL encoding requests for image regions and a URL encoding requests for image metadata to the OpenURL layer constructor, it figures out the grid and zoom levels for you, and you add the layer to a map that's configured using the layer's resolution, maximum extent, and tile size parameters. It works much like a TMS layer, but in pixel units.

I began with this code for a different project and modified it to satisfy some of my project's special needs:

The imagery of a physical object and its annotations will be shown in their natural units – centimeters.
Square tiles will be used instead of rectangular tiles with the same aspect ratio as the physical object (approximately 13:1).
Browser and image server are in different domains, complicating discovery of image metadata.

I decided to go with Djatoka instead of an open source GIS map server like GeoServer or MapServer because the project, while spatial in nature, doesn't require cartographic projections or spatial indexing; I was interested in trying something new; and NYU's already got one running (Thanks, Hugh!). I ended up modifying Hugh and Cliff's OpenURL.js considerably. Now, it's more like a hybrid between OpenLayers.Layer.Image and OpenLayers.Layer.WMS. The code is at http://github.com/sgillies/tpeutb/blob/master/OpenURL.js.

Unlike a GIS map server, Djatoka doesn't pad requests: it fails if you ask for regions outside the image. To have square pixels, I've had to pad my imagery a bit. It's now 43008 pixels wide by 3072 pixels high, exactly 14:1. This makes the right tile size 192 x 192 pixels. As things stand, my new OpenURL layer can't be used in the same map as Hugh's, so I haven't bothered to rename it yet. It's used like this:

var RES = 1.0/60.3; // Centimeters per pixel
var size = new OpenLayers.Size(43008, 3072);
var origin = new OpenLayers.LonLat(-16.6222, -1.2174);
var extent = new OpenLayers.Bounds(
    origin.lon, origin.lat, origin.lon + size.w*RES, origin.lat + size.h*RES);

// Zoom factors of 1/8 to 4
var resolutions = [8.0*RES, 4.0*RES, 2.0*RES, 1.0*RES, 0.5*RES, 0.25*RES];

// At zoom level 0, the image is covered by 2 x 28 tiles
var tileSize = new OpenLayers.Size(192, 192);

var mosaic = new OpenLayers.Layer.OpenURL(
  'All section, mosaicked',
  'http://dl-img.home.nyu.edu/',
  'http://pipsqueak.atlantides.org/mosaic.tif', // for example, 404 in reality
  extent,
  size,
  { format: 'image/jpeg',
    units: 'cm',
    tileSize: tileSize,
    resolutions: resolutions }
  );

var map = new OpenLayers.Map(
  'map',
  { units: 'cm',
    tileSize: tileSize,
    resolutions: resolutions }
  );

A very simple application of this layer can be seen at http://pipsqueak.atlantides.org/tpeutv/djatoka.html.

presenting tilestache

2010-08-17T17:21:47Z

Named in the spirit of the pun-driven life, TileStache is a response to a few years of working with tile-based map geographic data and cartography, and an answer to certain limitations I've encountered in MetaCarta's venerable TileCache.

The edges I've bumped into might be esoteric, but I think they're also indicative of our many experiments in tile-based web mapping since 2007. The core functional needs of a tiling system are well handled by existing software: imagery from bitmap sources of aerial and scanned imagery, Mapnik renderings of OpenStreetMap data, and caches of remote WMS tiles. None of this is really the core point of TileStache, though it's all certainly table stakes.

The place where I've found a need for a new project is somewhere in the intersection between synthetic imagery, composites of existing imagery, and delivery of raw vector data to browsers. More and more we're dealing with the expressive possibilities of new web cartography in project like Pretty Maps, and TileStache is a possible approach to data publishing that borrows a lot of the simplicity of TileCache while adding a dose of designed-in extensibility for creating new kinds of maps.

Isotiles

After developing Travel Time Maps with MySociety in 2008, we adapted our bitmap data imagery technique to tiled delivery. The follow-on Mapumental project hypothetically covers the entirety of the UK with dynamic, temporal data.

Here's a screenshot from one of the early demos, showing travel times around a city, lit up over the coastline:

It's not animated (check the Channel4 site for a video of Mapumental), but this is one of the constituent map tiles underlying the image:

Each pixel in this tile is a 24-bit value encoded in the red, green, and blue channels, expressing a time and speedily decoded by the Flash application in the browser. This part of the project is driven by a custom Layer class in TileCache, that pulls pre-computed time points (e.g. transit stations) from a database and renders cones around them. Some of the code might be findable in MySociety's source repository.

What's interesting here is the idea of completely synthetic providers, i.e. those not directly based on GDAL sources, Mapnik renderings, or WMS servers. It's something I'm demonstrating in the TileStache Grid provider, an implementation of the UTM grid (U.S. National Grid and Military Grid Reference System) for overlay onto other spherical mercator maps.

Composites

Lars Ahlzen's TopOSM is a longtime rendering project based on OpenStreetMap data and cartography built from constituent pieces of Mapnik. TopOSM combines renderings of streets, hills, and labels to create a beautiful, dimensional result:

Lars builds the final map up from a stack of images, many of which might themselves be expressed as tile layers:

In attempting to build a new Layer class for TileCache that expresses this idea, I found that it seemed to be impossible to access the full configuration of the system from within a given layer. There was no way to create a derived map sandwich, and I knew that Lars's own method was a homebrew of ImageMagick and similar tools. I'm interested in something a bit more systematic that implements something like Photoshop layers for cartography. The current Composite provider in TileStache provides layers, alpha channels, color fills and masks, and I'd like to implement transfer modes (e.g. Photoshop's hard light) if this sample proves to be interesting.

We've delivered this sort of composite cartography to clients in the past, but always through a combination of spit and chewing gum.

GeoJSON Data

Most recently, we've been developing Polymaps, an SVG-based map engine that can show regular image tiles in combination with vector overlays driven by GeoJSON data. Tiles turn out to be just as helpful for publishing and requesting vector data as they are for pixel-based images. We've modified TileCache to support this use in the past, but there are simply too many places where the code assumes pixel-based images for the exercise to be anything but frustrating. TileStache is designed to accommodate data-only tiles, including an example PostGeoJSON provider that converts PostGIS data to GeoJSON.

As the ability of browsers to interpret and display a wider variety of imagery improves, we're going to see this data tile concept become increasingly useful. Why stop at image tiles, when you might want to render roads that can be rolled-over or clicked directly? Why assume dynamic data services, when TMS-style tile URLs (e.g. */12/656/1582.png) can be hosted from simple storage services or plain filesystems?

Anyway.

It's early days, but we're finding that the limitations around in-browser display of layers and data are increasingly down to the display of SVG or Canvas rather than any particular native slowness in Javascript itself, so we're thinking that our still-fairly-intensive experimental demos getting a few kinds words from friends like Nathan, Alyssa, and Jen will calmly scroll into the window of normalcy within the next year or so. We also know that other developers are thinking about some of the same concerns that the motivating goodies above address. For example, Dane tells me that the current bleeding edge of the map-rendering library Mapnik includes basic image compositing, masking, and GeoJSON output right there in the core.

Really what we're looking at is a future filled with work like Brett Camper's amazing 8-Bit Cities, "an attempt to make the city feel foreign yet familiar ... to evoke the same urge for exploration, abstract sense of scale, and perhaps most importantly unbounded excitement."

What are the tools that help make this possible?

Get TileStache.

Comments

release often

2010-08-21T18:42:25Z

A few code-like things I've been working on lately.

Polymaps

Polymaps is a result of our summerlong collaboration with SimpleGeo. We've been working on it for some time, but yesterday we announced it for realsies and saw an amazing response from all over the internet. This one's been doubly rewarding for us, since it's also the result of a summerlong collaboration with Mike Bostock of Protovis fame. Mike's been on our radar since he showed off Protovis when Tom and I visited Stanford a while back. It was a week-old at the time and already full of promise. This Javascript thing, I think it will go far.

Census Tools

Census Tools is a small thing I put together last week, to extract data from the 2000 U.S. Census by subject and geography. I've just added the ludicrously detailed Summary File 3 with loads of information on housing, commutes, and other topics. Also, Shawn added a second script, text2geojson.py, which converts the textual output of census2text.py into neatly-formed GeoJSON. This makes it trivially compatible with PolyMaps!

Walking Papers

Walking Papers gained two new translations recently. Maxim Dubinin provided a complete version of the site in Russian, while Frank Eriksson has been working on it in Swedish. This will bring our total number of languages to ten, and it's a fascinating case study in the power of using Git (and Github) for open source projects. Generally speaking, most of the translators haven't had to ask for permission or even informed me of their work until they were basically done. A staging site and a few git pulls later and we've got a new translation!

Maxim who did the Russian version was the first person to translate the title of the project in addition to the text content. He said they had a pretty good pun going as well:

Well, as I recall, "walking papers" are docs you're getting when you're fired, right? Turns out "Обходной лист" is exactly the same thing in russian - a piece of paper ("лист"), that you're getting when you're fired and use to "walk around people" ("обходить") in your org collecting signatures that you returned what you had too etc, so it is means almost exactly the same. Funny that that you can literally translate some idioms and they will still make sense. In the context of OSM I guess it translates as well you walk around, now geographically, not people wise and it is a piece of paper :)

So good.

Comments

Overpainting with Mapnik

2010-08-21T21:00:32Z

The problem

I’ve been having a little poke around with Mapnik today (awesome software!). One of the things on my todo list has been to sort out rendering issues with roads we have been having. Our last iteration described roads something like this:

A style…

    <Style name="Freeway30th_style">
        <Rule>
            <LineSymbolizer>
                <CssParameter name="stroke">rgb(169,170,153)</CssParameter>
                <CssParameter name="stroke-width">12.26</CssParameter>
                <CssParameter name="stroke-linejoin">bevel</CssParameter>
                <CssParameter name="stroke-linecap">round</CssParameter>
                <CssParameter name="stroke-opacity">1</CssParameter>
            </LineSymbolizer>
            <LineSymbolizer>
                <CssParameter name="stroke">rgb(255,172,88)</CssParameter>
                <CssParameter name="stroke-width">12.16</CssParameter>
                <CssParameter name="stroke-linejoin">miter</CssParameter>
                <CssParameter name="stroke-linecap">round</CssParameter>
            </LineSymbolizer>
        </Rule>
    </Style>

…and this layer definition…

        <Layer name="Freeway30th" srs="+init=epsg:&srid" maxzoom="39105.90277777778">
        <StyleName>Freeway30th_style</StyleName>
        <Datasource>
            <Parameter name="dbname">&dbname</Parameter>
            <Parameter name="estimate_extent">0</Parameter>
            <Parameter name="extent">&extent</Parameter>
            <Parameter name="geometry_field">&geometry_field;</Parameter>
            <Parameter name="host">&host</Parameter>
            <Parameter name="password">&password</Parameter>
            <Parameter name="port">&port</Parameter>
            <Parameter name="srid">&srid</Parameter>
            <Parameter name="table">(SELECT * FROM "l_roads" WHERE "type" = \
            'Freeway' ORDER BY LENGTH(&geometry_field;) DESC) as "l_roads"</Parameter>
            <Parameter name="type">&datasourcetype;</Parameter>
            <Parameter name="user">&password</Parameter>
        </Datasource>
    </Layer>

With the idea being to render freeways with a gray outline and orange center. Unfortunately, it doesnt produce good results:

The problem being those little line ends you see making gray splodges at the end of each segment.

The solution

Michael Migurski’s blog discusses this issue a little in this article but doesnt directly explain how to achieve the desired effect. So here is what you do:

First the styles are split into two…

     <Style name="Freeway30th_style-bottom">
        <Rule>
            <LineSymbolizer>
                <CssParameter name="stroke">rgb(169,170,153)</CssParameter>
                <CssParameter name="stroke-width">12.26</CssParameter>
                <CssParameter name="stroke-linejoin">bevel</CssParameter>
                <CssParameter name="stroke-linecap">round</CssParameter>
                <CssParameter name="stroke-opacity">1</CssParameter>
            </LineSymbolizer>
        </Rule>
    </Style>
    <Style name="Freeway30th_style-top">
        <Rule>
            <LineSymbolizer>
                <CssParameter name="stroke">rgb(255,172,88)</CssParameter>
                <CssParameter name="stroke-width">12.16</CssParameter>
                <CssParameter name="stroke-linejoin">miter</CssParameter>
                <CssParameter name="stroke-linecap">round</CssParameter>
            </LineSymbolizer>
        </Rule>
    </Style>

and then the layer is now rendered as two layers, the bottom layer first, then the top:

    <Layer name="Freeway30th-bottom" srs="+init=epsg:&srid" maxzoom="39105.90277777778">
        <StyleName>Freeway30th_style-bottom</StyleName>
        <Datasource>
            <Parameter name="dbname">&dbname</Parameter>
            <Parameter name="estimate_extent">0</Parameter>
            <Parameter name="extent">&extent</Parameter>
            <Parameter name="geometry_field">&geometry_field;</Parameter>
            <Parameter name="host">&host</Parameter>
            <Parameter name="password">&password</Parameter>
            <Parameter name="port">&port</Parameter>
            <Parameter name="srid">&srid</Parameter>
            <Parameter name="table">(SELECT * FROM "l_roads" WHERE "type" = \
            'Freeway' ORDER BY LENGTH(&geometry_field;) DESC) as "l_roads"</Parameter>
            <Parameter name="type">&datasourcetype;</Parameter>
            <Parameter name="user">&password</Parameter>
        </Datasource>
    </Layer>
    <Layer name="Freeway30th-top" srs="+init=epsg:&srid" maxzoom="39105.90277777778">
        <StyleName>Freeway30th_style-top</StyleName>
        <Datasource>
            <Parameter name="dbname">&dbname</Parameter>
            <Parameter name="estimate_extent">0</Parameter>
            <Parameter name="extent">&extent</Parameter>
            <Parameter name="geometry_field">&geometry_field;</Parameter>
            <Parameter name="host">&host</Parameter>
            <Parameter name="password">&password</Parameter>
            <Parameter name="port">&port</Parameter>
            <Parameter name="srid">&srid</Parameter>
            <Parameter name="table">(SELECT * FROM "l_roads" WHERE "type" = \
            'Freeway' ORDER BY LENGTH(&geometry_field;) DESC) as "l_roads"</Parameter>
            <Parameter name="type">&datasourcetype;</Parameter>
            <Parameter name="user">&password</Parameter>
         </Datasource>
    </Layer>

A much cleaner rendering!

Note

This approach consumes more cpu time and hits your database harder than the ‘messier’ approach shown first.

Also you can see in the example above, I have adopted Michaels approach of rendering long lines first.

Have fun with your mapnik maps!

Multi-tenancy Support, High Performance Image Serving, Increased Datastore Quotas and More Delivered In New App Engine Release

2010-08-17T21:01:00Z

Today marks the 1.3.6 release of App Engine for Java and Python. In this release we have made available several exciting new features, relaxed quota and datastore limitations, and added various issue fixes.

Multi-tenant Apps Using the Namespaces API

We are pleased to announce support for multi-tenancy for applications via the Namespaces API. With multi-tenancy, multiple client organizations (or “tenants”) can all run the same application, segregating data using a unique namespace for each client. This allows you to easily serve the same app to multiple different customers, with each customer seeing their own unique copy of the app. No changes in your code are necessary to use this API-- just a little extra configuration. Further, the API is also designed to be very customizable, with hooks into your code that you can control, so you can set up multi-tenancy in any way you choose.

Check out our application examples for Java and Python to demonstrate how to use the Namespaces API in your application. The API works will all of the relevant App Engine APIs (Datastore, Memcache, and Task Queues). Check out our docs for Java and Python to learn more.

High-Performance Image Serving

This release also includes a new, high-performance image serving system for your applications, based on the same infrastructure we use to serve images for Picasa. This feature allows you to generate a stable, dedicated URL for serving web-suitable image thumbnails. You simply store a single copy of your original image in Blobstore, and then request a high-performance per-image URL. This special URL can serve that image resized and/or cropped automatically, and serving from this URL does not incur any CPU or dynamic serving load on your application (though bandwidth is still charged as usual). It’s easy to use, just call the Python function get_serving_url, or the Java function getServingUrl and supply a Blob key (with optional serving size and/or crop arguments), and you can now serve dozens or hundreds of thumbnails on a single page with ease. To enable high performance image serving in your deployed application, you'll need to enable billing.

Custom Error Pages

Since launch, many developers have asked to be able to serve custom error pages instead of those automatically served by App Engine. We are happy to announce today we are supporting static HTML error pages that can be served for you automatically for over quota, DoS, timeout and other generic error cases, that you previously could not control. You can configure custom error handlers in your app.yaml or appengine-web.xml file. Check out the Java or Python docs for more information.

Increased Quotas

We have also continued the trend of lifting some system limitations that have been in place since launch. The Datastore no longer enforces a 1000 entity limit on for count and offset. Queries using these will now safely execute until they return or your application reaches the request timeout limit. Also, based on your feedback, we have raised nearly all of the burst quotas for free apps to the same level as the burst quotas for billed apps. Check out the docs for more information on quota limits.

Other features included in 1.3.6:
Java developers can now use the same app.yaml configuration file that App Engine uses for Python applications instead of appengine-web.xml (if preferred).
You can now pause task queues via the Admin Console interface.
Dashboard graphs in the Admin Console will now begin showing up to 30 days worth of data.
Content-Range headers are now supported with the Blobstore API.
You can read all about these features in the App Engine documentation for Java and Python. The new versions of the SDK can be found on our downloads page.

In addition to all of the new features, we’ve included several bug fixes which you can read all about in the release notes for Java and Python.

-- Posted by the App Engine team

Open Layers Heatmaps

2010-08-16T03:09:00Z

Open Layers Heatmaps "Making Open Street Maps even hotter!" A Great Mashup to show 'HeatMaps' using Open Layers and Open Street Map Features (OSM). Select a number of OSM Features and create...

Map and GIS News finding blog. With so many Maps and GIS sites online now it is hard to find the good from the not so good. This blog tries to cut the cream and provide you with the newest, fastest, cleanest and most user friendly maps that are available online. News has location and it is mapped.

HTML5: Still Rocking!

2010-08-13T21:36:00Z

As announced on the chromium.org blog, we’ve just pushed a bunch of new content to our HTML5Rocks.com developer site, which launched earlier this summer.

Anyone that’s following HTML5 knows how fast things are moving! To keep you informed with all of the amazing features landing in today’s browsers, we’ve added five new articles, a heap of new resources, and a much needed RSS feed for staying tuned in. We're also revealing a new component of the site, the HTML5 Studio. It’s a collection of standalone demos that highlight hot, new HTML5 features working together.

If you'd like to contribute code, guides, or samples, we’re working on a third-party contributors guide. Please stay tuned! In the meantime, you can get in touch with us on the bug tracker or via @ChromiumDev.

By Eric Bidelman, Google Chrome Developer Relations

Pascal Terjan: Google Geolocation API

2010-08-13T18:50:51Z

I found today the API documentation to use http://www.google.com/loc/json in order to get a location from the seen wifi APs or GSM/CDMA cells.

It is very easy to use:

$ curl -X POST -d '{
  "version": "1.1.0",
  "host": "perdu.com",
  "request_address": true,
  "address_language": "en_GB",
  "wifi_towers": [
    {
      "mac_address": "56:7a:e8:68:15:4B"
    }
  ]
}' http://www.google.com/loc/json
{"location":{"latitude":48.868646,"longitude":2.355392,"address":{
"country":"France","country_code":"FR","region":"Ile-de-France","county":"Paris",
"city":"Paris","street":"Rue Sainte-Apolline","street_number":"2","postal_code":"75003"
},"accuracy":150.0},"access_token":"2:yWOkYM4kI79VH1Bj:cvMZFkJhXSflywZB"}

I guess this is what was used for this attack, and this seems to be used by Firefox and Chrome geolocation features.

Update: I found on http://code.google.com/p/gears/wiki/GeolocationAPI the following note: "Note that the JSON protocol described here and at http://code.google.com/apis/gears/geolocation_network_protocol.html is published to allow developers to provide their own network location server for use through the Gears API. Google's network location server is only to be used through the Gears API", so this is nice but you can't use it.

Gyro Air Drums makes rhythmic use of the iPhone 4's gyroscope

2010-08-10T14:00:00Z

While most of the apps making use of the iPhone 4's gyroscope have centered around augmented reality, here's one doing something different. Gyro Air Drums is an app that supposedly lets you use your iPhone as a "virtual drumstick," waving and tapping it on a virtual drum. You can move your iPhone in a 300 degree rotation in real life, hitting various drums on upper or lower levels. And when you move the iPhone, your screen will rotate along with the movement, viewing all of the various instruments, from the snare and hi-hat to more fun things like a cowbell or a taiko drum.

As you can see above, it's only one drum hit at a time, but presumably if you have two iPhone 4s, or a quick and accurate wrist, you'll be able to play a full drum beat. But at least it's a cool idea -- I was hoping we'd see more inventive uses of the gyroscope like this. The app is US$2.99 on the App Store right now, or there's a free lite version with a limited number of drums if you just want to play around.

TUAW Gyro Air Drums makes rhythmic use of the iPhone 4's gyroscope originally appeared on The Unofficial Apple Weblog (TUAW) on Tue, 10 Aug 2010 09:00:00 EST. Please see our terms for use of feeds.

Read | Permalink | Email this | Comments

Take this Tree and Pack it

2010-08-06T22:51:00Z

Noticing this a little late, but have a peak at these posts from Chris Hodgson about how the R-Tree fails for variable density GIS data, and his approach to a packing process. Unfortunately, packing is a post-facto process, and it's not clear to me how we would do it with the GiST infrastructure that undergirds the PostGIS database. But it's nice to see a good R-Tree and a reminder of just how ugly they can get under the covers.

Capo 2 detects chords and tabs in your favorite songs

2010-08-04T15:30:00Z

We reported on the original version of Capo a while back, and now the folks at SuperMegaUltraGroovy have released version 2 over on their website. The biggest feature in the new release is "a highly detailed spectrogram visualization," which basically means that they've implemented what the first app couldn't do; there's actual chord detection in the software. As you play the song, you can see visualizations of where the notes fall on the scale, and you can lay down chord markers that will automatically mark out your chords. Basically, you can reverse engineer the song.

It's pretty wild. You'll still need some musical insight since the app doesn't always get it perfectly right, and you'll need to know where the chord changes are in order to mark them out. It's impressive, though. I was able to get a basic chord structure out of the first verse of the Decemberists song above, and if I played around with it some more, I bet that I could reproduce the song on the guitar.

You can also have it write out tabs for you, and all of the features of the first version are back; you can mark out choruses and verses on all of your songs, correct pitch and speed, and set up loops to play along with. If you do any amount of playing around with your favorite songs, it's a fun tool to have. Capo 2 is US $49 as a new purchase or US $19 as an upgrade from the first version. It's also available as a free five minute trial download from the site.

TUAW Capo 2 detects chords and tabs in your favorite songs originally appeared on The Unofficial Apple Weblog (TUAW) on Wed, 04 Aug 2010 10:30:00 EST. Please see our terms for use of feeds.

Read | Permalink | Email this | Comments

Klokan's starred items in Google Reader

Introducing Closure Linter

This Var is My Var

Mapping with Google Fusion Tables

Royalty-free H.264 is a big win for HTML5, big loss for Flash

British Library Catalog

Related article

iTunes U breaks 300 million downloads

A commitment to openness via Data.gov Provides Access to A Wealth of Geospatial Data

CSS3 Transitions and Transforms in Gmail for the iPad

A developer preview for the Chrome Web Store

Browsing spatially referenced Djatoka images with OpenLayers

presenting tilestache

release often

Overpainting with Mapnik

The problem

The solution

Note

Multi-tenancy Support, High Performance Image Serving, Increased Datastore Quotas and More Delivered In New App Engine Release

Open Layers Heatmaps

HTML5: Still Rocking!

Pascal Terjan: Google Geolocation API

Gyro Air Drums makes rhythmic use of the iPhone 4's gyroscope

Take this Tree and Pack it

Capo 2 detects chords and tabs in your favorite songs