Google Groups

Dynamic MiniMap Macro

Delyth Angharad Oct 11, 2012 1:24 PM
Posted in group: Tweecode / Twine
I happen to have an awesome boyfriend who made me this MiniMap macro for use in my Work-In-Progress game, you can see it in action (complete with crudely drawn map) at

Here's the deets to put in the header file;

With the other macros:

macros['map'] =
handler: function(place,macroName,params)
var mapX = params[0];
var mapY = params[1];
jQuery("#map img").animate({"left":mapX+"px", "top":mapY+"px"}, "slow");

The CSS (bend it to your will):

#map {
position: absolute;
left: 20px;
top: 20px;
width: 200px;
height: 200px;
overflow: hidden;
#map img {
position: absolute;
left: 0px;
top: 0px;

The HTML (put before storeArea):

<div id="map"><img src="big.png"/></div>

This needs jquery to go with the other scripts (just underneath <title>storytitle</title>; google hosts jquery that you can link to (

<script type="text/javascript" src="//"></script> 


The minimap will always show throughout your whole game. You can position it on the screen with the CSS above. 
To control the minimap location, insert the following at the bottom of each passage:

<<map x-coord y-coord>>

This works on pixel size, and the coordinates also depend on the size of your minimap window. For example, the map I'm using in my story is 1000x1000. My minimap window is 200 x 200. In order to link the absolute center of the map I subtract 100px from each coordinate for <<map -400 -400>> (negative values because the top left corner of the map image is 0,0). 

That's about it. Enjoy :)