There are a lot of great mapping applications out there that run on a server. They can be intimidating to install and configure so I thought I would document my steps so everything would be in one place. This a a guide for the absolute beginner so if you have some command-line experience, I promise I’m not being condescending. Future posts will cover how we’re actually using these tools to build our maps.

This tutorial should take you from absolutely nothing to a fully-functional web server containing:

• PostGIS: A PostgreSQL database optimize to store spatial information. It can easily import shapefiles and OSM data using command line tools as well as connect to mapping services like QGIS and Mapnik.
• Mapnik: A very powerful tool for automatically generating maps from geographic data with lots of control over cartographic display and rendering.
• TileStache: A simple way to efficiently serve geographic data to mapping applications. It can send tiled vector or raster data and will speed up any application that needs to load lots of data.

Basic Setup

I’m going to be using a Rackspace Cloud Server for this example. It’s a cheap way to get a server up and running and I’ve found them to be great with support. They automatically build your server and install the operating system. You just need to select 3 things:

1. Operating System: Ubuntu 11.10 (Oneric Ocelot)
2. Server Name: tiles
3. Server Size: 1024 MB of RAM and 40GB of disk

The RAM and disk space are the bare minimum requirements. Fortunately, Rackspace let’s you upgrade your server at any time so it’s easy to configure it small as a sandbox and then beef it up if you decide to put it into production later on.

Once you click “Create server” you’ll see your new root password. Copy it to the clipboard but don’t worry about keeping it super-safe. We’ll change it as soon as we log in for the first time (they also email it to you). Setup will take about 5 minutes to complete and they’ll email you when it’s finished.

Terminal and Remote Access

Since this server is in the cloud (ooooooh), the only way to access it is remotely through SSH. Open any SSH client you like (Terminal is already installed on OSX) and get comfortable. First thing we need to do is to log on to our remote server. Make sure you have that email with your root password and IP address and type into the terminal window:

ssh root@. Replace your stuff there.)

That command tells the terminal to start an SSH session, logging in as root to the server at the specified IP address. The root username is the default admin of the server. We’ll do most of this setup as root since it has full control over the system.

When it asks, just paste your root password from the email and you should be logged in and should see something like this:

root@tiles:~#

The # tells you the system is ready to receive commands. Let’s now change the root password into something we’ll remember. Type:

passwd

and hit enter and follow the prompts.

Now we want to do a quick software update to make sure everything is secure. Run both of these commands:

sudo aptitude update

sudo aptitude upgrade

We’ll use the sudo command often. It tells the server to perform the task as a super-user which gives you extra permissions to modify the system. Here’s another top-tip: At the command prompt, you can hit the up arrow on your keyboard to cycle through your previous commands.

Installing the Web Server Bits

This part of the tutorial is taken from symana.labs

The next step is to install the LAMP stack. LAMP stands for (Linux, Apache, MySQL, PHP) and has all the basics to turn your server into a web server. It can be installed with a single command:

sudo tasksel install lamp-server

and follow the prompts. To secure the MySQL server from common database attacks, run:

mysql_secure_installation

Enter the password you set in the previous step and then enter “n” to keep it. Enter “Y” for the rest of the questions.

To configure a fully qualified domain name for apache type:

echo "ServerName localhost" | sudo tee /etc/apache2/conf.d/fqdn

If you think you are going to be using MySQL for other applications on the server, you can install phpmyadmin to give you a graphical way to interact with the DB by running:

sudo apt-get install phpmyadmin

This isn’t required since we’ll be using a different database to load our geodata into. When you’re done configuring everything, restart apache with:

sudo apachectl restart

Now we have to configure the server’s hostname so we can contact it via a URL instead of the IP address. If you enter:

hostname -f

you should see the server name you entered when you setup the server. We want to turn that into a subdomain for our primary domain (for me it will be tiles.axismaps.com) but you can skip this if you don’t have your own domain (you’ll just keep using your IP address to connect to the server). To tell the server what the rest of the domain is, we’ll need to edit a few text files using nano, the built-in terminal text editor.

sudo nano /etc/hostname

Will show you something like:

tiles

You’ll want to change that to:

tiles..com

We are using tiles.axismaps.com for ours. When you’ve edited the file, hit Ctrl-X (not command if you’re on a Mac) then enter Y to save changes and hit Enter to overwrite the file. Do the same thing and add your domain to the second entry in:

sudo nano /etc/hosts

To make the changes stick, reboot your server with:

sudo reboot

The final step is to add a DNS record with your web host that points back to the server. From your server management page in Rackspace, click the DNS tab then click your domain name. Click “Add” to enter a new record with values:

• Type: A
• Name: tiles..com
• Content: By this point, the server will have rebooted so you can log in again with:

  ssh root@

  To allow established connections to continue to function:

  iptables -A INPUT -m state --state ESTABLISHED,RELATED -j ACCEPT

  To allow SSH traffic:

  iptables -A INPUT -p tcp --dport 22 -j ACCEPT

  To allow HTTP traffic:

  iptables -A INPUT -p tcp --dport 80 -j ACCEPT

  To allow HTTPS traffic:

  iptables -A INPUT -p tcp --dport 443 -j ACCEPT

  To allow remote database connections:

  iptables -A INPUT -p tcp --dport 5432 -j ACCEPT

  Drop all remaining traffic:

  iptables -A INPUT -j DROP

  Save all the rules to a file:

  sudo iptables-save > /etc/iptables.rules

  To enable the firewall, we need to add the rules to the network adapter by editing the interfaces file:

  sudo nano /etc/network/interfaces

  and add the line:

  pre-up iptables-restore < /etc/iptables.rules

  just after iface eth0 inet static and make sure it is indented like the other lines. Save and exit the file then reboot the server.

  This is a good time to create a server backup. In Rackspace, click on “Images” then click “New On-Demand Image” to create a backup of your server. This way, if something goes wrong, you can be up and running again quickly.

  Installing PostGIS

  Some parts of this tutorial is taken from OpenStreetMap Wiki

  To give us access to all the software we’ll need, we need to add an additional software repository. First, enter:

  sudo apt-get install python-software-properties

  to install the command that will allow us to add new repositories. Then we can add a GIS-specific software repository by doing:

  sudo add-apt-repository ppa:ubuntugis/ubuntugis-unstable

  Now we need to update the system to allow it to pull down the available software from the new repository:

  sudo aptitude update

  We should be ready to install all of the PostGIS packages with:

  sudo apt-get install postgresql-8.4-postgis postgresql-contrib-8.4

  It will warn you about an old version of PostgreSQL but don’t worry about it. Now we need to setup PostGIS to make the newly installed database ready for GIS. Swtich to the database user:

  sudo -u postgres -i -H

  Now we will create a user within the database that can access your maps:

  createuser -SdRP gisuser

  Enter a password for connecting to the database (it should be different from your root password).

  Now we will create and configure a database to hold your spatial data:

  createdb -E UTF8 -O gisuser gis

  createlang plpgsql gis

  psql -d gis -f /usr/share/postgresql/8.4/contrib/_int.sql

  psql -d gis -f /usr/share/postgresql/8.4/contrib/postgis-1.5/postgis.sql

  psql -d gis -f /usr/share/postgresql/8.4/contrib/postgis-1.5/spatial_ref_sys.sql

  psql gis -c "ALTER TABLE geometry_columns OWNER TO gisuser"

  psql gis -c "ALTER TABLE spatial_ref_sys OWNER TO gisuser"

  exit

  Now we need to configure access to our database first by editing the access file:

  sudo nano /etc/postgresql/8.4/main/pg_hba.conf

  Change the words ident and md5 to “trust” (there should be 3). If you want to connect to this database remotely (to view your data in an external manager or view it in QGIS) you should add the line:

  # Enable remote connections:

  host    all         all         0.0.0.0/0             md5

  to the bottom of the file and then save and close. You’ll also need to enable remote listening by editing the main configuration file here:

  sudo nano /etc/postgresql/8.4/main/postgresql.conf

  and change the line:

  #listen_addresses = 'localhost'

  to

  listen_addresses = '*'

  (don’t forget to remove the “#” in front). Save and overwrite the file. To apply the changes, restart the database server:

  sudo /etc/init.d/postgresql reload

  To test if everything has been installed properly, log into the database as the new user we created.

  psql gis gisuser

  If you type \d you should be able to see all 3 tables. Then type \q to return.

  Installing Mapnik

  Copied exactly from the Mapnik Wiki

  To install Mapnik, enter:

  sudo apt-get install libmapnik0.7 mapnik-utils python-mapnik

  That’s it!

  Installing TileStache

  Some parts of this tutorial is taken from TileStache on GitHub

  The first step in installing TileStache is to install mod_python which is the interface TileStache will use to communicate with the web server. You can install it with:

  sudo apt-get install libapache2-mod-python

  Then restart your web server with:

  sudo /etc/init.d/apache2 restart

  Now we need to install some more packages that TileStache depends on. First we’ll switch to the directory where we’ll keep the new applications:

  cd /etc

  Install packages Curl and Git via aptitude to help with the install:

  sudo apt-get install curl

  sudo apt-get install git-core

  Now install some python tools and libraries that are required:

  sudo apt-get install python-setuptools

  sudo aptitude install python-dev

  sudo apt-get install libjpeg8 libjpeg62-dev libfreetype6 libfreetype6-dev

  We’ll grab and install PIP to easily install python modules:

  curl -O https://raw.github.com/pypa/pip/master/contrib/get-pip.py

  sudo python get-pip.py

  Now install the required python modules

  sudo pip install -U werkzeug

  sudo pip install -U simplejson

  sudo pip install -U modestmaps

  The Python Image Library module has some quirks in Ubuntu 11.10 so we need to do some quick fixes:

  sudo ln -s /usr/lib/x86_64-linux-gnu/libjpeg.so /usr/lib

  sudo ln -s /usr/lib/x86_64-linux-gnu/libfreetype.so /usr/lib

  sudo ln -s /usr/lib/x86_64-linux-gnu/libz.so /usr/lib

  Before we can install it:

  sudo pip install -U pil

  Finally we’ll download TileStache from GitHub:

  git clone https://github.com/migurski/TileStache.git

  And install it globally by running the install script:

  cd TileStache/

  python setup.py install

  Finally, we’ll have to add the mod_python configuration to tell our web server which URLs to have TileStache process. Start by editing the apache configuration file:

  sudo nano /etc/apache2/httpd.conf

  and add this:

    AddHandler mod_python .py

    PythonHandler TileStache::modpythonHandler

    PythonOption config /etc/TileStache/tilestache.cfg

  This will direct any web traffic to the “tiles” folder containing the file extension “.py” to TileStache. We just need to add a tiles directory to the web directory so we don’t get an error:

  mkdir /var/www/tiles

  Reboot your server to finish it off:

  reboot

  Testing Your Server

  Once your server reboots, we can test to make sure TileStache is installed correctly and is running through mod_python and receiving maps from Mapnik.

  In your browser, go to: http://tiles..com/tiles/tiles.py/osm/preview.html

  You should see a OSM tiled map fullscreen, confirming TileStache is correctly installed and running. When you work with TileStache, you can always preview your tilesets at …/tiles/tiles.py//preview.html

  Now go to: http://tiles..com/tiles/tiles.py/example/preview.html

  You should see a simple gray country map which confirms that TileStache is talking to Mapnik, rendering a shapefile stored in the TileStache directory.

  Finished

  Now that everything is installed, you can go nuts with TileStache, Mapnik and PostGIS to render your own tiled maps. We’ll come back to this point in the coming weeks to show examples of how you can actually use these tools to make some maps. Some sample topics might include:

  • Thematic cartography with TileStache and Mapnik
  • Combining raster and vector tiles to optimize mapping for iPad
  • Custom map tiles from OSM data

With the start of 2012, we’ve decided to make indiemapper free to use. Since indiemapper launched in 2010, our business has grown and changed to where supporting and maintaining indiemapper is no longer a major part of what we do at Axis Maps every day. We’re making indiemapper free so that it can continue to exist as a useful tool for map-makers while freeing us up to be as awesome as possible at our custom cartography business.

To allow us to give it away for free, we’re scaling back what indiemapper does. We’ve removed all account-based online functionality including usernames / passwords, cloud storage, and map sharing. Everything else, we’ve left as is. The map-making process is still the same except you don’t have to log in AND you need to export your map before you close your browser. We’re also moving our support operations over to GetSatisfaction to let the community of indiemapper users share their knowledge amongst themselves.

We’re really happy about this change and we hope you are too. If you have any questions about the new direction of indiemapper, please let us know in the comments.

Launch indiemapper

Andy’s made a great looking map of small-multiples showing the breakdown of how streets were named in Cambridge, MA. Those of you familiar with the area will have fun trying to recognize the highlighted streets. Everyone else can marvel at how useful the small-multiple technique is at making easy comparisons across a complex dataset.

Cantabrigian Namesakes

Over on the Bostonography Blog, Andy is muses about the spatial arrangement of humorous retailers in Cambridge. It’s inspired by The Simpsons and has some great looking maps (like the above) from GeoCommons.

The Furniture District

This week, we’re happy to begin a 30-day preview of one of our most distinctive interactive mapping projects: The London Low Life Map. This map was produced for Adam Matthew Digital, a digital publishing company based in the UK. Adam Matthew produces digitized archives of historic primary source documents, collected around a central theme, for higher education institutions. This map was built as part of their London Low Life collection that explores the seedy underbelly of Victorian London. It examines the documents of sex, drinking, gambling, and the institutions that sprang up to combat those very vices. As the map is integrated into Adam Matthew’s collection, we will only be able to grant access to our readers for 30-days. I encourage you to explore the map and enjoy Adam Matthew’s fantastic collection of historic maps and images. Since we’ve pulled the map out of the collection, I wanted to give you some context on what is included.

View the map >>

Historic Basemaps

The full London Lowlife project gives users access to a mountain of primary source documents from Victorian London, so it only makes sense that we start with maps made of greater London during this era. We’ve included some metadata with each of these maps (author, date, publisher) to give historical context and placed them on top of a custom Cloudmade basemap (with adjustable opacity) to give some modern context as well.

Taking these historical maps from raw image to geographically accurate overlay was an incredibly intricate procedure. While some maps existed as single, contiguous images, others were scanned in their current forms as pages, separated by fraying canvas. Before we could rubbersheet the maps to OpenStreetMap data (with the help of the UW Cart Lab), we had to manually remove the seams and align the resulting image fragments to one another. Furthermore, because these maps were at different sizes and scales, we had to build a system that would identify maps with limited resolutions and restrict the zoom levels available on the fly.

It’s fascinating to view the changes in the street maps over time, especially which streets were given primary status then and now.

Tallis Streetviews

In the mid-nineteenth century, John Tallis drew detailed views of the fronts and façades of buildings along Central London’s streets. Originally designed as a “visual yellow-pages” (businesses would pay to have their shops labeled), his 88 plates now survive as a first-person perspective into the streets of Victorian London.

We wanted to make these plates as immersive as possible. With the help of AMD’s editorial staff, we took Tallis’ original image and added some color to sharpen the images, shadows to depth, and a blue-sky background to increase the realism of the images. Finally, the images were run through Google Sketchup to create the perspective views that place you in Victorian London and allow you to look down either side of the street.

Be sure to click the “view original” button to see the original plates to view the intricate detail surrounding the street images.

Thematic Data

While the historic basemaps and Tallis Streetviews of the London Lowlife map attempt to provide insight into the qualitative aspects of Victorian London geography, we also wanted to explore the changing character of the population through quantitative thematic mapping. Simple demographic measures like population and density can provide a major insight into the nature of a city. However, we believe the most telling indicator of life in Victorian London, and certainly true to the name “low life” ascribed to this project, is the explosion in social services that sprung up throughout the city to deal with the new urban population.

By dragging the timeline to view an animation of the entire century, you can watch population increase in various sections of the city and then the services emerge to try and meet the need.

Victorian London

The final section of the map gives a taste of the larger London Lowlife project by placing a selection of the primary source documents on the map. It’s an engaging way to explore city by viewing some fantastic records of the landscape and people of Victorian London.

Mouse over a category point on the legend list to quickly highlight all corresponding points.

View the map >>

A few months back, we partnered with the UW Cart Lab to build a map for the University of Wisconsin Arboretum. We wanted to create a map that was populated with content generated by users and experts, built on top of free existing web-services, easy to maintain and great-looking. The map itself is relatively accessible so I’ll let you explore it on your own, however, I did want to talk a little bit about a major piece of functionality that is completely transparent to the end-user. First, a little background…

The University of Wisconsin Arboretum is easily the fourth best thing about living in Madison, WI after the Memorial Union Terrace, The Farmer’s Market, and being able to bike to anywhere (coming in fifth: that bonkers taxidermy museum). It’s a relatively vast piece of natural land on the near-West side of town. In just a 5-minute bike ride from downtown, you can feel like you are in the middle of the wilderness. Residents and researchers alike use the Arboretum for everything from running and biking to invasive species research, from snow-shoeing and hiking to painting and nature writing. This piece of land is very meaningful in many different ways to many different people.

That diversity of experience was the main challenge we faced coming into this project. There were lots of voices that wanted to be heard and have their perspective on the Arboretum reflected on the map. How do we engage these researchers, volunteers and nature enthusiasts without having to train each of them on the minutiae of collecting and preparing geographic data?

After looking around for a service that was already doing something similar, we landed on Google My Maps (since it was Google, we didn’t have to look very far). We had already planned on using Flickr to allow users to place their own photos on the map so this didn’t seem like to far of a conceptual jump. My Maps is a simple way for users to edit maps, adding vector points, lines and polygons just by drawing on a Google Map. Best of all, it outputs to KML, the format of the data already included in the map.

After adding their feature and attribute data to My Maps, all the user would need to do is send the URL of the KML file to the map administrator and it would be added to the map. Done? Nope. This is where things get cool.

While the input methods for Google My Maps are fantastically easy and well done, the symbology needed some work to fit in with our map. We didn’t want to have to sacrifice our cartography just for ease of input. We wanted to have full control over the colors and the point icons used by this incoming data.

Changing point styles is relatively simple. We built the map to use a lengthy XML file that the map administrator at the Arboretum uses to configure the map. Through this file, the administrator has a large amount of control over the data included in the map and can change it to instantly meet the Arboretum’s needs. It allows the admin to specify:

1. The location and title of each layer
2. Where the layers appear within the categories of the map
3. What control users have over the layers (which show up in the legend, which start visible, which remain on)
4. The available basemaps for each category
5. All text content in the map
6. If a layer’s feature contains photos or a slideshow
7. Which layers are grouped into map animations and their corresponding date

The last thing the admin can do, is override the default point style by defining the URL to a PNG stored on the server. This icon will replace the default Google pushpin. We’ve designed a few of the default icons currently shown but with a little Photoshop work, any image can be used as a point symbol.

Changing the stroke and fill color of a line or area symbol was a little trickier. Google offers a choice of 70 different colors for use on My Maps. Not every single one of those colors is going to look good on our basemaps, displayed with the other layers. To solve this, we created a color compatibility chart. Every single color on the Google My Maps selection corresponds to a color deemed compatible with our map. When a My Maps KML is loaded into the map, it automatically adjusts the colors based on the chart below. It is not a 1:1 relationship, as we’ve had to limit our palette to less than 70 colors. However, it gives the user the expected control over color and makes the finished product more visually pleasing.

This solution is not 100% perfect and there were some sacrifices that had to be made to get this compatibility. Firstly, the data-model we used for each feature was limited. Google allows just one name and one description per feature. This eliminated the possibility of doing quantitative mapping and classification on the fly. (For data created outside of Google My Maps, we enabled categorical mapping using standard KML styles and including the name of the category as the name of the style).

Secondly, KML is not known for its friendly file sizes and the data used in this map is HUGE. We’ve tried to optimize it as much as possible but have resorted to inserting loading screens with informational content about the Arboretum to make those download times seem much shorter.

Hopefully this gives you a clear picture of what’s going on behind the scenes of the Arboretum map. The flexibility we’ve given to the map administrator to configure the map as well as the power we’ve given to the stakeholders to add their own data was new for us at the time, but is something we’ve continued to add to our more recent projects, albeit to a lesser degree. The UW Arboretum map still feels young and in its infancy. The map is a “living document” of the UW Arboretum. As more Arboretum volunteers and researchers get involved and add their considerable expertise to the map, we’re looking forward to watching it grow and change in the future.

I only have a few rules in life. One of them is when the makers of this gin offer you a straight-up trade–bottles for maps–you take it… and you don’t cut your partners in on the deal. That was the situation when a friend-of-a-friend approached me to build this simple locator Google maps mashup which I took on as a side-project away from my normal Axis Maps work.

Death’s Door Spirits is a craft distillery based out of Washington Island, WI and distilled in Madison, WI. They use locally-sourced ingredients for their gin, vodka, and whisky which they distill in small batches. While their small-scale makes their products excellent, it also makes them tricky to locate. The purpose of the map is to simply show where you can buy bottles or cocktails containing their spirits.

Since the map was so straightforward, it gave me the opportunity to experiment with a few new technologies I’ve been meaning to check out. Here’s what I thought…

Styled Google Maps: Death’s Door has a fantastic graphic identity thanks to some great work by Grip Design (who also contributed some designs to this map). I wanted the map to fit in with their existing style while stripping out a lot of the extra Google Maps data that would clutter up a map like this. Google Maps Styled Map API allowed me to do both. The styled map wizard was helpful for sketching out styles but mostly I was making whole groups of features invisible and going with stock colors for the roads and water. Not being able to input RGB values for these styles made the process harder than it should have been.

Amazon SimpleDB / CloudFusion: I’ve been a big fan of Amazon’s SimpleDB technology since we used at as the foundation for indiemapper user management. I’ve found it to be more reliable than MySQL and faster as well (but that could just be our budget hosting plan). It was a little unapproachable to me at first but the CloudFusion PHP library made it as easy–if not easier–to query the database and parse the results for the map. The biggest missing feature here is a nice front-end browser like PHPMyAdmin which would have allowed the client to edit their data directly. Instead, I had to build some rudimentary tools so they could manage their data themselves.

Google Font Directory: It was nice to have access to a wider variety of fonts than just the standard web-safe font-family sets. The Google Font Directory gave me access to a limited but FREE selection of a nice variety of fonts distributed across Google’s massive network. Most useful was Yanone Kaffeesatz which is a dead ringer for the Death’s Door title font. The fonts can be a lot to load at runtime so it was important to pare down only to the fonts I was using in the map.

jQuery Ajax / jQueryUI: Made it incredibly easy for someone with my level of programming skill (let’s call it “recreational” to be polite) to efficiently get the data into the map and build some nice UI effects like animation and the accordion component. I can’t recommend it highly enough so there’s going to be no italics section with the caveats in it.

You can view the full map here …and if you’ve got any good cocktail recipes, that’s what the comments are for.

Death’s Door Spirits Locator

After months and months of non-stop design and development, the release of indiemapper is imminent. We’re all palpably excited about this product and can’t wait to get it in everyone’s hands. Thanks to everyone who has provided their invaluable expertise and enthusiasm along the way.

We’ll be spending the next 12 days fine-tuning indiemapper for launch. You can head over to http://indiemapper.com for full details. Also, be sure to follow @axismaps on twitter as we start to introduce you to all the new stuff we’ve been working on.

Without further delay, I’d like to present to you an introduction to indiemapper:

If you’ve been wondering why our blog has been a little quieter as of late, let me present to you the reason: Indiemapper. It’s our web-based mapping application built to help you make great looking maps from digital data FAST. It’s not quite ready for release yet but I did want to share with you a 3 minute overview screencast and 3 sweet looking maps made using indiemapper. As always, check out http://indiemapper.com for more details and information.

PS – Thanks to everyone who came out to our NACIS session and PCD demo. Your feedback and enthusiasm has been invaluable!

Indiemapper Overview Screencast

30-day Precipitation Totals

Europe at Night

2008 Election Results by County Population

Need a quick and easy way to get shapefiles into your AS3 project? Fear not! Over on his blog, Andy has posted a set of supplemental classes to Edwin van Rijkom’s SHP code library. It’s a simple solution that will help you get from data to interactive map faster than ever.

Link: Simple shapefile drawing in ActionScript 3 (via Cartogrammar)