Updated getting started tutorial

docs/index.md

@@ -9,7 +9,7 @@ published: true
 Get started styling and using vector tiles.
 
 - Getting started
-  - [Display map with tileserver-mapnik](/docs/display-map-with-tileserver-mapnik)
+  - [Display map with tileserver-mapnik](/docs/start)
   - [Display map with Mapbox GL](/docs/display-map-with-mapbox-gl)
 - Create your own custom basemap
   - [Create a style with Mapbox Studio Classic](/docs/create-map-with-mapbox-studio-classic)

docs/start.md

@@ -8,6 +8,30 @@ published: true
 
 This tutorial describes how to get a raster tile map with OSM Vector Tiles as data source.
 
+## Kitematic
+
+### Preparation
+
+1. [Download the extract you want to serve.](http://osm2vectortiles.org/downloads)
+2. [Download the visual style.](https://github.com/mapbox/mapbox-studio-osm-bright.tm2.git)
+
+### Install Kitematic
+
+1. [Download and install Kitematic.](https://www.docker.com/docker-toolbox)
+2. Start a new container by searching for `klokantech/tileserver-mapnik` and click create. 
+
+![Search Container](/media/search_container.png)
+
+### Add mbtiles file and style
+
+Click on the volume `/data` and add the downloaded mbtiles file and style project.
+
+![Add resources to tileserver](/media/tileserver_add_resources.png)
+
+Click on web preview and you should see the map.
+
+![Container running and serving tiles](/media/tileserver_kitematic_running.png)
+
 ## Command Line
 
 If you want to get started very quickly, just use the following commands.
@@ -17,30 +41,4 @@ wget https://osm2vectortiles-downloads.os.zhdk.cloud.switch.ch/v1.0/extracts/zur
 git clone https://github.com/mapbox/mapbox-studio-osm-bright.tm2.git
 docker run -v $(pwd):/data klokantech/tileserver-mapnik
 ```
-Note: The webserver is started on port 80 of the container. To access it you need to figure out the ip address of the container. Or just open kitematic and click on web preview.
-
-![Container running and serving tiles](/media/tileserver_kitematic_running.png)
-
-## Kitematic
-
-### Preparation
-
-1. [Download](http://osm2vectortiles.org/downloads) an extract you want to serve.
-2. [Download](https://github.com/mapbox/mapbox-studio-osm-bright.tm2.git) the visual style.
-
-### Install Kitematic
-
-1. [Download](https://www.docker.com/docker-toolbox) and install Kitematic. 
-2. Start a new container by searching for `klokantech/tileserver-mapnik` and click create. 
-
-![Search Container](/media/search_container.png)
-
-### Add mbtiles file and style
-
-Drag and Drop the downloaded mbtiles file and style project.
-
-![Add resources to tileserver](/media/tileserver_add_resources.png)
-
-Click on web preview and you should see the map.
-
-![Container running and serving tiles](/media/tileserver_kitematic_running.png)
+Note: The webserver is started on port 80 of the container. To access it you need to figure out the ip address of the container. (docker inspect -f '{{ .NetworkSettings.IPAddress }}' containerID)