Map Tiles

From TidePools Wiki
Jump to: navigation, search
Home < Map Tiles


Generating Map Tiles from Open Street Maps Data

These instructions are based on

Download and install 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

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          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 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 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/ --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 and name it
  2. Open the new 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:


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:

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 In the same directory as your .mbtiles file (/osm-bright/export/), run the following:

  git clone
  mv MBTiles-extractor/ .
  python [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 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 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.

Personal tools