-
Announcement
-
Simtropolis Returns! 05/26/2026
See here for details about our site recovery efforts.
-
Search the Community
Showing results for tags 'svg'.
Found 2 results
-
Update 115 - (Ouisconsin County) How to Make a Map, Part 2
packersfan posted a City Journal entry in District of Wenzel
Ouisconsin County - How to Make a Map, Part 2 <DoW Update 115:03.10.15> Today, we will continue making a map by actually doing some mapping! First, fire up SC4, load up your city tiles and take a screenshot of a traffic data-view. Outside of the game, open up the screenshot in Paint and make a rectangular selection around the map data-view map...it doesn't have to be perfect. Now copy that selection and open a new paint file with a size of 512 x 512 pixels. Paste the selection and immediately resize the selection by 200 percent. Move the selection so that only the map appears in the 512 x 512 area. Select all and copy. Paste the selection in Illustrator onto an artboard the size corresponding to the city tile...in this case a medium sized city is 512 x 512 pixels. Make sure the selection's left top corner is X: 0 px, Y: 0 px and the size is 512 x 512 px. Since we are mapping out the rivers, and we want the map tiles to match up, you'll want to paste in adjacent map tiles. Now use the ink pen tool to trace a each side of the river. Don't connect the paths, leave them open ended in the adjacent tiles. In this example, the river required three separate paths. Duplicate these paths and put them in a sublayer for safe keeping and click the little eye to make them invisible. Once you have map the river out over the edges into the neighboring tiles you can save the file under those adjacent tile names for future use when making those map tiles since you will want to use the same paths that cross the tile borders. Take the visible paths, select all of them, go to the Object Menu, Path, and JOIN. Now you will have ONE path for the river. If you want to get the old map effect that I am using for my rivers, duplicate this path four times...otherwise, you can just stop here switch the color from the path to the fill and select your preferred water color. To get the "wave" lines, I duplicate the path and place 10 px black stroke. Then I duplicate again and place an 8 px same color as the main water stroke. Finally, one more duplicate and a 1 px black stroke. Your river is complete. Delete any unnecessary layers (SC4 data map). You can add in section lines, label the river, and of course later on streets and more! Save your work as an .ai (Adobe Illustrator) file so you can come back and edit in the future, then save as an .svg (scalable vector graphic). Now your map should show up where you coded it in the HTML The next step is to open up the .ai file of the adjecent tile and continue using the same river paths to get a seemless river on your map. Since you saved this file while working on the previous tile, the previous tile map will be centered on the artboard. Remove this and any other unneeded SC4 map tiles. Selected the map tile AND the water paths and move both together so that the top left corner is at X: 0 px, Y: 0 px. You can then hold down on the pen button to select the delete anchor points tool and remove much of the water paths that are hanging off your main tile. Now just repeat the process with this tile. Your river should match up to the previously finished tile since you are using the same paths across the edge. In the next part, we'll add streets and other layers like parks and text. Let me know if this was clear enough. I'm not always so good at giving instructions...especially in written form (maybe I should make a video, but I don't know how to go about doing something like that! I'd need a tutorial!) Replies: Ln X: Ye old! Loving it. Thanks. I'm trying to be SimCoug...but falling short. Kim Sunwoo: I'm enjoying this CJ a lot :-) Thanks. I hope I can enjoy making it. Mymyjp: Beautiful...love the layout and the fact that you named everything. Love the spacing between homes. Nicely done! Of course, EVERYTHING must be named....well to a point. Once the city becomes massive, I can't be Google Maps and tell you specifics about EVERYTHING, but at this point, why not? slickbg56: Fantastic! The filtering adds another cool eye catching level. Great job, lots of great details. Yeah, subtle and judicious use of filtering breaks up monotony.- 2 Comments
-
- 2
-
-
- map
- illustrator
- (and 4 more)
-
Update 113 - (Ouisconsin County) How to Make a Map, Part 1
packersfan posted a City Journal entry in District of Wenzel
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?
