Selfies - Revision history

QTPi at 10:49, 28 August 2025

2025-08-28T10:49:10Z

← Older revision		Revision as of 11:49, 28 August 2025
Line 1:		Line 1:
			Upload your in-game Treeverse selfies onto the map below.

	Map Credit: TvdB & Jimmy		Map Credit: TvdB & Jimmy

QTPi at 10:34, 28 August 2025

2025-08-28T10:34:46Z

← Older revision		Revision as of 11:34, 28 August 2025
Line 1:		Line 1:
			Map Credit: TvdB & Jimmy

	<html>		<html>
	<iframe src="/map-selfie/selfies.html" style="width:100%;height:85vh;border:none"></iframe>		<iframe src="/map-selfie/selfies.html" style="width:100%;height:85vh;border:none"></iframe>
	</html>		</html>

QTPi at 22:06, 27 August 2025

2025-08-27T22:06:22Z

← Older revision		Revision as of 23:06, 27 August 2025
Line 1:		Line 1:
	<html>iframe src="/map-selfie/selfies.html" style="width:100%;height:85vh;border:none"></iframe><html>		<html>
			<iframe src="/map-selfie/selfies.html" style="width:100%;height:85vh;border:none"></iframe>
			</html>

QTPi at 22:04, 27 August 2025

2025-08-27T22:04:07Z

← Older revision		Revision as of 23:04, 27 August 2025
Line 1:		Line 1:
	<iframe src="/map-selfie/selfies.html" style="width:100%;height:85vh;border:none"></iframe>		<html>iframe src="/map-selfie/selfies.html" style="width:100%;height:85vh;border:none"></iframe><html>

QTPi: Replaced content with ""

2025-08-27T22:02:24Z

Replaced content with "<iframe src="/map-selfie/selfies.html" style="width:100%;height:85vh;border:none"></iframe>"

Show changes

QTPi at 21:58, 27 August 2025

2025-08-27T21:58:04Z

← Older revision		Revision as of 22:58, 27 August 2025
Line 86:		Line 86:
	map.fitBounds(bounds);		map.fitBounds(bounds);

	// After fitting, ~~force~~ center ~~near RIGHT edge~~		// After fitting, center map (middle of image)
	setTimeout(() => {		setTimeout(() => {
	try {		try {
	const z = map.getZoom();		const z = map.getZoom();
	map.setView([h/2, w], z, { animate:false });		map.setView([h/2, w/2], z, { animate:false });
	} catch(e) {}		} catch(e) {}
	}, 0);		}, 0);

QTPi at 21:56, 27 August 2025

2025-08-27T21:56:18Z

← Older revision		Revision as of 22:56, 27 August 2025
Line 33:		Line 33:
	#toast.show{opacity:1}		#toast.show{opacity:1}

	~~/* Popup wider than default; selfie at 100% width */~~
	.tv-popup .leaflet-popup-content{margin:10px 12px; width:360px !important; max-width:360px !important}		.tv-popup .leaflet-popup-content{margin:10px 12px; width:360px !important; max-width:360px !important}
	.tv-popup .leaflet-popup-content img{display:block;width:100%;height:auto;border-radius:6px;margin-top:6px}		.tv-popup .leaflet-popup-content img{display:block;width:100%;height:auto;border-radius:6px;margin-top:6px}
Line 87:		Line 86:
	map.fitBounds(bounds);		map.fitBounds(bounds);

	// After fitting, force center near ~~left~~ edge		// After fitting, force center near RIGHT edge
	setTimeout(() => {		setTimeout(() => {
	try {		try {
	const z = map.getZoom();		const z = map.getZoom();
	map.setView([h/2, 0], z, { animate:false });		map.setView([h/2, w], z, { animate:false });
	} catch(e) {}		} catch(e) {}
	}, 0);		}, 0);

QTPi at 21:53, 27 August 2025

2025-08-27T21:53:51Z

← Older revision		Revision as of 22:53, 27 August 2025
Line 10:		Line 10:
	.tv-panel{		.tv-panel{
	position:absolute; top:10px; right:10px; z-index:1000;		position:absolute; top:10px; right:10px; z-index:1000;
	background:#f4f8f4; padding:8px ~~10px~~; border-radius:~~12px~~;		background:#f4f8f4; padding:6px 8px; border-radius:10px;
	box-shadow:0 6px 20px rgba(0,0,0,.25);		box-shadow:0 6px 20px rgba(0,0,0,.25);
	width:~~260px~~; font:~~14px~~/1.3 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;		width:220px; font:13px/1.3 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	border:2px solid #3b5d3f;		border:2px solid #3b5d3f;
	}		}
	.tv-panel h3{margin:.2rem 0; font-size:~~16px~~}		.tv-panel h3{margin:.2rem 0; font-size:15px}
	.tv-icon{display:flex;align-items:center;justify-content:center;width:~~30px~~;height:~~30px~~;border-radius:50%;		.tv-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
	box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.25); font-size:~~18px~~; line-height:1; background:#16a085}		box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.25); font-size:16px; line-height:1; background:#16a085}
	.tv-input{display:block;width:100%;margin:~~6px~~ 0;box-sizing:border-box}		.tv-input{display:block;width:100%;margin:5px 0;box-sizing:border-box}
	.tv-text{padding:~~7px 9px~~;border:1px solid #ccc;border-radius:~~6px~~;font-size:~~14px~~}		.tv-text{padding:6px 8px;border:1px solid #ccc;border-radius:5px;font-size:13px}
	.tv-btn{display:block;width:100%;margin-top:~~8px~~;padding:~~10px~~;border:none;border-radius:6px;		.tv-btn{display:block;width:100%;margin-top:6px;padding:9px;border:none;border-radius:6px;
	font-weight:bold;cursor:pointer;font-size:~~14px~~}		font-weight:bold;cursor:pointer;font-size:13px}
	.btn-add{background:#27ae60;color:#fff} .btn-add:hover{background:#1f8b4d}		.btn-add{background:#27ae60;color:#fff} .btn-add:hover{background:#1f8b4d}
	.btn-del{background:#bdc3c7;color:#2c3e50;transition:background .2s,color .2s}		.btn-del{background:#bdc3c7;color:#2c3e50;transition:background .2s,color .2s}
	.btn-del.on{background:#e74c3c;color:#fff}		.btn-del.on{background:#e74c3c;color:#fff}

	#m-photo{padding:~~8px~~;border:1px solid #ccc;border-radius:~~6px~~;font-size:~~14px~~;background:#fff}		#m-photo{padding:6px;border:1px solid #ccc;border-radius:5px;font-size:13px;background:#fff}

	#toast{position:fixed;top:10px;left:50%;transform:translateX(-50%);		#toast{position:fixed;top:10px;left:50%;transform:translateX(-50%);
Line 33:		Line 33:
	#toast.show{opacity:1}		#toast.show{opacity:1}

	/* Popup wider than default; selfie at 75% width */		/* Popup wider than default; selfie at 100% width */
	.tv-popup .leaflet-popup-content{margin:10px 12px; width:360px !important; max-width:360px !important}		.tv-popup .leaflet-popup-content{margin:10px 12px; width:360px !important; max-width:360px !important}
	.tv-popup .leaflet-popup-content img{display:block;width:75%;height:auto;border-radius:6px;margin-top:6px}		.tv-popup .leaflet-popup-content img{display:block;width:100%;height:auto;border-radius:6px;margin-top:6px}
	@media (max-width:520px){		@media (max-width:520px){
	.tv-popup .leaflet-popup-content{width:72vw !important; max-width:72vw !important}		.tv-popup .leaflet-popup-content{width:72vw !important; max-width:72vw !important}
Line 71:		Line 71:

	function toast(msg="Saved ✅"){ const t=document.getElementById('toast'); t.textContent=msg; t.classList.add('show'); setTimeout(()=>t.classList.remove('show'),1500); }		function toast(msg="Saved ✅"){ const t=document.getElementById('toast'); t.textContent=msg; t.classList.add('show'); setTimeout(()=>t.classList.remove('show'),1500); }
	function icon(){ return L.divIcon({ className:'tv-icon', html:'<span>📸</span>', iconSize:[30,30], iconAnchor:[15,30], popupAnchor:[0,-24] }); }		function icon(){ return L.divIcon({ className:'tv-icon', html:'<span>📸</span>', iconSize:[28,28], iconAnchor:[14,28], popupAnchor:[0,-24] }); }
	function popupHtml(title,desc,imgUrl){		function popupHtml(title,desc,imgUrl){
	const t=(title\|\|'').trim();		const t=(title\|\|'').trim();
Line 87:		Line 87:
	map.fitBounds(bounds);		map.fitBounds(bounds);

	// After fitting, ~~bias view to the extreme~~ left ~~(as far as bounds allow)~~		// After fitting, force center near left edge
	setTimeout(() => {		setTimeout(() => {
	try {		try {
	const z = map.getZoom();		const z = map.getZoom();
	map.setView([h/2, 0], z, { animate:false }); ~~// center near left edge~~		map.setView([h/2, 0], z, { animate:false });
	} catch(e) {}		} catch(e) {}
	}, 0);		}, 0);

QTPi at 21:50, 27 August 2025

2025-08-27T21:50:39Z

← Older revision		Revision as of 22:50, 27 August 2025
Line 10:		Line 10:
	.tv-panel{		.tv-panel{
	position:absolute; top:10px; right:10px; z-index:1000;		position:absolute; top:10px; right:10px; z-index:1000;
	background:#f4f8f4; padding:10px; border-radius:12px;		background:#f4f8f4; padding:8px 10px; border-radius:12px;
	box-shadow:0 6px 20px rgba(0,0,0,.25);		box-shadow:0 6px 20px rgba(0,0,0,.25);
	width:~~320px~~; font:14px/1.3 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;		width:260px; font:14px/1.3 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	border:2px solid #3b5d3f;		border:2px solid #3b5d3f;
	}		}
	.tv-panel h3{margin:.2rem 0}		.tv-panel h3{margin:.2rem 0; font-size:16px}
	.tv-icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;		.tv-icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
	box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.25); font-size:18px; line-height:1; background:#16a085}		box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.25); font-size:18px; line-height:1; background:#16a085}
	.tv-input{display:block;width:100%;margin:6px 0;box-sizing:border-box}		.tv-input{display:block;width:100%;margin:6px 0;box-sizing:border-box}
	.tv-text{padding:~~8px 10px~~;border:1px solid #ccc;border-radius:6px;font-size:~~15px~~}		.tv-text{padding:7px 9px;border:1px solid #ccc;border-radius:6px;font-size:14px}
	.tv-btn{display:block;width:100%;margin-top:8px;padding:~~12px~~;border:none;border-radius:6px;		.tv-btn{display:block;width:100%;margin-top:8px;padding:10px;border:none;border-radius:6px;
	font-weight:bold;cursor:pointer}		font-weight:bold;cursor:pointer;font-size:14px}
	.btn-add{background:#27ae60;color:#fff} .btn-add:hover{background:#1f8b4d}		.btn-add{background:#27ae60;color:#fff} .btn-add:hover{background:#1f8b4d}
	.btn-del{background:#bdc3c7;color:#2c3e50;transition:background .2s,color .2s}		.btn-del{background:#bdc3c7;color:#2c3e50;transition:background .2s,color .2s}
	.btn-del.on{background:#e74c3c;color:#fff}		.btn-del.on{background:#e74c3c;color:#fff}

	#m-photo{padding:8px;border:1px solid #ccc;border-radius:6px;font-size:~~15px~~;background:#fff}		#m-photo{padding:8px;border:1px solid #ccc;border-radius:6px;font-size:14px;background:#fff}

	#toast{position:fixed;top:10px;left:50%;transform:translateX(-50%);		#toast{position:fixed;top:10px;left:50%;transform:translateX(-50%);
Line 33:		Line 33:
	#toast.show{opacity:1}		#toast.show{opacity:1}

	.tv-popup .leaflet-popup-content{margin:10px 12px; width:~~380px~~ !important; max-width:~~380px~~ !important}		/* Popup wider than default; selfie at 75% width */
	.tv-popup .leaflet-popup-content img{display:block;width:50%;height:auto;border-radius:6px;margin-top:6px}		.tv-popup .leaflet-popup-content{margin:10px 12px; width:360px !important; max-width:360px !important}
			.tv-popup .leaflet-popup-content img{display:block;width:75%;height:auto;border-radius:6px;margin-top:6px}
	@media (max-width:520px){		@media (max-width:520px){
	.tv-popup .leaflet-popup-content{width:72vw !important; max-width:72vw !important}		.tv-popup .leaflet-popup-content{width:72vw !important; max-width:72vw !important}
Line 54:		Line 55:

	<div style="font-size:12px;opacity:.75;margin-top:6px;line-height:1.4">		<div style="font-size:12px;opacity:.75;margin-top:6px;line-height:1.4">
	Click on ~~camera~~ pin ~~icons~~ to view ~~selfies~~.<br>		Click on pin to view selfie.<br>
	Right-click on ~~camera~~ pin ~~icon on map~~ to delete (if Delete Mode is ON).		Right-click on pin to delete (if Delete Mode is ON).
	</div>		</div>
	</div>		</div>
Line 85:		Line 86:
	L.imageOverlay(MAP_IMAGE_URL, bounds, { crossOrigin:'anonymous' }).addTo(map);		L.imageOverlay(MAP_IMAGE_URL, bounds, { crossOrigin:'anonymous' }).addTo(map);
	map.fitBounds(bounds);		map.fitBounds(bounds);

			// After fitting, bias view to the extreme left (as far as bounds allow)
			setTimeout(() => {
			try {
			const z = map.getZoom();
			map.setView([h/2, 0], z, { animate:false }); // center near left edge
			} catch(e) {}
			}, 0);

	const popupOpts = { className:'tv-popup', maxWidth:600, minWidth:220,		const popupOpts = { className:'tv-popup', maxWidth:600, minWidth:220,

QTPi: Protected "Selfies" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite))

2025-08-27T21:44:23Z

Protected "Selfies" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite))

← Older revision	Revision as of 22:44, 27 August 2025
(No difference)