Raster map reprojection (warping) with JavaScript and HTML5 Canvas

I wanted to create something nice during the FOSS4G Code Sprint, and I ended up programing a prototype of the client-side raster reprojection implemented with the HTML5 Canvas, JavaScript and Proj4js. It is kind of port of gdalwarp into the web-browser environment.

To try it you need a web browser which supports HTML5, it means the latest version of one of the Firefox, Chrome, Safari or Opera.

Have a look at the demo:



Link: http://examples.maptiler.org/map-reprojection-html5-canvas/

It is just a prove of concept in this moment, but I am sure you will come up with plenty of ideas for practical application... post a comment! ;-)

Garmin Custom Maps KMZ from GeoTIFF via MapTiler / GDAL2Tiles

Garmin rolled out beta version of firmware for their latest generation handheld GPS receivers allowing you to display scanned paper maps and another raster data in their navigation devices. They have chosen to do that with a simplified variant of Google Earth's KMZ format, so you can prepare maps for your Garmin even in Google Earth.

On the Internet you can find plenty of free maps in the standardized GIS formats, which can be now transfered into your GPS device. Look at USGS topographic maps, USFS maps, or NOAA Nautical Charts, etc.
These geodata has already high quality georeference embedded, but they are using different coordinate systems and map projections then Google Earth and this complicates the conversion into the form supported by latest Garmin handhelds.


I am the author of MapTiler - a graphical application for Windows, Linux and Mac OS X, which allows extremely easy and user-friendly transformation of raster geodata into the web presentation (mashups) and tile overlay for Google Maps, Bing, Yahoo Maps, OpenStreetMap or Google Earth. You can download and use this software for free. And it is open-source!

The application now supports direct export into the Garmin Custom Maps KMZ. If you have one of the supported Garmin devices you can try an example map: the USGS map of Grand Canyon encoded for Garmin GPS KMZ (9 MB) or the alternative from USDA Forest Service. (10 MB)

Because I don't have a Garmin device with support of the KMZ, I would like to kindly ask those who have it and are going to use the Garmin rendering functionality to donate a few dollars via PayPal, so I can buy one of these devices and also cover the time I spent on the development of this new feature and on the new release of MapTiler.

PLEASE WHEN YOU WILL ANNOUNCE SOMEWHERE THIS NEW GARMIN FUNCTIONALITY OF MAPTILER PUT THERE A NOTE ABOUT THE DONATION AS WELL.

You can also include the donation gadget into your own web / blog post. Just copy and paste the HTML code.


Donation is as easy as a click on the "Give" button in the PayPal giving widget in this blog post - you can use either PayPal or your credit card.

I am keen to see if it is possible to raise enough funds to cover the costs for development this way.

Thank you, if you send a donation...

Klokan Petr Pridal

P.S.
Steps for Garmin map rendering:

Download and install latest version of MapTiler application. When you start it: In the first step choose the Google Earth tiles rendering, then open your geodata file and continue till the Tile Details page. Choose from the tile formats one of the Garmin Custom KMZ maps. Probably best option is the 512 version. By default it renders the maximal quality where the map has less then 100 tiles (limit of the Garmin devices). If you are fine with lower image quality just choose smaller number for the maximal zoom level. In most cases the default should be fine. Then continue in the GUI to the final rendering step.
The result is the map.kmz file, which can be directly used in your Garmin GPS.

If you would like to use the command line for rendering instead of the GUI then it is done by calling:

python gdal2tiles.py -p garmin map.tif

You need the latest development version of GDAL to do that - and the new version of gdal2tiles which I will commit to SVN during the FOSS4G Code Sprint on this Saturday here in Sydney.

It would be cool to buy the Garmin Oregon 400t (1099 CHF ~ 1065 USD) to test and be able to really use this MapTiler functionality, once I am back in Switzerland. ;-)

I welcome patches improving the user interface or the functionality.

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.