I am new to this mailing list and this is my first post to this list.
I am working on the Ruby on Rails application (OpenStreetView).I need a
help in the following issue.
There are 5 copies of the same images
are placed in a folder i.e.
large(1024*768),medium(500*
375),small(240*180),thu
mnail(75*75),square(100*50) in size.
The following code upload
number of Geocoded images(square size) when the page loads.I want when
someone click on the any Geocoded image on the page ,it should show the
large image(1024*768) of the same.And further click on the large image
it must show again the square size image of the same.
Following is
the actual code.It is in .js file.Hope for reply from you very soo
var
epsg4326 = new OpenLayers.Projection("EPSG:4326");
var OSVMain =
(function() {
var map, markers, map_move_timeout;
var photos = {};
function
mapChange() {
if( map_move_timeout )
clearTimeout(map_move_timeout);
map_move_timeout
= setTimeout(mapChangeTimeout, 500);
updateLinks();
}
function
updateLinks() {
var center = OSV.getMapCenter(map);
var zoom =
map.getZoom();
$('#permalink').attr('href',OSV.getURLBase()+'?lat
='+center.lat+'&lon='+center.lon+'&zoom='+zoom);
$('#kmllink').attr('href',getLocateLink('kml'));
}
function
getLocateLink(format) {
var extent = OSV.getMapExtent(map);
var
url = OSV.getURLBase()+'/api/photos/locate.'+format+'?bbox=';
url
+= [
extent.left, extent.bottom, extent.right, extent.top].join(',');
return
url;
}
function mapChangeTimeout() {
map_move_timeout = null;
var
url = getLocateLink('json');
$.get( url, null, photosLoaded, 'json'
);
}
function photosLoaded(json) {
var new_photos = {};
var
size = new OpenLayers.Size(50, 50);
var offset = new
OpenLayers.Pixel(-25, -25);
for( var i = 0, l = json.length; i <
l; ++i ) {
var p = new OSVPhoto(json[i]);
if( photos[
p.data.id] ) {
new_photos[
p.data.id]
= photos[
p.data.id];
photos[
p.data.id] = null;
}
else {
var
position = new OpenLayers.LonLat(p.data.lon,p.data.lat);
var
icon =
new OpenLayers.Icon(p.url('square'), size, offset);
p.marker =
new
OpenLayers.Marker(position.clone().transform(epsg4 326,
map.getProjectionObject()), icon);
new_photos[
p.data.id] = p;
markers.addMarker(p.marker);
}
}
for(
var k in photos ) {
var p = photos[k];
if( p && p.marker )
markers.removeMarker(p.marker);
}
photos
= new_photos;
}
function setup() {
var vectors;
var popup;
map
= new OpenLayers.Map($('#map').get(0), {
controls: [
new
OpenLayers.Control.ArgParser(),
new OpenLayers.Control.Attribution(),
new
OpenLayers.Control.LayerSwitcher(),
new
OpenLayers.Control.Navigation(),
new
OpenLayers.Control.PanZoomBar()
],
units:
"m",
maxResolution: 156543.0339,
numZoomLevels: 20,
displayProjection:
new OpenLayers.Projection("EPSG:4326")
});
var mapnik =
new
OpenLayers.Layer.OSM.Mapnik("Mapnik", {
displayOutsideMaxExtent:
true,
wrapDateLine: true
});
map.addLayer(mapnik);
var
osmarender = new OpenLayers.Layer.OSM.Osmarender("Osmarender", {
displayOutsideMaxExtent:
true,
wrapDateLine: true
});
map.addLayer(osmarender);
var
numZoomLevels = Math.max(mapnik.numZoomLevels,
osmarender.numZoomLevels);
var start = OSV.getStartLocation();
var
numzoom = map.getNumZoomLevels();
if (start.zoom >= numzoom)
start.zoom = numzoom - 1;
map.setCenter(start.pos.clone().transform(epsg4326
, map.getProjectionObject()), start.zoom);
OSV.setupMapEventHandlers(map);
map.events.register("moveend",
map, mapChange);
map.events.register("zoomend", map, mapChange);
mapChange();
markers
= new OpenLayers.Layer.Markers("Markers", {
displayInLayerSwitcher:
false,
numZoomLevels: numZoomLevels,
maxExtent: new
OpenLayers.Bounds(-20037508,-20037508,20037508,20037508),
maxResolution:
156543,
units: "m",
projection: "EPSG:900913"
});
map.addLayer(markers);
}
return
{
setup: setup,
1:1
};
})();
$(function(){
OSVMain.setup();
});
Regards
Amrit
pal
http://amritpalpathakgne.wordpress.com/