Wikivoyage:How to draw static maps Voyage Tips and guide

See also: Wikivoyage:How to use dynamic maps

Contents

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 Wikivoyage maps using Inkscape (a free image-creating program available for most operating systems). The process using other drawing tools is similar.

Wikivoyage 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 Wikivoyage 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 Wikivoyage 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.

• Inkscape is an open-source (free) tool, for Windows, Mac OS X, and Linux. Please use the most current version, to avoid compatibility issues.

Other vector-based drawing programs (e.g., Adobe Illustrator, CorelDRAW, Sodipodi and Freehand) can be used, but this article deals with drawing maps using Inkscape.

In addition, there are two fonts you must have installed:

• DejaVu Sans and DejaVu Sans Condensed are used in Wikivoyage maps. Both can be found here.

There are two key Wikivoyage map types, and it is important to be sure which category is most appropriate for your map, as the template used is different.

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.

This is a map of a country or a region most appropriate for articles created using the country, region or huge city templates.

Wikivoyage 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. Note that both maps show surrounding land and water areas; this is important, lest the area of your map look like an island floating in a sea of white.

Color codes for each region of the map can be found at Template:StdColor.

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.

The instructions and advice which follow apply mostly to the creation of a city or district street map. Once you have mastered this type of map though, you should have no problems with country or region maps.

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;
4. Maps generated with Travegeo

You also, of course, can look around Wikimedia Commons for existing SVG maps that you may be able to use on Wikivoyage 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.

1. Surf to openstreetmap.org. Navigate to your destination of choice.
2. Click on the Export tab. Make sure "Mapnik Image" is selected and that the "Image Size" is sensible (between 2000x2000 and 3000x3000 is good). Click the Export button to download.
3. Rename "map.png" as something more sensible and upload it to Wikimedia Commons. You're done!

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!

It's a good idea to download File:Template for regions explained.svg before editing; this will give you the colors and patterns needed for the map.

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:

• OpenStreetMap.org is the best place to look for existing maps with street level detail as a source for the transport network of your map. Using OSM as a background image, you can trace lines for a map, though keep in mind that OSM uses the Mercator projection by default. (It can be changed to other projections, including equirectangular.)
  • It is possible to use exported SVG files from OpenStreetMap and thereby eliminate the need for any tracing. See #SVG imports from OSM for detailed instructions.
• The Perry-Castañeda Library Map Collection and UN Cartographic Section are good sources for existing country maps (although their road networks are not always very accurate). But the Project:Regions map Expedition has now finished every last country in the world, so this has become less important!
• All NASA WorldWind (dead link) satellite images in the The Landsat Global Mosaic (except for i-3 visible layer), Blue Marble, and the USGS layers are in the public domain and are therefore fully compatible with our copyleft—they do not even require attribution. Unfortunately, however, there will usually not be high-enough resolution images in the public domain available for locations outside of the United States of America.
• Wikimedia Commons is a good place to start looking for existing maps. Browse their images by category, e.g., Category:Maps of Malaysia or Category:SVG maps of Ireland.

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.

Keep in mind that many maps that are found on the internet, including Google Maps, are not under a free license; anything that's is not under an appropriate Creative Commons is a big no-no. It will be deleted on Commons as a derivative of a copyvio.

Create a new layer called Background and using the Bézier pen (the pen symbol on the left toolbar) draw a line around the image you imported 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 Wikivoyage 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.

Create a layer for your main map. We suggest you call this layer Foreground. Once again using the Bézier 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.

The pesky Bezier pen You may find the Bezier tool a little unwieldly at first if you don't have any graphics drawing experience. But after experimenting for a while, you'll soon be able to lay out beautiful precise curves; the "Edit path nodes" tool (F2) can be used to delete or tweak points in the curve.

Create a new layer called Streets and bring that layer to the top (shift+ctrl+home).

Use the Bézier 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 Wikivoyage 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.

Pattern pathologies Inkscape doesn't handle patterns very well. You will notice that patterned objects often display transparent gridlines, and that you seemingly cannot control the scale of the pattern. The first problem is easily solved by duplicating the patterned object (ctrl+d), moving the duplicate below the original (PgDn/END) and then using the eyedropper tool to set the fill color to the background (green for parks, blue for water) from the original. For the second problem, there actually is a way to scale patterns in Inkscape, though it is exceptionally well hidden. Select the patterned object with the node editor (F2). Then scroll to the left (often very far to the left), where you will see a square/circle/x "box". By clicking and dragging the square handle, you can scale the pattern.

Create a new layer called Geography and bring that layer to the top (shift+ctrl+home).

Lay out any green spaces, again using the Bézier pen, this time with the Wikivoyage 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:

• Lake or pond names: use font colour 006bffff
• River names: use font colour 053bd7ff
• Park names: a label over the top of the park pattern normally looks best in white.
• Neighbourhood names, building names etc.: often look best in dark grey and not black (e.g.: 1a1a1aff) and italicised.

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:

• Street names
• Roads
• Geography
• Buildings (perhaps)
• Streets
• Other transportation routes (perhaps)
• Main area
• Background
• Base

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 Wikivoyage 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:

• Change the properties of any desaturated layers back to 100% using the opacity slider.

• Create a final layer called Frame in which you mark out the exact area of the map you wish to be exported to the PNG file (and thereby the exact area of the map to be included in the article). This layer should always be the top layer, contain no fill and no stroke width. You can select it even without a fill or stroke by navigating to the Frame layer and pressing ctrl-a to select everything within that layer (do not create more than one object in the frame layer!).

• It is a good idea to size your frame so that it can be exported at the exact resolution of 3008x1709 pixels. The thin green box on the template is already set to these proportions, so you only need to resize and/or rotate it to fit your map. For really big maps that are more square than rectangular, double the width of the box to 3008x3418, and it can then be printed as two pages.

• Select your frame, then go to File and Document Properties. Click on "Resize page to content" and then "Resize page to drawing or selection". By doing this, thumbnails will appear correctly on Wikimedia Commons.

Final checklist of layers that should be present:

• Frame
• Key
• Street names
• Travel icons
• Map template
• Buildings (perhaps)
• Other transportation routes (perhaps)
• Streets
• Geography
• Foreground
• Background
• Base

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, Wikivoyage 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).

When exporting the bitmap, enter an appropriate width in pixels — 2,000-3,000 pixels is usually reasonable, as it will give a great result when printed. A smaller thumbnail of the map will go in the article itself, preferably at a resolution that will allow users to read all text within the article. Give the map a suitable name, click the export button under the "File" section. You should then get an option on the right to export the article, click this and you are done!

Alternatively you can customize the area you export by selecting "page" under "export area." This makes it relatively easy to get the exact frame for the map.

You can download and edit the road maps from OpenStreetMap in SVG format. These are a great base for creating Wikivoyage style maps, potentially saving loads of time otherwise spent tracing by hand. The flip side is they often contain too much data, and it takes a while to remove the unnecessary elements.

A number of different programs can be used for this, which have different strengths and weaknesses.

JOSM is an editor for OpenStreetMap data which also has an export feature. JOSM allows you to download OSM data for the area you want, filter out the objects you're not interested in, and export to a simple SVG which you can then add styles to.

Follow these steps:

1. Download JOSM from its website
2. File->Download from OSM..., zoom to the area you want, then click Download
3. (Click on a map object, and you should see its properties in one of the dialogs on the right side of the screen)
4. Edit->Search... and input a search string. For example, "highway" (without quotes) will select all roads and streets, "highway:residential" will select all residential streets. You can then press Edit->Purge, and all highlighted objects (what you searched for) will be removed. This lets you quickly filter out the elements you don't want.
   • Alternatively, it is possible to sparse load data using the "Download from Overpass API" tab and the query wizard.
5. Optional: Select all, then Tools->Simplify Way. Set the max error depending on the map coverage (for districts and small cities: 0.1-1 meters; for huge cities and small regions: 1-10 meters; large regions: 10-100 meters)
6. Optional: follow these instructions to truncate lat/lon coordinates to 5 or fewer decimal places, saving disk space
7. File->Save As..., choose GPX format, save to a GPX file
8. Close JOSM. Choose "Exit now" (do not upload or save anything, since you have not made any useful edits to the OpenStreetMap data).
9. Convert your GPX file to SVG format. If you have a Linux/Unix computer, this is easily and reliably done with the gpx2svg script. From any other computer, see the suggestions here.

Download and install Maperitive, an excellent, newbie-friendly program with a handy feature for exporting SVG files from OSM data. BrainCrunch wrote a handy guide to using Maperitive for SVG exports, but the quick version is as follows:

In Maperitive, first navigate to the area you want to export.

1. Set boundaries using the Map -> Set Bounds menu button, and drag them how you like.
2. Load the OSM content within those boundaries via Map -> Download OSM Data (Overpass API).
3. Remove the web map by clicking on "Web map" at the bottom right in the "Map Sources" box, and then click on the red X.
4. Export to SVG using the command prompt at the bottom of the screen. Enter (without quotes): "export-svg compatibility=inkscape zoom=X"

You can choose any number 1–19 for the zoom, which will decide how much detail is exported (and therefore how big the filesize will be). zoom=15 is the point at which street names are included, but you can preview how much detail you'll get simply by zooming in and out in Maperitive (the keyboard shortcuts are + and -). The current zoom level in Maperitive is always shown in the very bottom taskbar, e.g., "zoom 5.4748".

For exporting a large area, going lower than zoom=7 will usually mean the highways are left off.

OSM imports from Maperitive come with a ton of extraneous layers, and editing in them in Inkscape can place pretty big demands on your PC's memory (and Inkscape loves to crash). This section is a quick and dirty guide to keeping things manageable right from the start.

Save (Ctrl+S) between all steps, and vacuum definitions (File → Vacuum defs) after deleting major layers or items.

1. Turn off the most resource intensive layers. Turn off "line artwork," save. Turn off "polygons," save. Turn off "labels," save.
2. Delete "map frame" and "map grid" layers (but keep the map grid layers if you want to display latitude and longitude, for island archipelago maps, for example) and the floating label.
3. You can delete tons of unnecessary items "polygons" by deleting clearly irrelevant layers without even turning them on to look at them (buildings, orchards, commercial areas, etc.), but you may want to keep "water," "national park," "nature reserve," and any other layers you think you'll want. Deleting buildings in particular helps a lot with reducing the filesize.
4. Create rivers layer (if you want to keep them) and move everything from any river and stream (if you want extra stream details) sublayers of "Line artwork" to that new layer. Then turn the new "rivers" layer off and delete the now empty layers. The easiest way to select all the rivers and streams from different layers at once, in order to move them together, is to turn off or lock all non-river/stream layers and then click and drag to select.
5. Do the same for all highway layers—put them in a new highway layer and delete the now empty layers.
6. It's often useful to preserve the coastline in a separate layer in the same fashion.
7. National Park and all "boundary" layers are usually useful, so be careful to keep them when removing layers from "line artwork."
8. You'll notice that a lot of paths are clones. That's not helpful, so select them (one layer at a time) and use "Edit -> Clone -> Unlink clone" (or Shift+Alt+D) to unlink them. Remove any fill that is auto-added to them in the process, then vacuum defs, save, and watch the filesize decrease!
9. Time to get creative. Import the regions map template to a new "template" layer, and adjust colors to match the Wikivoyage scheme. Create the regions layer, perhaps borrowing boundaries from one of the boundary layers in "Line artwork," add city markers and labels, key, etc. You can use the existing scale in the "Map decoration" layer to measure the Wikivoyage-style scale.

Other tips:

• 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+-.
• The small white streets in imports are the single biggest source of vector nodes that eat up your visual memory. Put them all in a "small streets" 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+G to group them, which will make it easier for your computer to move them to a different layer. Now Shift+PgUp to move the small street grid to the invisible "small streets" layer. That can take a while, but once it's done, the small streets will remain hidden until you need them, and won't bog down your system resources.

First text. Unfortunately the text in the "labels" layer of imported OSM SVGs is not usually that helpful. You will probably wind up deleting those layers and adding your own text. Be sure to use DejaVu Sans Condensed!

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), put them into one group (Ctrl+G), and then change the color to match the usual Wikivoyage scheme. To select all paths/objects of one category, use the find operation as described in the above section. 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 a group, 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 Wikivoyage color standards, change the stroke colors to white (although freeways/highways can be colored red or yellow to distinguish them from your average city street).

The colors of other objects, such as parks, buildings, and water areas, should also be changed to conform to Wikivoyage 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.

Travegeo (formerly ShareMap) is a social mapping service that allows the creation of freely licenced (CC-SA-3) SVG maps. Maps created with Travegeo can afterwards be tweaked in classic SVG editors before uploading.

• Ability to import specific type of objects from OpenStreetMap
• Ability to import user data collected by GPS (using GPX format)
• Ability to trace old printed map (especially interesting when you map historical features)
• At the same time, both a static (also known as SVG) and interactive, dynamic map is created

• Sometimes the visual appearance has to be tweaked in Inkscape before publication
• For performance reasons, OpenStreetMap backgrounds are embedded rasters
• With large datasets, classic GIS tools (QGis, Grass GIS) are more stable than web based Travegeo.
• Due to its migration from ShareMap after the closure of Adobe Flash, editing is temporarily disabled till March 2021.

When uploading your map, please always do so to Wikimedia Commons 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 Wikivoyage 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!

• User:LtPowers
• SHB2000

Please all map-makers use this section to add useful tips and tricks for using Inkscape.

• Use the edit path nodes tool (F2) for manipulating streets, since this keeps the stroke width constant.

• To extend a street, select it with edit path nodes tool and then choose the Bézier tool. Any nodes you add will become a part of the same object.

• Use ALT-cursor keys to 'nudge' objects into the right place.

• Objects can be combined into layers, which can be made visible or invisible by clicking on the "eye" icon. The following layer stack makes it easy to 'peel part' various components of a map: background - satellite data - area highlight - street map - area annotations.

• Locking layers that you are not actively working on can save you a lot of trouble by making it impossible to accidentally move or change objects on the locked layers.

• Inkscape is not the most stable of programs and is prone to hanging. It has an autosave feature in the latest version, but it's not 100% reliable; remember to save your work regularly.

• In Inkscape, be warned that grouping items together from different layers will bring them up to the layer of the highest item in the selection.

• Combining paths (ctrl-k) or grouping (ctrl-g) paths with exactly the same attributes (streets, parks, water) can save a lot of time, as it allows you to change identical paths with a single click. To automatically select paths with the same attributes, hit ctrl-x to bring up the XML editor; highlight and copy (ctrl-c) an item relevant item under style (such as fill:XXXXXXFF); then hit ctrl-f to bring up the find box; and paste (ctrl-v) the item into the it's style field. From there press enter, and you will have selected every path in your SVG with that particular attribute!

• The union, difference, and intersection tools from the path menu are incredibly useful for precise manipulation of objects. It will take a bit of experimentation to master their use, but this is especially worthwhile for handling complex geography, or creating interlocking color fields to display neighborhoods or regions on your map.

• Before performing operations, always close the XML editor, which will otherwise display every individual change painfully slowly.