Tiles à la Google Maps: Coordinates, Tile Bounds and Projection...

I prepared an online tool I was missing when I started to study how the tiling using Spherical Mercator runs in Google Maps, Virtual Earth, Yahoo Maps, OpenStreeMap and others... This tool can help you to understand how are the tiles referenced and how they are stitched together in the browser.

I think this mashup could be an excellent starting point for people who are interested in this subject, because it contains all the math what you need for overlaying your own geodata from external sources: it can be tiles pre-generated by Maptiler/GDAL2Tiles following the OSGeo TMS recommendations, it can be raster data from WMS servers probably cached by TileCache, or tiles from MSR MapCruncher etc.

The tool is excellent for fast debugging of tiling for particular area, because you can use the search for display the tiles of a given place.

A transparent tile with correct coordinates is displayed for every original map tile by calling Google Chart API service.
Whereever you click the longitude/latitude boundaries of the underlaying tile are displayed in WGS84 datum. Boundaries are also displayed in projected Mercator coordinates (EPSG:900913, EPSG:3785) and in pixels for active zoom level. This information is all you need for generating custom map tiles.

The site contains also a Python script doing the coordinates and bounds calculation offline.

So enjoy this mashup:

Tiles à la Google Maps: Coordinates, Tile Bounds and Projection

BTW This demo is part of the documentation of MapTiler application.

PNG palette with variable alpha: small and great for webbrowser

I am working on the MapTiler/GDAL2Tiles open-source project for user-friendly static tile publishing of maps in the style of Google Maps. This project started as my Google Summer of Code project for OSGEO and results are published in coming GDAL 1.6.

Recently I was testing several optimization of PNG for minimizing the tile size with preserving reasonable image quality as this is crucial for my application. Such optimization speeds up the download and also saves a lot of space on the hard disk. There is plenty of tools available for optimizing the size of PNG: advpng, pngrewrite, pngcrush, pngquant, scolorq, pngnq... I wanted to choose one of them for postprocessing of tiles (or probably later on integrate such optimization directly into GDAL).

The best optimization of the PNG filesize is always based on reduction of the amount of used colors: when you switch from RGB(A) model to palette. What I didn't know before is that PNG supports palette with variable alpha. It means that part of the definition of every color in the palette is also its transparency. It is possible to use functionality usually available only with separate alpha channels but with palette!

After switching to PNG with palette you need just half or even less of the space for your image raster data. Of course conversion from RGBA to palette is lossy operation for images with a lot of colors... but with well chosen algorithm for quantization it can be almost not recognizable for humans. Especially for small tiles like in MapTiler case.

The PNG with the alpha palette is correctly displayed in all latest web-browsers like Firefox 2+, Safari, Explorer 7+ and also in Google Earth.
But wait that is not all! Internet Explorer 5.5 & 6 displays such PNG files with (limited) transparency without HTML hacking! That is just great because it allows you to easily display map overlays in the old browsers by viewers like OpenLayers or Google Maps and still be able to dynamically change opacity for map overlay containing transparent parts!

Well, if it is so great, how to produce such file? There is very nice open-source application for converting standard RGBA PNGs into this PNG8 with alpha palette:

PNGNQ: http://pngnq.sourceforge.net/ (by Stuart Coyle and Greg Roelofs)

It is using The NeuQuant Neural-Net image quantization algorithm (by Anthony Dekker) which was documented in this PDF article. With slightly modified version of this algorithm it converts standard PNG24 with RGBA into PNG8 with alpha palette. It is quite fast.
The result PNG file has usually half of the size of the original.
If you are crazy about the produced png size you can try to compress the file with pngcruch postprocessing step. Sometimes it decrese the size of the result even a bit more.

The documentation at the PNGNQ project page recommends to run:

pngnq -n 256 image.png && pngcrush image-nq8.png smallimage.png

This PNGNQ tool is excellent for post-processing of PNG tiles generated from MapTiler/GDAL2Tiles...

And it seems that the source code of the utility itself as well as of dependencies like NeuQuant algorithm is compatible with BSD license so they have a chance to find a way into GDAL or other open-source tools which are processing maps...

Opacity Control for Google Maps in official demo gallery

One of the results of the MapTiler/GDAL2Tiles is an extension of Google Maps API for new functionality related to tile overlays. In summer I created an Opacity slider control for Google Maps which lets the user drag a slider to change the transparency of a TileLayerOverlay on the map.

Recently I was contacted by Pamela Fox from Google and now she add my control to the official Google Maps API Demo Gallery.

I still should add similar control to OpenLayers, but till now there was no time for that unfortunately. The design of the control is finished (done in SVG in Inkscape, same as the Google one), so only the coding in JavaScript is missing. Christopher Schmidt from OpenLayers recommended to create a new OpenLayers Addin.

Presentations at Geoinformatics FCE CTU 2008

I attended the Geoinformatics FCE CTU 2008 Workshop in Prague 18-19th September 2008.

Here are slideshows from my presentations:

Tile map publishing a la Google Maps


Tile map publishing a la Google Maps from Petr Pridal on Vimeo.

Important links:

http://www.maptiler.org/
http://www.klokan.cz/projects/gdal2tiles/
http://www.gdal.org/

Project OldMapsOnline.org


Project OldMapsOnline.org from Petr Pridal on Vimeo.

Important links:

http://www.oldmapsonline.org/
http://geoinformatics.fsv.cvut.cz/

iPhone and NOAA BSB, USGS DRG and custom maps

iPhone supports displaying of Google Maps tiles very well by standard Maps.app application. A man can zoom and look around just by finger gestures.

Behind the user interface the Maps.app is loading tiles from Google server and storing them in to SQLite cache file.
Some people proved that you can prepare your own SQLite cache with custom maps and let it use by Maps.app on iPhone.

Then you have a map of your choice and this map is even available off-line, so your iPhone don't need to use internet connection to get the tiles as they are stored in the disk of the phone already.

Such approach was documented for Google Sky tiles for example: http://www.dailyack.com/2007_12_01_archive.html

Nowadays there is even a GUI application for iPhone allowing you to switch prepared maps:
http://code.google.com/p/iphoneofflinemap/

Unfortunatelly the maps are usually prepared in advance on a computer from half legal map sources by software like Global Map Download Tool.

But I don't see a problem to prepare tiles from legally owned maps like NOAA BSB navy charts or USGS DRG topo maps.

Jerry Morrison from Google Inc. in his presentation "Scaling Google Maps from the Big Screen Down to Mobile Phones" mentioned that iPhone uses tiles with size 64x64px, MapTiler should be able to generate such tiles quite well.

I was thinking maybe somebody can push my MapTiler application to generates tiles directly into the SQLite cache database for simple upload into iPhone. Anybody interested?

P.S.
There is now way how to design a 100% web-based map application with iPhone Web Touch API.

Google IP Geolocation

Google just published new AJAX API function ClientLocation for IP Geolocation.

This way you receive an JavaScript object with latitude and longitude and with address (city, region, country and country code) of your visitor.

It is cool and practical for use even without displaying Google Maps, as you can change behavior of your website according location of the visitor.

I wrote a typical example application Google IP Geolocation Map and Address which you can just copy and paste.



What IP database is Google practically using? Anybody knows? Is it their private or they are licensing one from another company?

Is the quality of IP geolocation better then free GeoLite City from MaxMind?

GDAL2Tiles Google Zurich Office Presentation

I visited Google Zurich Office and made there a presentation about my Google Summer of Code project GDAL2Tiles during the Google Open Source Jam Session.

It was an excellent opportunity to meet some of the Google Engineers personally, discuss with them the Google technology and also to see the Google Zurich Office. All the presentations of other SoC projects and talking with authors was also cool.

I presented a poster (PDF 15 Mb) and had a short talk about my project. You can have a look at slideshow with 3D animations of maps from GDAL2Tiles on YouTube.

Update:

You can also have a look at a report from OpenSource Jam on Google Open-Source Blog.

iPhone Touch API ... a way for OpenLayers

It seems that with Apple's web Touch API it is possible to create a website, which will behave same way as iPhone build in Google Maps application. You can react by Javascript on all touch events, so implement zooming by pinching for example, or flicking to another page etc..

This functionality would be really cool in the OpenLayers open-source project 

For more info about the possibilities have a look at very nice description and example application of the Apple Touch API.