City Mapping Toolkit Documentation

The following is an HTML-based toolkit for making city maps compatible with the Kingmaker Adventure Path published by Paizo. It allows you to assemble the building images supplied in the Kingmaker Player’s Guide into a city tailored to your game. The buildings may be rotated and labeled, and the city can be printed out for use in gaming areas that lack a handy computer.

In order to make use of it, you will need to copy and modify the HTML file which defines a blank city district. This requires only a minimal level of HTML knowledge. Specifically, you need to know how to add classes to or remove classes from a DIV tag. Optionally, you need to know how to add a TITLE attribute to a DIV tag. Both of these procedures are documented below.

You can download a copy of the toolkit (921 KB), which includes everything except this paragraph.

Creating a New City District

The instructions assume you have downloaded a copy of the toolkit to your own computer for editing.

1. Make a copy of blank.html. It needs to be in the same folder as the original blank.html, so the CSS & image files load correctly.
2. Give it a descriptive file name. I recommend CityName-DistrictName.html, e.g. vessilion-commerce.html.
3. Open the file in a text editor.
4. Fill in the city and district name.
5. Set up the borders.
6. Start building.

For example:

Would become:

See the following sections for more info on setting up borders and building things.

Borders

The borders are set up like this:

By default, each border is treated as a land border with no wall.

Add the class “wall” to a border to declare it as a wall. Walls are represented as dark grey.

Add the class “water” to a border to declare it as a water border. Water borders show up as blue.

In either case, you may add notes to a wall by writing them inside the SPAN. This can be used for things like noting the name of the adjacent district, or the name of the body of water.

Building Pre-Requisites

I have made no attempt to enforce the rules about building pre-requisites. For example, there is nothing to prevent you from building a Mill without a water border by it. You’ll need to manage this on your own.

Adding a Building

Each district has 9 blocks. Blocks in the HTML file use descriptive class names to help you locate the one you want to build in. Look at the CLASS of each block to identify it. The possible blocks are:

• top left
• top center
• top right
• middle left
• middle center
• middle right
• bottom left
• bottom center
• bottom right

Each block consists of four cells (A, B, C, or D). These are where you place buildings.

Here is an example block (a blank one):

To build something, add the class "building" to one of the cells, followed by the name of the building. For example, suppose we wanted to build a house in cell D of this block.

Bigger buildings may be added in much the same way, but they need an extra class to indicate their size. 1x2 buildings need the class “large”. 2x2 buildings need the class “huge”. Let’s put in an Academy (1x2, large) at the top of the block.

And now for a castle, to ensure the security of that expensive new academy. There isn’t room in the top left block, so let’s put it in the top center block.

With these three buildings in place, you should have a map that looks something like the Vessilion Commerce District Example. After a few kingdom-building turns, you may have something like a finished Vessilion Commerce District.

That covers the basics of building. To see examples of all the buildings, check out the samplers (sampler 1, sampler 2, sampler 3). For a list of all the building class names by size, consult Appendix 1: Building Class Names.

Building Placement

Although the rules allow for splitting large buildings across blocks, the mere thought of implementing that in code gave me a splitting headache. I have therefore restricted how you may place buildings within a block.

Normal (1x1) buildings may be placed in any cell.

Large (1x2) buildings may be placed in cells A, B, or C. At least one of the other cells in the block needs to be empty, depending on how the building is rotated (see next section).

Huge (2x2) buildings may only be placed in cell A. The other three cells must be empty.

Rotation

Buildings may be rotated. The available rotations are:

1. 0 degrees (default)
2. 90 degrees
3. 180 degrees
4. 270 degrees

You may specify the rotation by adding one of the classes r90, r180, or r270. To revert to zero degrees rotation, remove any r90, r180, or r270 classes from the cell.

Normal (1x1) buildings and huge (2x2) buildings rotate just the way you’d expect. Large (1x2) buildings are more complicated.

The behavior for rotating a 1x2 building depends on which cell is serving as its point of origin: A, B, or C.

When starting from cell A, a large building rotates like this:

0 degrees

building runs horizontally

faces south

cell B must be empty

90 degrees

building runs vertically

faces west

cell C must be empty

180 degrees

building runs vertically

faces east

cell C must be empty

270 degrees

building runs horizontally

faces north

cell B must be empty

When starting from cell B, a large building always runs vertically. It will face east on rotations 0 and 180, or west on rotations 90 and 270. Cell D must be empty.

When starting from cell C, a large building always runs horizontally. It will face north on rotations 0 and 180, or south on rotations 90 and 270. Cell D must be empty.

You may wish to view the Large Building Rotation example, which demonstrates all this. A large building can be made to face inwards or towards any of the four surrounding roads, but it’s not as straightforward as with the smaller and larger buildings that have a square footprint.

Building Labels

When you move your mouse over a building’s cell of origin, the entire building will be outlined, and a label will be shown identifying it.

The labels default to generic descriptions of the building type. For example: “Alchemist”. If you wish, you may customize the building labels to provide unique names. To do so, add a TITLE attribute to the cell, with its contents set to the name. For example:

Try to keep these short, otherwise you’ll wind up with a confusing welter of overlapping labels on printouts.

Street Labels

You may assign labels to the streets in between blocks. Just above the buildings section, you will find a block of code like this:

You can assign names individually to each segment of street. Use the class names to identify the segment you want:

1. A “horizontal” street runs west-east.
   1. The top horizontal street is north, the bottom is south.
   2. Each horizontal street is divided into three blocks: west, central, and east.
2. A “vertical” street runs north-south.
   1. The left vertical street is west, the right is east.
   2. Each vertical street is divided into three blocks: north, central, and south.

Once you've identified the street segment you want, simply type its name into the SPAN within it. For example:

When a city is printed out, horizontal street labels may be obscured by building labels. If you want the street labels to remain visible when printed, remove the class “prefer-building-labels" from the BODY tag. This will cause the building labels to move upwards out of the street. However, more of the buildings themselves will be obscured by the labels. It’s a trade-off.

Printing

I have tried this in Firefox, but not other browsers. Directions:

1. Click File → Print Preview.
2. Click Page Setup.
3. Set Orientation to Portrait (Landscape doesn’t work well).
4. Check “Shrink to fit Page Width”.
5. Check “Print Background (colors & images)”.
6. Switch to the Margins & Header Footer tab.
7. Change all four margins to 0.1 inches.
8. Set all the headers and footers to Blank.
9. OK.
10. Print.

It may print out an extra blank page.

If you’re printing in black and white, note that water borders are essentially indistinguishable from walls. So it’s a good idea to label your water borders with the name of the river/lake/ocean/etc.

Buildings will be labeled on the printout.

Appendix 1: Building Class Names

Normal Buildings (1x1)

• alchemist
• baker
• barracks
• black-market
• brewery
• brothel
• butcher
• casters-tower
• dump
• exotic-craftsman
• fletcher
• granary
• graveyard
• herbalist
• house
• inn
• jail
• keep
• library
• luxury-store
• magic-shop
• mansion
• mill
• monument
• monastery
• park
• office-of-the-city-guard
• pier
• shop
• shrine
• smith
• stable
• tannery
• tavern
• tenement
• tradesman
• watchtower
• weaver
• witchs-hut

Large Buildings (1x2)

• academy
• garrison
• guildhall
• market
• noble-villa
• temple
• theater
• town-hall

Huge Buildings (2x2)

• arena
• castle
• cathedral
• waterfront

Appendix 2: Image Substitutions

• Aviary or Apiary were not implemented. The images provided in the Kingmaker Player’s Handbook did not include those, and there were no reasonable substitutes among the ones that were included.
• Baker uses the image for Tradesman.
• Butcher uses the image for Jail.
• Fletcher uses the image for Exotic Craftsman.
• Keep uses the image for Watchtower.
• Monastery uses the image for Mansion.
• Office of the City Guard uses the image for Barracks.
• Weaver uses the image for Library.
• Witch’s Hut uses the image for Herbalist.

Appendix 3: Browser Compatibility & Technical Notes

Browser Compatibility

Firefox 4: works.

Opera 11: works.

Chrome: If you rotate a large or huge building after the page has loaded, it messes up. However, it works just fine if you add a rotator class to the HTML and then reload the page.

Safari: Not tested, but there’s a good chance it has the same problem as Chrome.

IE 8: works MOSTLY. The building labels that you get on mouse over will not have their background, and those from cells A and B will not show up (they’re underneath cells C and D). The border labels on the east and west sides are cut off part way through. It may work better in IE 9, I don’t have a copy handy to try it.

I could probably fix this in IE, but frankly I don’t care to. Since this is a project for a game, and not something of serious importance, I’m not going to take the time. I would be happy to accept patches if anyone cares to take a stab at it.

In the meantime, try upgrading to IE 9, or better yet use one of the many other fine browsers out there. Ditto if you’re using an older browser.

Technical Notes

The images have been combined into three sprites. Each cell occupies 106x106 pixels, and the heavy lifting is done by buildings.css, which defines the locations of the tiles for each type of building within the sprite images. You are unlikely to need to modify the CSS, but feel free to take a look. It's moderately complex.

Appendix 4: Licensing

The images

The images used here derive from the Kingmaker Player’s Guide.

This city mapping toolkit uses trademarks and/or copyrights owned by Paizo Publishing, LLC, which are used under Paizo’s Community Use Policy. We are expressly prohibited from charging you to use or access this content. This city mapping toolkit is not published, endorsed, or specifically approved by Paizo Publishing. For more information about Paizo’s Community Use Policy, please visit paizo.com/communityuse. For more information about Paizo Publishing and Paizo products, please visit paizo.com.

The code

jQuery included under the terms of the MIT License.

The HTML, CSS and (very minor) JavaScript that comprise the rest of the toolkit are licensed under the terms of the Creative Commons Attribution-NonCommercial-ShareAlike license, version 3.0.