@OSUblake
Thank you for replying.
I figured it out with the help of your example. Especially the map function.
In action: https://map.polycode.co.nz/map
Here's the code I used. I removed some parts to simplify it. If there's a more efficient/better way I could improve it let me know.
var viewportWidth;
var viewportHeight;
var mapWidth;
var mapHeight;
var miniMapWidth;
var miniMapHeight;
var mapMarkerWidth;
var mapMarkerHeight;
var $viewport;
var $map;
var $draggable;
var $miniMap;
var $mapMarker;
var pos;
$(function()
{
$viewport = $('#viewport');
$map = $('#map');
$draggable = $('#draggable');
$miniMap = $('#miniMap');
$mapMarker = $('#mapMarker');
function loadMap()
{
// Code removed
setMapDimensions();
}
// Loader in front of this
loadMap();
function setMapDimensions()
{
mapWidth = $map.outerWidth();
mapHeight = $map.outerHeight();
initDraggable();
}
function setMiniMapDimensions()
{
miniMapWidth = $miniMap.outerWidth();
miniMapHeight = $miniMap.outerHeight();
$mapMarker.css({
width: ((viewportWidth / mapWidth) * 100)+'%',
height: ((viewportHeight / mapHeight) * 100)+'%',
});
mapMarkerWidth = $mapMarker.outerWidth();
mapMarkerHeight = $mapMarker.outerHeight();
}
function initDraggable()
{
setDraggable();
var start_x = -(mapWidth - viewportWidth) / 2;
var start_y = -(mapHeight - viewportHeight) / 2;
pos = $draggable[0]._gsTransform;
TweenLite.set($draggable, {
x: start_x,
y: start_y,
force3D: true,
transformOrigin: "left top"
});
TweenLite.set($mapMarker, {
x: (miniMapWidth - mapMarkerWidth) / 2,
y: (miniMapHeight - mapMarkerHeight) / 2,
force3D: true,
transformOrigin: "left top"
});
}
function setDraggable()
{
viewportWidth = $viewport.outerWidth();
viewportHeight = $viewport.outerHeight();
Map = new Draggable($draggable, {
type: "x, y",
throwProps: true,
trigger: "#viewport",
bounds:{
top: 0,
left: -(mapWidth-viewportWidth),
width: mapWidth,
height: viewportHeight
},
onDrag: update,
onThrowUpdate: update
});
setMiniMapDimensions();
}
function update()
{
TweenLite.set($mapMarker, {
x: clamp(pos.x, 0, -mapWidth, 0, miniMapWidth),
y: clamp(pos.y, 0, -mapHeight, 0, miniMapHeight),
force3D: true,
transformOrigin: "left top"
});
}
$(window).resize(function(){
setDraggable();
});
});
function clamp(x, a, b, c, d) {
return c + (d - c) * ((x - a) / (b - a)) || 0;
}