How to Make a Region-Wide Street Map (Google Style)
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.
Part 2 - Stitching Together a Region-Wide Map
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
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 
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 
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 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.
Next, I will show you how to do a google-style overlay using GIMP.
Part 3 - Adding a Google Map-style Overlay
Now you will need GIMP or a similar picture editing program for this next part.
Now select any of the "tiles" you created earlier and stitched together to form the region map. You may do the overlay with any and all tiles, even if there is only one road running through it.
Open it in GIMP. Note the file type is .xcf. ALWAYS save a version of your map as this, so you can easily edit it in the future. (I just saved my downtown map as an .xcf and the program for some reason merged all the layers, so I must go back and rebuild the entire map to make future editing possible again, SIGH.)
To start you will have just a background. Now we must create the Google grey background, COLOR CODE: ede6dc. Create a new layer as shown on in the picture.
Once created, your picture will be completely grey. Go to the layer task bar on the right and press the eye next to the Grey Background to hide it for now.
Now create a transparent layer called Water. Make sure it is "above" the Grey Background and the base Background. Now pick a water color, COLOR CODE: 99b3cc, and paint over the water in the SimCity data view. Make sure you do this on the Water layer. You can add your own waterways that aren't shown in the dataview, for instance if you use ploppable water lots.
You can hide the water layer to your liking. Now create a Streets layer "above" the water, grey, and background.
I zoom in 200% to lay out the streets. To lay the streets, use the paths tool.
Now set the first anchor point of the street. Note the circle on the right edge of the map just north of the river. In the lower left corner, you can see the coordinates of the point (1025.0, 258.0)...the 258 is important to note to get a straight line (if your street is straight, that is).
I placed the other anchor at the end of the street at the same vertical coordinate 258.0. Now right-click, edit, stroke path...
I use a 4 pixel line for one-tile in SimCity. This only applies to streets and roads. For rail, I use 2 pixels.
Stroke and there you go. A street. MAKE SURE THIS IS ON THE STREET LAYER. Now when working at the edges of the map section I would suggest saving as .xcf, but also saving a .jpg after each stroke to check if it lines up with the adjacent sections. Just open your HTML file and refresh everytime.
I unhid all the layers and now the map looks nearly finished. Now we must add the grey outlines to the streets. Duplicate the Streets layer.
Alpha to Selection on the higher Streets layer.
Select the lower Streets layer. Right click on the picture and select Stroke Selection. Set your stroke for 1 pixel and COLOR CODE: c1b59e.
And there you go. Now just add in street names, etc. You can create more layers for parks, universities, etc. Just remember to place in the right order. ALWAYS save a copy of your work as .xcf with all the layers, so you can edit later!
Save as a jpeg and upload your HTML and pictures to a website for viewing by the general public! Good luck.
Check out the District of Wenzel Street Map for examples of all I talked about. Use your browser's zoom out ability to see more of the map at once.
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