Edit in JSFiddle

// 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;
}