// Pre-select elements var map = $("#map"), canvas = map.find(".map-canvas"); // Sets canvas to be 100% width and 100% height map.css("width", window.innerWidth); map.css("height", window.innerHeight); // Calculate canvas constraints var maxLeft = map.width() - canvas.width(), maxTop = map.height() - canvas.height(); // Make canvas draggable canvas.draggable({ drag: function(e, ui) { // Check if canvas is within constraints if (ui.position.left > 0) { ui.position.left = 0; } else if (ui.position.left < maxLeft) { ui.position.left = maxLeft; } if (ui.position.top > 0) { ui.position.top = 0; } else if (ui.position.top < maxTop) { ui.position.top = maxTop; } } }); // Jagga $("<div></div>") .addClass("map-marker") .addClass("ork") .appendTo(canvas) .offset(function() { return { left: 1463, top: 784 }; }) .append("<p>Jagga</p>"); // Shaa-dom $("<div></div>") .addClass("map-marker") .addClass("webway") .appendTo(canvas) .offset(function() { return { left: 643, top: 785 }; }) .append("<p>Shaa-dom</p>"); // Telias $("<div></div>") .addClass("map-marker") .addClass("unknown") .appendTo(canvas) .offset(function() { return { left: 145, top: 40 }; }) .append("<p>Telias</p>"); // Deluge $("<div></div>") .addClass("map-marker") .addClass("death") .appendTo(canvas) .offset(function() { return { left: 54, top: 104 }; }) .append("<p>Deluge</p>"); // XD-777 $("<div></div>") .addClass("map-marker") .addClass("other") .appendTo(canvas) .offset(function() { return { left: 150, top: 90 }; }) .append("<p>XD-777</p>"); // Orbiana $("<div></div>") .addClass("map-marker") .addClass("imperial") .appendTo(canvas) .offset(function() { return { left: 200, top: 22 }; }) .append("<p>Orbiana</p>"); // Maesa $("<div></div>") .addClass("map-marker") .addClass("imperial") .appendTo(canvas) .offset(function() { return { left: 235, top: 34 }; }) .append("<p>Maesa</p>"); // KW-9 $("<div></div>") .addClass("map-marker") .addClass("unknown") .appendTo(canvas) .offset(function() { return { left: 98, top: 120 }; }) .append("<p>KW-9</p>"); // Caliban $("<div></div>") .addClass("map-marker") .addClass("imperial") .appendTo(canvas) .offset(function() { return { left: 2424, top: 176 }; }) .append("<p>Caliban</p>"); // Medusa $("<div></div>") .addClass("map-marker") .addClass("imperial") .appendTo(canvas) .offset(function() { return { left: 2420, top: 229 }; }) .append("<p>Medusa</p>"); // Eidolon $("<div></div>") .addClass("map-marker") .addClass("chaos") .appendTo(canvas) .offset(function() { return { left: 2545, top: 288 }; }) .append("<p>Eidolon</p>"); // Belial IV $("<div></div>") .addClass("map-marker") .addClass("chaos") .appendTo(canvas) .offset(function() { return { left: 2683, top: 114 }; }) .append("<p>Belial IV</p>"); // Rubicon Straits $("<div></div>") .addClass("map-marker") .addClass("feature") .appendTo(canvas) .offset(function() { return { left: 2543, top: 108 }; }) .append("<p>Rubicon Straits</p>"); // Warp Storm Germanicus $("<div></div>") .addClass("map-marker") .addClass("feature") .appendTo(canvas) .offset(function() { return { left: 2717, top: 149 }; }) .append("<p>Warp Storm Germanicus</p>"); // Ulthwe Craftworld $("<div></div>") .addClass("map-marker") .addClass("eldar") .appendTo(canvas) .offset(function() { return { left: 2781, top: 180 }; }) .append("<p>Ulthwe Craftworld</p>"); // Altansar Craftworld $("<div></div>") .addClass("map-marker") .addClass("eldar") .appendTo(canvas) .offset(function() { return { left: 2625, top: 172 }; }) .append("<p>Altansar Craftworld</p>"); // Nemesis Tessera $("<div></div>") .addClass("map-marker") .addClass("imperial") .appendTo(canvas) .offset(function() { return { left: 2822, top: 219 }; }) .append("<p>Nemesis Tessera</p>"); // Belis Corona $("<div></div>") .addClass("map-marker") .addClass("imperial") .appendTo(canvas) .offset(function() { return { left: 2843, top: 272 }; }) .append("<p>Belis Corona</p>"); // Cadia $("<div></div>") .addClass("map-marker") .addClass("imperial") .appendTo(canvas) .offset(function() { return { left: 2786, top: 294 }; }) .append("<p>Cadia</p>"); // Agripinaa $("<div></div>") .addClass("map-marker") .addClass("imperial") .appendTo(canvas) .offset(function() { return { left: 2838, top: 332 }; }) .append("<p>Agripinaa</p>"); // Cadian Gate $("<div></div>") .addClass("map-marker") .addClass("feature") .appendTo(canvas) .offset(function() { return { left: 2664, top: 287 }; }) .append("<p>Cadian Gate</p>"); // Warp Storm Hippocrene $("<div></div>") .addClass("map-marker") .addClass("feature") .appendTo(canvas) .offset(function() { return { left: 2631, top: 442 }; }) .append("<p>Warp Storm Hippocrene</p>"); // Scelus $("<div></div>") .addClass("map-marker") .addClass("imperial") .appendTo(canvas) .offset(function() { return { left: 2458, top: 351 }; }) .append("<p>Scelus</p>"); // Chinchare $("<div></div>") .addClass("map-marker") .addClass("other") .appendTo(canvas) .offset(function() { return { left: 2552, top: 408 }; }) .append("<p>Chinchare</p>"); // Sentinel Worlds $("<div></div>") .addClass("map-marker") .addClass("area") .appendTo(canvas) .offset(function() { return { left: 2512, top: 470 }; }) .append("<p>Sentinel Worlds</p>"); // Segmentum Ultima $("<div></div>") .addClass("map-marker") .addClass("segmentum") .appendTo(canvas) .offset(function() { return { left: 1535, top: 1060 }; }) .append("<p>Segmentum Ultima</p>"); // Segmentum Tempestus $("<div></div>") .addClass("map-marker") .addClass("segmentum") .appendTo(canvas) .offset(function() { return { left: 1535, top: 1060 }; }) .append("<p>Segmentum Tempestus</p>"); // Segmentum Obscurus $("<div></div>") .addClass("map-marker") .addClass("segmentum") .appendTo(canvas) .offset(function() { return { left: 600, top: 911 }; }) .append("<p>Segmentum Obscurus</p>"); // Ocularis Terribus $("<div></div>") .addClass("map-marker") .addClass("feature") .appendTo(canvas) .offset(function() { return { left: 550, top: 1125 }; }) .append("<p>Ocularis Terribus</p>"); // Segmentum Pacificus $("<div></div>") .addClass("map-marker") .addClass("segmentum") .appendTo(canvas) .offset(function() { return { left: 965, top: 1402 }; }) .append("<p>Segmentum Pacificus</p>"); // Segmentum Solar $("<div></div>") .addClass("map-marker") .addClass("segmentum") .appendTo(canvas) .offset(function() { return { left: 950, top: 1122 }; }) .append("<p>Segmentum Solar</p>"); // Tau Empire $("<div></div>") .addClass("map-marker") .addClass("area") .appendTo(canvas) .offset(function() { return { left: 2222, top: 743 }; }) .append("<p>Tau Empire</p>");
<div id="map"> <div class="map-canvas"></div> </div>
* { /* to remove the top and left whitespace */ margin: 0; padding: 0; } html, body { /* just to be sure these are full screen*/ width: 100%; height: 100%; } canvas { /* To remove the scrollbars */ display: block; } #map { position: relative; overflow: hidden; } .map-canvas { position: absolute; background: black url(http://jambonium.co.uk/40kmap/images/map_background.png) no-repeat; background-size: 100% 100%; width: 2904px; height: 1687px; } #map .ui-draggable-dragging { cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing; } .map-marker { width: 0px; height: 0px; -moz-border-radius: 2px; border-radius: 3px; overflow: visible; color: #fff; font-size: 85%; } .imperial { background-color: blue; border: 3px solid blue; } .chaos { background-color: red; border: 3px solid red; } .tau { background-color: yellow; border: 3px solid yellow; } .ork { background-color: green; border: 3px solid green; } .eldar { background-color: turquoise; border: 3px solid turquoise; } .darkeldar { background-color: maroon; border: 3px solid maroon; } .exodite { background-color: cyan; border: 3px solid cyan; } .necron { background-color: grey; border: 3px solid grey; } .webway { background-color: pink; border: 3px solid pink; } .dead { background-color: brown; border: 3px solid brown; } .death { background-color: black; border: 3px solid black; } .other { background-color: magenta; border: 3px solid magenta; } .unknown { background-color: white; border: 3px solid white; } .feature { font-size: 115%; font-style: italic; } .area { font-size: 155%; font-weight: bold; font-style: italic; } .segmentum { font-size: 250%; font-weight: bold; } .map-marker p { position: absolute; top: -10px; left: 10px; width: 350px; } .map-marker p span { font-style: italic; }