Generating Map Tiles from Open Street Maps Data
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 and Install Dependencies
Setting up PostgreSQL and PostGIS:
sudo apt-get install postgresql postgresql-9.1-postgis
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:
- Make a copy of configure.sample.py and name it configure.py.
- Open the new configure.py in a text editor.
- Change config["importer"] = "osm2pgsql" to config["importer"] = "imposm", unless you prefer to use osm2pgsql and have that set up.
- Optionally change the name of your project from the default, ‘OSM Bright’.
- 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/.
- change the line that says config["postgis"]["user"] = "" to config["postgis"]["user"] = "postgres"
- Save & close the file.
Now change to the directory where you extracted OSM Bright, and run:
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/
Import into Tidepools
Generate your map in Tile Mill (downloadable program, add layers of GIS data, style it, and export as MBTiles), and turned into .PNG map tiles using https://github.com/pbarry/MBTiles-extractor. In the same directory as your .mbtiles file (/osm-bright/export/), run the following:
git clone https://github.com/pbarry/MBTiles-extractor.git mv MBTiles-extractor/convert.py . python convert.py [filename].mbtiles
This will create a folder containing all of the map tiles for the range of zoom levels you decided on when exporting from TileMill. Now, move that folder into /1.0.0/, then change the pathway in /js/tidepools.js (run a search for 'conftest' and replace with your new folder name). You'll also want to change the variables minZ and maxZ to your minimum and maximum zoom levels. Almost there! The final configuration needed is to set the center Latitude and Longitude points in map.setView.
Generating Map Tiles Based on a Drawing
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.