Demo
Create initial panorama
* using point and shoot camera take enough pictures to cover all around (8-12 is good enough)
* use stitching software to create equirectangular projection of the panorama
* panorama must be aspect ratio 2:1
Streetview tiles
* if initial panorama size 8192x4096, then for tile size 512x512, we need to create:
convert ${FN}_5.jpg -resize 8192x4096 ${FN}_4.jpg
convert ${FN}_4.jpg -resize 4096x2048 ${FN}_3.jpg
convert ${FN}_3.jpg -resize 2048x1024 ${FN}_2.jpg
convert ${FN}_2.jpg -resize 1024x512 ${FN}_1.jpg
convert ${FN}_1.jpg -resize 512x256 ${FN}_0.jpg
* The panorama with a single tile is zoom = 0, then 1,2,3,4
* Name each tile according to its zoom level and position.
* The top left tile is always tile (0,0).
* tile name format = "panorama_z_x_y.jpg".
convert ${FN}_5.jpg -crop ${SIZE}x${SIZE} -set filename:tile "%[fx:page.x/${SIZE}]_%[fx:page.y/${SIZE}]" +repage +adjoin "${FN}_5_%[filename:tile].jpg"
convert ${FN}_4.jpg -crop ${SIZE}x${SIZE} -set filename:tile "%[fx:page.x/${SIZE}]_%[fx:page.y/${SIZE}]" +repage +adjoin "${FN}_4_%[filename:tile].jpg"
convert ${FN}_3.jpg -crop ${SIZE}x${SIZE} -set filename:tile "%[fx:page.x/${SIZE}]_%[fx:page.y/${SIZE}]" +repage +adjoin "${FN}_3_%[filename:tile].jpg"
convert ${FN}_2.jpg -crop ${SIZE}x${SIZE} -set filename:tile "%[fx:page.x/${SIZE}]_%[fx:page.y/${SIZE}]" +repage +adjoin "${FN}_2_%[filename:tile].jpg"
convert ${FN}_1.jpg -crop ${SIZE}x${SIZE} -set filename:tile "%[fx:page.x/${SIZE}]_%[fx:page.y/${SIZE}]" +repage +adjoin "${FN}_1_%[filename:tile].jpg"
# resize to tile size and fill neutral color
convert ${FN}_0.jpg -resize 512x512\> -size 512x512 xc:black +swap -composite ${FN}_0_0_0.jpg Javascript code for streetview
function initialize() {
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('streetview'),
{
panoProvider: function(pano) {
return {
location: {
pano: pano
},
copyright: 'helmi03',
links: [],
tiles: {
tileSize: new google.maps.Size(512, 512),
worldSize: new google.maps.Size(8192, 4096),
originHeading: 0,
getTileUrl: function(room, zoom, x, y) {
return 'tt_' +
zoom + '_' + x + '_' + y + '.jpg';
}
}
};
},
pano: 'tt'
}
);
}
Demo
Panorama view of playground at Tasik Titiwangsa, Kuala Lumpur
Note that Google Maps v3 use html5 canvas instead of flash in v2.
Credits
Other blogger already give great explanation to create custom streetview and Google Maps had excellent documentation about this feature. Credits to them.
Before this, I display panorama view using java plugin.
