Clickable province zones with data on regional/political map, Birthright -- GIS?

[Stuart Miller]

Hi all!

I'm looking for suggestions about how best to create a map with clickable regions that can be presented on a web page. I'd like to bring to life old D&D Birthright maps (and others) by taking their political maps and enabling players to click on a kingdom or province and then have information displayed. That creates some problematic requirements:

1. Editable layers on top of an overland map (which can be, preferably, an imported base image), with definable borders for provinces and a hierarchy of groupings (provinces within a duchy, duchy within an empire, etc). These borders should be easy to change.
2. Interactive -- click on a defined region, pull up information, preferably linked to an external data source (because the data would frequently change).
3. Able to be hosted on a web page so that many people can interact with it.

I'd love to have GIS-like capabilities, but what limited experience I have with GIS softwares seem pretty strictly tied to real-world map data and may not allow much free form editing of polygons or borders. If there is something, please let me know!

I've also considered game engines or map editors, but again, I'm having trouble meeting the requirements above. It seems like Outerra Anteworld was really heading in this direction, but that project appears abandoned.

The nearest I've considered so far is importing the base image of the overland map into Visio, creating layers over it to draw shapes, and planning to create a web drawing that would bring up shape sheets and hyperlinks on clicks. The data can even be connected to external sources, like Excel, Access, SQL, SharePoint. All stuff I'm familiar with from the business world. BUT, I can't seem to figure out how to create a custom stencil with custom shape data that I can easily trace over the provinces and regions. It seems that a custom stencil creates a single shape and if you want to reuse the data ("Province" with its associated statistics and metadata), you have to reuse the same exact shape, and then painstakingly adjust the shape by all the little control points after (as opposed to just tracing lines in the first place). I'd considered also creating a tiny hex grid overlay and grouping clusters of hexes as province and kingdom objects, though I would have to find a way of making the outlines of the groups boldly visible.

If there's a better way to make Visio work, I'd love that. I'm more familiar with it and more sure that it can ultimately handle the web drawing accessibility and data connections that would make it even more useful, but I'm not tied to it necessarily.

A super bonus round for me would be the ability to drop icons for different levels of cities/holdings on the provinces, or army representations, and then easily move the army units across the map like a wargame (Birthright being part war game). That's one reason I was interested in GIS/Google-maps-like approaches. But that's definitely secondary to the primary goals above.

And yes, this is basically creating an interactive game map.

I'm a n00b, having played around with fantasy maps for rpgs for years, but not heavily. I've done many hand drawn and on FractalMapper and such, but have never devoted lots of time to mastering any one software.

Any thoughts or suggestions?

Thanks!

[waldronate]

I believe it may have been mentioned before, but http://365daysmasti.blogspot.com/201...p-creator.html shows this sort of thing just using HTML. It's a bit of a bear to maintain these sorts of things long-term, but that's the price you pay for simplicity.

You can also use one of the many display libraries like leaflet.js to handle the display of your base image and then add clickable areas to the image. Same general issues as straight HTML, but you get the fancy and zoomable slippy map as well. If you want to put in some work, you can adjust the tile sets as you zoom in.

If it were me (and it was, back in the days of the Forgotten Realms Interactive Atlas globe program), I would make an image for the higher level that contained the pretty pictures (perhaps a JPEG) and another image of exactly the same size that contained colors that linked to a description / link file. Then I'd write a little bit of JavaScript (this part's different than what I did way back when) and use the mouse position on the pretty image to read the corresponding pixel in the link image. That color is then used as a lookup and the appropriate action is taken for mouseover and for click. Straightforward to code, fairly easy to use in practice.

[niekell]

Hello Stuart,
Welcome to the Guild!

Ah Birthright... you're in my wheelhouse. I've been running BR campaigns since the setting came out. Through AD&D2E, D&D3.0, D&D3.5, and now PathFinder. It is my setting of choice and everything else pales in comparison for me.

The type of interactive map you are describing is something I've already mentioned in two other threads. I put an example up on my personal webspace, and it's still there (for now). The example is the drill-down image-map variety where you can click on a part of the map and it zooms in to the next level down. The example has 5 levels of zoom, ranging from world view down to building floor plan.
The interesting part for you might be more the "admin" pages I threw up where I have used a jquery library made by someone else (http://iakob.com/canvas-area-draw/demo.html) to outline the clickable areas. This overlays them with colours and allows you to manipulate points on the shape's edge. I think that if it can overlay with one colour (with variable opacity) then it should be possible to do other colours as well and thus you could have countries/duchies each in their own colour.

As for dropping icons on the map for holdings... interesting idea, I guess you might be able to do it with layers but it might be a bit of a pain to line up with the map layer (or not, as the colour overlay layer is lined up somehow already). I'd have taken the less impressive road and made the province/holding information show up in a panel next to the map.

The original thread was here Jeremy here, and the other interactive mapping thread is here interactive maps.
I'm happy to talk about this more, especially if it is Birthright related!
Long live The Gorgon's Alliance!

Best wishes, niekell.

[Stuart Miller]

Thanks both, for the welcome and replies. I came across Leaflet.js earlier today, waldronate, and I will definitely have to investigate more. Little by little, I'm finding the occasion to learn javascript, which I'm sure will give me many options, including connecting to data sources. Currently it's a bit out of my reach to even do the layering and mouseover summons of data, though I think I know enough to poke at that and work it out eventually.

Niekell, glad to find another BR fan! I still drive by the fan site (Birthright.net) every now and then, and have been involved in many PBEM/PBP forum games over the years. I hope to do that again some day, and maybe use this interactive map to facilitate one.

I'll explore those links when I get a chance. As for the icons for holdings, they could be as simple as normal map icons for buildings or cities that are similarly clickable to bring up a little data. Something actually a lot like Gorgon's Alliance. If GA could be easily multiplayer, run on up-to-date systems (I had problems running in even in compatibility mode once you get beyond XP), and be used just as tool alongside a game, and cover all of Cerilia, it would be the solution right there. In a dreamworld, this would be practically a mini-game, supporting the realm-level actions of players while the role-playing and turn resolution happened off the map, and the map was just used for positioning and helping players visualize and track everything. The starting point with clickable regions that brings up province stats really goes a long way and I think should be achievable. I'm not so sure about representing more complex things like the holdings, or player forming of roads, trade routes, or tracking movement of armies (by using banner/token icons or similar).

[niekell]

There is a leaflet.js example of political boundaries here http://bsrp.tkunkel.de/maps/regional/.
(If the political areas aren't showing, click the layers button at the top right and choose "politisch".)
That map is linked from the ProFantasy forums here http://forum.profantasy.com/comments...cussionID=5696 and has documentation on how to convert a Campaign Cartographer map to a leaflet interactive map. Makes sense since it can leverage the vector nature of CC's CAD system.
I guess which way you go depends upon how fluid you want the zoom. Jumping in gradients is easier, but leaflet.js does the smooth zoom very well.

[Stuart Miller]

Interesting.

I came across Hexographer and am considering it, too. Though I'm not sure how the Notes feature works, which is, I think, a popup feature that would achieve showing info. Just not with connection to back end data.

BTW, if you like the Birthright maps, these are some blank ones (so you can write in your own names and stats): http://www.birthright.net/forums/dow...do=file&id=162

[niekell]

Hi Stuart,

Here is a rough example I threw together using HTML with a handful of Jquery libraries and reading a XML data file for realm description.
Is this somewhat crudely representative of what you're trying to do?
(Please note that I did not implement every Cerilian country/county/duchy/principality but I did 5 realms in Anuire and Brechtur. I didn't go down to province level but there is nothing stopping further drill downs from being added. This doesn't include holdings or assets such as roads, castles, etc.)

[Stuart Miller]

I like it. How is the text being retrieved? Is it in a separate file or database? I am thinking more and more, though, that to truly make this helpful for an actual game, it would eventually need to tie in to a data source that can be easily edited and return data for players -- like in turn submission forms.

Also, how easily can borders be changed?

The challenge here is not just a static, clickable map, but making it easy to update and use for a game, which does make this quite a bit more complex an undertaking. I've been doing some research to see what others in the Birthright gaming community have done before. I'll share below some things that I've found, that I thought you might catch your interest.

Birthright.net Forum Posts:
Interactive Map
Downloads section for Maps: http://www.birthright.net/forums/dow...hp?do=cat&id=1

An interactive map someone was trying to build to essentially replace Gorgon's Alliance, the old Sierra game: http://www.deismaar.com/cerilia_map2/Map.html. He had rebuilt much of the functionality, but not released it publicly, because he was still debugging and testing. And then I think it died as he moved on when he realized he needed to abandon Flash and didn't yet have the skills or plan to convert to a replacement.

Managing Tool for Birthright This guy created a game tracker. Would love to integrate something like this into a map, by connecting the data. Track the data with the tool, display on map, allow to drill into data on the map and link back to the tool.

Currently I'm still keeping in the running the idea about Visio overlays onto the continent map, because I know that I can link Visio shape data to an external data source that I am used to working with and that I know can allow players to interact with forms and reports accessing the same data (Excel, Access, SharePoint, SQL). It also presents well in a Visio web page. I'm still stuck with the painful problem right now of possibly needing to rebuild a new shape or stencil for each polygon, or to tug borders of the polygons around if I want to reshape an existing polygon. Still hoping to find a way around that.

If I can figure out how to use your approach and link to external data sources, I think it could well be cleaner than Visio.

[Stuart Miller]

Also these:
Layered map

source data for previous

Blank vector drawing outlines of continent and provinces

It could be really nice to take that blank vector drawing base and layer onto it to recreate the Birthright world map in a different style. Make it really pretty in a medieval or ancient map world style, or one of the other stylized works of art showcased here. Using layers, could still add terrain, political boundaries, cities, rivers, roads, etc.

[niekell]

Hello Stuart,

I like it. How is the text being retrieved?
From the HTML page using a jQuery Ajax "get" call which reads XML.

Is it in a separate file or database?
The data is in a separate file. In this case "data.xml". If you want to view that file you can just replace the html page at the end of the URL (address) with the datafile name and most browsers should show the xml.

I am thinking more and more, though, that to truly make this helpful for an actual game, it would eventually need to tie in to a data source that can be easily edited and return data for players -- like in turn submission forms.
As an expedient example I went for a simple structured external source for the data. XML seemed like the best candidate. I wouldn't use it for the scale you are envisioning where data for whole realms is needed. A database would be best for that, MySQL is free and JQuery can be used to connect to and read from it so that would be my recommendation for a place to start. I didn't mock up an example of that because that involves having a live running mySQL database at an ISP and my webspace is static only at this time.

Also, how easily can borders be changed?
Depends how dynamic you want it to be, I could simply remap borders as needed when they change hands from one regent to another, but that would involve firing up a selection page to outline the new country and then I would have to modify the country which lost the province as well. Although quick to do (less than 5 minutes), this would probably become tedious over time. A better way to do it would be to store the imagemap coords of each province in the "data store" (whatever it is) along with the "owning realm". There would have to be some manipulation (in code) to merge all the provinces' coords into a country before returning the imagemap coords for the whole country to the HTML which would then show the country as a whole rather than a grouping of separate bordered provinces. This should be possible but would require precision defined coords so that there was no province overlap or gaps between provinces.

The challenge here is not just a static, clickable map, but making it easy to update and use for a game, which does make this quite a bit more complex an undertaking.
I realise that is your goal. You said it was to be something like Gorgon's Alliance in the way it handled realm management. I have that game (original box and CD) and have played it a lot (long ago) so I know the extent of what you want. That level of integration and fine detail would basically make this endeavour a whole "web application", not a simple website with some scripts. GA was a retail game... and you're basically looking to recreate ~AND~ extend it... for free. It's an ambitious ask imo.

I've been doing some research to see what others in the Birthright gaming community have done before.
Thanks for the links, I'd seen some of them before from the birthright.net forums which I visit from time to time, but I appreciate the consolided list you provided.

Managing Tool for Birthright This guy created a game tracker. Would love to integrate something like this into a map, by connecting the data. Track the data with the tool, display on map, allow to drill into data on the map and link back to the tool.
Yeah, I get the idea. GA (Gorgon's Alliance) level of detail desired... with more (roads, castles, etc).

It sounds like you might be trying to fit a square block into a round hole by going the Visio route. I assume you are looking into it because you are most familiar with it. Let me just say that although I am very familiar with HTML and HTML forms linked to a database back-end, I know/knew little jquery prior to doing the research for the example I put up with the highlighted map areas. It's hard to learn new technologies, but sometimes it is worth taking the plunge as they're a better fit for your goal.
With Visio, you need a licence from Microsoft to use it right?
Is that really viable for others who want to use the tool?

If I can figure out how to use your approach and link to external data sources, I think it could well be cleaner than Visio.
My example is already linking to an external data file, as mentioned earlier.
However, I would recommend a database... which requires a specific hosting agreement with your ISP for them to make available that technology. I don't have that with my ISP at this time, though it is available if I wanted to pay the extra for it.
If you want to go into detail about the approach I used send me a private message and we'll arrange some other line of communication for that level of detailed back and forth.

It could be really nice to take that blank vector drawing base and layer onto it to recreate the Birthright world map in a different style. Make it really pretty in a medieval or ancient map world style, or one of the other stylized works of art showcased here. Using layers, could still add terrain, political boundaries, cities, rivers, roads, etc.
JQuery:Maphilight is already using multiple layers (in this case they are HTML "canvas"es) to provide the "remain selected" functionality of the area selection. So there is nothing stopping other layers being used for roads, cities, holdings, castles, etc. I have no idea how complex it would be at this time, but I believe it would be possible from what little I learned debugging maphilight; which wouldn't work out of the box when multiple maps were on the same webpage. (Yes I had to debug and fix the JQuery pagelet which called maphilight otherwise only one map at a time would do the highlight. It was a scoping problem in the end which was easily solvable.)

On the blank vector drawing base idea... it is backward to my approach. What I did was take an existing map, it could have been ANY map, and overlay the areas onto it. The areas become the vector outlines with coords. You could switch the underlying map easily, especially if it was the same size as the existing one... by that I mean you could use the campaign-stock Cerilia map to set up all your regions (vector coord sets) and then switch out the map with a more artistically rendered one provided it was the same scale and all the provinces etc lined up still.
I could put a Forgotten Realms map down and define political areas on it and it would work exactly the same way.

I tend to favour making a solution able to support generics so that it isn't locked into one setting... larger target audience that way. Also the user can then load whatever maps they want (which solves licensing issues for this solution) and set up their regions. You could go so far as providing a "pack" for Birthright, or Golarion, or Forgotten Realms, which has all the defaults already set.

As far as I can tell, from the point of view of a web developer with 20+ years experience, it is all possible but would take a significant investment of time and effort (and expertise) to achieve.
It boils down to the fundamental question 'What are you willing to invest to achieve the goal?'.