Many of you have already seen these maps...
Metro Vancouver Road Reconfiguration
Ironworkers Memorial Bridge North Approach Reconstruction
First Narrows Tunnel Fantasy or Concept
Rapid Transit Vancouver
So you're probably wondering, how do I make them?
Well, for starters, you need a few image-making programs, like:
- Inkscape*, for vector drawing of lines
- Paint.NET*, for creating the background map files
(* or an equivalent program, like Adobe Photoshop or Illustrator)
STEP 1: Making the Background Map
1) Open up your preferred web browser and find an internet source of map information. For me, this means visiting OpenStreetMap. Google Maps, Yahoo Maps, and Bing Maps also work, but be careful that you may be treading on copyrights and trademarks if you do use them.
2) Go to the area where you want to draw your concept on. Ensure that the size of the area is manageable. Don't create, for example, a Metro Vancouver map and only put in the changes to Pattullo Bridge. In that case, shrink your map!
3) Pick an appropriate zoom. Although you can export your finished concept in Inkscape in sizes larger than the original concept, beware that although the vector lines and shapes may still remain clear, the bitmap background map will become more pixelated when you zoom in. The general rule of thumb that I use is that I can only export as far as 200% zoom of the original map (or 180 DPI in Inkscape).
4) Survey the area that you want to draw your concept on. Keep a mental note of the coverage. The larger the area, the more times that you have to screen-capture the map, process it, and paste it into FILE1.
5) Open up two tabs of Paint.NET. Enlarge one (I'll call it FILE1) to the largest size that you think you will need to put your map on. This will be the area that you will create your final background map in. The other (FILE2) will be used to cut out the map information that you will be downloading from the screen.
6) Begin downloading the map. Start at the top-left corner of the area that you want to cover, then press 'print screen'. This creates a copy image of your screen and the map info within it.
7) Paste the screen image into FILE2 in Paint.NET. Cut out the desired coverage from the rest of the screen-capture image, and paste it in the top-left corner of FILE1.
8) Continue this process heading left. Ensure that there is sufficient overlap with each copied image so you can seamlessly paste the images on top of each other to create one whole map. Note that if there are vast areas that you don't need to use, you can just leave them blank.
9) Once you reach the eastern end of your coverage area, descend one row vertically and continue the process heading right. When you hit the western end of your coverage, then descend and head left again, and so on.
10) Once you are done with creating the background map, crop it to the area that you want, and save it as a PNG file. Try to use a better name than FILE1, but I'll stick with that as an example for now. As for saving the image, I prefer PNGs mainly because there's no loss of data and the file size is reasonable compared to BMPs. JPGs work somewhat fine and have even smaller file sizes but beware of the lossy compression that can ruin images after repeated saves, especially if you choose to change the background map data later.
STEP 2: Creating your concept
1) Open up FILE1 in Inkscape.
2) Immediately save a SVG copy of FILE1. This ensures that you won't be writing changes directly back into FILE1.png and causing irreversible (or reversible) headaches!
3) Draw your concept with vector shapes and lines on top of the background map. It's best to consult the Inkscape manual or tutorials to see how this is done, or you can explore and just teach it to yourself like me. I can sort of explain it here if anybody wants me to do that.
4) Labels are recommended for more complicated concepts that use a variety of colours and symbols to denote different things. That is, unless you want a lot of confused minds.
5) Once you are done with your concept, double-check that it is easy to understand and logical, and save it (as FILE1.svg, of course).
6) Export the bitmap by selecting File -> Export Bitmap. A dialog box will come up with options including the file name and size of the exported file. Pick a file name different than FILE1.png (the background map), set the DPI, and click on export. After a few seconds the export should be done.
(You can also do partial exports by selecting the area in question or by creating boxes behind the background map and selecting those.)
STEP 3: Making it visible to others
1) Your concept is done! Yay! Unfortunately no one else can see it because it's sitting on your hard drive and not being hosted on the internet. =O No worries, there are services like GMap Uploader that make the task easier than you think.
2) Go to GMap Uploader. Enter your email and your desired file. Hit submit. It'll take a while for the image to be cut into pieces and resized. Keep in mind the hyperlink for your map... without it, you'll have to ask the person running the service to retrieve the link for you.... like the updated map of Rapid Transit Vancouver that I sent to the mayor of Surrey. Oops.
3) Give a last-minute inspection if your map and see if it actually works. Then, share the map on the forums and let others comment on them. =)
- Allan Kuan
Linear Mode
