2

I have a batch of high definition images, and I want to make use of technologies like google maps to view the images, user can use zoom pan to zoom in and out quickly without downloading the whole big picture file(they only need to download the viewport of the big image).

How can I do this?

Thanks. Bin

Bin Chen
  • 61,507
  • 53
  • 142
  • 183

3 Answers3

1

I've just found this library, which is quite slick: http://polymaps.org/

zlog
  • 3,316
  • 4
  • 42
  • 82
1

There's Google Maps, of course. I'm totally serious: GMaps API allows you to create custom map types, you'll need to give it a way to show the "tiles" (parts of your image) at a given zoom level.

The most work I'd assume would be in creating the "tiles" from your image at various zoom levels (split the image into smaller rectangles), but I suppose that can be automated. The UI, dragging, zooming and whatnot is then handled by the JavaScript script of Google Maps.

(this works, I've made a boardgame with such custom tiles, using Google Maps as the underlying framework for showing it.)

Piskvor left the building
  • 91,498
  • 46
  • 177
  • 222
  • Thanks, how can you automate the "tiles" process? – Bin Chen May 26 '11 at 12:35
  • 1
    This might be a start: http://stackoverflow.com/questions/5953373/how-to-split-image-into-multiple-pieces-in-python – Piskvor left the building May 26 '11 at 12:51
  • 2
    Use MapTiler: www.maptiler.org It will put the images in a directory structure appropriate for Google Maps v2, but it's not hard to change the file names to make them appropriate for Google Maps v3. – Trott May 26 '11 at 14:31
1

If the image in question is actually a map or something that can be reasonably overlaid onto a map, use MapTiler (http://www.maptiler.org/) to split it into tiles, then use code like this to display the tiles:

var lat=37.767569;
var lon=-122.392223;
var initialZoom=17;
var tileDir = 'tiles_dir';
var mapTypeId = 'Your Custom Map';

var mapType = new google.maps.ImageMapType({
    tileSize: new google.maps.Size(256,256),
    getTileUrl: function(coord,zoom) {
        return "img/"+tileDir+"/"+zoom+"/"+coord.x+"/"+coord.y+".png";
    }
});
var map = new google.maps.Map(document.getElementById("map_canvas"), 
        {center:new google.maps.LatLng(lat,lon),
         mapTypeId:google.maps.MapTypeId.ROADMAP,
         zoom:initialZoom,
         mapTypeControl:false});
map.overlayMapTypes.insertAt(0, mapType);

map.mapTypes.set(mapTypeId, styledMap);
map.setMapTypeId(mapTypeId);

Note that Map Tiler sets the image name to something Google Maps API v2 specific. If you are using v3 (and you should!) you'll have to take each file name (e.g., 2001.png), and move it to a file name that's good for v3. To do that on Linux or a Mac, cd to the tiles directory and run this script (note that the script assumes you are in the tiles dir!):

#!/bin/bash

tiles=`ls -d */*/*`

for thisPath in $tiles
do
   thisFile=${thisPath#*/*/}
   oldY=${thisFile%.png}
   zoomX=${thisPath%/*}
   zoom=${thisPath%/*/*}
   newY=$(((1<<zoom) - oldY - 1))
   mv ${zoomX}/${oldY}.png ${zoomX}/${newY}.png
done

Now, even if your image is not actually a map or something that would be reasonably overlaid on a map, hopefully this gives you some ideas of where to look and what to poke around with if you want to leverage Google Maps. (There may be tools out there to let you easily build this type of functionality without Google Maps, but if so, I have no experience with them.)

Trott
  • 66,479
  • 23
  • 173
  • 212