City Map Toolkit

[Tinalles]

I have created an HTML and CSS based toolkit for making city maps. It uses the building images from the Kingmaker Player's Guide, some basic HTML and some moderately complex CSS. Using it requires minor editing of the HTML. You shouldn't need to touch the CSS.

For an example, check out the Vessilion Commerce District. Move your mouse over a building to see its label. Buildings can be rotated by clicking them; note that 1x2 buildings are free to rotate on top of existing buildings, which causes things not to work.

It works fine in Firefox and Opera. Chrome works, but has problems with cutting off larger buildings if you rotate them after the page has loaded. Safari I have not tested, but it probably has the same behavior as Chrome. IE 8 works mostly, and IE 9 should be able to handle it just fine (though I don't have an IE 9 handy).

To get a copy and for complete documentation on how to use it, go to:

http://atuan.com/city-map-toolkit/

A few buildings were not implemented for lack of suitable images.

Note that I am not GM'ing this campaign, and we've only just finished Part 1. I built this strictly on the information available in the Player's Guide and in the Book of the River Nations Exploration and Kingdom Building Guide. So if there's something important that I'm missing, it's likely because I don't know about it (and no spoilers, pls & thx!).

If you have bug reports, patches, or comments, post them below.

[Lisa Stevens]

Very nice! I may have to play around with this a little later. I LOVE the way the cities look once you have them set up. Kudos!

-Lisa

[Daviot]

Neat! The only nitpick I can find is in the mouseover labels: for 1x2 and 2x2 buildings, the mouseover effects only occur if the mouse is on the originating cell, with nothing happening other cells of a building. But 'tis a minor grievance.

[PJ]

Daviot wrote:

Neat! The only nitpick I can find is in the mouseover labels: for 1x2 and 2x2 buildings, the mouseover effects only occur if the mouse is on the originating cell, with nothing happening other cells of a building. But 'tis a minor grievance.

this actually pretty cool.

[Warwynd]

This is amazing, Tinalles! Not only is the app cool as Hell and very functional, but you have an instruction manual that walks you through it so well that even my HTML illiterate monkey hands can do it. Very cool. Thanks for doing this.

[Squeatus]

Warwynd wrote:

This is amazing, Tinalles! Not only is the app cool as Hell and very functional, but you have an instruction manual that walks you through it so well that even my HTML illiterate monkey hands can do it. Very cool. Thanks for doing this.

Fantastic job.

[Tinalles]

Thanks! Glad you all like it. ^_^

Yeah, the labels only show up when you mouse over the cell of origin. I could probably fix that, but I'd have to think about it. Working with images that span multiple different cells is complicated. It's not something CSS is inherently set up to do.

[Elucidarian]

Very spiffy and useful, to boot. A fine example of the proactive response to "Gee, wouldn't it be nice ..."

[Warwynd]

OK after playing with this extensively, I have noticed one problem. The Garrison seems to not exist in your list of buildings. Every time I try to put it in it just adds a mangled academy instead. Anyway you can walk me through fixing that?

[Tinalles]

There's a simple explanation for that.

I, err, missed that one. >.>

I just went back and added it in. You can get it working by updating. Procedure:

1) Download a fresh copy of the ZIP file
2) Unzip it someplace.
3) Copy all the files from the new ZIP into your existing folder, over-writing the copies that are already there.

You may want to make a backup copy of any maps you've already got first, just in case. Backups Are Good.™

[Bigrin da Troll]

Can you pretty, pretty please add a ruins/rubble picture to your toolkit? My PCs capital just suffered a giant owlbear rampage and I'd like to show them its rubble-strewn path through the city.

[Tinalles]

Well, I'll take a crack at it. I warn you, though, I'm not really a graphics guy -- I do code. The very nice graphics produced by Paizo's artists are the main reason that the end product looks as good as it does.

[Shieldknight]

Love this! Very cool!

If you are taking suggestions...

Would it be possible for you to add buildings? Or is it easy enough a non-coder could do it? I'm using the additional rules from Jon Brazer's Book of the River Kingdoms. Any possibility of adding the additional buildings from there?

Thanks

[Vic Wertz]

Tinalles wrote:

Well, I'll take a crack at it. I warn you, though, I'm not really a graphics guy -- I do code. The very nice graphics produced by Paizo's artists are the main reason that the end product looks as good as it does.

You should be aware that the Community Use Policy does not give you ability to use any and all of our artwork, and that, at the moment, the Policy does *not* include the building images from the Kingmaker Player's Guide. That said, we like what you've done here, so we're in the process of adding them to the Community Use package, but in the future, please be careful about using only images that we've actually allowed you to use.

(Also, to anybody looking in, do *not* assume that "if I do something that's not allowed and they like it, maybe they'll allow it" is a good plan. It's not. Play by the rules.)

[Lev]

Thanks ! Really great and easy to use !
I have done Kelmarane with this...

[BraxtheSage]

Awesome job. really kool!

[bittergeek]

Vic Wertz wrote:

(important Paizo stuff, go back and read it, I snipped for length)

I really expected this sooner - I was traveling when I saw this thread start and emailed the files to myself, expecting them to be gone mere hours later - must have been the Con distracting the Powers That Be. Paizo *has* to protect their stuff, so that they can be mad successful and continue to put out great material. It's great, though, that they are going to make the building images available as part of the Community Use Package, that's just bonus cool of them and building art has been a sticking point for fan-produced Kingmaker material several times before in the past.

Now we just need the Jon Brazer folks to invent art for the new buildings from their publications and we're set.

[Tinalles]

Vic Wertz wrote:

You should be aware that the Community Use Policy does not give you ability to use any and all of our artwork, and that, at the moment, the Policy does *not* include the building images from the Kingmaker Player's Guide. That said, we like what you've done here, so we're in the process of adding them to the Community Use package, but in the future, please be careful about using only images that we've actually allowed you to use.

Oh. Sorry! And thanks for adding them.

For future reference, is there a list or an FAQ someplace that spells out exactly what's covered under Community Use and what's not? I thought I'd checked adequately, but evidently not ...

Shieldknight wrote:

I'm using the additional rules from Jon Brazer's Book of the River Kingdoms. Any possibility of adding the additional buildings from there?

I'm not averse to it, but:

• I don't have a copy of that;
  
• I would need Jon Brazer's permission first;
  
• Do those books have art for their buildings?
  

Since the map toolkit doesn't actually implement any of the game mechanics covered by the OGL, there's not a lot I can do without images of buildings (plus permission to use them, of course).

The RPG Map Symbols set of public-domain vector graphics by Nicubunu is very nice, and I seriously thought about using it to supply some of the buildings that lacked images. But the styles are wildly different. The Paizo art is fairly realistic and executed in top-down perspective, while the Nicubunu set is fairly cartoon-y and done in three quarter perspective. They just don't mix well.

I'm still planning to add some "destroyed" terrain, but it's likely to be fairly basic.

As for the technical difficulty of adding your own buildings, well. The toolkit uses three background sprites, one for each size of building. It's a well-known CSS technique. One of the earliest (and still best, to my mind) write-ups on the topic is CSS Sprites: Image Slicing's Kiss of Death from 2004.

If you can follow that article, you can probably modify the CSS without too much difficulty. 1x1 buildings are straightforward; 2x2 are only slightly harder. Things get tricky when dealing with 1x2 buildings. You'll need a solid grasp of how CSS's specificity logic works to determine which rule applies to a given element. Plus the CSS 3 selector :not().

Anyway, feel free to open up buildings.css and take a peek. If it sends you screaming into the night, well, you'd probably better consider careers that don't involve web development.

[Papa-DRB]

Link on the left side of the message board (as you view this) under "About Paizo" Community Use Policy and on that page, on the right hand side Approved Product List

-- david
Papa.DRB

Tinalles wrote:

Vic Wertz wrote:

You should be aware that the Community Use Policy does not give you ability to use any and all of our artwork, and that, at the moment, the Policy does *not* include the building images from the Kingmaker Player's Guide. That said, we like what you've done here, so we're in the process of adding them to the Community Use package, but in the future, please be careful about using only images that we've actually allowed you to use.

Oh. Sorry! And thanks for adding them.

For future reference, is there a list or an FAQ someplace that spells out exactly what's covered under Community Use and what's not? I thought I'd checked adequately, but evidently not ...

[Tinalles]

Papa-DRB wrote:

Link on the left side of the message board (as you view this) under "About Paizo" Community Use Policy and on that page, on the right hand side Approved Product List

Ah, thank you.

[Warwynd]

Oh... thank you very much. I'm glad that the problem wasn't too difficult to rectify. Very cool project.

[Dale McCoy Jr]

Tinalles wrote:

• I don't have a copy of that;
  
• I would need Jon Brazer's permission first;
  
• Do those books have art for their buildings?
  

In order:

• send me an email
  Spoiler:

  contact AT jonbrazer DOT com
  
  
• For something like this, sure.
  
• Unfortunately, no. We didn't have the art budget nor space for new build artwork. We're hoping that will be different in the future when and if a sequel comes around.
  

[Warwynd]

Is there an easy way to add labels to the main streets? You're instructions for this app were so good that I am sure I could follow your instructions to label the streets, unless it's to tricky.

[Tinalles]

I didn't put in a way to label the streets. But it shouldn't be too hard to add one. Let me think about it for a bit.

[Shieldknight]

This stuff just keeps getting better and better. Thanks for the time and effort you have put into this. Also thanks to Vic and Dale for adding their info. Much appreciated.

Man, I love this company and its fans!

[KaeYoss]

Vic Wertz wrote:

You should be aware that the Community Use Policy does not give you ability to use any and all of our artwork, and that, at the moment, the Policy does *not* include the building images from the Kingmaker Player's Guide.

That's the reason I never shared my exploits with Kingmaker and Maptool. I converted the nice little symbols for buildings, as well as the stuff you put on the stolen lands map, and use that to track the kingdom as well as the cities. Nice and easy, all drag and drop.

But I had to cut the images off the PG and Kingdom creation guide, so I could hardly share them publicly.

[Tinalles]

Okay, we's gots street labels, yuz indeed. I puts me a couple in de exemple city, I did.

Updating will be slightly more complex this time. You may want to make a backup copy of any maps you've already got first, just in case. Backups Are Good.™

Procedure:

== Step 1: Getting the New Code

1) Download a fresh copy of the ZIP file.
2) Unzip it someplace.
3) Copy all the files from the new ZIP into your existing folder, over-writing the copies that are already there.

== Step 2: Retrofitting Existing Maps

1) Open your city file in a text editor.

2) Replace the <body> with this:

<body class="prefer-building-labels">

3) Add the following code in between the borders and before the buildings:

<div class="street horizontal north west"><span></span></div>
<div class="street horizontal north central"><span></span></div>
<div class="street horizontal north east"><span></span></div>

<div class="street horizontal south west"><span></span></div>
<div class="street horizontal south central"><span></span></div>
<div class="street horizontal south east"><span></span></div>

<div class="street vertical north west"><span></span></div>
<div class="street vertical central west"><span></span></div>
<div class="street vertical south west"><span></span></div>

<div class="street vertical north east"><span></span></div>
<div class="street vertical central east"><span></span></div>
<div class="street vertical south east"><span></span></div>

That should do it.

The procedures for adding street labels are documented in the index.html file (look for the new section "Street Labels"). In brief, stick the name for the street inside the SPAN for that street. Remove the "prefer-building-labels" class from the body if you want to guarantee that the street names will be visible in printouts.

On a completely unrelated note, if Paizo were ever to produce Maptool campaign files for their adventure paths, I would jump at it. Like a shot.

[Alexander Kilcoyne]

What an awesome tool, good job and thankyou!

Question 1- Is there any way to turn all labels on (so all the building names are visible at once).

Question 2- Any word on the rubble/destroyed/damaged buildings? This would be awesome.

Question 3- I have made my PC's city by using the toolkit and I can view it using firefox from my desktop. What would be the best place to share i with my players? I don't particularily want to print screen it as I want the labels to be viewable, and I don't have my own website.

[Bigrin da Troll]

If you open your city in a web browser and do a 'Save As' and choose 'Webpage, complete' you should get all the images/files/CSS necessary to recreate the page saved in a single spot. You can then zip the folder (or not, your choice) and email it to your players. It should open automatically in their chosen web browser when they double-click it.

As an added bonus, this method should work on Windows, Mac, & Linux.

[Tinalles]

Alexander Kilcoyne wrote:

Question 1- Is there any way to turn all labels on (so all the building names are visible at once).

There are two ways. The first and easiest is to print it out; all labels should be visible in the print-out.

To get the same effect in the digital copy, find this line in the HEAD of the document:

<link rel="stylesheet" href="building-labels-print.css" type="text/css" media="print" />

Replace media="print" with media="all". Ordinarily this style sheet only applies when you print; changing it to "all" means it'll apply that code on-screen as well.

Alexander Kilcoyne wrote:

Question 2- Any word on the rubble/destroyed/damaged buildings? This would be awesome.

Still working on that one.

Alexander Kilcoyne wrote:

Question 3- I have made my PC's city by using the toolkit and I can view it using firefox from my desktop. What would be the best place to share i with my players? I don't particularily want to print screen it as I want the labels to be viewable, and I don't have my own website.

Bigrin's method (save complete web page) should work. Alternatively, you could just zip up the whole directory and send it to them that way.

[Warwynd]

All very cool stuff. Thanks again for this tool. It is amazing. I'm now in the process of making all the cities in our campaign for the other players to have access to.

[Simon Savisaar]

This is great stuff! One question: Is it just me, or do the water borders look purple?

[Vic Wertz]

Papa-DRB wrote:

Link on the left side of the message board (as you view this) under "About Paizo" Community Use Policy and on that page, on the right hand side Approved Product List

-- david
Papa.DRB

Tinalles wrote:

Vic Wertz wrote:

You should be aware that the Community Use Policy does not give you ability to use any and all of our artwork, and that, at the moment, the Policy does *not* include the building images from the Kingmaker Player's Guide. That said, we like what you've done here, so we're in the process of adding them to the Community Use package, but in the future, please be careful about using only images that we've actually allowed you to use.

Oh. Sorry! And thanks for adding them.

For future reference, is there a list or an FAQ someplace that spells out exactly what's covered under Community Use and what's not? I thought I'd checked adequately, but evidently not ...

That list is not the right place to look... as the header of that list says, "As long as you comply with the Community Use Policy, you may descriptively reference trademarks, proper names (characters, deities, artifacts, places, etc.), locations and characters from products listed in Section 1 of this list. You may use the cover images, as displayed on paizo.com, from products listed in Section 1 or Section 2." You may not just use any artwork from those products.

For art use, you need to look to the Community Use Policy itself, under the Permissions section.

[Vic Wertz]

Vic Wertz wrote:

Tinalles wrote:

Well, I'll take a crack at it. I warn you, though, I'm not really a graphics guy -- I do code. The very nice graphics produced by Paizo's artists are the main reason that the end product looks as good as it does.

You should be aware that the Community Use Policy does not give you ability to use any and all of our artwork, and that, at the moment, the Policy does *not* include the building images from the Kingmaker Player's Guide. That said, we like what you've done here, so we're in the process of adding them to the Community Use package, but in the future, please be careful about using only images that we've actually allowed you to use.

(Also, to anybody looking in, do *not* assume that "if I do something that's not allowed and they like it, maybe they'll allow it" is a good plan. It's not. Play by the rules.)

So... it turns out I was wrong. We had already added the building images as part of the Kingdom Record Sheets PDF contained in the Community Use Package: Pathfinder Roleplaying Game Record Sheets at the end of March.

So, um... excellent use of the Community Use Package, Tinalles!

[Jeremiziah]

Alexander Kilcoyne wrote:

Question 3- I have made my PC's city by using the toolkit and I can view it using firefox from my desktop. What would be the best place to share i with my players? I don't particularily want to print screen it as I want the labels to be viewable, and I don't have my own website.

I do. Email me what you have and I'll post it, send you a link, and update it as you need me to. If you want.

[PJ]

Shieldknight wrote:

This stuff just keeps getting better and better. Thanks for the time and effort you have put into this. Also thanks to Vic and Dale for adding their info. Much appreciated.

Man, I love this company and its fans!

Ditto!! +!

[Adam Ormond]

This is just awesome! I'm definitely going to be using this. Thanks!

[Warwynd]

My Character is the King of our Pathfinder Kingmaker group. And I am diligently making all the maps of our cities. Is it within all the rules of fair use and so on to post the finished cities in a thread on here and see what other players have come up with and so on. Basically what I am asking is if it violates IP rights and such to post to the message boards. I want to get an official response before posting so I don't have to remove it. Not sure the legalese involved.

[Leonal]

Warwynd wrote:

My Character is the King of our Pathfinder Kingmaker group. And I am diligently making all the maps of our cities. Is it within all the rules of fair use and so on to post the finished cities in a thread on here and see what other players have come up with and so on. Basically what I am asking is if it violates IP rights and such to post to the message boards. I want to get an official response before posting so I don't have to remove it. Not sure the legalese involved.

Since the City buildings are now part of the Community Use Policy you can post the maps, but you should include the required CUP text.

[LeleyX]

This is just awesome, I've just set up my player's city, can hardly wait to show them on Sunday...

Thank you very much,Tinalles!!

[Vic Wertz]

Leonal wrote:

Warwynd wrote:

My Character is the King of our Pathfinder Kingmaker group. And I am diligently making all the maps of our cities. Is it within all the rules of fair use and so on to post the finished cities in a thread on here and see what other players have come up with and so on. Basically what I am asking is if it violates IP rights and such to post to the message boards. I want to get an official response before posting so I don't have to remove it. Not sure the legalese involved.

Since the City buildings are now part of the Community Use Policy you can post the maps, but you should include the required CUP text.

Yep.

[Warwynd]

Leonal wrote:

Warwynd wrote:

My Character is the King of our Pathfinder Kingmaker group. And I am diligently making all the maps of our cities. Is it within all the rules of fair use and so on to post the finished cities in a thread on here and see what other players have come up with and so on. Basically what I am asking is if it violates IP rights and such to post to the message boards. I want to get an official response before posting so I don't have to remove it. Not sure the legalese involved.

Since the City buildings are now part of the Community Use Policy you can post the maps, but you should include the required CUP text.

Cool. Thank you. I'll set about doing that then... :)

[Old Guy GM]

Is there an issue with the town hall? IT seems to come across as 2 separate building halves. Am I missing something?

[Wildhunt]

I am a late comer to this thread and only discovered it this morning. But it is never to late to give a massive thanks to Tinalles for this fantastic tool.

Now, if I could work out how to save it as a flat image (.jpg) so i could upload to my campaign page, I would be done 100%

Thanks again mate, great job.

[DM_aka_Dudemeister]

Wildhunt wrote:

I am a late comer to this thread and only discovered it this morning. But it is never to late to give a massive thanks to Tinalles for this fantastic tool.

Now, if I could work out how to save it as a flat image (.jpg) so i could upload to my campaign page, I would be done 100%

Thanks again mate, great job.

Screenshot (Ctrl + Print Scree)

Open your favorite image editor, Ctrl + V.

Save As: .jpeg.

TADA!

[Old Guy GM]

Tinalles,

This is a great tool, I'm using for my Kingmaker Campaign, and my players love it!

One issue I've found: I've tried messing with the Town Hall since my last post, and it seems that no matter what I do, the image comes across as the the 2 left halves of the Academy. I've noticed this on your example maps as well. I've been wondering if anyone else has seen this, or is it something on my side? Any thoughts?

Edited: Now the town hall in your examples look fine, I just checked to see if I was still having the problem. It's restricted to my maps. <Sigh>

Edited (again): I'm a moron. Its "town-hall" not "town hall". NO SPACES!!

Thanks again Tinalles for the great work!

[Hawk Kriegsman]

Sorry to be so late to the party.

This is an excellent tool. Well done.

Does any one know how to rotate the text on the vertical streets so that the show on the street?

It appears possible to rotate text based on my search of the internet, but my skill is limited to the city map toolkit.

Any help would be greatly appreciatd.

Thanx!

Hawk

[M P 433]

Been using this for the last month, awesome stuff! A little editing of the screen capture with a paint program and voila, a handout and graphic of the group's village.

[DM_Kumo Gekkou]

I've used this program for some time and had no problems. Now suddenly when I try to print my districts out the boarders with names do not appear on the printouts. I have everything keyed correctly and they used to work as typed but when firefox updated this stopped working. None of the other programs seem to work either (tried chrome and IE).

[Caraldur]

How difficult would it be to add a link at the borders to load the connecting district?