• Moose
  • Announcements

    • Dirktator

      Extra donation boost for June/July   06/20/2017

      This month we're hoping for a little bit of a boost this month or next, in addition to covering the regular bills, we'd love to be able to do some hardware upgrades. STEX Collector's Set gifts can now be sent to you via digital download as well as regular mail if you wish! Every donation dollar goes toward keeping Simtropolis online and humming along. Your contribution is so meaningful, every dollar counts!
        Hardware Upgrades We've received a recommendation to consider some hardware upgrades to our ageing server. As our website community software improves with more and more features, and as we bolt on additional features such as chat, the increased load to handle all these new toys is taking the server a bit to task. You may have noticed that we'd been forced to temporarily disable the chat as we worked out allocating resources for more optimal performance. Following this, we've applied a number of 'soft' changes such as caching options and experimented with server configurations (nginx as proxy, for example), so the hardware aspect is also an area we'd like to focus on. The last time we upgraded hardware was back in 2012, prior to the release of SC13.
        Your contribution means a lot! Donate and Get a Gift or Donate Any Amount
        Your donation will go toward helping us to 1.) migrate to a newer server or 2.) at least get some ram/cpu/storage updates and any other infrastructure hardware or services. Thanks so much! - Dirktator & The Admins
    • Dirktator

      Chat is back...   06/22/2017

      In order to conserve resources, we've disabled the global chatbar at the bottom of the site. Instead, the Chat can be accessed by clicking the top navigation tab. It will launch a new window. If you're not seeing this behavior, try clearing your browser's cache.
  • 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.


    rewright, Aleph and huzman like this


    User Feedback


    Apankou

    Posted

    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

    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

    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
    Halen Of Dania

    Posted

    chhers mate for this tutorial well put

    Share this comment


    Link to comment
    Share on other sites
    figgy

    Posted

    Interesting...

    Looking forward for the next part!

    Share this comment


    Link to comment
    Share on other sites
    packersfan

    Posted

    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

    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

    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

    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

    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

    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
    dossenaandrea

    Posted

    is it possible to update the images?

    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



  • Featured Topics

  • Recent Modding / Content Posts

    • Something about the modeling bugs me a little bit; this BAT is very very narrow.  It looks to be approximately 8 meters wide, as it fits on about half of a single grid width lot.  When you put it next to the Rivello and all those others in that screenshot, it looks glaringly narrow and squished.  I would suggest either widening it a bit, or not making it nearly as long as those others.  I am hard pressed to come up with a rational use for that building be on so narrow a footprint as modeled currently.  When I've BATted little buildings and made something this small, it's usually been something that's kiosk-sized, usually square or nearly square or squarish.
    • It's looking good! The rear left edge of the roof looks like it might have a small alignment issue, but I'm sure you already spotted that.   You can create images with transparency in photo editing software, export as TGA format (png or gif might work?) and get some pretty good effects like the ghost signs you're talking about. The general method, once you have the TGA loaded into a material in the BAT, is to create a very thin mesh, say .001 deep (plane probably works but haven't tried). Apply the transparent texture to it, then position that mesh on the wall. The wall will show through around the letters. I used that technique for the Saber LA River lot.
    • @crownsteler - Thanks for the feedback
      @mattb325 - Thank you!  I don't mind most of the maxis buildings, and I would like my buildings to fit in along side them, so I appreciate the texture lesson.  I'm still getting the hang of making my own textures.  Do you create your own brick textures from scratch, or do you alter from existing images?  And how would you go about creating a worn off advertisement on a brick wall like your historic shop models?  
      @madhatter106 - Thanks for the insight!  I hope once I assemble a collection of textures it won't feel so daunting.  

      Here's the latest... I'm still tinkering around with the textures and modeling.  I already know where I made mistakes and I think The next one will go a bit smoother.  
      I forgot to texture the foundation, so disregard that nice turquoise glow on the base of it
    • HES BACK OUR LORD AND SAVIOR
    • The nonuniform arrangement of each truck is too spot on! Every industrial lot I see in LA satellite images show lines of them and they are never as orderly as the default props! Will definitely be using this model when it's released!