Home › Discussions › Campaign Portal Building › Interactive Animated Map - Campaign Portal Building Discussions on Obsidian Portal Community Forums
Interactive Animated Map
What follows is the developmental process for my "interactive map":http://www.obsidianportal.com/campaign/autumn-dragons/wikis/abanasinia-interactive-map/ . If you're only interested in the code, feel free to skip to those responses (the post was too long for this to fit in the initial posting). Cheers!
While shopping for ideas on improvements for my campaign website, I came across Gaaran's "interactive iPhone map":http://www.obsidianportal.com/campaign/melekar-test/wikis/test-location5
I was impressed and, in the highest form of flattery, promptly copied the HTML and CSS coding. While playing around with the code, I decided:
# Not to use the iphone frame - A fabulous idea for a modern game, but mine is fantasy-based.
# To use different icons - Again, I needed something appropriate for fantasy.
# To streamline the interactive features of the map to increase usability - This also stems from not using the iphone frame. Without the context of a touchscreen, users may not understand how to use the map.
I started with the pre-generated maps from the Dragonlance campaign settings and modules. A lot of my media is modified or borrowed from this type of resource. The map itself is black and white ( __cringe__ , a cartographer's nightmare, but oddly appropriate for the fantasy setting). As for the interactive nature of the map, I wanted users to hover over locations, receive a pop-up menu, and link to related pages (similar to Gaaran's design). I started by plotting hover icons over the background map and selecting custom icons. This worked great and was very close to Gaaran's original code; however, the usability was limited to players who already played in the campaign.
To increase the usability, I decided to add a chronological trail (like the Indiana Jones map) to the background image. This would provide a context for the map and help explain why the majority of links were to different Adventure Logs. For example, hovering over an icon and receiving two links to "Session 1" and "Session 9" may infer that these adventure log posts occurred at this location, but it is vague and equally infers that I missed 2 through 8 in my coding.
The easiest solution available was creating an animated image for the background. I prefer using "GIMP":http://www.gimp.org/downloads/ to create animated images (open source appeals to my stinginess). After several hours over the course of several days, I created something "close":http://cdn.obsidianportal.com/assets/213672/Abanasinia_with_tracks.gif to what I wanted. As you can tell, it's a nightmare of dots that hardly reveal the chronological nature I wanted. I fiddled around with z-index layers of individual animated gifs for each leg, but the rectangular nature of links made this nearly impossible. Instead I went back to the animated background for a redesign.
While I was developing the red-dot trail I use now, my wife was reviewing my progress and asked if the icons could bounce up and down as the trail entered each colored icon. I became highly flustered at the amount of effort it would take to implement all of that into one animated image, but a good idea is a good idea so I had to try. The final file size was a staggering 123MB, but GIMP has a great optimization feature that brought it down to the 273kb size it is now.
All I had to do to implement the new file was change the background image and remove the background image for each hover icon. The "final product":http://www.obsidianportal.com/campaign/autumn-dragons/wikis/abanasinia-interactive-map/ was so appealing to me, that I began developing the next interactive map which covers the remaining adventure logs to date.
While shopping for ideas on improvements for my campaign website, I came across Gaaran's "interactive iPhone map":http://www.obsidianportal.com/campaign/melekar-test/wikis/test-location5
I was impressed and, in the highest form of flattery, promptly copied the HTML and CSS coding. While playing around with the code, I decided:
# Not to use the iphone frame - A fabulous idea for a modern game, but mine is fantasy-based.
# To use different icons - Again, I needed something appropriate for fantasy.
# To streamline the interactive features of the map to increase usability - This also stems from not using the iphone frame. Without the context of a touchscreen, users may not understand how to use the map.
I started with the pre-generated maps from the Dragonlance campaign settings and modules. A lot of my media is modified or borrowed from this type of resource. The map itself is black and white ( __cringe__ , a cartographer's nightmare, but oddly appropriate for the fantasy setting). As for the interactive nature of the map, I wanted users to hover over locations, receive a pop-up menu, and link to related pages (similar to Gaaran's design). I started by plotting hover icons over the background map and selecting custom icons. This worked great and was very close to Gaaran's original code; however, the usability was limited to players who already played in the campaign.
To increase the usability, I decided to add a chronological trail (like the Indiana Jones map) to the background image. This would provide a context for the map and help explain why the majority of links were to different Adventure Logs. For example, hovering over an icon and receiving two links to "Session 1" and "Session 9" may infer that these adventure log posts occurred at this location, but it is vague and equally infers that I missed 2 through 8 in my coding.
The easiest solution available was creating an animated image for the background. I prefer using "GIMP":http://www.gimp.org/downloads/ to create animated images (open source appeals to my stinginess). After several hours over the course of several days, I created something "close":http://cdn.obsidianportal.com/assets/213672/Abanasinia_with_tracks.gif to what I wanted. As you can tell, it's a nightmare of dots that hardly reveal the chronological nature I wanted. I fiddled around with z-index layers of individual animated gifs for each leg, but the rectangular nature of links made this nearly impossible. Instead I went back to the animated background for a redesign.
While I was developing the red-dot trail I use now, my wife was reviewing my progress and asked if the icons could bounce up and down as the trail entered each colored icon. I became highly flustered at the amount of effort it would take to implement all of that into one animated image, but a good idea is a good idea so I had to try. The final file size was a staggering 123MB, but GIMP has a great optimization feature that brought it down to the 273kb size it is now.
All I had to do to implement the new file was change the background image and remove the background image for each hover icon. The "final product":http://www.obsidianportal.com/campaign/autumn-dragons/wikis/abanasinia-interactive-map/ was so appealing to me, that I began developing the next interactive map which covers the remaining adventure logs to date.
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
If you're just interested in the code, here it is:
The code required for this interactive map is two-fold, HTML in the page body and your Custom CSS. It can make edits rather burdensome, but the results are satisfying.
h4. HTML
@
SolaceSession 1
Session 9
Rest Area
Beginning of:Session 3
Session 9
End of:Session 2
Session 8
Xak Tsaroth
Session 3
Session 4
Session 5
Session 6
Session 7
Rest Area
Beginning of:Session 8
End of:Session 7
QualinostSession 10
Session 11
@
^The bulk of this code is defining the hover locations for each icon and the content. All of my icons include links to a related session, but a few them also include links to available maps. The "mapZoomed" and "mapZoomedContainer" are a direct copy from Gaaran's code - I kept them to make CSS formatting easier, but feel free to rename them. Also, notice that each popup is split into left and right frames, the custom CSS code handles most of this format so feel free to tinker with it and create something different.
h4. Custom CSS
@ /* Places the map in the correct position - VERY IMPORTANT */
.mapZoomedContainer { /* If you change the name of this div in the HTML code, make sure to change it here as well */
position: relative;
text-align: center;
top: 0px;
left: 0px;
width: 722px;
height: 502px;
}
/* Modifies Horizontal Rule */
.mapZoomedContainer hr {
border-color:#DAA520; /* Only necessary for my campaign website format */
}
/*hides the on hover information*/
.hideMe {
display:none;
}
/* =-=-=-=-=-=-SOLACE ELEMENT BEGIN-=-=-=-=-=-= */
/*the solace icon container*/
.solaceIcon{
background-color:transparent;
width:68px; /* I recommend setting a standard size for your icons to make formatting easier */
height:68px; /* I recommend setting a standard size for your icons to make formatting easier */
background-size:cover;
z-index:5; /* A lot of the z-indexing is left over from Gaaran's original code and my earlier tinkering; however, some z-indexing is necessary to make your layers appear correctly */
position:absolute;
transition: .3s;
-moz-transition: .3s; /* Firefox 4 */
-webkit-transition: .3s; /* Safari and Chrome */
-o-transition: .3s; /* Opera */
}
.mapZoomedContainer .solaceIcon:hover{
position:absolute;
margin-top:5px; /* You will have to modify these margin settings to get the hover frame where you want it. If the frame does not cover the icon, you will get a bouncing hover frame. */
margin-left:-170px; /* You will have to modify these margin settings to get the hover frame where you want it. If the frame does not cover the icon, you will get a bouncing hover frame. */
z-index:20;
font-size:14px;
font-family:"Andalus";
color:#669900;
width:220px; /* These proportions should coincide with the sum of all interior frames (like popUpRight and popUpLeft). If the frame does not cover the icon, you will get a bouncing hover frame. */
height:140px; /* These proportions should coincide with the sum of all interior frames (like popUpRight and popUpLeft). If the frame does not cover the icon, you will get a bouncing hover frame. */
border:2px solid #DAA520;
background:#F3E2A9;
border-radius: 5px;
padding:5px 0 5px 5px;
opacity:.95; /* So the user can still see animations occurring behind the popup frame */
}
/*the right half of the information pop-up*/
.solaceIcon .hideMe .popUpRight {
position:absolute;
right:0px;
top:0px;
width:100px; /* These proportions should coincide with any other interior frame and the exterior frame. */
height:150px; /* These proportions should coincide with any other interior frame and the exterior frame. */
padding-top:0%;
margin:2px 5px 5px 2px;
}
/*the left half of the information pop-up*/
.solaceIcon .hideMe .popUpLeft {
position:absolute;
top:0px;
left:0px;
width:100px; /* These proportions should coincide with any other interior frame and the exterior frame. */
height:150px; /* These proportions should coincide with any other interior frame and the exterior frame. */
padding-top:0%;
margin:2px 2px 5px 5px;
}
/*changes the popup to visible*/
.solaceIcon:hover .hideMe{
display:block;
}
/* =-=-=-=-=-=-SOLACE ELEMENT END-=-=-=-=-=-= */
/* I truncated the remaining elements, they are duplicative and make this post too long.*/
@
^ I posted my comments in the code above.
That's pretty much it. Let me know if you have any questions or issues implementing this code.
Just trying to help out.
Flash
"Heroes Unchained":http://www.obsidianportal.com/campaigns/heroesunchained - _Where Slaves Become Legends_
Heroes Unchained: CotM 2013
I would like to point out that the custom CSS code will need small adjustments for renaming the id. Also, I wouldn't recommend adding too many interactive maps in the same page. The large amount of image data involved (i.e., animated image background, map icons, etc.) can slow down the browser. A common problem I had during development was the browser not displaying the animation. I alleviated the problem by optimizing the animated gif in GIMP and using icon-sized images for map links in the hover frames.
Robert