OpenStreetView is a free editable map of the whole world. It is made by people like you. OSV is Ruby On Rails application.If you want to work on OSV,you should first install it own your PC.
Here I am Sharing my experience with OSV. I used the Linux(Ubuntu 10.04).First of all you need to fetch the Source Code of site i.e. Installation of OpenStreetView at your own computer. So Follow the Following Stepts to Intall the OSV at your own computer.
sudo apt-get update;
sudo apt-get upgrade;
sudo apt-get install build-essential;
sudo apt-get install mysql-server mysql-client rake gem ruby1.8-dev
sudo apt-get install libmysql-ruby
sudo apt-get install libmysqlclient-dev
Upto Now you have Installed MYSQL,RUBY. Now its the time to Create the database for OSV. Open the terminal and do following.
mysql -u root -p (Enter your Mysql password Now)
create database openstreetview_org_development;
Control + d
Now install the Ruby gem and Rails as Follow. Download the Rubygems from
Download Ruby-gems and copy it to Desktop and the Follow as:
cd Desktop
sudo tar -xvzf rubygems-1.3.7.tgz --directory=/usr/local/src (please mention here your own downloaded version ,mine was 1.3.7)
cd
This will extract the rubygems into /usr/local/src Directory , So now to finally Install it do following
cd /usr/local/src
cd rubygems-1.3.7
sudo ruby setup.rb
On the other hand you can install it to from single terminal commend as:
sudo apt-get install rubygems;
Now you have Rubygems Installed version 1.3.7. Now Rails left to install . Do following to install Rails.
(Note:You OSV need a Rails's version 2.3.8, So Please mention the Same,otherwise you may face the problem)
sudo gem install rails -v 2.3.8
sudo gem install mysql
Congrets , you have Now installed Ruby On Rails . you can check the version of each installation as:
ruby -v
gem -v
rails -v
Now its the time to Fetch the Source Code of OSV. Do Following to fetch the source code
mkdir OSV
cd OSV
sudo apt-get install git-core;
git clone git://github.com/johnmckerrell/OpenStreetView.git
// or
git clone https://github.com/johnmckerrell/OpenStreetView.git
cd OpenStreetView
cd config
sudo gedit config/database.yml
It will Open the database.yml in Geditor. This file contain the Information regarding the Database connection for OSV So Carefully do as:
a)Change user and password of MySQL and socket as follow
b)socket: /var/run/mysqld/mysqld.sock
Now edit the other file as:
sudo gedit config/environment.rb
// Change server name from www.openstreetview.org to localhost in line
// number 7, in line number 4, make version for RAILS_GEM_VERSION as '2.3.8'
Now Change the Directory as Follow as:
cd vendor/plugins/
a)git clone http://github.com/technoweenie/restful-authentication.git
restful_authentication
b)sudo rake gems:install
You are Just two Steps away to Run OSV. Now change the Directory as Following and do as:
a)cd OSV/OpenStreetView
b)rake
c)rake db:migrate
d)script/server
The script/server will Start the server , Now you Can run the OSV at localhost as:
Browse in browser(localhost:3000)
It look like as:
Problems You may face during installation
Well nothing is perfect.It may possible that you face a strange problems during installation of OSV.i faced too.Some to problems that i faced ,am discussing here along with there solutions.
(1) when you give the command
cd OSV/OpenStreetView/rake
You may get the following dreading message.
DEPRECATION WARNING: Rake tasks in vendor/plugins/restful-authentication/tasks are deprecated. Use lib/tasks instead. (called from /usr/lib/ruby/gems/1.8/gems/rails-2.3.8/lib/tasks/rails.rb:10)
/usr/bin/ruby1.8 -I"lib:test" "/usr/lib/ruby/gems/1.8/gems/rake-0.8.7/lib/rake/rake_test_loader.rb" "test/functional/moderate_controller_test.rb" "test/functional/private_controller_test.rb" "test/functional/homepage_controller_test.rb" "test/functional/main_controller_test.rb" "test/functional/sessions_controller_test.rb" "test/functional/api/application_controller_test.rb" "test/functional/api/photo_controller_test.rb" "test/functional/api/photos_controller_test.rb" "test/functional/content_controller_test.rb" "test/functional/users_controller_test.rb" "test/functional/upload_controller_test.rb"
/usr/lib/ruby/gems/1.8/gems/rails-2.3.8/lib/initializer.rb:271:in `require_frameworks': no such file to load -- net/https (RuntimeError)
from /usr/lib/ruby/gems/1.8/gems/rails-2.3.8/lib/initializer.rb:134:in `process'
from /usr/lib/ruby/gems/1.8/gems/rails-2.3.8/lib/initializer.rb:113:in `send'
from /usr/lib/ruby/gems/1.8/gems/rails-2.3.8/lib/initializer.rb:113:in `run'
from /home/amritpal/public_html/OSV/OpenStreetView/config/environment.rb:12
from ./test/test_helper.rb:2:in `require'
from ./test/test_helper.rb:2
from ./test/functional/moderate_controller_test.rb:1:in `require'
from ./test/functional/moderate_controller_test.rb:1
from /usr/lib/ruby/gems/1.8/gems/rake-0.8.7/lib/rake/rake_test_loader.rb:5:in `load'
from /usr/lib/ruby/gems/1.8/gems/rake-0.8.7/lib/rake/rake_test_loader.rb:5
from /usr/lib/ruby/gems/1.8/gems/rake-0.8.7/lib/rake/rake_test_loader.rb:5:in `each'
from /usr/lib/ruby/gems/1.8/gems/rake-0.8.7/lib/rake/rake_test_loader.rb:5
/usr/bin/ruby1.8 -I"lib:test" "/usr/lib/ruby/gems/1.8/gems/rake-0.8.7/lib/rake/rake_test_loader.rb"
Errors running test:units and test:functionals!
You can resolve this error message by simple giving following terminal command
sudo apt-get install libopenssl-ruby1.8
It will install some packages and show you the following gems which you were missing
Missing these required gems:
rubyist-aasm
mini_magick
exifr
json
Now obviously you want to install the these gems,otherwise you will face the problems again.So to install these all gems in one go ,issue the following command from terminal
sudo rake gems:install
It will installed all the gems and other related stuff.Now you can issue the rake command from terminal without any error message as:
cd OSV/OpenStreetView/rake
Enjoy!!
(2)When you issue the following command to start the server
cd OSV/OpenStreetView/script/server/you may face the following error message.
=> Booting WEBrick
=> Rails 2.3.8 application starting on http://0.0.0.0:3000
=> Call with -d to detach
=> Ctrl-C to shutdown server
[2011-01-08 17:50:11] INFO WEBrick 1.3.1
[2011-01-08 17:50:11] INFO ruby 1.8.7 (2010-01-10) [i486-linux]
[2011-01-08 17:50:16] WARN TCPServer Error: Address already in use - bind(2)
Exiting
/usr/lib/ruby/1.8/webrick/utils.rb:73:in `initialize': Address already in use - bind(2) (Errno::EADDRINUSE)
from /usr/lib/ruby/1.8/webrick/utils.rb:73:in `new'
from /usr/lib/ruby/1.8/webrick/utils.rb:73:in `create_listeners'
from /usr/lib/ruby/1.8/webrick/utils.rb:70:in `each'
from /usr/lib/ruby/1.8/webrick/utils.rb:70:in `create_listeners'
from /usr/lib/ruby/1.8/webrick/server.rb:75:in `listen'
from /usr/lib/ruby/1.8/webrick/server.rb:63:in `initialize'
from /usr/lib/ruby/1.8/webrick/httpserver.rb:24:in `initialize'
from /usr/lib/ruby/gems/1.8/gems/rack-1.1.0/lib/rack/handler/webrick.rb:10:in `new'
from /usr/lib/ruby/gems/1.8/gems/rack-1.1.0/lib/rack/handler/webrick.rb:10:in `run'
from /usr/lib/ruby/gems/1.8/gems/rails-2.3.8/lib/commands/server.rb:111
from /usr/local/lib/site_ruby/1.8/rubygems/custom_require.rb:31:in `gem_original_require'
from /usr/local/lib/site_ruby/1.8/rubygems/custom_require.rb:31:in `require'
from script/server:3
To resolve this error message issue following command in terminal
lsof|grep 3000
This will give you a line starting with:
ruby 6205 adam 4u IPv4
Take the number in second position (6205 in this case) and in console do
kill -9 6205
Now again issue
script/server
It would work now.
Create Account On OSV
Now you need to Create an account for Upload photos, Processing,Moderation etc of Photos. So simple sign up for an account it would Say"Thanks for signing up! We're sending you an email with your activation code.", But you dont have any Email Server.
So You need to activate the user from Backend. Simply login to Mysql and activate the user as follow:
mysql -u root -p (Enter your password)
use openstreetview_org_development; (This is name of database which we are using for OSV)
select * from users;
The last command will give you
id ,login ,name,email ,crypted_password for your created user. Just note down the id ,most probly it is 1. So to activate your created user do following .
update users set state=’active’,activated_at=NOW(), activation_code=NULL WHERE id=1;
User has been activated. Now you can login with your choosen
Login and Password.
Upload Photos
Geocoding photos means attaching location information to them. You can then make links between maps and your photos, so that people can see exactly where your photos were taken. Digital photo file formats support the addition of this geographic information (latitude and longitude).
After the photos has been Uploaded you ,they needs Processing and Moderation. Do it .Now the photos will be automatically display on the Map. The Following Map shows the uploaded Image on the Map.
Problems Yet Not Solved
There are 5 copies of the same images that you have uploaded are placed in a folder(/home/OSV/OpenStreetView/public/available) i.e.large(1024*768),medium(500*375),small(240*180),thumnail(75*75),square(100*50) in size.
There is a OSVMain.js file in (/home/OSV/OpenStreetView/public/javascripts) that upload number of Geocoded images(square size) when the page loads.The Issue is 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.The On-click event in javascript would be works here.
Following is the actual code(OSVMain.js).It is in .js file
//
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 = 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();
});
//
I Created
I have made a another javascript cum html file.This file loads the number of thum-nails on the page when the page is loaded.On click at any thumnail over the page ,it shows the full resolution of the same and vice versa.But this is another code(file) other than OSV.The code of this file is as follow
window.onload = start;
function start ()
{
allSmall ();
allTriggers ();
}
function allTriggers ()
{
var images = document.getElementsByTagName("img");
for (var i = 0, image; image = images[i]; i++)
{
image.onclick = othersSmallThisLarge;
image.style.position = "absolute";
}
}
function smallImage (image)
{
with (image.style) { width = 50; height = 50; }
}
function largeImage (image)
{
with (image.style) { width = 500; height = 500; }
}
function switchSize (image)
{
if ( (image.offsetWidth != 500) && (image.offsetHeight != 500) )
{
largeImage (image);
}
else
{
smallImage (image);
}
}
function switchResolution (image)
{
var previous = image.src;
image.src = image.getAttribute("data");
image.setAttribute("data", previous);
delete previous;
}
function allSmall ()
{
var images = document.getElementsByTagName("img");
for (var i = 0, image; image = images[i]; i++)
smallImage (image);
}
function othersSmallThisLarge ()
{
switchResolution (this);
switchSize (this);
}
images.style.position = "absolute"
img src="Thumnail's path" data="Full resol's path"
img src="Thumnail's path" data="Full resol's path"
img src="" data=""
Possible Solution
The OSVMain file is using a JQuery lightbox plugin.Either above file may be embedded into the original (OSVMain.js) file.On other side,the original file should be throughly changed.Osv file is totally unlike the above file so it is not so easy to embed the file into Osv file.Here is link for creating your own JQuery Plugin
Create own JQuery Plugin.Now other possible solution would be to create your own plugin and try to embed into actual file.
