I visited the Google+ Project website the other day and to my surprise, it was powered by the Google Maps engine! It is somewhat creative to re-use the Maps engine for any purpose other than mapping. It is just beautiful.
It also reminds me of the Art Project I've seen a while back that uses the Street View engine. A must see.
Anyways, I'm pleased to show you two samples today: they both let you navigate into an image using the Google Maps engine. I'm also giving up the necessary tools to do it yourself. Enjoy!
Table of Contents
- Sample #1 - Earth
- Sample #2 - Lara Croft
- Possible Applications
- How it works...
- C# Code - Tiles Generation
- Recommended Reading
- Related Downloads
- Related Articles
I've decided today to create small Google Maps samples that lets you zoom in and out of two pictures. As I said, I'm giving all the code to reproduce them including a small command line utility that lets you generate, from a source picture, the tiles your map needs to zoom into it. Pretty nice huh?
Sample #1 - Earth
Yes! what you're seeing at the top of this article is actually a Google Maps map! The map contains only custom controls for a richer user experience. Go back to the top if you missed it...
Let's look at a more simple example this time:
Sample #2 - Lara Croft
The two samples are pretty cool but aren't very useful as they are. But maybe we can think of some possible applications of this technology for...
- online installation manuals, where you can zoom and interact with some components
- museums, to display pieces of art in great details
- learning, by exploring the different layers of something
- any product showcase, to show in details the features of a product
There's plenty of possible applications and if you're thinking about something interesting, feel free to share your ideas by leaving a comment below!
How it works
If you're not a Google Maps API guru, you may find the recommended reading section of this article quite useful.
Technically, this is pretty simple. At the zoom level 0 (zero). Google Maps displays a single 256px square tile representing "the world" (your whole object). As you zoom to the level 1, Google Maps shows the equivalent of your original tile zoomed to 200%: a 512px square area. But it is not your original 256px tile that is stretched by 200% to fill that area, what happens is that 4 new 256px tiles are loaded. So the same picture is shown, but it has four times the resolution and since the map's viewing area stays the same size, you have the impression that the picture has been zoomed in. At any zoom level, you can find the number of tiles there are on each side of the map with this formula: 2zoom.
The idea here is to find a picture large enough to cover the zoom level 4 or 5 (4096 by 4096 or 8192 by 8192). Then use my utility to split that picture recursively at each zoom level into 256px tiles.
After that it is only a matter of telling Google Maps API to use your tiles instead of the default ones.
This is a complete example of an HTML file containing my 2 samples. Just copy and paste the code into a local .html and open it with your favorite browser. UPDATE: An html file has been provided in the Related Downloads section. If you're looking for the tiles generator, it's here.
C# Code - Tiles Generation
Copy and paste the following C# code into a new Console Application project (lets say "TilesGenerator"). UPDATE: A compiled version has been provided in the Related Downloads section. You can invoke the program like this:
TilesGenerator.exe [maxzoom] [filename]
Where [maxzoom] represents the maximum zoom level you want to achieve. And [filename] represents your huge picture from which you want to generate the tiles for each zoom level.
Remember, at zoom level...
0, you have 1 (256px wide) tile
1, you have 4 tiles
2, you have 16 tiles
3, you have 64 tiles
4, you have 256 tiles
5, you have 1,024 tiles
So if you choose level 5, the program will resize your original picture to 8192px by 8192px (32 by 32 tiles) and will generate all the 1,024 tiles for that level. It will then resize your original image to 4096px by 4096px to generate the 256 required tiles for the zoom level 4. It will proceed as such for the remaining zoom level until reaching zoom level 0. At the end, you'll be having 1 + 4 + 16 + 64 + 256 + 1024 = 1,365 tiles. It's best to use a square picture.
- The Google+ Project website for the idea of using Google Maps in a whole different way
- webdesignhot.com for the conceptual symbol of a green earth graphic
- laracroft.tv for the Lara Croft model
- iconfinder.com and Aleksandra Wolska for her icon sets
- switchonthecode.com for inspiring image manipulation functions in C#
- for all the books I read to keep my mind active :)
Then if you're a beginner with Google Maps API v3, you will definitely find interesting . One reviewer actually said: "The online documentation of the google maps api 3 is pretty good, but I definitely found that using this book helped me get my project done alot faster."
Thank you for reading, don't forget to like the article (if you really did) and buy your books from if you're a reader :) It encourages me to write more and more articles on this blog.
Again, thank you for being here.
|index.html||Google Maps Demos||11.7 KB||download|
|license.txt||TilesGenerator.exe license||799 bytes||download|
|TilesGenerator.exe||TilesGenerator Compiled Executable||6.50 KB||download|
|TilesGenerator.zip||MS Visual C# 2010 Express Sources||8.56 KB||download|