Jump to content
  • How to Make a Region-Wide Google Style Street Map


    packersfan

    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.

    maptutorial01.jpg

    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.

    maptutorial02.jpg

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

    maptutorial03.jpg

    Paste that selection into the new image.

    maptutorial04.jpg

    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.

    maptutorial05.jpg

    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.

    maptutorial06.jpg

    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

    [code]<TABLE></TABLE>[/code]
    . 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. maptutorial07.jpg 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. maptutorial08.jpg The first row and column doesn't need to be a certain size though you can designate a size with
    [code][TR height=""][/code]
    or
    [code][TD width=""][/code]
    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
    [code]<TD width="256">&nbsp;</TD>[/code]
    , plus the first
    [code]<TD>&nbsp;</TD>[/code]
    . maptutorial09.jpg 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. maptutorial10.jpg Make sure after all the
    [code]<TD></TD>[/code]
    (Columns) you close the row with
    [code]</TR>[/code]
    . We now have the first row (1/33). Copy everything
    [code]<TR>[/code]
    to
    [code]</TR>[/code]
    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
    [code]HEIGHT=256[/code]
    .
    [code]<TR height="256">[/code]
    Now copy the entire
    [code]<TR>[/code]
    to
    [code]</TR>[/code]
    and paste 31 more times or the appropriate number of rows you need. maptutorial11ou.jpg 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. maptutorial12.jpg Now you must make those boxes resemble your region config. To do this start in the second
    [code]<TR></TR>[/code]
    , leaving the first row blank. Edit the second
    [code]<TD></TD>[/code]
    . Now for example in my region the upper leftmost tile is a LARGE tile. So I will change the column width to
    [code]<TD width="1024">[/code]
    . 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
    [code]colspan="4"[/code]
    . Now immediately remove the next three
    [code]<TD></TD>[/code]
    in this row. Now we also want this box to be 1024 pixels in height so add rowspan="4". Now we must eliminate four
    [code]<TD></TD>[/code]
    from each of the next three
    [code]<TR></TR>[/code]
    . I didn't do it this way, but a great way to remove the unnecessary code is to use the comment code
    [code]<!-- Code you wish to remove -->[/code]
    . 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
    [code]<TR></TR>[/code]

    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.

    maptutorial13.jpg

    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.

    maptutorial14.jpg

    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.)

    maptutorial15.jpg

    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.

    maptutorial16.jpg

    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.

    maptutorial17.jpg

    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.

    maptutorial18.jpg

    You can hide the water layer to your liking. Now create a Streets layer "above" the water, grey, and background.

    maptutorial19.jpg

    I zoom in 200% to lay out the streets. To lay the streets, use the paths tool.

    maptutorial20.jpg

    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).

    maptutorial21.jpg

    I placed the other anchor at the end of the street at the same vertical coordinate 258.0. Now right-click, edit, stroke path...

    maptutorial22.jpg

    I use a 4 pixel line for one-tile in SimCity. This only applies to streets and roads. For rail, I use 2 pixels.

    maptutorial23.jpg

    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.

    maptutorial24.jpg

    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.

    maptutorial25.jpg

    Alpha to Selection on the higher Streets layer.

    maptutorial26.jpg

    Select the lower Streets layer. Right click on the picture and select Stroke Selection. Set your stroke for 1 pixel and COLOR CODE: c1b59e.

    maptutorial27.jpg

    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!

    maptutorial28.jpg

    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.


      Report Article


    User Feedback


    Apankou

    Posted · Report

    Good tutorial! I will test it as soon as I'm back at my place and run SC4 (and started at least the basic layout of a new test region...)

    How is it continued?

    Share this comment


    Link to comment
    Share on other sites
    benjames98

    Posted · Report

    If you don't want the traffic density lines, set the vehicle to Freight Truck and the time setting to "Evening commute" because there are no trucks at that time, so there will be no white dots representing vehicles.

    Share this comment


    Link to comment
    Share on other sites
    packersfan

    Posted · Report

    Right benjames98. I used to do that when I would only use the traffic view as my map, but in this tutorial there are still two more steps and the last step will create an overlay over the traffic view, so any view will get the job done.

    Share this comment


    Link to comment
    Share on other sites
    figgy

    Posted · Report

    Interesting...

    Looking forward for the next part!

    Share this comment


    Link to comment
    Share on other sites
    packersfan

    Posted · Report

    Sorry for the delay on the second part. I got caught up in my city journal and now I am a little busy in China and having difficulty accessing the site with my VPN. I will try to put together the second part of this tutorial soon.

    Share this comment


    Link to comment
    Share on other sites
    packersfan

    Posted · Report

    I have just added the HTML part of this tutorial...part three will be coming up!

    Share this comment


    Link to comment
    Share on other sites
    Jack³

    Posted · Report

    I am extremely late in commenting, but I couldn't resist. That street map is the best I have every seen. Incredibly realistic. I will definitely try this.

    Share this comment


    Link to comment
    Share on other sites
    StarAngel

    Posted · Report

    Is there any maps out there that I can download with the roads/streets/highways laid out? I am some what of an idiot when it comes to computer stuff and image editing....this article is like French to me lol :)

    Share this comment


    Link to comment
    Share on other sites
    condor_co

    Posted · Report

    Good tutorial, but I'm asking if is not more easy with some GPS tile tool...:S

    Share this comment


    Link to comment
    Share on other sites
    rewright

    Posted · Report

    Your map is the best out there friend. A bit of a learning curve, but with time I think I could do it. Time being the key word there! LOL

    Share this comment


    Link to comment
    Share on other sites


    Create an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an Account  

    Sign up to join our friendly community. It's easy!  :thumb:

    Register a New Account

    Sign In  

    Already have an account? Sign in here.

    Sign In Now


×