mirror of
https://github.com/Shadowss/TravianZ.git
synced 2026-06-28 08:34:33 +00:00
Update map.tpl
Updated map UI, allows to scroll in, scroll out, move around map and click on user to open either village or his profile.
This commit is contained in:
lietuvis10
+410
-116
@@ -10,8 +10,10 @@
|
||||
## ##
|
||||
#################################################################################
|
||||
|
||||
// ----------------- PHP (logic unchanged, except $pixelDiv = 255) -----------------
|
||||
$check1 = $check2 = $check3 = "";
|
||||
$includeSize = true;
|
||||
$criteria = "";
|
||||
|
||||
if (isset($_POST['show1']) || isset($_POST['show2']) || isset($_POST['show3'])) {
|
||||
$check1 = isset($_POST['show1']) ? "checked " : "";
|
||||
@@ -44,127 +46,419 @@ if (isset($_POST['show1']) || isset($_POST['show2']) || isset($_POST['show3']))
|
||||
}
|
||||
}
|
||||
if ($check1 == "" && $check2 == "" && $check3 == "") $criteria = "";
|
||||
|
||||
?>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title><?php echo SERVER_NAME; ?> Map</title>
|
||||
<link rel="stylesheet" href="../img/admin/map.css" type="text/css" media="all">
|
||||
<div id="start">
|
||||
|
||||
<div class="clear">
|
||||
<h2 class="left"><?php echo SERVER_NAME;?> Map!</h2>
|
||||
</div>
|
||||
<p>This is the map of <?php echo SERVER_NAME;?>. Search and find players.</p>
|
||||
<h1>Show Option</h1>
|
||||
<form id="show" name="show" action="admin.php?p=map" method="POST">
|
||||
<table width="70%">
|
||||
<tr><td>
|
||||
<input id="show1" name="show1" type="checkbox" <?php echo $check1;?>value="1">Players
|
||||
</td>
|
||||
<td>
|
||||
<input id="show2" name="show2" type="checkbox" <?php echo $check2;?>value="2"><?php echo TRIBE5; ?>
|
||||
</td>
|
||||
<td>
|
||||
<input id="show3" name="show3" type="checkbox" <?php echo $check3;?>value="2">Artifacts
|
||||
</td>
|
||||
<td>
|
||||
<input id="btnshow" type="button" value="Show" style="font-size:9px" onclick=submit()>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
<style>
|
||||
:root { --map-width:510px; --map-height:510px; }
|
||||
|
||||
<div id="kaart">
|
||||
/* Container */
|
||||
#map {
|
||||
width: 510px; height: 510px; position: relative; overflow: hidden;
|
||||
border: 1px solid #333; background: #f3f3f3;
|
||||
}
|
||||
#map.grab { cursor: grab; } #map.grabbing { cursor: grabbing; }
|
||||
|
||||
<div id="map" title="">
|
||||
/* World layer that we translate/scale */
|
||||
#map_bg {
|
||||
position:absolute; inset:0; width:var(--map-width); height:var(--map-height);
|
||||
transform-origin:0 0; will-change:transform; transition: transform 80ms ease;
|
||||
--zoom:1;
|
||||
}
|
||||
|
||||
<div class="zoomlevels">
|
||||
<span id="zl">-<?php echo WORLD_MAX;?></span>
|
||||
<span id="zr"><?php echo WORLD_MAX;?></span>
|
||||
<span id="zb"><?php echo WORLD_MAX;?></span>
|
||||
<span id="zo">-<?php echo WORLD_MAX;?></span>
|
||||
<span id="zc">(0,0)</span>
|
||||
<div id="lijn_hor"></div>
|
||||
<div id="lijn_ver"></div>
|
||||
</div>
|
||||
/* CRISP GRID (SVG lines) */
|
||||
#gridSvg { position:absolute; inset:0; pointer-events:none; }
|
||||
#gridSvg line { vector-effect: non-scaling-stroke; shape-rendering: crispEdges; }
|
||||
#gridSvg .minor { stroke: rgba(0,0,0,0.12); stroke-width: 1; }
|
||||
#gridSvg .major { stroke: rgba(0,0,0,0.25); stroke-width: 1; }
|
||||
|
||||
<div style="top: 0px; left: 0px;" id="map_bg">
|
||||
<?php
|
||||
if($criteria != ""){
|
||||
$artifactsEffect = ['-', VILLAGE_EFFECT, ACCOUNT_EFFECT, UNIQUE_EFFECT];
|
||||
$array_tribe = ['-', TRIBE1, TRIBE2, TRIBE3, TRIBE4, TRIBE5, TRIBE6];
|
||||
$q = "SELECT v.wref, v.owner, v.name, v.capital, v.pop, u.username, u.tribe, u.access, w.x, w.y".($includeSize ? ", a.size" : "")." FROM ".TB_PREFIX."vdata AS v LEFT JOIN ".TB_PREFIX."users AS u ON v.owner = u.id LEFT JOIN ".TB_PREFIX."wdata AS w ON v.wref = w.id ".$criteria;
|
||||
$player_info = $database->query_return($q);
|
||||
|
||||
foreach($player_info as $p_array) {
|
||||
$p_name = htmlspecialchars(mysqli_escape_string($database->dblink, $p_array['username']));
|
||||
$p_village = htmlspecialchars(mysqli_escape_string($database->dblink, $p_array['name']));
|
||||
$p_coor = "(".$p_array['x']."|".$p_array['y'].")";
|
||||
$p_pop = $p_array['pop'];
|
||||
$p_tribe = $array_tribe[$p_array['tribe']];
|
||||
|
||||
$p_info ="<a href=\"?p=village&did=".$p_array['wref']."\" target=\"_blank\"><img src=\"../img/admin/map_".(isset($p_array['size']) ? "1".$p_array['size'] : ($p_array['access'] != ADMIN ? $p_array['tribe'] : 0)).".gif\" border=\"0\" onmouseout=\"med_closeDescription()\" onmousemove=\"med_mouseMoveHandler(arguments[0],'<ul class=\'p_info\'><li>Player name: <b>$p_name</b></li><li>Village name : <b>$p_village</b></li><li>Coordinate: <b>$p_coor</b></li><li>Population: <b>$p_pop</b></li><li>Tribe: <b>$p_tribe</b></li>".($check3 != "" && isset($p_array['size']) ? "<li>Artifact effect: <b>".$artifactsEffect[$p_array['size']]."</b></li>" : "")."</ul>')\"></a>";
|
||||
|
||||
//245px = 0
|
||||
$pixelDiv = 245;
|
||||
$xdiv = $pixelDiv / WORLD_MAX;
|
||||
if($p_array['x'] <= 0) $p_x = $pixelDiv - intval(abs($p_array['x']) * $xdiv); //-x
|
||||
elseif($p_array['x'] >= 0) $p_x = $pixelDiv + intval(abs($p_array['x']) * $xdiv); //+x
|
||||
|
||||
if($p_array['y'] <= 0) $p_y = $pixelDiv + intval(abs($p_array['y']) * $xdiv); //-y
|
||||
elseif($p_array['y'] >= 0) $p_y = $pixelDiv - intval(abs($p_array['y']) * $xdiv); //+y
|
||||
|
||||
echo '<div style="left:'.$p_x.'px; top:'.$p_y.'px; position:absolute">'.$p_info.'</div>';
|
||||
}
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="legenda">
|
||||
<div class="content">
|
||||
<h3>Legend</h3>
|
||||
<div id="items">
|
||||
<div class="first"></div>
|
||||
<table>
|
||||
<tr>
|
||||
<td><img src="../img/admin/map_1.gif" height="11" width="11"></td><td class="show"><?php echo TRIBE1;?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="../img/admin/map_2.gif" height="11" width="11"></td><td class="show"><?php echo TRIBE2;?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="../img/admin/map_3.gif" height="11" width="11"></td><td class="show"><?php echo TRIBE3;?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="../img/admin/map_5.gif" height="11" width="11"></td><td class="show"><?php echo TRIBE5;?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="../img/admin/map_0.gif" height="11" width="11"></td><td class="show">Multihunters</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
/* Markers centered on coords; keep constant size visually */
|
||||
.marker { position:absolute; transform: translate(-50%,-50%); }
|
||||
#map_bg .pin { transform-origin:center; transform: scale(calc(1 / var(--zoom))); cursor:pointer; }
|
||||
|
||||
<div id="legenda">
|
||||
<div class="content">
|
||||
<h3>Artifacts Legend</h3>
|
||||
<div id="items">
|
||||
<div class="first"></div>
|
||||
<table>
|
||||
<tr>
|
||||
<td><img src="../img/admin/map_11.gif" height="11" width="11"></td><td class="show"><?php echo VILLAGE_EFFECT;?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="../img/admin/map_12.gif" height="11" width="11"></td><td class="show"><?php echo ACCOUNT_EFFECT;?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="../img/admin/map_13.gif" height="11" width="11"></td><td class="show"><?php echo UNIQUE_EFFECT;?></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
/* Zoom controls */
|
||||
.zoom-controls {
|
||||
position:absolute; top:8px; right:8px; display:flex; gap:6px; align-items:center;
|
||||
z-index:1000; background:rgba(255,255,255,.9); padding:6px 8px; border-radius:8px;
|
||||
box-shadow:0 2px 6px rgba(0,0,0,.15); user-select:none;
|
||||
}
|
||||
.zoom-controls button { font-size:12px; padding:6px 10px; border-radius:6px; border:1px solid #ccc; background:#f7f7f7; cursor:pointer; }
|
||||
.zoom-controls span { min-width:56px; text-align:center; font:12px system-ui,Arial; }
|
||||
|
||||
/* Axis labels & crosshair */
|
||||
.zoomlevels span { position:absolute; font:12px Arial; color:#000; }
|
||||
#zl { left:2px; top:50%; transform:translateY(-50%); }
|
||||
#zr { right:2px; top:50%; transform:translateY(-50%); }
|
||||
#zo { right:50%; top:2px; transform:translateX(50%); }
|
||||
#zb { right:50%; bottom:2px; transform:translateX(50%); }
|
||||
#zc { left:50%; top:50%; transform:translate(-50%,-50%); background:rgba(255,255,255,.85); padding:2px 4px; border-radius:4px; }
|
||||
#lijn_hor,#lijn_ver { position:absolute; background:#666; opacity:.5; }
|
||||
#lijn_hor { left:0; right:0; top:50%; height:1px; }
|
||||
#lijn_ver { top:0; bottom:0; left:50%; width:1px; }
|
||||
|
||||
/* Ensure tooltip list looks same for hover & sticky */
|
||||
.p_info { list-style:none; margin:0; padding:0; }
|
||||
.p_info li { margin:2px 0; }
|
||||
|
||||
/* Buttons inside tooltip */
|
||||
.p_actions { margin-top:6px; display:flex; gap:6px; }
|
||||
.p_btn {
|
||||
display:inline-block; font:12px/1 Arial; padding:4px 8px;
|
||||
border:1px solid #bbb; border-radius:6px; background:#fff; color:#2a2a2a; text-decoration:none;
|
||||
}
|
||||
.p_btn:hover { background:#f2f2f2; }
|
||||
|
||||
/* Sticky tooltip (same style family as your hover) */
|
||||
#tipBackdrop { position:absolute; inset:0; display:none; z-index:1099; background:transparent; }
|
||||
#stickyTip {
|
||||
position:absolute; z-index:1100; display:none; max-width:320px;
|
||||
background:#fff; border:1px solid #aaa; border-radius:8px;
|
||||
box-shadow:0 8px 24px rgba(0,0,0,.25); padding:8px 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="start">
|
||||
<div class="clear"><h2 class="left"><?php echo SERVER_NAME;?> Map!</h2></div>
|
||||
<p>This is the map of <?php echo SERVER_NAME;?>. Search and find players.</p>
|
||||
|
||||
<h1>Show Option</h1>
|
||||
<form id="show" name="show" action="admin.php?p=map" method="POST">
|
||||
<table width="70%"><tr>
|
||||
<td><input id="show1" name="show1" type="checkbox" <?php echo $check1;?> value="1">Players</td>
|
||||
<td><input id="show2" name="show2" type="checkbox" <?php echo $check2;?> value="2"><?php echo TRIBE5; ?></td>
|
||||
<td><input id="show3" name="show3" type="checkbox" <?php echo $check3;?> value="2">Artifacts</td>
|
||||
<td><input id="btnshow" type="submit" value="Show" style="font-size:9px"></td>
|
||||
</tr></table>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="kaart">
|
||||
<div id="map" class="grab" title="">
|
||||
<!-- Zoom UI -->
|
||||
<div class="zoom-controls">
|
||||
<button type="button" id="zoomOut">−</button>
|
||||
<span id="zoomLabel">100%</span>
|
||||
<button type="button" id="zoomIn">+</button>
|
||||
<button type="button" id="zoomReset">Reset</button>
|
||||
</div>
|
||||
|
||||
<div class="zoomlevels">
|
||||
<span id="zl">-<?php echo WORLD_MAX;?></span>
|
||||
<span id="zr"><?php echo WORLD_MAX;?></span>
|
||||
<span id="zb"><?php echo WORLD_MAX;?></span>
|
||||
<span id="zo">-<?php echo WORLD_MAX;?></span>
|
||||
<span id="zc">(0,0)</span>
|
||||
<div id="lijn_hor"></div>
|
||||
<div id="lijn_ver"></div>
|
||||
</div>
|
||||
|
||||
<!-- World layer -->
|
||||
<div id="map_bg">
|
||||
<!-- Grid -->
|
||||
<svg id="gridSvg" width="510" height="510" aria-hidden="true"></svg>
|
||||
|
||||
<?php
|
||||
if ($criteria != "") {
|
||||
$artifactsEffect = ['-', VILLAGE_EFFECT, ACCOUNT_EFFECT, UNIQUE_EFFECT];
|
||||
$array_tribe = ['-', TRIBE1, TRIBE2, TRIBE3, TRIBE4, TRIBE5, TRIBE6];
|
||||
|
||||
$q = "SELECT v.wref, v.owner, v.name, v.capital, v.pop, u.username, u.tribe, u.access, w.x, w.y"
|
||||
. ($includeSize ? ", a.size" : "")
|
||||
. " FROM ".TB_PREFIX."vdata AS v"
|
||||
. " LEFT JOIN ".TB_PREFIX."users AS u ON v.owner = u.id"
|
||||
. " LEFT JOIN ".TB_PREFIX."wdata AS w ON v.wref = w.id "
|
||||
. $criteria;
|
||||
|
||||
$player_info = $database->query_return($q);
|
||||
|
||||
foreach ($player_info as $p_array) {
|
||||
$p_name = htmlspecialchars($p_array['username'], ENT_QUOTES);
|
||||
$p_village= htmlspecialchars($p_array['name'], ENT_QUOTES);
|
||||
$p_pop = (int)$p_array['pop'];
|
||||
$p_tribe = $array_tribe[$p_array['tribe']];
|
||||
$did = (int)$p_array['wref'];
|
||||
$uid = (int)$p_array['owner'];
|
||||
$x = (int)$p_array['x'];
|
||||
$y = (int)$p_array['y'];
|
||||
|
||||
$imgName = "../img/admin/map_".(isset($p_array['size']) ? "1".$p_array['size'] : ($p_array['access'] != ADMIN ? $p_array['tribe'] : 0)).".gif";
|
||||
|
||||
// world to pixels (510x510 world; center 255,255)
|
||||
$pixelDiv = 255;
|
||||
$xdiv = $pixelDiv / WORLD_MAX;
|
||||
$p_x = $pixelDiv + ($x * $xdiv);
|
||||
$p_y = $pixelDiv - ($y * $xdiv);
|
||||
|
||||
// Tooltip HTML (shared by hover & sticky)
|
||||
$tooltip = "<ul class='p_info'>";
|
||||
$tooltip .= "<li>Player name: <b>{$p_name}</b></li>";
|
||||
$tooltip .= "<li>Village name : <b>{$p_village}</b></li>";
|
||||
$tooltip .= "<li>Coordinate: <b>({$x}|{$y})</b></li>";
|
||||
$tooltip .= "<li>Population: <b>{$p_pop}</b></li>";
|
||||
$tooltip .= "<li>Tribe: <b>{$p_tribe}</b></li>";
|
||||
if ($check3 != "" && isset($p_array['size'])) {
|
||||
$tooltip .= "<li>Artifact effect: <b>".$artifactsEffect[$p_array['size']]."</b></li>";
|
||||
}
|
||||
$tooltip .= "</ul>";
|
||||
$tooltip .= "<div class='p_actions'>"
|
||||
. "<a class='p_btn' href='?p=village&did={$did}' target='_blank' rel='noopener'>Open village</a>"
|
||||
. "<a class='p_btn' href='?p=player&uid={$uid}' target='_blank' rel='noopener'>Open profile</a>"
|
||||
. "</div>";
|
||||
|
||||
// JS string version for hover (escape quotes and backslashes)
|
||||
$tooltipHover = str_replace(["\\", "'"], ["\\\\", "\\'"], $tooltip);
|
||||
// Attribute version for sticky (HTML-encode quotes)
|
||||
$tooltipAttr = htmlspecialchars($tooltip, ENT_QUOTES);
|
||||
|
||||
echo '<div class="marker" style="left:'.$p_x.'px; top:'.$p_y.'px;" data-tip="'.$tooltipAttr.'">'
|
||||
. '<img class="pin" src="'.$imgName.'" border="0" '
|
||||
. ' onmouseout="med_closeDescription()" '
|
||||
. " onmousemove=\"med_mouseMoveHandler(arguments[0], '".$tooltipHover."')\" "
|
||||
. '>'
|
||||
. '</div>';
|
||||
}
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
||||
<!-- Sticky tooltip containers -->
|
||||
<div id="tipBackdrop"></div>
|
||||
<div id="stickyTip"></div>
|
||||
</div>
|
||||
|
||||
<div id="legenda">
|
||||
<div class="content">
|
||||
<h3>Legend</h3>
|
||||
<div id="items">
|
||||
<div class="first"></div>
|
||||
<table>
|
||||
<tr><td><img src="../img/admin/map_1.gif" height="11" width="11"></td><td class="show"><?php echo TRIBE1;?></td></tr>
|
||||
<tr><td><img src="../img/admin/map_2.gif" height="11" width="11"></td><td class="show"><?php echo TRIBE2;?></td></tr>
|
||||
<tr><td><img src="../img/admin/map_3.gif" height="11" width="11"></td><td class="show"><?php echo TRIBE3;?></td></tr>
|
||||
<tr><td><img src="../img/admin/map_5.gif" height="11" width="11"></td><td class="show"><?php echo TRIBE5;?></td></tr>
|
||||
<tr><td><img src="../img/admin/map_0.gif" height="11" width="11"></td><td class="show">Multihunters</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="legenda">
|
||||
<div class="content">
|
||||
<h3>Artifacts Legend</h3>
|
||||
<div id="items">
|
||||
<div class="first"></div>
|
||||
<table>
|
||||
<tr><td><img src="../img/admin/map_11.gif" height="11" width="11"></td><td class="show"><?php echo VILLAGE_EFFECT;?></td></tr>
|
||||
<tr><td><img src="../img/admin/map_12.gif" height="11" width="11"></td><td class="show"><?php echo ACCOUNT_EFFECT;?></td></tr>
|
||||
<tr><td><img src="../img/admin/map_13.gif" height="11" width="11"></td><td class="show"><?php echo UNIQUE_EFFECT;?></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===================== JS: crisp SVG grid + clamped pan + cursor zoom + sticky tooltip ===================== -->
|
||||
<script>
|
||||
(function () {
|
||||
const map = document.getElementById('map');
|
||||
const layer = document.getElementById('map_bg');
|
||||
const grid = document.getElementById('gridSvg');
|
||||
|
||||
const zl = document.getElementById('zl');
|
||||
const zr = document.getElementById('zr');
|
||||
const zo = document.getElementById('zo');
|
||||
const zb = document.getElementById('zb');
|
||||
const zc = document.getElementById('zc');
|
||||
|
||||
const zoomInBtn = document.getElementById('zoomIn');
|
||||
const zoomOutBtn = document.getElementById('zoomOut');
|
||||
const zoomResetBtn = document.getElementById('zoomReset');
|
||||
const zoomLabel = document.getElementById('zoomLabel');
|
||||
|
||||
const sticky = document.getElementById('stickyTip');
|
||||
const stickyBackdrop = document.getElementById('tipBackdrop');
|
||||
|
||||
const WORLD_MAX = <?php echo json_encode(WORLD_MAX); ?>;
|
||||
|
||||
// Base sizes (match CSS)
|
||||
const baseW = parseFloat(getComputedStyle(layer).getPropertyValue('--map-width')) || 510;
|
||||
const baseH = parseFloat(getComputedStyle(layer).getPropertyValue('--map-height')) || 510;
|
||||
|
||||
// World->pixel conversion (0,0 at center)
|
||||
const pixelDiv = baseW / 2; // 255
|
||||
const xdiv = pixelDiv / WORLD_MAX; // px per world unit
|
||||
|
||||
// Build SVG grid (even, crisp)
|
||||
function buildGrid() {
|
||||
const MAJOR_UNIT = 10;
|
||||
grid.setAttribute('viewBox', `0 0 ${baseW} ${baseH}`);
|
||||
grid.innerHTML = "";
|
||||
|
||||
for (let x = -WORLD_MAX; x <= WORLD_MAX; x++) {
|
||||
const px = pixelDiv + x * xdiv;
|
||||
const v = document.createElementNS('http://www.w3.org/2000/svg','line');
|
||||
v.setAttribute('x1',px); v.setAttribute('y1',0);
|
||||
v.setAttribute('x2',px); v.setAttribute('y2',baseH);
|
||||
v.setAttribute('class', (x % MAJOR_UNIT === 0) ? 'major' : 'minor');
|
||||
grid.appendChild(v);
|
||||
}
|
||||
for (let y = -WORLD_MAX; y <= WORLD_MAX; y++) {
|
||||
const py = pixelDiv - y * xdiv;
|
||||
const h = document.createElementNS('http://www.w3.org/2000/svg','line');
|
||||
h.setAttribute('x1',0); h.setAttribute('y1',py);
|
||||
h.setAttribute('x2',baseW); h.setAttribute('y2',py);
|
||||
h.setAttribute('class', (y % MAJOR_UNIT === 0) ? 'major' : 'minor');
|
||||
grid.appendChild(h);
|
||||
}
|
||||
}
|
||||
buildGrid();
|
||||
|
||||
// Zoom levels
|
||||
const STEP_SCALE = 1.25;
|
||||
const MAX_Z = 16;
|
||||
let MIN_Z = 0;
|
||||
function sFromLvl(lvl){ return Math.pow(STEP_SCALE, lvl); }
|
||||
|
||||
// Clamp pan to avoid blank
|
||||
function clampPan() {
|
||||
const s = sFromLvl(zoomLevel);
|
||||
const scaledW = baseW * s;
|
||||
const scaledH = baseH * s;
|
||||
|
||||
if (scaledW <= map.clientWidth) {
|
||||
tx = (map.clientWidth - scaledW) / 2;
|
||||
} else {
|
||||
const minTx = map.clientWidth - scaledW;
|
||||
tx = Math.max(minTx, Math.min(tx, 0));
|
||||
}
|
||||
|
||||
if (scaledH <= map.clientHeight) {
|
||||
ty = (map.clientHeight - scaledH) / 2;
|
||||
} else {
|
||||
const minTy = map.clientHeight - scaledH;
|
||||
ty = Math.max(minTy, Math.min(ty, 0));
|
||||
}
|
||||
}
|
||||
|
||||
function applyTransform(){
|
||||
clampPan();
|
||||
const s = sFromLvl(zoomLevel);
|
||||
layer.style.setProperty('--zoom', s);
|
||||
layer.style.transform = `translate(${tx}px, ${ty}px) scale(${s})`;
|
||||
zoomLabel.textContent = Math.round(s*100) + '%';
|
||||
updateAxes();
|
||||
}
|
||||
|
||||
// Map-local px -> world coords
|
||||
function screenToWorld(localX, localY){
|
||||
const s = sFromLvl(zoomLevel);
|
||||
const lx = (localX - tx) / s;
|
||||
const ly = (localY - ty) / s;
|
||||
return { x: (lx - pixelDiv) / xdiv, y: (pixelDiv - ly) / xdiv };
|
||||
}
|
||||
|
||||
function updateAxes(){
|
||||
const w=map.clientWidth, h=map.clientHeight;
|
||||
const left = screenToWorld(0,h/2).x, right = screenToWorld(w,h/2).x;
|
||||
const top = screenToWorld(w/2,0).y, bottom = screenToWorld(w/2,h).y;
|
||||
const center = screenToWorld(w/2,h/2);
|
||||
zl.textContent=Math.round(left); zr.textContent=Math.round(right);
|
||||
zo.textContent=Math.round(top); zb.textContent=Math.round(bottom);
|
||||
zc.textContent=`(${Math.round(center.x)},${Math.round(center.y)})`;
|
||||
}
|
||||
|
||||
function computeMinLevel(){
|
||||
const fit = Math.max(map.clientWidth / baseW, map.clientHeight / baseH);
|
||||
let lvl=0, s=1;
|
||||
if (fit >= 1) { while (s < fit) { s *= STEP_SCALE; lvl++; } }
|
||||
else { while (s / STEP_SCALE >= fit) { s /= STEP_SCALE; lvl--; } }
|
||||
MIN_Z = lvl;
|
||||
}
|
||||
|
||||
function clampLevel(next){ return Math.min(MAX_Z, Math.max(MIN_Z, next)); }
|
||||
|
||||
function toLocal(e){ const r = map.getBoundingClientRect(); return { x:e.clientX-r.left, y:e.clientY-r.top }; }
|
||||
|
||||
// Zoom toward cursor
|
||||
function zoomAt(deltaLevel, localX, localY){
|
||||
const newLevel = clampLevel(zoomLevel + deltaLevel);
|
||||
if (newLevel === zoomLevel) return;
|
||||
const oldS = sFromLvl(zoomLevel), newS = sFromLvl(newLevel);
|
||||
const lx = (localX - tx) / oldS, ly = (localY - ty) / oldS;
|
||||
tx = localX - lx * newS; ty = localY - ly * newS;
|
||||
zoomLevel = newLevel; applyTransform();
|
||||
}
|
||||
function zoomBy(delta){ zoomAt(delta, map.clientWidth/2, map.clientHeight/2); }
|
||||
|
||||
// State
|
||||
let zoomLevel = 0, tx = 0, ty = 0;
|
||||
|
||||
// Controls
|
||||
zoomInBtn.addEventListener('click', ()=>zoomBy(+1));
|
||||
zoomOutBtn.addEventListener('click', ()=>zoomBy(-1));
|
||||
zoomResetBtn.addEventListener('click', ()=>{
|
||||
computeMinLevel(); zoomLevel = MIN_Z;
|
||||
const s = sFromLvl(zoomLevel);
|
||||
tx = (map.clientWidth - baseW * s) / 2;
|
||||
ty = (map.clientHeight - baseH * s) / 2;
|
||||
applyTransform();
|
||||
});
|
||||
|
||||
// Wheel / dblclick
|
||||
map.addEventListener('wheel', (e)=>{ e.preventDefault(); const p=toLocal(e); zoomAt(e.deltaY<0?+1:-1, p.x,p.y); }, {passive:false});
|
||||
map.addEventListener('dblclick', (e)=>{ e.preventDefault(); const p=toLocal(e); zoomAt(e.shiftKey?-1:+1, p.x,p.y); });
|
||||
|
||||
// Drag pan
|
||||
let dragging=false, lastX=0, lastY=0;
|
||||
map.addEventListener('mousedown',(e)=>{ if(e.button!==0) return; dragging=true; map.classList.add('grabbing'); const p=toLocal(e); lastX=p.x; lastY=p.y; });
|
||||
window.addEventListener('mousemove',(e)=>{ if(!dragging) return; const p=toLocal(e); tx+=(p.x-lastX); ty+=(p.y-lastY); lastX=p.x; lastY=p.y; applyTransform(); });
|
||||
window.addEventListener('mouseup',()=>{ dragging=false; map.classList.remove('grabbing'); });
|
||||
map.addEventListener('mouseleave',()=>{ dragging=false; map.classList.remove('grabbing'); });
|
||||
|
||||
// Touch
|
||||
map.addEventListener('touchstart',(e)=>{ if(e.touches.length===1){ const t=e.touches[0], r=map.getBoundingClientRect(); dragging=true; map.classList.add('grabbing'); lastX=t.clientX-r.left; lastY=t.clientY-r.top; } }, {passive:true});
|
||||
map.addEventListener('touchmove',(e)=>{ if(dragging && e.touches.length===1){ const t=e.touches[0], r=map.getBoundingClientRect(); const x=t.clientX-r.left, y=t.clientY-r.top; tx+=(x-lastX); ty+=(y-lastY); lastX=x; lastY=y; applyTransform(); e.preventDefault(); } }, {passive:false});
|
||||
map.addEventListener('touchend',()=>{ dragging=false; map.classList.remove('grabbing'); });
|
||||
|
||||
// Init
|
||||
computeMinLevel(); zoomLevel = MIN_Z;
|
||||
tx = (map.clientWidth - baseW) / 2; ty = (map.clientHeight - baseH) / 2; applyTransform();
|
||||
window.addEventListener('resize', ()=>{ computeMinLevel(); if(zoomLevel<MIN_Z) zoomLevel=MIN_Z; applyTransform(); });
|
||||
|
||||
// Sticky tooltip behavior
|
||||
function openSticky(html, localX, localY){
|
||||
sticky.innerHTML = html;
|
||||
sticky.style.display = 'block';
|
||||
const rect = sticky.getBoundingClientRect();
|
||||
const W = rect.width || 280, H = rect.height || 140;
|
||||
let left = localX + 12, top = localY + 12;
|
||||
left = Math.max(8, Math.min(left, map.clientWidth - W - 8));
|
||||
top = Math.max(8, Math.min(top, map.clientHeight - H - 8));
|
||||
sticky.style.left = left + 'px';
|
||||
sticky.style.top = top + 'px';
|
||||
stickyBackdrop.style.display = 'block';
|
||||
}
|
||||
function closeSticky(){ sticky.style.display='none'; stickyBackdrop.style.display='none'; sticky.innerHTML=''; }
|
||||
stickyBackdrop.addEventListener('click', closeSticky);
|
||||
document.addEventListener('keydown', (e)=>{ if(e.key==='Escape') closeSticky(); });
|
||||
sticky.addEventListener('click', (e)=> e.stopPropagation());
|
||||
|
||||
// Click marker -> sticky tooltip (uses clean HTML from data-tip)
|
||||
layer.addEventListener('click', (e)=>{
|
||||
const marker = e.target.closest('.marker'); if(!marker) return;
|
||||
const html = marker.getAttribute('data-tip'); if(!html) return;
|
||||
const r = map.getBoundingClientRect();
|
||||
openSticky(html, e.clientX - r.left, e.clientY - r.top);
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user