• Welcome to SC4 Devotion Forum Archives.

How to Make a Region-Wide Street Map (Google Style)

Started by packersfan, September 18, 2011, 05:27:30 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

packersfan

How to Make a Region-Wide Street Map (Google Style)

Table of Contents
Part 1 - Preparing Base Image (SC4 and Paint)
Part 2 - Creating an HTML document to Stitch Together the Map (HTML Editor or Text Editor)
Part 3 - Adding Google Map style (GIMP or Image Editing Program)


In this tutorial, I will show how I put together a region-wide street map with a Google map style.  I used an HTML editor, Paint, and GIMP to achieve this result - District of Wenzel Street Map - look around the whole page and you will see the images straight from SC4 and others that are more complete with Google style.

Part 1 - Preparing Base Image
Now we will gather the necessary map images from your region, so we can put together an accurate street map based on your SimCity.

First, go in-game and take pictures of the street traffic data map in each city of your region.



Now edit each of those images through this process:

Open Paint or your favorite editing program and open the SC4 picture.

Now take the select tool and roughly cut out the actual map.  Copy the selection.



Now open a new image and resize it to 512x512 pixels.  Your selection will be about half this size.



Paste that selection into the new image.



Do not click off the selection and resize it, not the entire image, 200% of the original.  This will make the actual map 512x512 pixels.



Now adjust the selection so that no white is showing on the edges.  Do not stretch!  Just reposition until the map is all on the image.



Now deselect everything and resize the entire image to the appropriate size of the city.  For example = SMALL = 256x256 pixels, MEDIUM = 512x512 pixels, LARGE = 1024x1024 pixels.  You can use your own sizes depending on how large or small you want the map, but the scale must be the same, 2 x SMALL = MEDIUM, 2 x MEDIUM = LARGE.

At this point, I would suggest creating the HTML page that will take all these image tiles and place them together like your region.  It will make lining things up and checking while working on the Google style much easier later.

packersfan

Part 2 - Creating an HTML document to Stitch Together the Map
Now we will stitch together all those map images we edited to create a complex mosaic and seamless street map of the entire region.

Open an HTML editor or a text document.  I use HTML Beauty, since it has an in-program preview and many tools to write HTML for you.

We will create a table to put the images in the appropriate places within the region.  Open your SC4 region config file or have SC4 open to region view.

Now let's create the table.  First put in the code for a table <TABLE></TABLE>.  Remember to always close your tables, rows, and columns.  Make sure to make the cellspacing and cellpadding and border all "0", otherwise you will have white space between each map piece from your cities.



Now in your region or your config map you must figure out how many SMALL tiles across your region is.  My region is 32 SMALL tiles by 32 SMALL tiles.  So I will have 33 columns and 33 rows.  Why 33?  When I designed my page with only 32 x 32 things were jumbled for some reason, so this is what works, so you should put an extra blank row and column.



The first row and column doesn't need to be a certain size though you can designate a size with [tr height=""] or [td width=""}

So now we will make the first row (the blank row).  Look at the picture and copy that code.  For width put the size of your SMALL city map image, in my case 256 pixels.  Make sure you have 32 <TD width="256">&nbsp;</TD>, plus the first <TD>&nbsp;</TD>.



I added a border, change that border="0" to ="1" in the TABLE line and then I previewed to see the row.  The boxes are not really 256 pixels wide yet, but they will be once content (pictures) are added.



Make sure after all the <TD></TD> (Columns) you close the row with </TR>.  We now have the first row (1/33).  Copy everything <TR> to </TR> and paste on the next line.  That is your second row!

Now remember how we designated the width of each of those 32 columns at 256 pixels.  Now you must designate the next 32 rows at the same HEIGHT=256.  <TR height="256">  Now copy the entire <TR> to </TR> and paste 31 more times or the appropriate number of rows you need.



Here is another look at the result (with borders on!).  You can see that the second row and every row beyond the first one are 256 pixels in height.  The columns still are not the right size, but don't worry about that right now.



Now you must make those boxes resemble your region config.  To do this start in the second <TR></TR>, leaving the first row blank.  Edit the second <TD></TD>.  Now for example in my region the upper leftmost tile is a LARGE tile.  So I will change the column width to <TD width="1024">.  Now that I've done this, I've bumped three other columns out of alignment, so I will span those columns to fix it.  Add colspan="4".  Now immediately remove the next three <TD></TD> in this row.  Now we also want this box to be 1024 pixels in height so add rowspan="4".  Now we must eliminate four <TD></TD> from each of the next three <TR></TR>.  I didn't do it this way, but a great way to remove the unnecessary code is to use the comment code <!-- Code you wish to remove -->.  This way you can see how many columns you have removed.

To check your work, view your HTML document in your internet browser, it should resemble your region.  If things look wrong, go back and make sure each row <TR></TR> has 33 columns taking into account the colspans and rowspans.  I am not sure if the preview will look right with just blank tiles, so insert your pictures into the right spots before previewing.  If they do not line up, make the appropriate corrections to your rows and columns, rowspans and colspans.



If you preview it with the borders on there will be many white spaces but you will see your region the way it looks when you have the borders on in SC4 region view. 

Turn off the borders for your final product.  Now you have a stitched together regionwide map.  You can stop here like I originally did and just label your streets right on the SC4 view, or you can continue and place layers over it to make a slick looking map of any style you wish.


dossenaandrea

hi! could u please re-upload the pictures so we can understand better the steps?
thank u