-
Notifications
You must be signed in to change notification settings - Fork 4
Installing TidePools on Ubuntu
Document version 2013-03-14
** To Do: Add a "Troubleshooting" section **
As of this writing, the current versions of supporting software that will be installed are:
- Ubuntu 12.10 Quantal
- Apache 2.2.22
- PHP 5.4.6-1ubuntu1.1
- PHP driver for MongoDB: 1.3.2
- MongoDB 2.2.2
You can check your versions using the following methods:
Ubuntu: lsb_release -a
Apache: sudo apachectl -v
PHP and its MongoDB driver: Create phpinfo.php and view it in your browser, as described below
MongoDB: mongo --version
Path information
PHP configuration file: /etc/php5/apache2/php.ini
Apache/PHP error log: /var/log/apache2/error.log
MongoDB error log: /var/log/mongodb/mongodb.log
MongoDB data: /var/lib/mongodb
This howto assumes a fresh install of Ubuntu.
Reference: How to install Ubuntu
You'll need Apache, PHP, MongoDB, and the PHP driver for MongoDB (aka MongoDB PECL extension).
Click the menu button (the one on top with the Ubuntu logo)
In the box, type term and you should see 'Terminal' appear. Click it to open. The lines below in code format indicate things you need to type in at the command line.
sudo apt-get update
sudo apt-get install apache2 php5 php5-dev php-pear
You'll be asked, "do you want to continue (Y/n)?" Hit Enter.
Now we're going to configure your system to get the latest stable version of MongoDB.
Reference: How to install MongoDB on Ubuntu
sudo apt-key adv --keyserver keyserver.ubuntu.com --recv 7F0CEB10
gksu gedit /etc/apt/sources.list.d/10gen.list
The gedit text editor will open. Enter the following line:
deb http://downloads-distro.mongodb.org/repo/ubuntu-upstart dist 10gen
Save and quit.
sudo apt-get update
sudo apt-get install mongodb-10gen
Now we install PHP's extension for Mongo.
Reference: Installing the PHP driver for MongoDB
sudo pecl install mongo
gksu gedit /etc/php5/apache2/php.ini
Click Search > Find and type dynamic extension dir
Two lines below that, there is a blank line. Click on that blank line, type extension=mongo.so and hit Enter to make another blank line.
Save and quit.
sudo apachectl restart
gksu gedit /var/www/phpinfo.php
Enter the following 3 lines:
<?php
phpinfo();
?>
Save and quit.
mongo
You should now see some information about your MongoDB installation and a prompt '>' This indicates that MongoDB is working.
exit
Open Firefox, go to the address bar, and enter localhost/phpinfo.php
You should see a page with blue boxes full of information about your PHP configuration. This indicates that Apache and PHP are working.
Hit CTRL-F on your keyboard. A 'Find' box should appear at the bottom of the window.
Type mongo in the box. The window should scroll to a heading 'mongo' with information about your MongoDB installation. This indicates that the PHP driver for MongoDB is working, meaning that PHP is now communicating properly with MongoDB.
You are now ready to set up TidePools.
Go to the TidePools GitHub repository at https://github.com/opentechinstitute/TidePools
On the left, toward the top, click the button labeled 'ZIP' to download the TidePools files as a .zip file
Select 'Save file' and click OK.
When it's done downloading, go back to the Terminal. (Note that the tilde '~' shown below is on the upper left, just below the ESC key, on a standard US English keyboard layout).
cd ~/Downloads
sudo unzip TidePools-master.zip
You'll see a list of the files being unzipped.
Create a localhost directory for Tidepools:
sudo mkdir /var/www/tidepools.localhost
Move your Tidepools files to this new localhost directory:
`sudo mv ~/Downloads/TidePools-master/* /var/www/tidepools.localhost
Add the following line to your /etc/hosts file ("sudo nano /etc/hosts") so that 'tidepools.localhost' points to your local machine:
127.0.0.1 tidepools.localhost
Go back to your web browser and enter tidepools.localhost in the address bar. If you see the main TidePools screen, you have successfully completed this installation.
** These instructions are based on http://mapbox.com/tilemill/docs/guides/osm-bright-ubuntu-quickstart/ **
Download and install TileMill: http://mapbox.com/tilemill/ On Ubuntu, just run the following:
sudo add-apt-repository ppa:developmentseed/mapbox
sudo apt-get update
sudo apt-get install tilemill
Test your install by running TileMill, which also sets up some folders needed later on when we install OSM Bright.
Download and install OSM Bright (reference here), which is designed for working with an Open Street Maps database in TileMill
git clone https://github.com/mapbox/osm-bright.git
Download dependencies if they're not already installed:
PostgreSQL and PostGIS:
sudo apt-get install postgresql postgresql-9.1-postgis
Imposm:
sudo aptitude install build-essential python-dev protobuf- compiler libprotobuf-dev libtokyocabinet-dev python-psycopg2 libgeos-c1
sudo apt-get install python-pip
sudo pip install imposm
Set up a PostgreSQL database and enable PostGIS for your OSM (Open Street Maps) data:
Adjust access permissions:
sudo nano /etc/postgresql/9.1/main/pg_hba.conf
Scroll to the bottom of this file, and replace all local access permissions with 'trust'. It should look something like this:
local all postgres trust
# TYPE DATABASE USER ADDRESS METHOD
# "local" is for Unix domain socket connections only
local all all trust
# IPv4 local connections:
host all all 127.0.0.1/32 trust
# IPv6 local connections:
host all all ::1/128 trust
Save and exit, then restart PostgreSQL:
sudo /etc/init.d/postgresql restart
Next, create your PostGIS database:
psql -U postgres -c "create database osm;"
psql -U postgres -d osm -f /usr/share/postgresql/9.1/contrib/postgis-2.0/postgis.sql
psql -U postgres -d osm -f /usr/share/postgresql/9.1/contrib/postgis-2.0/spatial_ref_sys.sql
psql -U postgres -d osm -c "grant all on geometry_columns to osm;"
psql -U postgres -d osm -c "grant all on geography_columns to osm;"
psql -U postgres -d osm -c "grant all on spatial_ref_sys to osm;"
Download and Import OSM Data:
Go to http://metro.teczno.com and look for your city. If it’s available, download the .osm.pbf version of the extract.
If your city is not available here then head to http://download.geofabrik.de/osm/ and look for a region that would contain your city (for example, there are individual states and provinces available for many countries). Download the .osm.pbf version of the file.
With a PBF file downloaded, you can import it with Imposm. Assuming you downloaded the PBF to your Downloads folder, run the following command in the Terminal:
imposm -d osm -m /path/to/osm-bright/imposm-mapping.py --read --write --optimize --deploy-production-tables <data.osm.pbf>
Set up OSM Bright:
You’ll need to adjust some settings for things like your PostgreSQL connection information. To do this, open the folder where you’ve extracted OSM Bright to in your file manager and run through the following steps:
1. Make a copy of configure.sample.py and name it configure.py.
2. Open the new configure.py in a text editor.
3. Change config["importer"] = "osm2pgsql" to config["importer"] = "imposm", unless you prefer to use osm2pgsql and have that set up.
4. Optionally change the name of your project from the default, ‘OSM Bright’.
5. Adjust the path to point to your OSM Bright project folder. If your Ubuntu username is ‘mary’, it should likely be /home/mary/Documents/osm-bright/project/.
6. change the line that says config["postgis"]["user"] = "" to config["postgis"]["user"] = "postgres"
7. Save & close the file.
Now change to the directory where you extracted OSM Bright, and run:
./make.py
Now open TileMill. You may need to adjust the configuration settings so that the home directory also points to your OSM Bright project folder. Your new map should appear in the list of available maps. Double click your map and it will load – slowly, the first time. Zoom into the area with your imported data and you should see streets and city features.
Customize your map:
Change style settings through customizing the CSS in the right-hand window. Refer to the CartoCSS section of the MapBox manual for further guidance: http://mapbox.com/tilemill/docs/manual/carto/
Generate your map in Tile Mill (downloadable program, add layers of GIS data, style it, and export), and turned into .PNG map tiles using https://github.com/pbarry/MBTiles-extractor.
Replace the map zoom level folders in 1.0.0 with your new map folders.
If you go to http://tidepools.co/boundingbox.html the map is currently near the area of the conference at Hotel Penn. This is a simple way to find a geographic box in which to create a photoshop/illustrator image of the same ratio.
If you click on the map, a geocoordinate alert will pop up. You will need this for the next step. If you adjust the window size of your browser, the coordinates will change (it is reading the top left / bottom right of your window). So you can adjust to whatever map ratio you want the conference map to be. So, once your happy, click and copy the coordinates. Then, take a screenshot of the browser window area itself (important as well).
Open MapTiler http://www.maptiler.org/ and choose spherical mercator
Next screen, add source file. This is the raster image you will use to generate tiles. For now, just use the screenshot from your browser window for testing. Click and georeference. Paste in the geo string from the popup window, the format is: north south east west , the coords should be formatted correctly already, example: "42.36948360324372 42.34246387931521 -83.0332088470459 -83.08874130249023"
Click next, choose WGS84, click next / render / go to the output folder and double click on openlayers.html for a preview (i preview with the openstreetmap layer).
Hopefully everything is awesome and proportional and geolocated somewhat accurately (it doesn't need to be extremely precise).
Now, you can rock an awesome map. Open the screenshot from before in photoshop or illustrator. You will be using this as a base to get the right pixel coordinates. Make sure the screenshot is only of the window frame of the browser and nothing else. Place your map in however you want, making sure to retain the original screenshot ratio. Afterwards, you will want to double/triple/quadruple the image size of your map, depending on the level of zoom needed (this will look a lot better starting with a vector based map). Save your big image as a PNG.
Bring it back into MapTiler and repeat the first steps, using this new map image instead of the screenshot.
Success! ? Hopefully :) Now, move the maptiler output folder to your tidepools build, placing it inside the 1.0.0 folder.
You need to tell tidepools / leaflet to look for the map in this folder, which will require modifying a line of code in JS.