Update 113 - (Ouisconsin County) How to Make a Map, Part 1
Ouisconsin County - How to Make a Map, Part 1 <DoW Update 113:02.24.15>
I am in the process of trying to figure out a way to keep track of my plugins: what dependencies they have, what dependencies I have. I want to avoid the sort of situation that often occurs when you want to remove a lot or dependency file. First, what the heck is in this file? What is IT? Second, are other things dependent on this file? Third, are there other files that I NO longer need because I'm getting rid of this particular plugin and thus could save even more space? I want to figure out a way to somehow quickly find this information. (I want to have all the readme dependency information available in a big database of some form). Any ideas, tools, or tips? I would love to see your methods.
So, this is another stalling tactic. Tutorials! By now you have probably seen my (world-famous) District of Wenzel - Martin County Street Map, and hopefully have checked out the District of Wenzel - Ouisconsin County Street Map in all its old-style surveying glory.
A few years ago, I posted a tutorial on how I make my street maps. Up until the past six months, I had used GIMP to build my street maps and posted basically a large JPEG mosaic on the web. This did the job but left much to be desired. JPEG is not zoomable. Zoom in and the pixels just get larger and picture less clear. Zooming out isn't as bad. JPEG also compresses the image and leaves artifacts, discoloration, etc.
In the past year, I started using Adobe Illustrator and discovered Scalable Vector Graphics! I'm not going to get into the specifics of how SVG files work, but they offer better presentation options. First, you can scale up or down (zoom in and out) and the image remains crisp! Second, you get this quality with files that are only slightly larger than lower-quality JPEGs of the same image.
Many areas on the Martin County map are .svg, while the entire Ouisconsin map is .svg. So without further explanation, let's make a street map.
Creating the Webpage to Present the Map
The original purpose of my street map was for me to be able to see what streets were where and what names they had. With Sessquenna I did this by grabbing the data view of the traffic from in each city tile and then sticking them together in Microsoft Picture It! or some program like that. This quickly became unwieldy and difficult to do accurately.
So I designed a webpage to stitch together all the individual city tile maps into one region size map (like SC4 does to the individual city tiles in Region View).
#1: Open up an HTML editor (HTML Beauty is a nice program). A text file will work, too.
#2: Set up a TABLE.
We don't want any spaces or gaps between our map sections so "0" cellspacing, cellpadding, or cell border.
Remember, just like BBCode, you must close each section of code with "/"
#3: Let's add a top border. There is probably a much cleaner way to do this, but we want to set up the table to have columns and rows as big as a small city tile (or the smallest city tile you have in your region --- if you are playing a region of ALL one size, this part is much easier). You must determine what size you want your smallest map tiles to be. I picked 256 pixels. There are 64 tiles on a small city tile, so on the map, 4 x 4 pixels would represent a SC4 square. You will need as many columns and rows as you region is tall and wide (you can use your config file to easily get this information)...my region is 32 x 32, so I need 32 256-pixel columns and 32 256-pixel rows.
This first row will set up the lattice we will base the rest of the table on. We can also use it to make a nice border on the top. For this tutorial let’s assume our region is 8 x 8 kilometers (8 x 8 small cities) Notice the first and last columns <TD></TD> have widths of 3 pixels, while the row <TR></TR> has a height of 3 pixels. This will give us a black border when we tell the row and those columns to have a BGCOLOR="#000000".
While you are building the table, you can make the table BORDER to "1" so that you can see what you are actually building.
#4: Now you need to build table like your region is arranged. For our tutorial let’s assume our region is just 64 small city tiles. The easiest thing to do is copy the first row we made, but make sure to remove the background color and change the row height to “256”. Now we have a top border row and a row of 256 x 256 tile boxes (8 small city tiles). Make the table border “1”, save your HTML file and check it out.
Now repeat for as many rows as you need. We will need 7 more in this example. Note how in my example, I changed the first and last column in the Border row to have ROWSPAN=”10”. This will save on code space as now these two columns will span 10 rows. We have a top border row, 8 small tile rows, and a bottom border row. Now copy your small tile row seven more times and then add a bottom border row (this row is the same as the top row except missing the first and last 3 pixel border columns…these will show up because of our ROWSPAN=”10”).
Let’s take a look. If you have the table border set to 1 (YOU SET THIS TO “0” when you actually have map images in the columns), you should see 64 small tiles arranged just like you region!
What if your region is not all one size tile, but you have a mix of small, medium, and large? ROWSPAN and COLSPAN are the commands we will need.
Let’s make a MEDIUM city tile in the top right corner of the map.
Find the seventh <TD></TD> column in the first map row (second row – since the first row is just the border). Following the “<TD” add ROWSPAN=”2” COLSPAN=”2” and either remove or change the SIZE to “512”. Then delete the eighth column and then the seventh and eighth column “<TD></TD>” in the second row.
Your map should now look like this (again, this is with table border set to “1”)
Let’s practice putting a LARGE city tile in the center of our map. Our key <TD></TD> column is the third column in the third row. Now change the SIZE to “1024” and add ROWSPAN=”4” and COLSPAN=”4”. Then remove the next three <TD></TD> columns from the third row. Then we need to remove columns 3 to 6 in rows 4, 5, and 6. (I’m finding that this is a great way to carefully set up your table --- I’ve never done it this way before and it can be a headache trying to figure out what went wrong, what you forgot to delete).
You should have a nice 4 x 4 box in the middle of your map.
#5: Add your bottom border row. This row is the same as your top border row. If you included ROWSPANs for the left and right border columns, you do not need to include these columns in this row.
#6: Check your map layout against the configuration file of your region.
#7: Add the image/object to the tiles. We have the structure of the region, now we need to add the content, the map. In the next part of this tutorial I will discuss how to MAKE these individual map images. At this point, we can insert the necessary information so that the maps will display when they are completed.
In between the <TD> and </TD> commands, write this command: <object data=”FILENAME.svg”></object>. Substitute the actual file name for your map objects. If you are using traditional .jpg images put in this command instead: <img src="FILENAME.jpg" width="…" height="…">
If you link to a .jpg that does not exist or is not in the proper folder, a missing image image will appear in your map. However, if you link to a .svg that does not exist or is not in the proper folder, that table cell will just appear blank. My Ouisconsin map is like this. It is ready for new .svg map files to be saved and displayed.
Let’s see what happens when I stick an .svg from my Ouisconsin map into the example and turn the table border off “0”.
I’m not sure why my side borders aren’t showing up at this zoom level (they work on my Ouisconsin map where I have the border columns included in every row, and I didn’t do the rowspan.)
The .svg file shows up where placed it while all the other tiles are blank. Take my word for it, I initially included a link to a file that did not yet exist and I kept reloading this page with no image showing.
I hope this tutorial was helpful. Next week, I'll have some pictures from the region, and then Update 115 come back with Part 2 of the tutorial.
And one more map for the road. I woke up this morning thinking about the Watertown Plank Road from Milwaukee to Watertown, Wisconsin. I looked up the history and found this AMAZING map of the middle of Milwaukee county. Amazing how all the main roads are already laid out. I also really love how all the land plots in Wauwatosa are labelled by owner (a number of names are very familiar as their names live on as street names in those areas). Do you think I should get this detailed with my old map? Just awesome!
Replies:
Huston: Beautiful work there. Very organized and looking very interesting! I really like what you did with the 8th pic. Warped images to make it look like a map. I'm going to be wondering how you did that for a while 
Thanks. I'll try to remember to post a tutorial on how to make an overhead sat view like that when I do it again.
Mymyjp: This was both very informative and impressive. Thank you for sharing your knowledge with us.
Thank you. Dedgren and Three Rivers Region beat me to the punch on this sort of entry, though.
SimCoug: Great entry! Thanks for the history lesson, it was very informative 
No problem. Glad you enjoyed it.
amazona: wow! this is very reallistic with so much information!
Thanks. I'm always trying to get realism in SC4. Glad you like it!
blunder: Great stuff! I'm a sucker for old survey maps. 
Thank you very much. It has been quite fun looking at old maps from America and figuring out how to make something like that with my region. I would be so awesome if SC4 allowed you to adjust WHEN your region is starting, etc. 17th Century wilderness? 19th Century with a little development and farms already laid out? 20th Century post-WWII expansion?
-
7
5 Comments
Recommended Comments
Sign In or register to comment...
To comment in reply, you must be a community member
Sign In
Already have an account? Sign in here.
Sign In NowCreate an Account
Sign up to join our friendly community. It's easy!
Register a New Account