HTML/CSS Map version 2

[Nitnux]

This is version 2 of the HTML map I created. (The old version had terrain errors and some spelling mistakes so please disregard it.)

This version contains the following features:

- add mouseover notes to the existing Cities
- add Towns and Villages with names and mouseover notes
- add Groups (friendly or enemy) with names and mouseover notes
- add Emissaries (friendly or enemy) with mouseover notes
- add Agents (friendly or enemy) with mouseover notes
- add Unusual Sightings or Artifacts with mouseover notes
- view pre-set Region borders and Race starting positions
*(both of these are very approximate and differ from game to game, but it just helped me when starting to get my head around who was near me at the beginning of my game)
**(please do let me know if these must be corrected in any way)

A lot of the above can be toggled on/off as it gets pretty busy on the map.

To edit the map, open the file in a plain text editor
- use Notepad on Windows, or TextWrangler on Mac
- do NOT use a rich text editor like MS Wordpad, MS Word, OS TextEdit or Open Office. These will alter the code behind the scenes and potentially break the page.

With the file open, scroll down to near the bottom, to where it says <!-- add your game content below here --> several times (which starts at line 2032).
The last 100 lines or so are guidelines and sample content that I've added to show you what to do. You don't need to know HTML or Javascript to add your own map content - just copy from the examples.

N.B. This section of the page is in Javascript so you must insert content correctly, otherwise you'll break the page. If in doubt, make just one entry at a time, save it, and check it in a browser. From experience I can tell you that if you make 100 changes to your code and then it doesn't work, it can sometimes be very confusing working out where the problem is!

If you like the idea of using this map, please let me know if things could be displayed more clearly, or if you tend to need more information visible in a different format. My noobishness in the game may mean I haven't appreciated game features in an intuitive way. A lot of the restrictions are dictated simply by size and room for information though.

I do like the idea of adding a form interface onto the page itself so it can be edited in a browser, rather than text editing. But this would be a massive undertaking so I haven't warmed up to the idea of it just yet.

Again, this definitely works on Mac OS X Chrome, but I can't vouch for other browsers.

[Jumbie]

First off, great work. I can see this being very useful to me.

Off the top of my head I do have some suggestions:

How about a triangle or asterix for villages so we can tell them apart instantly on the map?

Color coding for PCs would also help. Four or five colors should do: Kingdom-owned, neutral, ally-owned, non-ally owned and maybe enemy-owned.

A symbol to show a square is clear of sightings. and a symbol to show square is clear of PCs. On my paper maps, I use a '/' for clear of sightings and a '\' for clear of PC's and they form an X when they're clear of both.

Lastly, any chance of making the sqaures larger? I think most people will probably view the map about 1/4 at a time, so the larger squares would permit less crowding of the symbols.

Once again, thanks for this.

[Jumbie]

BTW, I viewed the map on my 40 inch TV and it looked good, with everything nice and readable even for me with my multiple eye problems.

[Nitnux]

They all sound like excellent suggestions, thanks so much.

I have just started tinkering with size and yes, it does make more sense to have a large map with small icons, and scrolling isn't a big deal. I guess you don't often need to focus on the whole thing at once anyway, so much that scrolling will spoil the experience.

Village names are green, towns are brown, cities are black. But I'll try to distinguish between towns and vills a bit more by symbol.

Good point about the cleared square markings. I've only just realised in my own game that this is tremendously useful.

I'll experiment with PC colour coding - it may not be obvious enough but I'll see. I also think that the same colour differentiation between units would help. Now there's more room per square, I can fit more types in easily enough. My feeling is that 17 colours (15 kingdoms + human + neutral) would be far too messy to read easily, so owned/allied/nonallied/neutral/enemy are definitely good distinctions. Do you reckon Human should be treated as Neutral or as Non-allied?

[Jumbie]

non-allied for humans since for emissary purposes I think they behave as if they have owners, i.e. they are twice as hard to take over as they would be if neutral.

[Cipher]

The existing PowerPoint based maps do a good job with specific colors for kingdoms. Carrying that over would be most helpful.

[Nitnux]

Continuing the PPT colour scheme is a good idea, though I wonder if as well as the 15 + Neutral + ?? there should also be a Human colour...

I will have to tinker further with that level of variety, as it means taking a different direction in the existing functionality. (Yes, I took short cuts to get to this point )

This attachment is a resized version... no new map features yet, just resized. You can copy content from a previous version into the same place on this one, and it should work in the same way.

[Cipher]

I had previously used a light gray for neutral and a dark gray for unknown.
Since only the cities at start are human controlled, I never worried about flagging them.

[Nitnux]

I experimented more with more detailed positioning and things are going well (you will be able to fit 25 separate units or groups into a single grid).

Just taking a look at the ppt colour scheme, and when I open it in OpenOffice, it appears that DA, GI and WI are all white (i.e. colour #FFFFFF). Is that correct or is it a problem with OpenOffice?

Just to confirm, I have extracted the following colour values:
.colorAN{color:#31D6FB;}
.colorBL{color:#000000;}
.colorDA{color:#FFFFFF;}
.colorDE{color:#FF54A5;}
.colorDW{color:#FFA73C;}
.colorEL{color:#00F752;}
.colorGI{color:#FFFFFF;}
.colorGN{color:#FFF957;}
.colorRA{color:#7C41F4;}
.colorRD{color:#FF221B;}
.colorSO{color:#5F96C4;}
.colorTR{color:#E2EBF4;}
.colorUN{color:#00A433;}
.colorWA{color:#AD38CD;}
.colorWI{color:#FFFFFF;}
.colorNE{color:#929292;}
.colorUK{color:#CBCBCB;}

Are these correct or does anyone have a different set of colours?

Thanks

[Cipher]

On the PPT maps, the Giant is white, the DA is the windows theme color in the lower right hand corner (Orange, Accent 6, 50% darker) of the pallette that opens when choosing a fill color.
The WI is Blue, Accent 1, 25% darker (the fourth column, second to last choice)
I know this may not help on a Mac, but it's the only reference I can find...