Wikitravel:How to draw a map
In this age of satellites and GPS, you no longer need to be a professional cartographer to draw an accurate map. The following instructions are for creating standard Wikitravel maps using Inkscape (a free image-creating program available for most operating systems). The process using other drawing tools is similar.
Wikitravel maps are composed in a file format called SVG (Scalable Vector Graphics). These files contain collections of objects displayed as "vectors"—shapes that can viewed at any magnification without ever appearing pixelated. In the case of Wikitravel maps, these vectors will represent streets, geographical features, etc.
Inkscape's logic is based on building structures of different objects as various vectors, icons and text labels within different layers within an SVG file.
When the SVG map is finished, a bitmapped file should be created in PNG (Portable Network Graphics) format as all web browsers can display PNG files. Then both versions are uploaded: one for future editors to update (SVG), and the other to include in the destination's Wikitravel article (PNG).
You will need some tools in order to build maps. The most critical is a vector-based drawing program capable of producing SVG-format files, preferably Inkscape.
In addition, there are two fonts you must have installed:
Map types and their templates
There are two key Wikitravel map types, and it is important to be sure which category is most appropriate for your map, as the template used is different.
City or district street map
This is a detailed map of a city area most appropriate for articles created using the small city or district templates. This map type is also often appropriate for articles created with the park article template.
The map template we use can be downloaded here. Two examples follow of different types of city/district street maps, which you may find helpful as inspiration for the content and final look of your map. Both were created using the same district map template (click either to enlarge).
The Dupont Circle map is a detailed street map of a smallish city district. The London Hampstead map covers a much larger district and therefore shows less (but still considerable) detail.
Country or region map
Wikitravel has a special expedition for country/region map making. If you are planning to draw a map of this type, then we strongly recommend that you read that article and consider joining the expedition. For specifics on the colour palette, symbols used and what have you for a country or region map, please refer to the region maps expedition and its talk page.
The region map template is available here. Two examples follow of different types of regional maps which you may find helpful as inspiration for the content and final look of your map. Both were created using the same region map template (click either to enlarge).
The Thailand country map shows the regions of the country, the main transport routes and major destinations. The Chicago map shows the extent of the city, major transport routes and its main district divisions.
Additionally, there are some specialist map types such as dive sites and layout diagrams of monuments. If you are planning to draw a specialist map of this nature, then we suggest you download an appropriate existing SVG map and familiarise yourself with the structure and style used.
Creating your map
Here are four suggestions for map-making methods:
1. Instant maps, simply copied from OpenStreetMap.org, with no specific travel information;
2. Maps drawn by hand from a base image;
3. Maps imported from OpenStreetMap and then processed in Inkscape;
You also, of course, can look around Wikimedia Commons for existing SVG maps that you may be able to use on Wikitravel by making modifications to bring the aesthetics in line with our standards as present on the templates, and by adding travel icons and annotation.
This easy three-step process can be used to create simple city street maps.
Hand drawn maps
Hand drawn maps can potentially be the most elegant and accurate (when traced over a high quality satellite base image), and are a fantastic way to start getting familiar with how SVG files work—since you'll be making them from the ground up!
Acquire a base image
In order to trace a new map, you will need either an existing map or other image to trace it from (which must be compatible with our Copyleft—either in the Public Domain, or under an appropriate Creative Commons license). There are a number of possible sources:
Your base image should be imported into a new layer which you create in your map file (layer, add layer). We recommend that you call this layer Base.
Define the background
Create a new layer called Background and using the Bezier pen (the pen symbol on the left toolbar) mark out the extent of this layer as an object to match the size of your map.
Depending on where your map is located, you will need to fill the Background layer with either grey or the Wikitravel water pattern. This is achieved by selecting the object, click object from the top menu and then fill and stroke (shortcut: shift+ctrl+f). In the menu box that appears, for a medium grey fill enter 8e908dff into the RGBA box (or use the eye dropper to select this colour from the template) and for a water pattern, select the checkboard pattern button and then pattern8479 from the drop down box. Do not use a stroke.
You should now have a filled Background layer which obscures the Base layer containing your base image. To reveal the base image again, desaturate the filled background layer using the opacity slider in the fill and stroke menu box. By taking it down to about 20% you should be able to clearly see your base image. You can also just turn off the selected layer by clicking the eye symbol in the layers box.
Define the foreground
Create a layer for your main map. We suggest you call this layer Foreground. Once again using the Bezier pen, lay out the area of your map.
Once that is done, change the properties to reflect the desired pale grey area for your main map area. Use fill: d0d0d0ff, no stroke.
You should now see your desired map area completely filled. As with the background layer, you will either need to use the opacity slider to desaturate the fill or turn off the layer to see the base image below it.
Building your street grid
Use the Bezier pen tool layout the road grid of your map. Roads should be white, so set the stroke colour to ffffffff, and no fill colour.
Set the unit of measurement for the stroke width to mm (far easier to visualise mm than pixels!). The stroke width should be set to an appropriate width for the road you are tracing. You will almost certainly have roads of different widths on your map and it is easier to trace each width together. A good way to keep your streets organized is to combine the paths of the same width into one path. To do so, simply select more than one path, then select "combine" from the "path" menu (ctrl+k).
If you wish to show any other transportation routes such as light railways, subway trains or rail lines etc., they should be drawn now and added to a separate layer. Use stroke colours and widths that work best on your map.
To create a black & white dotted rail line (popular among many Wikitravel mapmakers), create a solid black (or white) line, duplicate it (ctrl+d) and then set the duplicate line's fill to white and select dashes from the stroke style box (ctrl+shift+f).
Sometimes it is desirable to show footpaths, trails, pedestrian roads, etc. This should be done using a dashed line, with the stroke color eeeccbff.
Draw the geography
Lay out any green spaces, again using the Bezier pen, this time with the Wikitravel park pattern as fill (pattern15875), stroke color 406c86ff and a stroke width of 0.05mm. If the green area fills up an entire city block between streets, you can set stroke off, draw the area so it overlaps the streets, and then just push the layer down later.
Follow the same process for any bodies of water but use fill: pattern8479, stroke colour: 406c86ff, stroke width: 0.05mm.
Rivers should ideally be drawn with a stroke colour matching the pattern color for water (9ccec9ff), but if they are not showing up clearly enough, try something like 053bd7ff. The stroke width should match the scale of the river you are tracing.
Once this layer is complete, set it to be the layer below the Streets layer and below other transportation layers. Moving layers up and down is relatively straightforward in Inkscape. You can do this either by selecting layer, then raise layer or lower layer, or by using the shortcuts of shift+ctrl+PgUp and shift+ctrl+PgDn.
If (only if) your map contains any major buildings or landmarks which you wish to be defined, create a layer above Main area later called Buildings and draw them there. For these the fill color is 8e908dff, the stroke color is 808080ff and the stroke width is again 0.05mm.
Create a new layer called Street names and bring that layer to the top (shift+ctrl+home).
It's generally best to use the DejaVu Sans bold font, which displays more clearly at small resolutions, especially when printed for offline use. Label each of your streets (or as many as is practical/desirable).
At this stage you can also place any other labels required:
Annotate the map
Your street map is now ready and it's time to turn it into a travel guide.
Before doing so though it worth recapping what your file structure should now look like. You should have the following layers present:
Now, create two new layers called Travel icons and Key and bring them to the top.
Depending on the scale of your map, you might need to resize the travel icons provided in the template. To resize icons use menu option object, transform, scale and scale them to a size that will work on your map (ctrl+m). (select multiple objects at once by pressing F1 and drawing a selection rectangle around them). You can copy and paste the required icons from the template.
On the template, you will see a white listings box. This should be copied and pasted into the Key layer. It can be re-sized and re-shaped to best fit your map and the volume of listings it is going to contain. Edit the text in the listings box so that it contains all listings from the article (for see/do, buy, eat, drink, sleep, and contact listings) numbered and in alphabetical order.
Take all the entries of the Wikitravel article and start placing them in the map, editing them as you go to make sure the numbers to align with those in the listings box. Ideally, you would know exactly where everything goes already but an online address locator like Google Maps is very handy for refreshing your memory. You can change the icon numbers by selecting the text tool, clicking on top of the icon, and then editing the number. Make sure not to change the font of the text in travel icons—it is formatted for maximum readability (especially when printed) at minimum size.
You should now also copy from the template and paste into this layer the inset title box (scale (ctrl-m or ctrl or alt+< or >) and edit as necessary), the scale (adjust as necessary) and the north arrow (scale as necessary). Please remember to take the extra time to add an accurate scale—it's extremely important for travelers determining just how far they'll be walking. An easy way to do this is to just match your scale to the one on your base image.
Note: It is critical to follow the above instructions insofar as you maintain separate layers for any text that could conceivably need translation into other languages, as this will make the process far, far more easy.
You should now have all the elements of your map completed and the following steps should ensure that it is finished off nicely:
Export the finished map
Final checklist of layers that should be present:
You should export a copy of your map to PNG by selecting your blank frame and hitting shift+ctrl+e. This allows you to easily control the size and shape of the export.
It is best to use PNG files, as opposed to raw SVGs, because SVGs do not always display well in various browsers, Wikitravel does not offer support for SVG graphics, and most importantly, this will allow you and other editors much greater flexibility in coordinating, updating, and generally getting more use out of the SVG file (especially with regards to translating).
SVG imports from OSM
The SVG road maps available from OpenStreetMap are a great base for creating Wikitravel style maps, potentially saving loads of time otherwise spent tracing by hand!
First, go to OpenStreetMap , zoom in on the area you wish to map, and then for exporting click the share button on the right. In this window, select "Map Image (shows standard layer)" and then select "SVG" format.
Choosing the appropriate scale depends to a degree on the size of the area being mapped, but in general you can get away with a low resolution export (which will decrease the file size of the exported SVG)—1:20,000 is not a bad resolution to start with. If the file size of the SVG export is too large, your computer may grind to a halt when modifying it in Inkscape .
When you open the SVG file in Inkscape, you will notice it is not in a layer (it is in the root layer). Hit Ctrl+Shift+L to open the layers dialogue, add a layer (name it "import"), then select all objects (which are currently in a group) and hit Shift+PgDn to move it into the import layer.
OSM imports can be pretty big and complex, and editing in them in Inkscape can place pretty big demands on your PC's memory. This section is a quick and dirty guide to keeping things manageable right from the start.
The first and simplest thing you can do to reduce that filesize and make the SVG more manageable is to get rid of the clones and images we won't need here. Hit Ctrl+F to bring up the Find dialogue. In the "ID field," enter "use". Hit enter to select all items with the ID "use", and then hit delete. Repeat for all objects with the ID "image".
Next turn your attention to the light gray background object and any large body of water, which for some reason tend to include thousands of extraneous nodes. Create a new layer below import named "background". Select the gray object or large body of water using Ctrl+Click and hit Shift+PgDn to move it to the layer below. The object will now reveal itself in its enormity. It will need to be cropped to reduce the number of memory-hogging nodes. As Inkscape is not good at cropping, the fastest (i.e., least memory-intensive) method is to draw an object (like a rectangle) over the area you want to crop, and then use the difference tool by selecting the object on top and the target of the crop, then pressing Ctrl+-.
Be sure to vacuum definitions (File → Vacuum defs) after making such a significant deletion, in order to further reduce the file size.
Next, and this will be explained more in the "Convert" section below, it's time to get your small white streets under control, as they are the single biggest source of vector nodes eating up your visual memory. Create a new layer named "small streets" above your import layer, and turn it off by clicking the eye icon next to the layer in the layers dialogue (this will render that layer invisible until you turn it back on). Now select a single little white street (Ctrl+click), then hit Ctrl+Shift+X to pull up the XML editor. Then copy the info listed under "style." Hit Ctrl+F to bring up the find box, and paste the style info into the style field, then hit enter. That should select all of the small white streets with that same style. Then hit Ctrl+K to combine them into one monster path. Wait for the combine to finish (and this often takes a while, unless you have a ton of RAM), then hit Shift+PgUp to move the small street grid to the invisible "small streets" layer. That can take a while too, but once it's done, the small streets will remain hidden until you need them, and won't bog down your system resources.
Layers — separating content into layers will make your SVG more versatile and easier to manage (turning off complex layers will help speed up Inkscape). Create a layer for the OSM import, then add empty layers above it for streets, street names, etc.
First text. Unfortunately imported OSM SVGs do not contain text—all letters are in fact paths, which makes things more complicated. To get rid of the rather unhelpful paths, select one (Ctrl+Click), bring up the XML editor (Ctrl+Shift+X), select and copy the info under "style," bring up the Find dialogue (Ctrl+F), paste the style info into the style field, and then hit enter. Go ahead and delete them all!
It's time to move on to the streets (the larger ones, since you already took care of the small ones in the "Manage" section above). You must select all objects of one type (e.g., red-colored streets), combine them into one path (Ctrl+K), and then change the color to match the usual Wikitravel scheme. To select all paths/objects of one category, use the find operation as before. Red-colored streets are easy to select, for example, simply enter "stroke:#eb9799" to the style box in the find operation to select all red-colored streets. Combine the streets into one path, then move them to a dedicated big streets layer. Repeat for all types of streets. To find unique attributes for the various street types, select one path, then open the XML editor (Shift+Ctrl+X), examine the style attribute, and find a unique value to enter into the find box. To match Wikitravel color standards, change the stroke colors to white (although freeways/highways can be colored red to distinguish them from city streets).
You will notice that most paths in the SVG have "shadow" paths behind them. Delete these paths using the same strategy of copying an identifying style in the XML editor and pasting it into the Find dialogue. Selecting the street paths you have combined, then simplifying them (Ctrl-L) can also reduce the file size and complexity of the SVG a good deal, but this will sacrifice accuracy. At low resolutions, OSM SVGs display the street paths rather wide; select the combined street paths and change the stroke style width by an appropriate percent.
The colors of other objects, such as parks, buildings, and water areas, should also be changed to conform to Wikitravel standards. This can be done in the same manner, using the find function to select all objects of a specific type, and then using the fill function to change the color (or pattern). Combining all the like objects into one path (Ctrl+K to combine a selection) will help keep things manageable. You can obtain standard colors and patterns here.
The final tasks are much more simple, but are time intensive. What is left is to add travel icons, a key, title, compass, scale, etc. These tasks are identical to those described in the section above for hand drawn maps.
ShareMap.org is a social mapping service that allows creation of SVG maps on free licenses (CC-SA-3). Maps created with ShareMap can be after tweaked in classic SVG editor before uploading. Key features
Uploading your map
When uploading your map, please always do so to Wikitravel Shared and remember to upload both the bitmap (.png) and the vector (.svg) versions. That way others can add to your map at a later stage.
The following Wikitravel map-makers are happy to give specific help and advice to others. Please feel perfectly free to leave any questions and requests should be left on their user talk page—you are not bothering them!
Inkscape tips and tricks
Please all map-makers use this section to add useful tips and tricks for using Inkscape.