https://wiki.gla.com.br/api.php?action=feedcontributions&feedformat=atom&user=Ceu+azul
Wiki Gla - Contribuições do usuário [pt-br]
2026-05-21T00:39:11Z
Contribuições do usuário
MediaWiki 1.36.1
https://wiki.gla.com.br/index.php?title=Usu%C3%A1rio:Ceu_azul&diff=46095
Usuário:Ceu azul
2026-04-14T09:35:39Z
<p>Ceu azul: </p>
<hr />
<div>{{MapaViewer<br />
|id=meu_mapa<br />
|largura=800px<br />
|altura=600px<br />
|url=https://wiki.gla.com.br/index.php/Mapa:BlackMarket?action=raw<br />
}}<br />
<!--|configJSON={{#invoke:MapaJson|getDados|Mapa:BlackMarket}}--></div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Arquivo:Foosha1.png&diff=46062
Arquivo:Foosha1.png
2026-04-11T22:46:52Z
<p>Ceu azul: Ceu azul carregada uma nova versão de Arquivo:Foosha1.png</p>
<hr />
<div>Arquivo enviado com MsUpload</div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Arquivo:Foosha0.png&diff=46061
Arquivo:Foosha0.png
2026-04-11T22:46:51Z
<p>Ceu azul: Ceu azul carregada uma nova versão de Arquivo:Foosha0.png</p>
<hr />
<div>Arquivo enviado com MsUpload</div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Arquivo:Foosha4.png&diff=46060
Arquivo:Foosha4.png
2026-04-11T22:46:50Z
<p>Ceu azul: Arquivo enviado com MsUpload</p>
<hr />
<div>Arquivo enviado com MsUpload</div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Arquivo:Foosha3.png&diff=46059
Arquivo:Foosha3.png
2026-04-11T22:46:47Z
<p>Ceu azul: Arquivo enviado com MsUpload</p>
<hr />
<div>Arquivo enviado com MsUpload</div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Arquivo:Foosha2.png&diff=46058
Arquivo:Foosha2.png
2026-04-11T22:46:44Z
<p>Ceu azul: Arquivo enviado com MsUpload</p>
<hr />
<div>Arquivo enviado com MsUpload</div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Arquivo:Foosha1.png&diff=46057
Arquivo:Foosha1.png
2026-04-11T22:37:41Z
<p>Ceu azul: Arquivo enviado com MsUpload</p>
<hr />
<div>Arquivo enviado com MsUpload</div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Arquivo:Foosha0.png&diff=46056
Arquivo:Foosha0.png
2026-04-11T22:37:39Z
<p>Ceu azul: Arquivo enviado com MsUpload</p>
<hr />
<div>Arquivo enviado com MsUpload</div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Widget:MapaViewer&diff=46026
Widget:MapaViewer
2026-04-11T17:15:22Z
<p>Ceu azul: </p>
<hr />
<div><includeonly><br />
<div id="mapa-viewer-<!--{$id|escape:'quotes'|default:'mapa-default'}-->" style="width: <!--{$largura|escape:'quotes'|default:'100%'}-->; height: <!--{$altura|escape:'quotes'|default:'500px'}-->;"></div><br />
<br />
<script><br />
class MapaViewer {<br />
constructor(containerId, configOrUrl) {<br />
this.container = document.getElementById(containerId);<br />
if (!this.container) {<br />
console.error(`Container "${containerId}" não encontrado`);<br />
return;<br />
}<br />
<br />
this.config = null;<br />
this.currentZoom = 1;<br />
this.currentFloor = 0;<br />
this.minZoom = 0.3;<br />
this.maxZoom = 3;<br />
this.zoomStep = 0.1;<br />
this.layers = [];<br />
this.markers = [];<br />
this.isPanning = false;<br />
this.panStart = { x: 0, y: 0, scrollLeft: 0, scrollTop: 0 };<br />
this.isReady = false;<br />
<br />
this.init();<br />
<br />
if (typeof configOrUrl === 'string') {<br />
if (configOrUrl.startsWith('http')) {<br />
this.loadJSON(configOrUrl);<br />
} else {<br />
try {<br />
this.loadConfig(JSON.parse(configOrUrl));<br />
} catch(e) {<br />
console.error('JSON inválido:', e);<br />
}<br />
}<br />
} else if (configOrUrl) {<br />
this.loadConfig(configOrUrl);<br />
}<br />
}<br />
<br />
init() {<br />
this.container.innerHTML = '';<br />
this.container.style.position = 'relative';<br />
this.container.style.overflow = 'hidden';<br />
this.container.style.background = '#0f172a';<br />
<br />
this.viewport = document.createElement('div');<br />
this.viewport.style.cssText = 'width:100%;height:100%;overflow:hidden;cursor:grab;position:relative;';<br />
<br />
this.layersContainer = document.createElement('div');<br />
this.layersContainer.style.cssText = 'position:relative;min-width:100%;min-height:100%;';<br />
<br />
this.viewport.appendChild(this.layersContainer);<br />
this.container.appendChild(this.viewport);<br />
this.bindEvents();<br />
}<br />
<br />
bindEvents() {<br />
this.viewport.addEventListener('mousedown', (e) => {<br />
if (e.target.closest('.mapa-marker')) return;<br />
this.isPanning = true;<br />
this.panStart = {<br />
x: e.clientX,<br />
y: e.clientY,<br />
scrollLeft: this.viewport.scrollLeft,<br />
scrollTop: this.viewport.scrollTop<br />
};<br />
this.viewport.style.cursor = 'grabbing';<br />
e.preventDefault();<br />
});<br />
<br />
window.addEventListener('mousemove', (e) => {<br />
if (!this.isPanning) return;<br />
this.viewport.scrollLeft = this.panStart.scrollLeft - (e.clientX - this.panStart.x);<br />
this.viewport.scrollTop = this.panStart.scrollTop - (e.clientY - this.panStart.y);<br />
});<br />
<br />
window.addEventListener('mouseup', () => {<br />
this.isPanning = false;<br />
this.viewport.style.cursor = 'grab';<br />
});<br />
<br />
this.viewport.addEventListener('wheel', (e) => {<br />
e.preventDefault();<br />
const oldZoom = this.currentZoom;<br />
if (e.deltaY < 0) {<br />
this.currentZoom = Math.min(this.currentZoom + this.zoomStep, this.maxZoom);<br />
} else {<br />
this.currentZoom = Math.max(this.currentZoom - this.zoomStep, this.minZoom);<br />
}<br />
if (oldZoom !== this.currentZoom) {<br />
const rect = this.viewport.getBoundingClientRect();<br />
const mouseX = e.clientX - rect.left;<br />
const mouseY = e.clientY - rect.top;<br />
const mapX = (this.viewport.scrollLeft + mouseX) / oldZoom;<br />
const mapY = (this.viewport.scrollTop + mouseY) / oldZoom;<br />
<br />
document.querySelectorAll('.mapa-image').forEach(img => {<br />
img.style.transform = `scale(${this.currentZoom})`;<br />
});<br />
<br />
this.updateMarkersPosition();<br />
this.viewport.scrollLeft = mapX * this.currentZoom - mouseX;<br />
this.viewport.scrollTop = mapY * this.currentZoom - mouseY;<br />
}<br />
});<br />
}<br />
<br />
loadConfig(config) {<br />
this.config = this.normalizeConfig(config);<br />
if (!this.config.layers || this.config.layers.length === 0) {<br />
console.error('Nenhuma camada encontrada');<br />
return;<br />
}<br />
this.currentZoom = this.config.mapConfig?.defaultZoom || 1;<br />
this.currentFloor = this.config.mapConfig?.initialFloor || 0;<br />
this.minZoom = this.config.mapConfig?.minZoom || 0.3;<br />
this.maxZoom = this.config.mapConfig?.maxZoom || 3;<br />
this.zoomStep = this.config.mapConfig?.zoomStep || 0.1;<br />
this.render();<br />
this.setupKeyboardShortcuts();<br />
return this;<br />
}<br />
<br />
loadJSON(url) {<br />
fetch(url)<br />
.then(response => response.json())<br />
.then(config => this.loadConfig(config))<br />
.catch(error => console.error('Erro ao carregar JSON:', error));<br />
return this;<br />
}<br />
<br />
normalizeConfig(config) {<br />
if (!config.mapConfig) config.mapConfig = {};<br />
if (!config.layers) config.layers = [];<br />
config.layers.forEach((layer, idx) => {<br />
if (layer.id === undefined) layer.id = idx;<br />
if (layer.name === undefined) layer.name = `Andar ${idx + 1}`;<br />
if (layer.imageUrl === undefined) layer.imageUrl = '';<br />
if (layer.offsetX === undefined) layer.offsetX = 0;<br />
if (layer.offsetY === undefined) layer.offsetY = 0;<br />
if (layer.scale === undefined || layer.scale === null) layer.scale = 1;<br />
if (layer.opacity === undefined || layer.opacity === null) layer.opacity = 100;<br />
if (!layer.markers) layer.markers = [];<br />
layer.markers.forEach(marker => {<br />
if (marker.x === undefined) marker.x = 0;<br />
if (marker.y === undefined) marker.y = 0;<br />
if (marker.hasBadge === undefined) marker.hasBadge = false;<br />
if (marker.action === undefined) marker.action = 'popup';<br />
if (!marker.actionData) marker.actionData = {};<br />
if (marker.iconUrl === undefined) marker.iconUrl = '';<br />
});<br />
});<br />
return config;<br />
}<br />
<br />
render() {<br />
if (!this.config || !this.config.layers.length) {<br />
this.showError('Nenhum dado para renderizar');<br />
return;<br />
}<br />
this.layersContainer.innerHTML = '';<br />
this.layers = [];<br />
this.markers = [];<br />
<br />
this.config.layers.forEach((layer) => {<br />
const $layer = document.createElement('div');<br />
$layer.className = 'mapa-layer';<br />
$layer.setAttribute('data-floor', layer.id);<br />
$layer.style.display = layer.id === this.currentFloor ? 'block' : 'none';<br />
$layer.style.position = 'absolute';<br />
$layer.style.top = '0';<br />
$layer.style.left = '0';<br />
$layer.style.transform = `translate(${layer.offsetX}px, ${layer.offsetY}px)`;<br />
$layer.style.opacity = (layer.opacity || 100) / 100;<br />
<br />
const $img = document.createElement('img');<br />
$img.className = 'mapa-image';<br />
$img.style.display = 'block';<br />
$img.style.transform = `scale(${this.currentZoom})`;<br />
$img.style.transformOrigin = '0 0';<br />
$img.style.pointerEvents = 'none';<br />
$img.src = layer.imageUrl || '';<br />
<br />
$img.onerror = () => {<br />
const canvas = document.createElement('canvas');<br />
canvas.width = 800;<br />
canvas.height = 600;<br />
const ctx = canvas.getContext('2d');<br />
ctx.fillStyle = '#334155';<br />
ctx.fillRect(0, 0, canvas.width, canvas.height);<br />
ctx.fillStyle = 'white';<br />
ctx.font = '20px Arial';<br />
ctx.fillText(layer.name || 'Andar', 50, 100);<br />
$img.src = canvas.toDataURL();<br />
};<br />
<br />
$img.onload = () => {<br />
this.layersContainer.style.width = `${$img.width}px`;<br />
this.layersContainer.style.height = `${$img.height}px`;<br />
this.centerMap();<br />
};<br />
<br />
$layer.appendChild($img);<br />
<br />
const $markersContainer = document.createElement('div');<br />
$markersContainer.style.position = 'absolute';<br />
$markersContainer.style.top = '0';<br />
$markersContainer.style.left = '0';<br />
$markersContainer.style.width = '100%';<br />
$markersContainer.style.height = '100%';<br />
$markersContainer.style.pointerEvents = 'none';<br />
<br />
if (layer.markers && layer.markers.length) {<br />
layer.markers.forEach(marker => {<br />
const $marker = this.createMarker(marker, layer.id);<br />
$markersContainer.appendChild($marker);<br />
this.markers.push({ element: $marker, data: marker });<br />
});<br />
}<br />
<br />
$layer.appendChild($markersContainer);<br />
this.layersContainer.appendChild($layer);<br />
this.layers.push($layer);<br />
});<br />
this.updateMarkersPosition();<br />
this.isReady = true;<br />
}<br />
<br />
createMarker(marker, floorId) {<br />
const $marker = document.createElement('div');<br />
$marker.className = 'mapa-marker';<br />
$marker.setAttribute('data-marker-id', marker.id);<br />
$marker.setAttribute('data-floor', floorId);<br />
$marker.style.position = 'absolute';<br />
$marker.style.left = `${marker.x * this.currentZoom}px`;<br />
$marker.style.top = `${marker.y * this.currentZoom}px`;<br />
$marker.style.zIndex = '100';<br />
$marker.style.transform = 'translate(-50%, -50%)';<br />
$marker.style.pointerEvents = 'auto';<br />
<br />
const hasAction = marker.action && marker.action !== 'none';<br />
$marker.style.cursor = hasAction ? 'pointer' : 'default';<br />
<br />
const iconSize = Math.max(16, Math.floor(16 * this.currentZoom));<br />
let iconHtml = '';<br />
<br />
if (marker.iconUrl && marker.iconUrl !== '') {<br />
iconHtml = `<img src="${marker.iconUrl}" style="width:${iconSize}px; height:${iconSize}px; object-fit:contain;">`;<br />
} else {<br />
iconHtml = `<i class="fas fa-map-marker-alt" style="font-size:${iconSize}px;"></i>`;<br />
}<br />
<br />
$marker.innerHTML = `<br />
<div class="mapa-marker-icon" style="display:flex; align-items:center; justify-content:center; pointer-events:none;">${iconHtml}</div><br />
<div class="mapa-marker-tooltip" style="position:absolute; bottom:100%; left:50%; transform:translateX(-50%); background:#1e293b; color:white; padding:4px 8px; border-radius:6px; font-size:10px; white-space:nowrap; opacity:0; visibility:hidden; transition:0.2s; pointer-events:none; z-index:101;"><br />
<strong>${marker.name || 'Marcador'}</strong><br />
</div><br />
`;<br />
<br />
$marker.addEventListener('mouseenter', () => {<br />
$marker.style.transform = 'translate(-50%, -50%) scale(1.1)';<br />
const tooltip = $marker.querySelector('.mapa-marker-tooltip');<br />
if (tooltip) {<br />
tooltip.style.opacity = '1';<br />
tooltip.style.visibility = 'visible';<br />
}<br />
});<br />
<br />
$marker.addEventListener('mouseleave', () => {<br />
$marker.style.transform = 'translate(-50%, -50%) scale(1)';<br />
const tooltip = $marker.querySelector('.mapa-marker-tooltip');<br />
if (tooltip) {<br />
tooltip.style.opacity = '0';<br />
tooltip.style.visibility = 'hidden';<br />
}<br />
});<br />
<br />
if (hasAction) {<br />
$marker.addEventListener('click', (e) => {<br />
e.stopPropagation();<br />
this.executeAction(marker);<br />
});<br />
}<br />
<br />
return $marker;<br />
}<br />
<br />
executeAction(marker) {<br />
switch (marker.action) {<br />
case 'popup':<br />
this.showPopup(marker);<br />
break;<br />
case 'nextFloor':<br />
this.nextFloor();<br />
break;<br />
case 'prevFloor':<br />
this.prevFloor();<br />
break;<br />
case 'gotoFloor':<br />
if (marker.actionData?.floorId !== undefined) {<br />
this.goToFloor(marker.actionData.floorId);<br />
}<br />
break;<br />
case 'link':<br />
if (marker.actionData?.url) {<br />
window.open(marker.actionData.url, marker.actionData.target || '_blank');<br />
}<br />
break;<br />
}<br />
}<br />
<br />
showPopup(marker) {<br />
let modal = document.getElementById('mapa-viewer-modal');<br />
if (!modal) {<br />
modal = document.createElement('div');<br />
modal.id = 'mapa-viewer-modal';<br />
modal.style.cssText = 'display:none; position:fixed; z-index:10000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7); justify-content:center; align-items:center;';<br />
modal.innerHTML = `<br />
<div style="background:#1e293b; border-radius:16px; max-width:350px; width:90%; padding:20px; position:relative; border:1px solid #334155;"><br />
<span style="position:absolute; right:15px; top:10px; font-size:24px; cursor:pointer; color:#94a3b8;">&times;</span><br />
<div id="mapa-viewer-popup-content"></div><br />
</div><br />
`;<br />
document.body.appendChild(modal);<br />
modal.querySelector('span').addEventListener('click', () => {<br />
modal.style.display = 'none';<br />
});<br />
modal.addEventListener('click', (e) => {<br />
if (e.target === modal) modal.style.display = 'none';<br />
});<br />
}<br />
<br />
const content = modal.querySelector('#mapa-viewer-popup-content');<br />
content.innerHTML = `<br />
<div style="display:flex; align-items:center; margin-bottom:12px;"><br />
<h3 style="margin:0; color:#a5b4fc;">${marker.name}</h3><br />
</div><br />
<p style="color:#cbd5e1;">${marker.actionData?.text || 'Sem informações'}</p><br />
`;<br />
modal.style.display = 'flex';<br />
}<br />
<br />
updateMarkersPosition() {<br />
this.markers.forEach(({ element, data }) => {<br />
if (parseInt(element.getAttribute('data-floor')) === this.currentFloor) {<br />
const zoomedX = data.x * this.currentZoom;<br />
const zoomedY = data.y * this.currentZoom;<br />
element.style.left = `${zoomedX}px`;<br />
element.style.top = `${zoomedY}px`;<br />
<br />
const iconSize = Math.max(24, Math.floor(24 * this.currentZoom));<br />
const iconDiv = element.querySelector('.mapa-marker-icon');<br />
if (iconDiv) {<br />
if (data.iconUrl && data.iconUrl !== '') {<br />
let img = iconDiv.querySelector('img');<br />
if (img) {<br />
img.style.width = `${iconSize}px`;<br />
img.style.height = `${iconSize}px`;<br />
}<br />
} else {<br />
let icon = iconDiv.querySelector('i');<br />
if (icon) {<br />
icon.style.fontSize = `${iconSize}px`;<br />
}<br />
}<br />
}<br />
}<br />
});<br />
}<br />
<br />
centerMap() {<br />
setTimeout(() => {<br />
const layersWidth = this.layersContainer.scrollWidth;<br />
const layersHeight = this.layersContainer.scrollHeight;<br />
const viewportWidth = this.viewport.clientWidth;<br />
const viewportHeight = this.viewport.clientHeight;<br />
if (layersWidth > 0 && layersHeight > 0) {<br />
this.viewport.scrollLeft = (layersWidth - viewportWidth) / 2;<br />
this.viewport.scrollTop = (layersHeight - viewportHeight) / 2;<br />
}<br />
}, 100);<br />
}<br />
<br />
zoomIn() {<br />
const oldZoom = this.currentZoom;<br />
this.currentZoom = Math.min(this.currentZoom + this.zoomStep, this.maxZoom);<br />
if (oldZoom !== this.currentZoom) {<br />
this.applyZoomChange(oldZoom);<br />
}<br />
}<br />
<br />
zoomOut() {<br />
const oldZoom = this.currentZoom;<br />
this.currentZoom = Math.max(this.currentZoom - this.zoomStep, this.minZoom);<br />
if (oldZoom !== this.currentZoom) {<br />
this.applyZoomChange(oldZoom);<br />
}<br />
}<br />
<br />
applyZoomChange(oldZoom) {<br />
const rect = this.viewport.getBoundingClientRect();<br />
const centerX = rect.width / 2;<br />
const centerY = rect.height / 2;<br />
const scrollX = (this.viewport.scrollLeft + centerX) / oldZoom;<br />
const scrollY = (this.viewport.scrollTop + centerY) / oldZoom;<br />
<br />
document.querySelectorAll('.mapa-image').forEach(img => {<br />
img.style.transform = `scale(${this.currentZoom})`;<br />
});<br />
<br />
this.updateMarkersPosition();<br />
this.viewport.scrollLeft = scrollX * this.currentZoom - centerX;<br />
this.viewport.scrollTop = scrollY * this.currentZoom - centerY;<br />
}<br />
<br />
resetView() {<br />
this.currentZoom = this.config.mapConfig?.defaultZoom || 1;<br />
document.querySelectorAll('.mapa-image').forEach(img => {<br />
img.style.transform = `scale(${this.currentZoom})`;<br />
});<br />
this.centerMap();<br />
this.updateMarkersPosition();<br />
}<br />
<br />
prevFloor() {<br />
const layers = this.config.layers.sort((a,b) => a.id - b.id);<br />
const currentIndex = layers.findIndex(l => l.id === this.currentFloor);<br />
if (currentIndex > 0) {<br />
this.goToFloor(layers[currentIndex - 1].id);<br />
}<br />
}<br />
<br />
nextFloor() {<br />
const layers = this.config.layers.sort((a,b) => a.id - b.id);<br />
const currentIndex = layers.findIndex(l => l.id === this.currentFloor);<br />
if (currentIndex < layers.length - 1) {<br />
this.goToFloor(layers[currentIndex + 1].id);<br />
}<br />
}<br />
<br />
goToFloor(floorId) {<br />
this.currentFloor = floorId;<br />
this.layers.forEach(layer => {<br />
const layerFloor = parseInt(layer.getAttribute('data-floor'));<br />
layer.style.display = layerFloor === floorId ? 'block' : 'none';<br />
});<br />
this.updateMarkersPosition();<br />
}<br />
<br />
goToCoordinates(x, y, zoom = null, floorId = null) {<br />
if (floorId !== null && floorId !== this.currentFloor) {<br />
this.goToFloor(floorId);<br />
setTimeout(() => this._centerOnPoint(x, y, zoom), 100);<br />
} else {<br />
this._centerOnPoint(x, y, zoom);<br />
}<br />
}<br />
<br />
_centerOnPoint(x, y, zoom) {<br />
if (zoom !== null && zoom !== this.currentZoom) {<br />
const oldZoom = this.currentZoom;<br />
this.currentZoom = Math.min(Math.max(zoom, this.minZoom), this.maxZoom);<br />
if (oldZoom !== this.currentZoom) {<br />
this.applyZoomChange(oldZoom);<br />
}<br />
}<br />
<br />
const viewportWidth = this.viewport.clientWidth;<br />
const viewportHeight = this.viewport.clientHeight;<br />
let screenX = x * this.currentZoom;<br />
let screenY = y * this.currentZoom;<br />
let targetScrollX = screenX - (viewportWidth / 2);<br />
let targetScrollY = screenY - (viewportHeight / 2);<br />
<br />
this.viewport.scrollLeft = Math.max(0, targetScrollX);<br />
this.viewport.scrollTop = Math.max(0, targetScrollY);<br />
this.showTemporaryHighlight(x, y);<br />
}<br />
<br />
showTemporaryHighlight(x, y) {<br />
const highlight = document.createElement('div');<br />
highlight.style.cssText = `<br />
position: absolute;<br />
width: 60px;<br />
height: 60px;<br />
left: ${(x + (this.currentFloor?.offsetX || 0)) * this.currentZoom}px;<br />
top: ${(y + (this.currentFloor?.offsetY || 0)) * this.currentZoom}px;<br />
transform: translate(-50%, -50%);<br />
background: radial-gradient(circle, rgba(255,215,0,0.8) 0%, rgba(255,215,0,0) 70%);<br />
border-radius: 50%;<br />
pointer-events: none;<br />
z-index: 200;<br />
animation: mapa-highlight-pulse 0.6s ease-out 3;<br />
`;<br />
<br />
this.layersContainer.appendChild(highlight);<br />
<br />
setTimeout(() => {<br />
highlight.remove();<br />
}, 1800);<br />
}<br />
setupKeyboardShortcuts() {<br />
const handler = (e) => {<br />
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;<br />
switch (e.key) {<br />
case '+': case '=': e.preventDefault(); this.zoomIn(); break;<br />
case '-': case '_': e.preventDefault(); this.zoomOut(); break;<br />
case 'r': case 'R': e.preventDefault(); this.resetView(); break;<br />
case 'ArrowUp': case 'PageUp': e.preventDefault(); this.prevFloor(); break;<br />
case 'ArrowDown': case 'PageDown': e.preventDefault(); this.nextFloor(); break;<br />
}<br />
};<br />
document.removeEventListener('keydown', this.keyHandler);<br />
this.keyHandler = handler;<br />
document.addEventListener('keydown', this.keyHandler);<br />
}<br />
<br />
showError(message) {<br />
this.container.innerHTML = `<div style="display:flex; align-items:center; justify-content:center; height:100%; color:#ef4444; text-align:center; padding:20px;"><br />
<div>❌ ${message}</div><br />
</div>`;<br />
}<br />
<br />
destroy() {<br />
if (this.keyHandler) {<br />
document.removeEventListener('keydown', this.keyHandler);<br />
}<br />
this.container.innerHTML = '';<br />
this.isReady = false;<br />
}<br />
}<br />
<br />
(function() {<br />
var containerId = 'mapa-viewer-<!--{$id|escape:'quotes'|default:'mapa-default'}-->';<br />
var configJSON = <!--{$configJSON|default:'null'}-->; // Recebe o JSON<br />
var urlJSON = '<!--{$url|escape:'quotes'}-->'; // Recebe URL do JSON<br />
<br />
// Nome da variável global única para este mapa<br />
var globalVarName = 'mapaViewer_<!--{$id|escape:'quotes'|default:'mapa-default'}-->';<br />
<br />
function iniciarMapa() {<br />
var container = document.getElementById(containerId);<br />
if (!container) return;<br />
if (container.hasAttribute('data-iniciado')) return;<br />
<br />
container.setAttribute('data-iniciado', 'true');<br />
<br />
var viewer = null;<br />
<br />
if (configJSON && configJSON !== 'null') {<br />
// Configuração inline<br />
viewer = new MapaViewer(containerId, configJSON);<br />
} else if (urlJSON) {<br />
// Configuração via URL<br />
fetch(urlJSON)<br />
.then(response => response.json())<br />
.then(config => {<br />
window[globalVarName] = new MapaViewer(containerId, config);<br />
})<br />
.catch(error => {<br />
console.error('Erro ao carregar mapa:', error);<br />
container.innerHTML = '<div style="color:red;padding:20px;">❌ Erro ao carregar mapa: ' + error.message + '</div>';<br />
});<br />
return; // Sai porque o fetch é assíncrono<br />
} else {<br />
container.innerHTML = '<div style="color:red;padding:20px;">❌ Nenhuma configuração fornecida</div>';<br />
return;<br />
}<br />
<br />
// Guarda a instância globalmente para acesso externo<br />
if (viewer) {<br />
window[globalVarName] = viewer;<br />
console.log('Mapa inicializado! Use window.' + globalVarName + ' para controlar');<br />
console.log('Exemplo: window.' + globalVarName + '.nextFloor()');<br />
}<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', iniciarMapa);<br />
} else {<br />
iniciarMapa();<br />
}<br />
})();<br />
</script><br />
</includeonly></div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Usu%C3%A1rio:Ceu_azul&diff=46025
Usuário:Ceu azul
2026-04-11T17:10:41Z
<p>Ceu azul: </p>
<hr />
<div>{{MapaViewer<br />
|id=meu_mapa<br />
|largura=800px<br />
|altura=600px<br />
|configJSON={{#invoke:MapaJson|getDados|Mapa:BlackMarket}}<br />
}}</div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Widget:MapaControle&diff=46024
Widget:MapaControle
2026-04-11T17:09:56Z
<p>Ceu azul: </p>
<hr />
<div><includeonly><br />
<br />
<style><br />
@keyframes mapa-highlight-pulse {<br />
0% {<br />
transform: translate(-50%, -50%) scale(0.5);<br />
opacity: 1;<br />
}<br />
100% {<br />
transform: translate(-50%, -50%) scale(2);<br />
opacity: 0;<br />
}<br />
}<br />
<br />
.mapa-highlight {<br />
animation: mapa-highlight-pulse 0.6s ease-out 3;<br />
}<br />
.mapa-visualizador-padrao {<br />
border-width: 6px;<br />
border-style: solid;<br />
border-image: linear-gradient(to top, #412b22, #8a6d58) 1;<br />
border-radius: 10px;<br />
background: black;<br />
padding: 1pt;<br />
position: relative;<br />
display: inline-table;<br />
<br />
.botoes-interativos {<br />
position: absolute;<br />
bottom: -13px;<br />
right: 0px;<br />
<br />
}<br />
<br />
.botoes-interativos {<br />
button {<br />
width: 25px;<br />
height: 25px;<br />
border-radius: 50%;<br />
border: 2px solid #5a4632;<br />
background: radial-gradient(circle at 30% 30%, #a98a6a, #aa855f);<br />
box-shadow:<br />
inset 0 2px 3px rgba(255, 255, 255, 0.4),<br />
inset 0 -3px 5px rgba(0, 0, 0, 0.6),<br />
0 2px 3px rgba(0, 0, 0, 0.5);<br />
cursor: pointer;<br />
color: white;<br />
font-weight: bolder;<br />
margin-left: 5px;<br />
}<br />
/* Efeito pressionado */<br />
button:active {<br />
box-shadow:<br />
inset 0 3px 6px rgba(0, 0, 0, 0.8),<br />
0 1px 1px rgba(0, 0, 0, 0.5);<br />
transform: translateY(1px);<br />
}<br />
<br />
}<br />
<br />
<br />
}<br />
</style><br />
<div class="botoes-interativos"><br />
<button class="up" onclick="window.mapaViewer_meu_mapa.prevFloor()">&uparrow;</button><br />
<button class="down" onclick="window.mapaViewer_meu_mapa.nextFloor()">&downarrow;</button><br />
<button class="plus" onclick="window.mapaViewer_meu_mapa.zoomIn()">+</button><br />
<button class="minus" onclick="window.mapaViewer_meu_mapa.zoomOut()">-</button><br />
</div><br />
<br />
<button onclick="window.mapaViewer_meu_mapa.goToCoordinates(246, 496, 1.5, 2)">Ir para Tesouro</button><br />
</includeonly></div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Widget:MapaControle&diff=46023
Widget:MapaControle
2026-04-11T17:08:04Z
<p>Ceu azul: </p>
<hr />
<div><includeonly><br />
<br />
<style><br />
@keyframes mapa-highlight-pulse {<br />
0% {<br />
transform: translate(-50%, -50%) scale(0.5);<br />
opacity: 1;<br />
}<br />
100% {<br />
transform: translate(-50%, -50%) scale(2);<br />
opacity: 0;<br />
}<br />
}<br />
<br />
.mapa-highlight {<br />
animation: mapa-highlight-pulse 0.6s ease-out 3;<br />
}<br />
.mapa-visualizador-padrao {<br />
border-width: 6px;<br />
border-style: solid;<br />
border-image: linear-gradient(to top, #412b22, #8a6d58) 1;<br />
border-radius: 10px;<br />
background: black;<br />
padding: 1pt;<br />
position: relative;<br />
display: inline-table;<br />
<br />
.botoes-interativos {<br />
position: absolute;<br />
bottom: -13px;<br />
right: 0px;<br />
<br />
}<br />
<br />
.botoes-interativos {<br />
button {<br />
width: 25px;<br />
height: 25px;<br />
border-radius: 50%;<br />
border: 2px solid #5a4632;<br />
background: radial-gradient(circle at 30% 30%, #a98a6a, #aa855f);<br />
box-shadow:<br />
inset 0 2px 3px rgba(255, 255, 255, 0.4),<br />
inset 0 -3px 5px rgba(0, 0, 0, 0.6),<br />
0 2px 3px rgba(0, 0, 0, 0.5);<br />
cursor: pointer;<br />
color: white;<br />
font-weight: bolder;<br />
margin-left: 5px;<br />
}<br />
/* Efeito pressionado */<br />
button:active {<br />
box-shadow:<br />
inset 0 3px 6px rgba(0, 0, 0, 0.8),<br />
0 1px 1px rgba(0, 0, 0, 0.5);<br />
transform: translateY(1px);<br />
}<br />
<br />
}<br />
<br />
<br />
}<br />
</style><br />
<div class="botoes-interativos"><br />
<button class="up" onclick="window.mapaViewer_meu_mapa.prevFloor()">&uparrow;</button><br />
<button class="down" onclick="window.mapaViewer_meu_mapa.nextFloor()">&downarrow;</button><br />
<button class="plus" onclick="window.mapaViewer_meu_mapa.zoomIn()">+</button><br />
<button class="minus" onclick="window.mapaViewer_meu_mapa.zoomOut()">-</button><br />
</div><br />
<br />
<button onclick="window.mapaViewer_meu_mapa.goToCoordinates(300, 250, 1.5, 1)">Ir para Tesouro</button><br />
</includeonly></div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Widget:MapaControle&diff=46022
Widget:MapaControle
2026-04-11T17:06:29Z
<p>Ceu azul: </p>
<hr />
<div><includeonly><br />
<br />
<style><br />
.mapa-visualizador-padrao {<br />
border-width: 6px;<br />
border-style: solid;<br />
border-image: linear-gradient(to top, #412b22, #8a6d58) 1;<br />
border-radius: 10px;<br />
background: black;<br />
padding: 1pt;<br />
position: relative;<br />
display: inline-table;<br />
<br />
.botoes-interativos {<br />
position: absolute;<br />
bottom: -13px;<br />
right: 0px;<br />
<br />
}<br />
<br />
.botoes-interativos {<br />
button {<br />
width: 25px;<br />
height: 25px;<br />
border-radius: 50%;<br />
border: 2px solid #5a4632;<br />
background: radial-gradient(circle at 30% 30%, #a98a6a, #aa855f);<br />
box-shadow:<br />
inset 0 2px 3px rgba(255, 255, 255, 0.4),<br />
inset 0 -3px 5px rgba(0, 0, 0, 0.6),<br />
0 2px 3px rgba(0, 0, 0, 0.5);<br />
cursor: pointer;<br />
color: white;<br />
font-weight: bolder;<br />
margin-left: 5px;<br />
}<br />
/* Efeito pressionado */<br />
button:active {<br />
box-shadow:<br />
inset 0 3px 6px rgba(0, 0, 0, 0.8),<br />
0 1px 1px rgba(0, 0, 0, 0.5);<br />
transform: translateY(1px);<br />
}<br />
<br />
}<br />
<br />
<br />
}<br />
</style><br />
<div class="botoes-interativos"><br />
<button class="up" onclick="window.mapaViewer_meu_mapa.prevFloor()">&uparrow;</button><br />
<button class="down" onclick="window.mapaViewer_meu_mapa.nextFloor()">&downarrow;</button><br />
<button class="plus" onclick="window.mapaViewer_meu_mapa.zoomIn()">+</button><br />
<button class="minus" onclick="window.mapaViewer_meu_mapa.zoomOut()">-</button><br />
</div><br />
<br />
<button onclick="window.mapaViewer_meu_mapa.goToCoordinates(300, 250, 1.5, 1)">Ir para Tesouro</button><br />
</includeonly></div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Widget:MapaControle&diff=46021
Widget:MapaControle
2026-04-11T17:05:01Z
<p>Ceu azul: </p>
<hr />
<div><includeonly><br />
<br />
<style><br />
.mapa-visualizador-padrao {<br />
border-width: 6px;<br />
border-style: solid;<br />
border-image: linear-gradient(to top, #412b22, #8a6d58) 1;<br />
border-radius: 10px;<br />
background: black;<br />
padding: 1pt;<br />
position: relative;<br />
display: inline-table;<br />
<br />
.botoes-interativos {<br />
position: absolute;<br />
bottom: -13px;<br />
right: 0px;<br />
<br />
}<br />
<br />
.botoes-interativos {<br />
button {<br />
width: 25px;<br />
height: 25px;<br />
border-radius: 50%;<br />
border: 2px solid #5a4632;<br />
background: radial-gradient(circle at 30% 30%, #a98a6a, #aa855f);<br />
box-shadow:<br />
inset 0 2px 3px rgba(255, 255, 255, 0.4),<br />
inset 0 -3px 5px rgba(0, 0, 0, 0.6),<br />
0 2px 3px rgba(0, 0, 0, 0.5);<br />
cursor: pointer;<br />
color: white;<br />
font-weight: bolder;<br />
margin-left: 5px;<br />
}<br />
/* Efeito pressionado */<br />
button:active {<br />
box-shadow:<br />
inset 0 3px 6px rgba(0, 0, 0, 0.8),<br />
0 1px 1px rgba(0, 0, 0, 0.5);<br />
transform: translateY(1px);<br />
}<br />
<br />
}<br />
<br />
<br />
}<br />
</style><br />
<div class="botoes-interativos"><br />
<button class="up" onclick="window.mapaViewer_meu_mapa.prevFloor()">&uparrow;</button><br />
<button class="down" onclick="window.mapaViewer_meu_mapa.nextFloor()">&downarrow;</button><br />
<button class="plus" onclick="window.mapaViewer_meu_mapa.zoomIn()">+</button><br />
<button class="minus" onclick="window.mapaViewer_meu_mapa.zoomOut()">-</button><br />
</div><br />
<br />
<button onclick="window.mapaViewer_meu_mapa.goToCoordinates(300, 250, 1.5, 1)">Ir para Tesouro</button><br />
</includeonly></div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Usu%C3%A1rio:Ceu_azul&diff=46020
Usuário:Ceu azul
2026-04-11T16:57:51Z
<p>Ceu azul: </p>
<hr />
<div>{{MapaViewer<br />
|id=meu_mapa<br />
|largura=500px<br />
|altura=500px<br />
|configJSON={{#invoke:MapaJson|getDados|Mapa:BlackMarket}}<br />
}}</div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Widget:MapaControle&diff=46019
Widget:MapaControle
2026-04-11T16:57:17Z
<p>Ceu azul: </p>
<hr />
<div><includeonly><br />
<br />
<style><br />
.mapa-visualizador-padrao {<br />
border-width: 6px;<br />
border-style: solid;<br />
border-image: linear-gradient(to top, #412b22, #8a6d58) 1;<br />
border-radius: 10px;<br />
background: black;<br />
padding: 1pt;<br />
position: relative;<br />
display: inline-table;<br />
<br />
.botoes-interativos {<br />
position: absolute;<br />
bottom: -13px;<br />
right: 0px;<br />
<br />
}<br />
<br />
.botoes-interativos {<br />
button {<br />
width: 25px;<br />
height: 25px;<br />
border-radius: 50%;<br />
border: 2px solid #5a4632;<br />
background: radial-gradient(circle at 30% 30%, #a98a6a, #aa855f);<br />
box-shadow:<br />
inset 0 2px 3px rgba(255, 255, 255, 0.4),<br />
inset 0 -3px 5px rgba(0, 0, 0, 0.6),<br />
0 2px 3px rgba(0, 0, 0, 0.5);<br />
cursor: pointer;<br />
color: white;<br />
font-weight: bolder;<br />
margin-left: 5px;<br />
}<br />
/* Efeito pressionado */<br />
button:active {<br />
box-shadow:<br />
inset 0 3px 6px rgba(0, 0, 0, 0.8),<br />
0 1px 1px rgba(0, 0, 0, 0.5);<br />
transform: translateY(1px);<br />
}<br />
<br />
}<br />
<br />
<br />
}<br />
</style><br />
<div class="botoes-interativos"><br />
<button class="up" onclick="window.mapaViewer_meu_mapa.prevFloor()">&uparrow;</button><br />
<button class="down" onclick="window.mapaViewer_meu_mapa.nextFloor()">&downarrow;</button><br />
<button class="plus" onclick="window.mapaViewer_meu_mapa.zoomIn()">+</button><br />
<button class="minus" onclick="window.mapaViewer_meu_mapa.zoomOut()">-</button><br />
</div><br />
</includeonly></div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Widget:MapaControle&diff=46018
Widget:MapaControle
2026-04-11T15:34:28Z
<p>Ceu azul: </p>
<hr />
<div><includeonly><br />
<br />
<style><br />
.mapa-visualizador-padrao {<br />
border: 10px double blue; /* A cor interna é o background, ou defina border-color */<br />
outline: 5px solid red; /<br />
background: #cacaca;<br />
padding: 10pt;<br />
}<br />
</style><br />
<div><br />
<button onclick="window.mapaViewer_<!--{$id}-->.prevFloor()">⬆️ Subir</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.nextFloor()">⬇️ Descer</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.zoomIn()">🔍 +</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.zoomOut()">🔍 -</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.goToFloor(0)">🎯 Ir para Térreo</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.goToFloor(1)">🎯 Ir para Primeiro</button><br />
</div><br />
</includeonly></div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Widget:MapaControle&diff=46017
Widget:MapaControle
2026-04-11T15:29:57Z
<p>Ceu azul: </p>
<hr />
<div><includeonly><br />
<br />
<style><br />
#mapa-viewer-<!--{$id|escape:'quotes'|default:'mapa-default'}--> {<br />
border: 10px double blue; /* A cor interna é o background, ou defina border-color */<br />
outline: 5px solid red; /<br />
background: #cacaca;<br />
padding: 10pt;<br />
<br />
}<br />
</style><br />
<div><br />
<button onclick="window.mapaViewer_<!--{$id}-->.prevFloor()">⬆️ Subir</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.nextFloor()">⬇️ Descer</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.zoomIn()">🔍 +</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.zoomOut()">🔍 -</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.goToFloor(0)">🎯 Ir para Térreo</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.goToFloor(1)">🎯 Ir para Primeiro</button><br />
</div><br />
</includeonly></div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Widget:MapaControle&diff=46016
Widget:MapaControle
2026-04-11T15:26:44Z
<p>Ceu azul: </p>
<hr />
<div><includeonly><br />
<br />
<style><br />
#mapa-viewer-<!--{$id|escape:'quotes'|default:'mapa-default'}--> {<br />
border: 3px solid red;<br />
background: #cacaca;<br />
padding: 10pt;<br />
<br />
}<br />
</style><br />
<div><br />
<button onclick="window.mapaViewer_<!--{$id}-->.prevFloor()">⬆️ Subir</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.nextFloor()">⬇️ Descer</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.zoomIn()">🔍 +</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.zoomOut()">🔍 -</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.goToFloor(0)">🎯 Ir para Térreo</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.goToFloor(1)">🎯 Ir para Primeiro</button><br />
</div><br />
</includeonly></div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Widget:MapaControle&diff=46015
Widget:MapaControle
2026-04-11T15:22:12Z
<p>Ceu azul: </p>
<hr />
<div><includeonly><br />
<style><br />
#mapa-viewer-<!--{$id|escape:'quotes'|default:'mapa-default'}--> {<br />
border>3px solid red;<br />
<br />
}<br />
<br />
<br />
</style><br />
<div><br />
<button onclick="window.mapaViewer_<!--{$id}-->.prevFloor()">⬆️ Subir</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.nextFloor()">⬇️ Descer</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.zoomIn()">🔍 +</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.zoomOut()">🔍 -</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.goToFloor(0)">🎯 Ir para Térreo</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.goToFloor(1)">🎯 Ir para Primeiro</button><br />
</div><br />
</includeonly></div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Widget:MapaControle&diff=46014
Widget:MapaControle
2026-04-11T15:17:00Z
<p>Ceu azul: </p>
<hr />
<div><includeonly><br />
<br />
<div><br />
<button onclick="window.mapaViewer_<!--{$id}-->.prevFloor()">⬆️ Subir</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.nextFloor()">⬇️ Descer</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.zoomIn()">🔍 +</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.zoomOut()">🔍 -</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.goToFloor(0)">🎯 Ir para Térreo</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.goToFloor(1)">🎯 Ir para Primeiro</button><br />
</div><br />
</includeonly></div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Widget:MapaViewer&diff=46013
Widget:MapaViewer
2026-04-11T15:16:41Z
<p>Ceu azul: </p>
<hr />
<div><includeonly><br />
<div id="mapa-viewer-<!--{$id|escape:'quotes'|default:'mapa-default'}-->" style="width: <!--{$largura|escape:'quotes'|default:'100%'}-->; height: <!--{$altura|escape:'quotes'|default:'500px'}-->;"></div><br />
<br />
<script><br />
class MapaViewer {<br />
constructor(containerId, configOrUrl) {<br />
this.container = document.getElementById(containerId);<br />
if (!this.container) {<br />
console.error(`Container "${containerId}" não encontrado`);<br />
return;<br />
}<br />
<br />
this.config = null;<br />
this.currentZoom = 1;<br />
this.currentFloor = 0;<br />
this.minZoom = 0.3;<br />
this.maxZoom = 3;<br />
this.zoomStep = 0.1;<br />
this.layers = [];<br />
this.markers = [];<br />
this.isPanning = false;<br />
this.panStart = { x: 0, y: 0, scrollLeft: 0, scrollTop: 0 };<br />
this.isReady = false;<br />
<br />
this.init();<br />
<br />
if (typeof configOrUrl === 'string') {<br />
if (configOrUrl.startsWith('http')) {<br />
this.loadJSON(configOrUrl);<br />
} else {<br />
try {<br />
this.loadConfig(JSON.parse(configOrUrl));<br />
} catch(e) {<br />
console.error('JSON inválido:', e);<br />
}<br />
}<br />
} else if (configOrUrl) {<br />
this.loadConfig(configOrUrl);<br />
}<br />
}<br />
<br />
init() {<br />
this.container.innerHTML = '';<br />
this.container.style.position = 'relative';<br />
this.container.style.overflow = 'hidden';<br />
this.container.style.background = '#0f172a';<br />
<br />
this.viewport = document.createElement('div');<br />
this.viewport.style.cssText = 'width:100%;height:100%;overflow:hidden;cursor:grab;position:relative;';<br />
<br />
this.layersContainer = document.createElement('div');<br />
this.layersContainer.style.cssText = 'position:relative;min-width:100%;min-height:100%;';<br />
<br />
this.viewport.appendChild(this.layersContainer);<br />
this.container.appendChild(this.viewport);<br />
this.bindEvents();<br />
}<br />
<br />
bindEvents() {<br />
this.viewport.addEventListener('mousedown', (e) => {<br />
if (e.target.closest('.mapa-marker')) return;<br />
this.isPanning = true;<br />
this.panStart = {<br />
x: e.clientX,<br />
y: e.clientY,<br />
scrollLeft: this.viewport.scrollLeft,<br />
scrollTop: this.viewport.scrollTop<br />
};<br />
this.viewport.style.cursor = 'grabbing';<br />
e.preventDefault();<br />
});<br />
<br />
window.addEventListener('mousemove', (e) => {<br />
if (!this.isPanning) return;<br />
this.viewport.scrollLeft = this.panStart.scrollLeft - (e.clientX - this.panStart.x);<br />
this.viewport.scrollTop = this.panStart.scrollTop - (e.clientY - this.panStart.y);<br />
});<br />
<br />
window.addEventListener('mouseup', () => {<br />
this.isPanning = false;<br />
this.viewport.style.cursor = 'grab';<br />
});<br />
<br />
this.viewport.addEventListener('wheel', (e) => {<br />
e.preventDefault();<br />
const oldZoom = this.currentZoom;<br />
if (e.deltaY < 0) {<br />
this.currentZoom = Math.min(this.currentZoom + this.zoomStep, this.maxZoom);<br />
} else {<br />
this.currentZoom = Math.max(this.currentZoom - this.zoomStep, this.minZoom);<br />
}<br />
if (oldZoom !== this.currentZoom) {<br />
const rect = this.viewport.getBoundingClientRect();<br />
const mouseX = e.clientX - rect.left;<br />
const mouseY = e.clientY - rect.top;<br />
const mapX = (this.viewport.scrollLeft + mouseX) / oldZoom;<br />
const mapY = (this.viewport.scrollTop + mouseY) / oldZoom;<br />
<br />
document.querySelectorAll('.mapa-image').forEach(img => {<br />
img.style.transform = `scale(${this.currentZoom})`;<br />
});<br />
<br />
this.updateMarkersPosition();<br />
this.viewport.scrollLeft = mapX * this.currentZoom - mouseX;<br />
this.viewport.scrollTop = mapY * this.currentZoom - mouseY;<br />
}<br />
});<br />
}<br />
<br />
loadConfig(config) {<br />
this.config = this.normalizeConfig(config);<br />
if (!this.config.layers || this.config.layers.length === 0) {<br />
console.error('Nenhuma camada encontrada');<br />
return;<br />
}<br />
this.currentZoom = this.config.mapConfig?.defaultZoom || 1;<br />
this.currentFloor = this.config.mapConfig?.initialFloor || 0;<br />
this.minZoom = this.config.mapConfig?.minZoom || 0.3;<br />
this.maxZoom = this.config.mapConfig?.maxZoom || 3;<br />
this.zoomStep = this.config.mapConfig?.zoomStep || 0.1;<br />
this.render();<br />
this.setupKeyboardShortcuts();<br />
return this;<br />
}<br />
<br />
loadJSON(url) {<br />
fetch(url)<br />
.then(response => response.json())<br />
.then(config => this.loadConfig(config))<br />
.catch(error => console.error('Erro ao carregar JSON:', error));<br />
return this;<br />
}<br />
<br />
normalizeConfig(config) {<br />
if (!config.mapConfig) config.mapConfig = {};<br />
if (!config.layers) config.layers = [];<br />
config.layers.forEach((layer, idx) => {<br />
if (layer.id === undefined) layer.id = idx;<br />
if (layer.name === undefined) layer.name = `Andar ${idx + 1}`;<br />
if (layer.imageUrl === undefined) layer.imageUrl = '';<br />
if (layer.offsetX === undefined) layer.offsetX = 0;<br />
if (layer.offsetY === undefined) layer.offsetY = 0;<br />
if (layer.scale === undefined || layer.scale === null) layer.scale = 1;<br />
if (layer.opacity === undefined || layer.opacity === null) layer.opacity = 100;<br />
if (!layer.markers) layer.markers = [];<br />
layer.markers.forEach(marker => {<br />
if (marker.x === undefined) marker.x = 0;<br />
if (marker.y === undefined) marker.y = 0;<br />
if (marker.hasBadge === undefined) marker.hasBadge = false;<br />
if (marker.action === undefined) marker.action = 'popup';<br />
if (!marker.actionData) marker.actionData = {};<br />
if (marker.iconUrl === undefined) marker.iconUrl = '';<br />
});<br />
});<br />
return config;<br />
}<br />
<br />
render() {<br />
if (!this.config || !this.config.layers.length) {<br />
this.showError('Nenhum dado para renderizar');<br />
return;<br />
}<br />
this.layersContainer.innerHTML = '';<br />
this.layers = [];<br />
this.markers = [];<br />
<br />
this.config.layers.forEach((layer) => {<br />
const $layer = document.createElement('div');<br />
$layer.className = 'mapa-layer';<br />
$layer.setAttribute('data-floor', layer.id);<br />
$layer.style.display = layer.id === this.currentFloor ? 'block' : 'none';<br />
$layer.style.position = 'absolute';<br />
$layer.style.top = '0';<br />
$layer.style.left = '0';<br />
$layer.style.transform = `translate(${layer.offsetX}px, ${layer.offsetY}px)`;<br />
$layer.style.opacity = (layer.opacity || 100) / 100;<br />
<br />
const $img = document.createElement('img');<br />
$img.className = 'mapa-image';<br />
$img.style.display = 'block';<br />
$img.style.transform = `scale(${this.currentZoom})`;<br />
$img.style.transformOrigin = '0 0';<br />
$img.style.pointerEvents = 'none';<br />
$img.src = layer.imageUrl || '';<br />
<br />
$img.onerror = () => {<br />
const canvas = document.createElement('canvas');<br />
canvas.width = 800;<br />
canvas.height = 600;<br />
const ctx = canvas.getContext('2d');<br />
ctx.fillStyle = '#334155';<br />
ctx.fillRect(0, 0, canvas.width, canvas.height);<br />
ctx.fillStyle = 'white';<br />
ctx.font = '20px Arial';<br />
ctx.fillText(layer.name || 'Andar', 50, 100);<br />
$img.src = canvas.toDataURL();<br />
};<br />
<br />
$img.onload = () => {<br />
this.layersContainer.style.width = `${$img.width}px`;<br />
this.layersContainer.style.height = `${$img.height}px`;<br />
this.centerMap();<br />
};<br />
<br />
$layer.appendChild($img);<br />
<br />
const $markersContainer = document.createElement('div');<br />
$markersContainer.style.position = 'absolute';<br />
$markersContainer.style.top = '0';<br />
$markersContainer.style.left = '0';<br />
$markersContainer.style.width = '100%';<br />
$markersContainer.style.height = '100%';<br />
$markersContainer.style.pointerEvents = 'none';<br />
<br />
if (layer.markers && layer.markers.length) {<br />
layer.markers.forEach(marker => {<br />
const $marker = this.createMarker(marker, layer.id);<br />
$markersContainer.appendChild($marker);<br />
this.markers.push({ element: $marker, data: marker });<br />
});<br />
}<br />
<br />
$layer.appendChild($markersContainer);<br />
this.layersContainer.appendChild($layer);<br />
this.layers.push($layer);<br />
});<br />
this.updateMarkersPosition();<br />
this.isReady = true;<br />
}<br />
<br />
createMarker(marker, floorId) {<br />
const $marker = document.createElement('div');<br />
$marker.className = 'mapa-marker';<br />
$marker.setAttribute('data-marker-id', marker.id);<br />
$marker.setAttribute('data-floor', floorId);<br />
$marker.style.position = 'absolute';<br />
$marker.style.left = `${marker.x * this.currentZoom}px`;<br />
$marker.style.top = `${marker.y * this.currentZoom}px`;<br />
$marker.style.zIndex = '100';<br />
$marker.style.transform = 'translate(-50%, -50%)';<br />
$marker.style.pointerEvents = 'auto';<br />
<br />
const hasAction = marker.action && marker.action !== 'none';<br />
$marker.style.cursor = hasAction ? 'pointer' : 'default';<br />
<br />
const iconSize = Math.max(16, Math.floor(16 * this.currentZoom));<br />
let iconHtml = '';<br />
<br />
if (marker.iconUrl && marker.iconUrl !== '') {<br />
iconHtml = `<img src="${marker.iconUrl}" style="width:${iconSize}px; height:${iconSize}px; object-fit:contain;">`;<br />
} else {<br />
iconHtml = `<i class="fas fa-map-marker-alt" style="font-size:${iconSize}px;"></i>`;<br />
}<br />
<br />
$marker.innerHTML = `<br />
<div class="mapa-marker-icon" style="display:flex; align-items:center; justify-content:center; pointer-events:none;">${iconHtml}</div><br />
<div class="mapa-marker-tooltip" style="position:absolute; bottom:100%; left:50%; transform:translateX(-50%); background:#1e293b; color:white; padding:4px 8px; border-radius:6px; font-size:10px; white-space:nowrap; opacity:0; visibility:hidden; transition:0.2s; pointer-events:none; z-index:101;"><br />
<strong>${marker.name || 'Marcador'}</strong><br />
</div><br />
`;<br />
<br />
$marker.addEventListener('mouseenter', () => {<br />
$marker.style.transform = 'translate(-50%, -50%) scale(1.1)';<br />
const tooltip = $marker.querySelector('.mapa-marker-tooltip');<br />
if (tooltip) {<br />
tooltip.style.opacity = '1';<br />
tooltip.style.visibility = 'visible';<br />
}<br />
});<br />
<br />
$marker.addEventListener('mouseleave', () => {<br />
$marker.style.transform = 'translate(-50%, -50%) scale(1)';<br />
const tooltip = $marker.querySelector('.mapa-marker-tooltip');<br />
if (tooltip) {<br />
tooltip.style.opacity = '0';<br />
tooltip.style.visibility = 'hidden';<br />
}<br />
});<br />
<br />
if (hasAction) {<br />
$marker.addEventListener('click', (e) => {<br />
e.stopPropagation();<br />
this.executeAction(marker);<br />
});<br />
}<br />
<br />
return $marker;<br />
}<br />
<br />
executeAction(marker) {<br />
switch (marker.action) {<br />
case 'popup':<br />
this.showPopup(marker);<br />
break;<br />
case 'nextFloor':<br />
this.nextFloor();<br />
break;<br />
case 'prevFloor':<br />
this.prevFloor();<br />
break;<br />
case 'gotoFloor':<br />
if (marker.actionData?.floorId !== undefined) {<br />
this.goToFloor(marker.actionData.floorId);<br />
}<br />
break;<br />
case 'link':<br />
if (marker.actionData?.url) {<br />
window.open(marker.actionData.url, marker.actionData.target || '_blank');<br />
}<br />
break;<br />
}<br />
}<br />
<br />
showPopup(marker) {<br />
let modal = document.getElementById('mapa-viewer-modal');<br />
if (!modal) {<br />
modal = document.createElement('div');<br />
modal.id = 'mapa-viewer-modal';<br />
modal.style.cssText = 'display:none; position:fixed; z-index:10000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7); justify-content:center; align-items:center;';<br />
modal.innerHTML = `<br />
<div style="background:#1e293b; border-radius:16px; max-width:350px; width:90%; padding:20px; position:relative; border:1px solid #334155;"><br />
<span style="position:absolute; right:15px; top:10px; font-size:24px; cursor:pointer; color:#94a3b8;">&times;</span><br />
<div id="mapa-viewer-popup-content"></div><br />
</div><br />
`;<br />
document.body.appendChild(modal);<br />
modal.querySelector('span').addEventListener('click', () => {<br />
modal.style.display = 'none';<br />
});<br />
modal.addEventListener('click', (e) => {<br />
if (e.target === modal) modal.style.display = 'none';<br />
});<br />
}<br />
<br />
const content = modal.querySelector('#mapa-viewer-popup-content');<br />
content.innerHTML = `<br />
<div style="display:flex; align-items:center; margin-bottom:12px;"><br />
<h3 style="margin:0; color:#a5b4fc;">${marker.name}</h3><br />
</div><br />
<p style="color:#cbd5e1;">${marker.actionData?.text || 'Sem informações'}</p><br />
`;<br />
modal.style.display = 'flex';<br />
}<br />
<br />
updateMarkersPosition() {<br />
this.markers.forEach(({ element, data }) => {<br />
if (parseInt(element.getAttribute('data-floor')) === this.currentFloor) {<br />
const zoomedX = data.x * this.currentZoom;<br />
const zoomedY = data.y * this.currentZoom;<br />
element.style.left = `${zoomedX}px`;<br />
element.style.top = `${zoomedY}px`;<br />
<br />
const iconSize = Math.max(24, Math.floor(24 * this.currentZoom));<br />
const iconDiv = element.querySelector('.mapa-marker-icon');<br />
if (iconDiv) {<br />
if (data.iconUrl && data.iconUrl !== '') {<br />
let img = iconDiv.querySelector('img');<br />
if (img) {<br />
img.style.width = `${iconSize}px`;<br />
img.style.height = `${iconSize}px`;<br />
}<br />
} else {<br />
let icon = iconDiv.querySelector('i');<br />
if (icon) {<br />
icon.style.fontSize = `${iconSize}px`;<br />
}<br />
}<br />
}<br />
}<br />
});<br />
}<br />
<br />
centerMap() {<br />
setTimeout(() => {<br />
const layersWidth = this.layersContainer.scrollWidth;<br />
const layersHeight = this.layersContainer.scrollHeight;<br />
const viewportWidth = this.viewport.clientWidth;<br />
const viewportHeight = this.viewport.clientHeight;<br />
if (layersWidth > 0 && layersHeight > 0) {<br />
this.viewport.scrollLeft = (layersWidth - viewportWidth) / 2;<br />
this.viewport.scrollTop = (layersHeight - viewportHeight) / 2;<br />
}<br />
}, 100);<br />
}<br />
<br />
zoomIn() {<br />
const oldZoom = this.currentZoom;<br />
this.currentZoom = Math.min(this.currentZoom + this.zoomStep, this.maxZoom);<br />
if (oldZoom !== this.currentZoom) {<br />
this.applyZoomChange(oldZoom);<br />
}<br />
}<br />
<br />
zoomOut() {<br />
const oldZoom = this.currentZoom;<br />
this.currentZoom = Math.max(this.currentZoom - this.zoomStep, this.minZoom);<br />
if (oldZoom !== this.currentZoom) {<br />
this.applyZoomChange(oldZoom);<br />
}<br />
}<br />
<br />
applyZoomChange(oldZoom) {<br />
const rect = this.viewport.getBoundingClientRect();<br />
const centerX = rect.width / 2;<br />
const centerY = rect.height / 2;<br />
const scrollX = (this.viewport.scrollLeft + centerX) / oldZoom;<br />
const scrollY = (this.viewport.scrollTop + centerY) / oldZoom;<br />
<br />
document.querySelectorAll('.mapa-image').forEach(img => {<br />
img.style.transform = `scale(${this.currentZoom})`;<br />
});<br />
<br />
this.updateMarkersPosition();<br />
this.viewport.scrollLeft = scrollX * this.currentZoom - centerX;<br />
this.viewport.scrollTop = scrollY * this.currentZoom - centerY;<br />
}<br />
<br />
resetView() {<br />
this.currentZoom = this.config.mapConfig?.defaultZoom || 1;<br />
document.querySelectorAll('.mapa-image').forEach(img => {<br />
img.style.transform = `scale(${this.currentZoom})`;<br />
});<br />
this.centerMap();<br />
this.updateMarkersPosition();<br />
}<br />
<br />
prevFloor() {<br />
const layers = this.config.layers.sort((a,b) => a.id - b.id);<br />
const currentIndex = layers.findIndex(l => l.id === this.currentFloor);<br />
if (currentIndex > 0) {<br />
this.goToFloor(layers[currentIndex - 1].id);<br />
}<br />
}<br />
<br />
nextFloor() {<br />
const layers = this.config.layers.sort((a,b) => a.id - b.id);<br />
const currentIndex = layers.findIndex(l => l.id === this.currentFloor);<br />
if (currentIndex < layers.length - 1) {<br />
this.goToFloor(layers[currentIndex + 1].id);<br />
}<br />
}<br />
<br />
goToFloor(floorId) {<br />
this.currentFloor = floorId;<br />
this.layers.forEach(layer => {<br />
const layerFloor = parseInt(layer.getAttribute('data-floor'));<br />
layer.style.display = layerFloor === floorId ? 'block' : 'none';<br />
});<br />
this.updateMarkersPosition();<br />
}<br />
<br />
goToCoordinates(x, y, zoom = null, floorId = null) {<br />
if (floorId !== null && floorId !== this.currentFloor) {<br />
this.goToFloor(floorId);<br />
setTimeout(() => this._centerOnPoint(x, y, zoom), 100);<br />
} else {<br />
this._centerOnPoint(x, y, zoom);<br />
}<br />
}<br />
<br />
_centerOnPoint(x, y, zoom) {<br />
if (zoom !== null && zoom !== this.currentZoom) {<br />
const oldZoom = this.currentZoom;<br />
this.currentZoom = Math.min(Math.max(zoom, this.minZoom), this.maxZoom);<br />
if (oldZoom !== this.currentZoom) {<br />
this.applyZoomChange(oldZoom);<br />
}<br />
}<br />
<br />
const viewportWidth = this.viewport.clientWidth;<br />
const viewportHeight = this.viewport.clientHeight;<br />
let screenX = x * this.currentZoom;<br />
let screenY = y * this.currentZoom;<br />
let targetScrollX = screenX - (viewportWidth / 2);<br />
let targetScrollY = screenY - (viewportHeight / 2);<br />
<br />
this.viewport.scrollLeft = Math.max(0, targetScrollX);<br />
this.viewport.scrollTop = Math.max(0, targetScrollY);<br />
}<br />
<br />
setupKeyboardShortcuts() {<br />
const handler = (e) => {<br />
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;<br />
switch (e.key) {<br />
case '+': case '=': e.preventDefault(); this.zoomIn(); break;<br />
case '-': case '_': e.preventDefault(); this.zoomOut(); break;<br />
case 'r': case 'R': e.preventDefault(); this.resetView(); break;<br />
case 'ArrowUp': case 'PageUp': e.preventDefault(); this.prevFloor(); break;<br />
case 'ArrowDown': case 'PageDown': e.preventDefault(); this.nextFloor(); break;<br />
}<br />
};<br />
document.removeEventListener('keydown', this.keyHandler);<br />
this.keyHandler = handler;<br />
document.addEventListener('keydown', this.keyHandler);<br />
}<br />
<br />
showError(message) {<br />
this.container.innerHTML = `<div style="display:flex; align-items:center; justify-content:center; height:100%; color:#ef4444; text-align:center; padding:20px;"><br />
<div>❌ ${message}</div><br />
</div>`;<br />
}<br />
<br />
destroy() {<br />
if (this.keyHandler) {<br />
document.removeEventListener('keydown', this.keyHandler);<br />
}<br />
this.container.innerHTML = '';<br />
this.isReady = false;<br />
}<br />
}<br />
<br />
(function() {<br />
var containerId = 'mapa-viewer-<!--{$id|escape:'quotes'|default:'mapa-default'}-->';<br />
var configJSON = <!--{$configJSON|default:'null'}-->; // Recebe o JSON<br />
var urlJSON = '<!--{$url|escape:'quotes'}-->'; // Recebe URL do JSON<br />
<br />
// Nome da variável global única para este mapa<br />
var globalVarName = 'mapaViewer_<!--{$id|escape:'quotes'|default:'mapa-default'}-->';<br />
<br />
function iniciarMapa() {<br />
var container = document.getElementById(containerId);<br />
if (!container) return;<br />
if (container.hasAttribute('data-iniciado')) return;<br />
<br />
container.setAttribute('data-iniciado', 'true');<br />
<br />
var viewer = null;<br />
<br />
if (configJSON && configJSON !== 'null') {<br />
// Configuração inline<br />
viewer = new MapaViewer(containerId, configJSON);<br />
} else if (urlJSON) {<br />
// Configuração via URL<br />
fetch(urlJSON)<br />
.then(response => response.json())<br />
.then(config => {<br />
window[globalVarName] = new MapaViewer(containerId, config);<br />
})<br />
.catch(error => {<br />
console.error('Erro ao carregar mapa:', error);<br />
container.innerHTML = '<div style="color:red;padding:20px;">❌ Erro ao carregar mapa: ' + error.message + '</div>';<br />
});<br />
return; // Sai porque o fetch é assíncrono<br />
} else {<br />
container.innerHTML = '<div style="color:red;padding:20px;">❌ Nenhuma configuração fornecida</div>';<br />
return;<br />
}<br />
<br />
// Guarda a instância globalmente para acesso externo<br />
if (viewer) {<br />
window[globalVarName] = viewer;<br />
console.log('Mapa inicializado! Use window.' + globalVarName + ' para controlar');<br />
console.log('Exemplo: window.' + globalVarName + '.nextFloor()');<br />
}<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', iniciarMapa);<br />
} else {<br />
iniciarMapa();<br />
}<br />
})();<br />
</script><br />
</includeonly></div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Predefini%C3%A7%C3%A3o:MapaViewer&diff=46012
Predefinição:MapaViewer
2026-04-11T15:15:55Z
<p>Ceu azul: </p>
<hr />
<div><div class="mapa-visualizador-padrao"><br />
{{#widget:MapaViewer<br />
|id={{{id|}}}<br />
|largura={{{largura|100%}}}<br />
|altura={{{altura|500px}}}<br />
|configJSON={{{configJSON|}}}<br />
|url={{{url|}}}<br />
}}<br />
<br />
{{#widget:MapaControle<br />
|id={{{id|}}}<br />
}}<br />
</div></div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Widget:MapaControle&diff=46011
Widget:MapaControle
2026-04-11T15:14:29Z
<p>Ceu azul: </p>
<hr />
<div><div><br />
<button onclick="window.mapaViewer_<!--{$id}-->.prevFloor()">⬆️ Subir</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.nextFloor()">⬇️ Descer</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.zoomIn()">🔍 +</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.zoomOut()">🔍 -</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.goToFloor(0)">🎯 Ir para Térreo</button><br />
<button onclick="window.mapaViewer_<!--{$id}-->.goToFloor(1)">🎯 Ir para Primeiro</button><br />
</div></div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Widget:MapaControle&diff=46010
Widget:MapaControle
2026-04-11T15:12:47Z
<p>Ceu azul: </p>
<hr />
<div>{{{id|}}}<br />
<!--{$id}--><br />
<br />
<div style="margin-top: 20px;"><br />
<button onclick="window.mapaViewer_.prevFloor()">⬆️ Subir</button><br />
<button onclick="window.mapaViewer_meu-mapa.nextFloor()">⬇️ Descer</button><br />
<button onclick="window.mapaViewer_meu-mapa.zoomIn()">🔍 +</button><br />
<button onclick="window.mapaViewer_meu-mapa.zoomOut()">🔍 -</button><br />
<button onclick="window.mapaViewer_meu-mapa.goToFloor(0)">🎯 Ir para Térreo</button><br />
<button onclick="window.mapaViewer_meu-mapa.goToFloor(1)">🎯 Ir para Primeiro</button><br />
</div></div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Widget:MapaControle&diff=46009
Widget:MapaControle
2026-04-11T15:11:21Z
<p>Ceu azul: </p>
<hr />
<div>{{{id|}}}<br />
<br />
<div style="margin-top: 20px;"><br />
<button onclick="window.mapaViewer_.prevFloor()">⬆️ Subir</button><br />
<button onclick="window.mapaViewer_meu-mapa.nextFloor()">⬇️ Descer</button><br />
<button onclick="window.mapaViewer_meu-mapa.zoomIn()">🔍 +</button><br />
<button onclick="window.mapaViewer_meu-mapa.zoomOut()">🔍 -</button><br />
<button onclick="window.mapaViewer_meu-mapa.goToFloor(0)">🎯 Ir para Térreo</button><br />
<button onclick="window.mapaViewer_meu-mapa.goToFloor(1)">🎯 Ir para Primeiro</button><br />
</div></div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Widget:MapaControle&diff=46008
Widget:MapaControle
2026-04-11T14:58:07Z
<p>Ceu azul: </p>
<hr />
<div><br />
<includeonly><br />
{{#widget:MapaViewer<br />
|id=<!--{$id|escape:'quotes'|default:'mapa-default'}--><br />
|largura=<!--{$largura|escape:'quotes'|default:'100%'}--><br />
|altura=<!--{$altura|escape:'quotes'|default:'500px'}--><br />
|configJSON=<!--{$configJSON|default:'null'}--><br />
|url=<!--{$url|escape:'quotes'}--><br />
}}<br />
</includeonly></div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Widget:MapaControle&diff=46007
Widget:MapaControle
2026-04-11T14:57:16Z
<p>Ceu azul: </p>
<hr />
<div><!--{$id|escape:'quotes'|default:'mapa-default'}--><br />
<br />
{{#widget:MapaViewer<br />
|id=<!--{$id|escape:'quotes'|default:'mapa-default'}--><br />
|largura=<!--{$largura|escape:'quotes'|default:'100%'}--><br />
|altura=<!--{$altura|escape:'quotes'|default:'500px'}--><br />
|configJSON=<!--{$configJSON|default:'null'}--><br />
|url=<!--{$url|escape:'quotes'}--><br />
}}</div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Widget:MapaControle&diff=46006
Widget:MapaControle
2026-04-11T14:56:26Z
<p>Ceu azul: </p>
<hr />
<div><!--{$id|escape:'quotes'|default:'mapa-default'}--><br />
<br />
{{#widget:MapaViewer<br />
|id=<!--{$id|escape:'quotes'|default:'mapa-default'}--><br />
|largura=<!--{$largura|escape:'quotes'|default:'100%'}--><br />
|altura=<!--{$altura|escape:'quotes'|default:'500px'}<br />
|configJSON=<!--{$configJSON|default:'null'}--><br />
|url=<!--{$url|escape:'quotes'}--><br />
}}</div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Widget:MapaControle&diff=46005
Widget:MapaControle
2026-04-11T14:55:44Z
<p>Ceu azul: </p>
<hr />
<div><!--{$id|escape:'quotes'|default:'mapa-default'}--><br />
<br />
{{#widget:MapaViewer<br />
|id=<!--{$id|escape:'quotes'|default:'mapa-default'}--><br />
|largura=<!--{$largura|escape:'quotes'|default:'100%'}--><br />
|altura={<!--{$altura|escape:'quotes'|default:'500px'}<br />
|configJSON=<!--{$configJSON|default:'null'}--><br />
|url=<!--{$url|escape:'quotes'}--><br />
}}</div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Widget:MapaControle&diff=46004
Widget:MapaControle
2026-04-11T14:53:36Z
<p>Ceu azul: </p>
<hr />
<div><!--{$id|escape:'quotes'|default:'mapa-default'}--><br />
<br />
{{#widget:MapaViewer<br />
|id={$id}<br />
|largura={$largura}<br />
|altura={$altura}<br />
|configJSON={$configJSON}<br />
|url={$url}<br />
}}</div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Widget:MapaControle&diff=46003
Widget:MapaControle
2026-04-11T14:52:54Z
<p>Ceu azul: </p>
<hr />
<div>{$id}<br />
{{$id}}<br />
{{{$id}}}<br />
<br />
{{#widget:MapaViewer<br />
|id={$id}<br />
|largura={$largura}<br />
|altura={$altura}<br />
|configJSON={$configJSON}<br />
|url={$url}<br />
}}</div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Widget:MapaControle&diff=46002
Widget:MapaControle
2026-04-11T14:52:06Z
<p>Ceu azul: </p>
<hr />
<div>{$id}<br />
<br />
{{#widget:MapaViewer<br />
|id={$id}<br />
|largura={$largura}<br />
|altura={$altura}<br />
|configJSON={$configJSON}<br />
|url={$url}<br />
}}</div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Widget:MapaControle&diff=46001
Widget:MapaControle
2026-04-11T14:46:52Z
<p>Ceu azul: </p>
<hr />
<div>{{#widget:MapaViewer<br />
|id={$id}<br />
|largura={$largura}<br />
|altura={$altura}<br />
|configJSON={$configJSON}<br />
|url={$url}<br />
}}</div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Widget:MapaControle&diff=46000
Widget:MapaControle
2026-04-11T14:45:36Z
<p>Ceu azul: </p>
<hr />
<div>{{#widget:MapaViewer<br />
|id={$id|}<br />
|largura={$largura|100%}<br />
|altura={$altura|500px}<br />
|configJSON={$configJSON|}<br />
|url={$url|}<br />
}}</div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Widget:MapaControle&diff=45999
Widget:MapaControle
2026-04-11T14:35:52Z
<p>Ceu azul: </p>
<hr />
<div>{{#widget:MapaViewer<br />
|id={{{id|}}}<br />
|largura={{{largura|100%}}}<br />
|altura={{{altura|500px}}}<br />
|configJSON={{{configJSON|}}}<br />
|url={{{url|}}}<br />
}}</div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Predefini%C3%A7%C3%A3o:MapaViewer&diff=45998
Predefinição:MapaViewer
2026-04-11T14:33:38Z
<p>Ceu azul: </p>
<hr />
<div>{{#widget:MapaControle<br />
|id={{{id|}}}<br />
|largura={{{largura|100%}}}<br />
|altura={{{altura|500px}}}<br />
|configJSON={{{configJSON|}}}<br />
|url={{{url|}}}<br />
}}</div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Widget:MapaControle&diff=45997
Widget:MapaControle
2026-04-11T14:33:03Z
<p>Ceu azul: Criou página com '{{#widget:MapaViewer}}'</p>
<hr />
<div>{{#widget:MapaViewer}}</div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Mapa:BlackMarket&diff=45996
Mapa:BlackMarket
2026-04-11T14:25:51Z
<p>Ceu azul: </p>
<hr />
<div>{<br />
"mapConfig": {<br />
"initialFloor": 1,<br />
"defaultZoom": 1,<br />
"minZoom": 0.3,<br />
"maxZoom": 3,<br />
"zoomStep": 0.1<br />
},<br />
"layers": [<br />
{<br />
"id": 0,<br />
"name": "Andar",<br />
"imageUrl": "https://wiki.gla.com.br/images/b/b7/Black_market_andar01.png",<br />
"offsetX": 0,<br />
"offsetY": 0,<br />
"scale": 1,<br />
"opacity": 100,<br />
"markers": [<br />
{<br />
"id": "m_1775913455257",<br />
"name": "Novo Marcador",<br />
"x": 641.25,<br />
"y": 385,<br />
"iconUrl": "https://wiki.gla.com.br/images/a/ab/Escada.png",<br />
"hasBadge": false,<br />
"action": "nextFloor",<br />
"actionData": {}<br />
},<br />
{<br />
"id": "m_1775913456593",<br />
"name": "Novo Marcador",<br />
"x": 641.25,<br />
"y": 257.5,<br />
"iconUrl": "https://wiki.gla.com.br/images/a/ab/Escada.png",<br />
"hasBadge": false,<br />
"action": "nextFloor",<br />
"actionData": {}<br />
}<br />
]<br />
},<br />
{<br />
"id": 1,<br />
"name": "Andar",<br />
"imageUrl": "https://wiki.gla.com.br/images/2/22/Black_market_terreo.png",<br />
"offsetX": 0,<br />
"offsetY": 0,<br />
"scale": 1,<br />
"opacity": 100,<br />
"markers": [<br />
{<br />
"id": "m_1775913428226",<br />
"name": "Novo Marcador",<br />
"x": 245,<br />
"y": 490,<br />
"iconUrl": "https://wiki.gla.com.br/images/a/ab/Escada.png",<br />
"hasBadge": false,<br />
"action": "nextFloor",<br />
"actionData": {}<br />
},<br />
{<br />
"id": "m_1775913431714",<br />
"name": "Novo Marcador",<br />
"x": 580,<br />
"y": 538,<br />
"iconUrl": "https://wiki.gla.com.br/images/a/ab/Escada.png",<br />
"hasBadge": false,<br />
"action": "nextFloor",<br />
"actionData": {}<br />
},<br />
{<br />
"id": "m_1775913440529",<br />
"name": "Novo Marcador",<br />
"x": 693.076923076923,<br />
"y": 489.9999999999999,<br />
"iconUrl": "https://wiki.gla.com.br/images/a/ab/Escada.png",<br />
"hasBadge": false,<br />
"action": "nextFloor",<br />
"actionData": {}<br />
},<br />
{<br />
"id": "m_1775913443737",<br />
"name": "Novo Marcador",<br />
"x": 804.6153846153844,<br />
"y": 539.2307692307692,<br />
"iconUrl": "https://wiki.gla.com.br/images/a/ab/Escada.png",<br />
"hasBadge": false,<br />
"action": "nextFloor",<br />
"actionData": {}<br />
},<br />
{<br />
"id": "m_1775913449649",<br />
"name": "Novo Marcador",<br />
"x": 1157.2727272727273,<br />
"y": 506.3636363636363,<br />
"iconUrl": "https://wiki.gla.com.br/images/a/ab/Escada.png",<br />
"hasBadge": false,<br />
"action": "nextFloor",<br />
"actionData": {}<br />
},<br />
{<br />
"id": "m_1775913482097",<br />
"name": "Novo Marcador",<br />
"x": 638.8888888888889,<br />
"y": 385.55555555555554,<br />
"iconUrl": "https://wiki.gla.com.br/images/a/ab/Escada.png",<br />
"hasBadge": false,<br />
"action": "prevFloor",<br />
"actionData": {}<br />
},<br />
{<br />
"id": "m_1775913483337",<br />
"name": "Novo Marcador",<br />
"x": 641.1111111111111,<br />
"y": 255.55555555555554,<br />
"iconUrl": "https://wiki.gla.com.br/images/a/ab/Escada.png",<br />
"hasBadge": false,<br />
"action": "prevFloor",<br />
"actionData": {}<br />
}<br />
]<br />
},<br />
{<br />
"id": 2,<br />
"name": "Andar",<br />
"imageUrl": "https://wiki.gla.com.br/images/d/d8/Black_market_subsolo01.png",<br />
"offsetX": 0,<br />
"offsetY": 0,<br />
"scale": 1,<br />
"opacity": 100,<br />
"markers": [<br />
{<br />
"id": "m_1775913462330",<br />
"name": "Novo Marcador",<br />
"x": 693.75,<br />
"y": 508.75,<br />
"iconUrl": "https://wiki.gla.com.br/images/a/ab/Escada.png",<br />
"hasBadge": false,<br />
"action": "prevFloor",<br />
"actionData": {}<br />
},<br />
{<br />
"id": "m_1775913463385",<br />
"name": "Novo Marcador",<br />
"x": 711.25,<br />
"y": 511.25,<br />
"iconUrl": "https://wiki.gla.com.br/images/a/ab/Escada.png",<br />
"hasBadge": false,<br />
"action": "prevFloor",<br />
"actionData": {}<br />
},<br />
{<br />
"id": "m_1775913466441",<br />
"name": "Novo Marcador",<br />
"x": 725,<br />
"y": 510,<br />
"iconUrl": "https://wiki.gla.com.br/images/a/ab/Escada.png",<br />
"hasBadge": false,<br />
"action": "prevFloor",<br />
"actionData": {}<br />
},<br />
{<br />
"id": "m_1775913469345",<br />
"name": "Novo Marcador",<br />
"x": 1172.5,<br />
"y": 510,<br />
"iconUrl": "https://wiki.gla.com.br/images/a/ab/Escada.png",<br />
"hasBadge": false,<br />
"action": "prevFloor",<br />
"actionData": {}<br />
},<br />
{<br />
"id": "m_1775913474121",<br />
"name": "Novo Marcador",<br />
"x": 245.55555555555554,<br />
"y": 496.66666666666663,<br />
"iconUrl": "https://wiki.gla.com.br/images/a/ab/Escada.png",<br />
"hasBadge": false,<br />
"action": "prevFloor",<br />
"actionData": {}<br />
}<br />
]<br />
}<br />
]<br />
}</div>
Ceu azul
https://wiki.gla.com.br/index.php?title=M%C3%B3dulo:MapaJson&diff=45995
Módulo:MapaJson
2026-04-11T14:24:20Z
<p>Ceu azul: </p>
<hr />
<div>local p = {}<br />
<br />
function p.getDados(frame)<br />
local pageName = frame.args[1] or ''<br />
<br />
if pageName == '' then<br />
return ''<br />
end<br />
<br />
local title = mw.title.new(pageName)<br />
if not title or not title.exists then<br />
return ''<br />
end<br />
<br />
local jsonContent = title:getContent() or ''<br />
<br />
-- Apenas remover espaços extras<br />
jsonContent = jsonContent:gsub("\n", "")<br />
jsonContent = jsonContent:gsub("\r", "")<br />
jsonContent = jsonContent:gsub("\t", " ")<br />
jsonContent = jsonContent:gsub(" +", " ")<br />
<br />
return jsonContent<br />
end<br />
<br />
return p</div>
Ceu azul
https://wiki.gla.com.br/index.php?title=M%C3%B3dulo:MapaJson&diff=45994
Módulo:MapaJson
2026-04-11T14:19:24Z
<p>Ceu azul: </p>
<hr />
<div>local p = {}<br />
<br />
function p.getDados(frame)<br />
-- Carrega o conteúdo da página JSON<br />
local pageName = frame.args[1] or ''<br />
local conteudo = mw.title.new(pageName):getContent()<br />
<br />
-- Transforma o texto JSON em uma tabela Lua<br />
local dados = mw.text.jsonDecode(conteudo)<br />
<br />
-- Exemplo: Pegar um valor específico chamado 'item'<br />
-- Você adapta isso conforme a estrutura do seu JSON<br />
return dados<br />
end<br />
<br />
return p</div>
Ceu azul
https://wiki.gla.com.br/index.php?title=M%C3%B3dulo:MapaJson&diff=45993
Módulo:MapaJson
2026-04-11T14:16:16Z
<p>Ceu azul: </p>
<hr />
<div>local p = {}<br />
<br />
function p.getDados(frame)<br />
-- Carrega o conteúdo da página JSON<br />
local titulo = "Mapa:Blackmarket"<br />
local conteudo = mw.title.new(titulo):getContent()<br />
<br />
-- Transforma o texto JSON em uma tabela Lua<br />
local dados = mw.text.jsonDecode(conteudo)<br />
<br />
-- Exemplo: Pegar um valor específico chamado 'item'<br />
-- Você adapta isso conforme a estrutura do seu JSON<br />
return dados<br />
end<br />
<br />
return p</div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Widget:MapaViewer&diff=45992
Widget:MapaViewer
2026-04-11T13:53:36Z
<p>Ceu azul: </p>
<hr />
<div><includeonly><br />
<div id="mapa-viewer-<!--{$id|escape:'quotes'|default:'mapa-default'}-->" style="width: <!--{$largura|escape:'quotes'|default:'100%'}-->; height: <!--{$altura|escape:'quotes'|default:'500px'}-->;"></div><br />
<button onclick="window.mapaViewer_<!--{$id|escape:'quotes'|default:'mapa-default'}-->.prevFloor()">⬆️ Subir</button><br />
<button onclick="window.mapaViewer_{{{id|}}}.nextFloor()">⬇️ Descer</button><br />
<script><br />
class MapaViewer {<br />
constructor(containerId, configOrUrl) {<br />
this.container = document.getElementById(containerId);<br />
if (!this.container) {<br />
console.error(`Container "${containerId}" não encontrado`);<br />
return;<br />
}<br />
<br />
this.config = null;<br />
this.currentZoom = 1;<br />
this.currentFloor = 0;<br />
this.minZoom = 0.3;<br />
this.maxZoom = 3;<br />
this.zoomStep = 0.1;<br />
this.layers = [];<br />
this.markers = [];<br />
this.isPanning = false;<br />
this.panStart = { x: 0, y: 0, scrollLeft: 0, scrollTop: 0 };<br />
this.isReady = false;<br />
<br />
this.init();<br />
<br />
if (typeof configOrUrl === 'string') {<br />
if (configOrUrl.startsWith('http')) {<br />
this.loadJSON(configOrUrl);<br />
} else {<br />
try {<br />
this.loadConfig(JSON.parse(configOrUrl));<br />
} catch(e) {<br />
console.error('JSON inválido:', e);<br />
}<br />
}<br />
} else if (configOrUrl) {<br />
this.loadConfig(configOrUrl);<br />
}<br />
}<br />
<br />
init() {<br />
this.container.innerHTML = '';<br />
this.container.style.position = 'relative';<br />
this.container.style.overflow = 'hidden';<br />
this.container.style.background = '#0f172a';<br />
<br />
this.viewport = document.createElement('div');<br />
this.viewport.style.cssText = 'width:100%;height:100%;overflow:hidden;cursor:grab;position:relative;';<br />
<br />
this.layersContainer = document.createElement('div');<br />
this.layersContainer.style.cssText = 'position:relative;min-width:100%;min-height:100%;';<br />
<br />
this.viewport.appendChild(this.layersContainer);<br />
this.container.appendChild(this.viewport);<br />
this.bindEvents();<br />
}<br />
<br />
bindEvents() {<br />
this.viewport.addEventListener('mousedown', (e) => {<br />
if (e.target.closest('.mapa-marker')) return;<br />
this.isPanning = true;<br />
this.panStart = {<br />
x: e.clientX,<br />
y: e.clientY,<br />
scrollLeft: this.viewport.scrollLeft,<br />
scrollTop: this.viewport.scrollTop<br />
};<br />
this.viewport.style.cursor = 'grabbing';<br />
e.preventDefault();<br />
});<br />
<br />
window.addEventListener('mousemove', (e) => {<br />
if (!this.isPanning) return;<br />
this.viewport.scrollLeft = this.panStart.scrollLeft - (e.clientX - this.panStart.x);<br />
this.viewport.scrollTop = this.panStart.scrollTop - (e.clientY - this.panStart.y);<br />
});<br />
<br />
window.addEventListener('mouseup', () => {<br />
this.isPanning = false;<br />
this.viewport.style.cursor = 'grab';<br />
});<br />
<br />
this.viewport.addEventListener('wheel', (e) => {<br />
e.preventDefault();<br />
const oldZoom = this.currentZoom;<br />
if (e.deltaY < 0) {<br />
this.currentZoom = Math.min(this.currentZoom + this.zoomStep, this.maxZoom);<br />
} else {<br />
this.currentZoom = Math.max(this.currentZoom - this.zoomStep, this.minZoom);<br />
}<br />
if (oldZoom !== this.currentZoom) {<br />
const rect = this.viewport.getBoundingClientRect();<br />
const mouseX = e.clientX - rect.left;<br />
const mouseY = e.clientY - rect.top;<br />
const mapX = (this.viewport.scrollLeft + mouseX) / oldZoom;<br />
const mapY = (this.viewport.scrollTop + mouseY) / oldZoom;<br />
<br />
document.querySelectorAll('.mapa-image').forEach(img => {<br />
img.style.transform = `scale(${this.currentZoom})`;<br />
});<br />
<br />
this.updateMarkersPosition();<br />
this.viewport.scrollLeft = mapX * this.currentZoom - mouseX;<br />
this.viewport.scrollTop = mapY * this.currentZoom - mouseY;<br />
}<br />
});<br />
}<br />
<br />
loadConfig(config) {<br />
this.config = this.normalizeConfig(config);<br />
if (!this.config.layers || this.config.layers.length === 0) {<br />
console.error('Nenhuma camada encontrada');<br />
return;<br />
}<br />
this.currentZoom = this.config.mapConfig?.defaultZoom || 1;<br />
this.currentFloor = this.config.mapConfig?.initialFloor || 0;<br />
this.minZoom = this.config.mapConfig?.minZoom || 0.3;<br />
this.maxZoom = this.config.mapConfig?.maxZoom || 3;<br />
this.zoomStep = this.config.mapConfig?.zoomStep || 0.1;<br />
this.render();<br />
this.setupKeyboardShortcuts();<br />
return this;<br />
}<br />
<br />
loadJSON(url) {<br />
fetch(url)<br />
.then(response => response.json())<br />
.then(config => this.loadConfig(config))<br />
.catch(error => console.error('Erro ao carregar JSON:', error));<br />
return this;<br />
}<br />
<br />
normalizeConfig(config) {<br />
if (!config.mapConfig) config.mapConfig = {};<br />
if (!config.layers) config.layers = [];<br />
config.layers.forEach((layer, idx) => {<br />
if (layer.id === undefined) layer.id = idx;<br />
if (layer.name === undefined) layer.name = `Andar ${idx + 1}`;<br />
if (layer.imageUrl === undefined) layer.imageUrl = '';<br />
if (layer.offsetX === undefined) layer.offsetX = 0;<br />
if (layer.offsetY === undefined) layer.offsetY = 0;<br />
if (layer.scale === undefined || layer.scale === null) layer.scale = 1;<br />
if (layer.opacity === undefined || layer.opacity === null) layer.opacity = 100;<br />
if (!layer.markers) layer.markers = [];<br />
layer.markers.forEach(marker => {<br />
if (marker.x === undefined) marker.x = 0;<br />
if (marker.y === undefined) marker.y = 0;<br />
if (marker.hasBadge === undefined) marker.hasBadge = false;<br />
if (marker.action === undefined) marker.action = 'popup';<br />
if (!marker.actionData) marker.actionData = {};<br />
if (marker.iconUrl === undefined) marker.iconUrl = '';<br />
});<br />
});<br />
return config;<br />
}<br />
<br />
render() {<br />
if (!this.config || !this.config.layers.length) {<br />
this.showError('Nenhum dado para renderizar');<br />
return;<br />
}<br />
this.layersContainer.innerHTML = '';<br />
this.layers = [];<br />
this.markers = [];<br />
<br />
this.config.layers.forEach((layer) => {<br />
const $layer = document.createElement('div');<br />
$layer.className = 'mapa-layer';<br />
$layer.setAttribute('data-floor', layer.id);<br />
$layer.style.display = layer.id === this.currentFloor ? 'block' : 'none';<br />
$layer.style.position = 'absolute';<br />
$layer.style.top = '0';<br />
$layer.style.left = '0';<br />
$layer.style.transform = `translate(${layer.offsetX}px, ${layer.offsetY}px)`;<br />
$layer.style.opacity = (layer.opacity || 100) / 100;<br />
<br />
const $img = document.createElement('img');<br />
$img.className = 'mapa-image';<br />
$img.style.display = 'block';<br />
$img.style.transform = `scale(${this.currentZoom})`;<br />
$img.style.transformOrigin = '0 0';<br />
$img.style.pointerEvents = 'none';<br />
$img.src = layer.imageUrl || '';<br />
<br />
$img.onerror = () => {<br />
const canvas = document.createElement('canvas');<br />
canvas.width = 800;<br />
canvas.height = 600;<br />
const ctx = canvas.getContext('2d');<br />
ctx.fillStyle = '#334155';<br />
ctx.fillRect(0, 0, canvas.width, canvas.height);<br />
ctx.fillStyle = 'white';<br />
ctx.font = '20px Arial';<br />
ctx.fillText(layer.name || 'Andar', 50, 100);<br />
$img.src = canvas.toDataURL();<br />
};<br />
<br />
$img.onload = () => {<br />
this.layersContainer.style.width = `${$img.width}px`;<br />
this.layersContainer.style.height = `${$img.height}px`;<br />
this.centerMap();<br />
};<br />
<br />
$layer.appendChild($img);<br />
<br />
const $markersContainer = document.createElement('div');<br />
$markersContainer.style.position = 'absolute';<br />
$markersContainer.style.top = '0';<br />
$markersContainer.style.left = '0';<br />
$markersContainer.style.width = '100%';<br />
$markersContainer.style.height = '100%';<br />
$markersContainer.style.pointerEvents = 'none';<br />
<br />
if (layer.markers && layer.markers.length) {<br />
layer.markers.forEach(marker => {<br />
const $marker = this.createMarker(marker, layer.id);<br />
$markersContainer.appendChild($marker);<br />
this.markers.push({ element: $marker, data: marker });<br />
});<br />
}<br />
<br />
$layer.appendChild($markersContainer);<br />
this.layersContainer.appendChild($layer);<br />
this.layers.push($layer);<br />
});<br />
this.updateMarkersPosition();<br />
this.isReady = true;<br />
}<br />
<br />
createMarker(marker, floorId) {<br />
const $marker = document.createElement('div');<br />
$marker.className = 'mapa-marker';<br />
$marker.setAttribute('data-marker-id', marker.id);<br />
$marker.setAttribute('data-floor', floorId);<br />
$marker.style.position = 'absolute';<br />
$marker.style.left = `${marker.x * this.currentZoom}px`;<br />
$marker.style.top = `${marker.y * this.currentZoom}px`;<br />
$marker.style.zIndex = '100';<br />
$marker.style.transform = 'translate(-50%, -50%)';<br />
$marker.style.pointerEvents = 'auto';<br />
<br />
const hasAction = marker.action && marker.action !== 'none';<br />
$marker.style.cursor = hasAction ? 'pointer' : 'default';<br />
<br />
const iconSize = Math.max(16, Math.floor(16 * this.currentZoom));<br />
let iconHtml = '';<br />
<br />
if (marker.iconUrl && marker.iconUrl !== '') {<br />
iconHtml = `<img src="${marker.iconUrl}" style="width:${iconSize}px; height:${iconSize}px; object-fit:contain;">`;<br />
} else {<br />
iconHtml = `<i class="fas fa-map-marker-alt" style="font-size:${iconSize}px;"></i>`;<br />
}<br />
<br />
$marker.innerHTML = `<br />
<div class="mapa-marker-icon" style="display:flex; align-items:center; justify-content:center; pointer-events:none;">${iconHtml}</div><br />
<div class="mapa-marker-tooltip" style="position:absolute; bottom:100%; left:50%; transform:translateX(-50%); background:#1e293b; color:white; padding:4px 8px; border-radius:6px; font-size:10px; white-space:nowrap; opacity:0; visibility:hidden; transition:0.2s; pointer-events:none; z-index:101;"><br />
<strong>${marker.name || 'Marcador'}</strong><br />
</div><br />
`;<br />
<br />
$marker.addEventListener('mouseenter', () => {<br />
$marker.style.transform = 'translate(-50%, -50%) scale(1.1)';<br />
const tooltip = $marker.querySelector('.mapa-marker-tooltip');<br />
if (tooltip) {<br />
tooltip.style.opacity = '1';<br />
tooltip.style.visibility = 'visible';<br />
}<br />
});<br />
<br />
$marker.addEventListener('mouseleave', () => {<br />
$marker.style.transform = 'translate(-50%, -50%) scale(1)';<br />
const tooltip = $marker.querySelector('.mapa-marker-tooltip');<br />
if (tooltip) {<br />
tooltip.style.opacity = '0';<br />
tooltip.style.visibility = 'hidden';<br />
}<br />
});<br />
<br />
if (hasAction) {<br />
$marker.addEventListener('click', (e) => {<br />
e.stopPropagation();<br />
this.executeAction(marker);<br />
});<br />
}<br />
<br />
return $marker;<br />
}<br />
<br />
executeAction(marker) {<br />
switch (marker.action) {<br />
case 'popup':<br />
this.showPopup(marker);<br />
break;<br />
case 'nextFloor':<br />
this.nextFloor();<br />
break;<br />
case 'prevFloor':<br />
this.prevFloor();<br />
break;<br />
case 'gotoFloor':<br />
if (marker.actionData?.floorId !== undefined) {<br />
this.goToFloor(marker.actionData.floorId);<br />
}<br />
break;<br />
case 'link':<br />
if (marker.actionData?.url) {<br />
window.open(marker.actionData.url, marker.actionData.target || '_blank');<br />
}<br />
break;<br />
}<br />
}<br />
<br />
showPopup(marker) {<br />
let modal = document.getElementById('mapa-viewer-modal');<br />
if (!modal) {<br />
modal = document.createElement('div');<br />
modal.id = 'mapa-viewer-modal';<br />
modal.style.cssText = 'display:none; position:fixed; z-index:10000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7); justify-content:center; align-items:center;';<br />
modal.innerHTML = `<br />
<div style="background:#1e293b; border-radius:16px; max-width:350px; width:90%; padding:20px; position:relative; border:1px solid #334155;"><br />
<span style="position:absolute; right:15px; top:10px; font-size:24px; cursor:pointer; color:#94a3b8;">&times;</span><br />
<div id="mapa-viewer-popup-content"></div><br />
</div><br />
`;<br />
document.body.appendChild(modal);<br />
modal.querySelector('span').addEventListener('click', () => {<br />
modal.style.display = 'none';<br />
});<br />
modal.addEventListener('click', (e) => {<br />
if (e.target === modal) modal.style.display = 'none';<br />
});<br />
}<br />
<br />
const content = modal.querySelector('#mapa-viewer-popup-content');<br />
content.innerHTML = `<br />
<div style="display:flex; align-items:center; margin-bottom:12px;"><br />
<h3 style="margin:0; color:#a5b4fc;">${marker.name}</h3><br />
</div><br />
<p style="color:#cbd5e1;">${marker.actionData?.text || 'Sem informações'}</p><br />
`;<br />
modal.style.display = 'flex';<br />
}<br />
<br />
updateMarkersPosition() {<br />
this.markers.forEach(({ element, data }) => {<br />
if (parseInt(element.getAttribute('data-floor')) === this.currentFloor) {<br />
const zoomedX = data.x * this.currentZoom;<br />
const zoomedY = data.y * this.currentZoom;<br />
element.style.left = `${zoomedX}px`;<br />
element.style.top = `${zoomedY}px`;<br />
<br />
const iconSize = Math.max(24, Math.floor(24 * this.currentZoom));<br />
const iconDiv = element.querySelector('.mapa-marker-icon');<br />
if (iconDiv) {<br />
if (data.iconUrl && data.iconUrl !== '') {<br />
let img = iconDiv.querySelector('img');<br />
if (img) {<br />
img.style.width = `${iconSize}px`;<br />
img.style.height = `${iconSize}px`;<br />
}<br />
} else {<br />
let icon = iconDiv.querySelector('i');<br />
if (icon) {<br />
icon.style.fontSize = `${iconSize}px`;<br />
}<br />
}<br />
}<br />
}<br />
});<br />
}<br />
<br />
centerMap() {<br />
setTimeout(() => {<br />
const layersWidth = this.layersContainer.scrollWidth;<br />
const layersHeight = this.layersContainer.scrollHeight;<br />
const viewportWidth = this.viewport.clientWidth;<br />
const viewportHeight = this.viewport.clientHeight;<br />
if (layersWidth > 0 && layersHeight > 0) {<br />
this.viewport.scrollLeft = (layersWidth - viewportWidth) / 2;<br />
this.viewport.scrollTop = (layersHeight - viewportHeight) / 2;<br />
}<br />
}, 100);<br />
}<br />
<br />
zoomIn() {<br />
const oldZoom = this.currentZoom;<br />
this.currentZoom = Math.min(this.currentZoom + this.zoomStep, this.maxZoom);<br />
if (oldZoom !== this.currentZoom) {<br />
this.applyZoomChange(oldZoom);<br />
}<br />
}<br />
<br />
zoomOut() {<br />
const oldZoom = this.currentZoom;<br />
this.currentZoom = Math.max(this.currentZoom - this.zoomStep, this.minZoom);<br />
if (oldZoom !== this.currentZoom) {<br />
this.applyZoomChange(oldZoom);<br />
}<br />
}<br />
<br />
applyZoomChange(oldZoom) {<br />
const rect = this.viewport.getBoundingClientRect();<br />
const centerX = rect.width / 2;<br />
const centerY = rect.height / 2;<br />
const scrollX = (this.viewport.scrollLeft + centerX) / oldZoom;<br />
const scrollY = (this.viewport.scrollTop + centerY) / oldZoom;<br />
<br />
document.querySelectorAll('.mapa-image').forEach(img => {<br />
img.style.transform = `scale(${this.currentZoom})`;<br />
});<br />
<br />
this.updateMarkersPosition();<br />
this.viewport.scrollLeft = scrollX * this.currentZoom - centerX;<br />
this.viewport.scrollTop = scrollY * this.currentZoom - centerY;<br />
}<br />
<br />
resetView() {<br />
this.currentZoom = this.config.mapConfig?.defaultZoom || 1;<br />
document.querySelectorAll('.mapa-image').forEach(img => {<br />
img.style.transform = `scale(${this.currentZoom})`;<br />
});<br />
this.centerMap();<br />
this.updateMarkersPosition();<br />
}<br />
<br />
prevFloor() {<br />
const layers = this.config.layers.sort((a,b) => a.id - b.id);<br />
const currentIndex = layers.findIndex(l => l.id === this.currentFloor);<br />
if (currentIndex > 0) {<br />
this.goToFloor(layers[currentIndex - 1].id);<br />
}<br />
}<br />
<br />
nextFloor() {<br />
const layers = this.config.layers.sort((a,b) => a.id - b.id);<br />
const currentIndex = layers.findIndex(l => l.id === this.currentFloor);<br />
if (currentIndex < layers.length - 1) {<br />
this.goToFloor(layers[currentIndex + 1].id);<br />
}<br />
}<br />
<br />
goToFloor(floorId) {<br />
this.currentFloor = floorId;<br />
this.layers.forEach(layer => {<br />
const layerFloor = parseInt(layer.getAttribute('data-floor'));<br />
layer.style.display = layerFloor === floorId ? 'block' : 'none';<br />
});<br />
this.updateMarkersPosition();<br />
}<br />
<br />
goToCoordinates(x, y, zoom = null, floorId = null) {<br />
if (floorId !== null && floorId !== this.currentFloor) {<br />
this.goToFloor(floorId);<br />
setTimeout(() => this._centerOnPoint(x, y, zoom), 100);<br />
} else {<br />
this._centerOnPoint(x, y, zoom);<br />
}<br />
}<br />
<br />
_centerOnPoint(x, y, zoom) {<br />
if (zoom !== null && zoom !== this.currentZoom) {<br />
const oldZoom = this.currentZoom;<br />
this.currentZoom = Math.min(Math.max(zoom, this.minZoom), this.maxZoom);<br />
if (oldZoom !== this.currentZoom) {<br />
this.applyZoomChange(oldZoom);<br />
}<br />
}<br />
<br />
const viewportWidth = this.viewport.clientWidth;<br />
const viewportHeight = this.viewport.clientHeight;<br />
let screenX = x * this.currentZoom;<br />
let screenY = y * this.currentZoom;<br />
let targetScrollX = screenX - (viewportWidth / 2);<br />
let targetScrollY = screenY - (viewportHeight / 2);<br />
<br />
this.viewport.scrollLeft = Math.max(0, targetScrollX);<br />
this.viewport.scrollTop = Math.max(0, targetScrollY);<br />
}<br />
<br />
setupKeyboardShortcuts() {<br />
const handler = (e) => {<br />
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;<br />
switch (e.key) {<br />
case '+': case '=': e.preventDefault(); this.zoomIn(); break;<br />
case '-': case '_': e.preventDefault(); this.zoomOut(); break;<br />
case 'r': case 'R': e.preventDefault(); this.resetView(); break;<br />
case 'ArrowUp': case 'PageUp': e.preventDefault(); this.prevFloor(); break;<br />
case 'ArrowDown': case 'PageDown': e.preventDefault(); this.nextFloor(); break;<br />
}<br />
};<br />
document.removeEventListener('keydown', this.keyHandler);<br />
this.keyHandler = handler;<br />
document.addEventListener('keydown', this.keyHandler);<br />
}<br />
<br />
showError(message) {<br />
this.container.innerHTML = `<div style="display:flex; align-items:center; justify-content:center; height:100%; color:#ef4444; text-align:center; padding:20px;"><br />
<div>❌ ${message}</div><br />
</div>`;<br />
}<br />
<br />
destroy() {<br />
if (this.keyHandler) {<br />
document.removeEventListener('keydown', this.keyHandler);<br />
}<br />
this.container.innerHTML = '';<br />
this.isReady = false;<br />
}<br />
}<br />
<br />
(function() {<br />
var containerId = 'mapa-viewer-<!--{$id|escape:'quotes'|default:'mapa-default'}-->';<br />
var configJSON = <!--{$configJSON|default:'null'}-->; // Recebe o JSON<br />
var urlJSON = '<!--{$url|escape:'quotes'}-->'; // Recebe URL do JSON<br />
<br />
// Nome da variável global única para este mapa<br />
var globalVarName = 'mapaViewer_<!--{$id|escape:'quotes'|default:'mapa-default'}-->';<br />
<br />
function iniciarMapa() {<br />
var container = document.getElementById(containerId);<br />
if (!container) return;<br />
if (container.hasAttribute('data-iniciado')) return;<br />
<br />
container.setAttribute('data-iniciado', 'true');<br />
<br />
var viewer = null;<br />
<br />
if (configJSON && configJSON !== 'null') {<br />
// Configuração inline<br />
viewer = new MapaViewer(containerId, configJSON);<br />
} else if (urlJSON) {<br />
// Configuração via URL<br />
fetch(urlJSON)<br />
.then(response => response.json())<br />
.then(config => {<br />
window[globalVarName] = new MapaViewer(containerId, config);<br />
})<br />
.catch(error => {<br />
console.error('Erro ao carregar mapa:', error);<br />
container.innerHTML = '<div style="color:red;padding:20px;">❌ Erro ao carregar mapa: ' + error.message + '</div>';<br />
});<br />
return; // Sai porque o fetch é assíncrono<br />
} else {<br />
container.innerHTML = '<div style="color:red;padding:20px;">❌ Nenhuma configuração fornecida</div>';<br />
return;<br />
}<br />
<br />
// Guarda a instância globalmente para acesso externo<br />
if (viewer) {<br />
window[globalVarName] = viewer;<br />
console.log('Mapa inicializado! Use window.' + globalVarName + ' para controlar');<br />
console.log('Exemplo: window.' + globalVarName + '.nextFloor()');<br />
}<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', iniciarMapa);<br />
} else {<br />
iniciarMapa();<br />
}<br />
})();<br />
</script><br />
</includeonly></div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Predefini%C3%A7%C3%A3o:MapaViewer&diff=45991
Predefinição:MapaViewer
2026-04-11T13:40:51Z
<p>Ceu azul: </p>
<hr />
<div>{{#widget:MapaViewer<br />
|id={{{id|}}}<br />
|largura={{{largura|100%}}}<br />
|altura={{{altura|500px}}}<br />
|configJSON={{{configJSON|}}}<br />
|url={{{url|}}}<br />
}}<br />
<br />
<!-- Seus botões personalizados --><br />
<div style="margin-top: 20px;"><br />
<button onclick="window.mapaViewer_{{{id|}}}.prevFloor()">⬆️ Subir</button><br />
<button onclick="window.mapaViewer_{{{id|}}}.nextFloor()">⬇️ Descer</button><br />
<button onclick="window.mapaViewer_meu-mapa.zoomIn()">🔍 +</button><br />
<button onclick="window.mapaViewer_meu-mapa.zoomOut()">🔍 -</button><br />
<button onclick="window.mapaViewer_meu-mapa.goToFloor(0)">🎯 Ir para Térreo</button><br />
<button onclick="window.mapaViewer_meu-mapa.goToFloor(1)">🎯 Ir para Primeiro</button><br />
</div></div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Widget:MapaViewer&diff=45990
Widget:MapaViewer
2026-04-11T13:38:24Z
<p>Ceu azul: </p>
<hr />
<div><includeonly><br />
<div id="mapa-viewer-<!--{$id|escape:'quotes'|default:'mapa-default'}-->" style="width: <!--{$largura|escape:'quotes'|default:'100%'}-->; height: <!--{$altura|escape:'quotes'|default:'500px'}-->;"></div><br />
<br />
<script><br />
class MapaViewer {<br />
constructor(containerId, configOrUrl) {<br />
this.container = document.getElementById(containerId);<br />
if (!this.container) {<br />
console.error(`Container "${containerId}" não encontrado`);<br />
return;<br />
}<br />
<br />
this.config = null;<br />
this.currentZoom = 1;<br />
this.currentFloor = 0;<br />
this.minZoom = 0.3;<br />
this.maxZoom = 3;<br />
this.zoomStep = 0.1;<br />
this.layers = [];<br />
this.markers = [];<br />
this.isPanning = false;<br />
this.panStart = { x: 0, y: 0, scrollLeft: 0, scrollTop: 0 };<br />
this.isReady = false;<br />
<br />
this.init();<br />
<br />
if (typeof configOrUrl === 'string') {<br />
if (configOrUrl.startsWith('http')) {<br />
this.loadJSON(configOrUrl);<br />
} else {<br />
try {<br />
this.loadConfig(JSON.parse(configOrUrl));<br />
} catch(e) {<br />
console.error('JSON inválido:', e);<br />
}<br />
}<br />
} else if (configOrUrl) {<br />
this.loadConfig(configOrUrl);<br />
}<br />
}<br />
<br />
init() {<br />
this.container.innerHTML = '';<br />
this.container.style.position = 'relative';<br />
this.container.style.overflow = 'hidden';<br />
this.container.style.background = '#0f172a';<br />
<br />
this.viewport = document.createElement('div');<br />
this.viewport.style.cssText = 'width:100%;height:100%;overflow:hidden;cursor:grab;position:relative;';<br />
<br />
this.layersContainer = document.createElement('div');<br />
this.layersContainer.style.cssText = 'position:relative;min-width:100%;min-height:100%;';<br />
<br />
this.viewport.appendChild(this.layersContainer);<br />
this.container.appendChild(this.viewport);<br />
this.bindEvents();<br />
}<br />
<br />
bindEvents() {<br />
this.viewport.addEventListener('mousedown', (e) => {<br />
if (e.target.closest('.mapa-marker')) return;<br />
this.isPanning = true;<br />
this.panStart = {<br />
x: e.clientX,<br />
y: e.clientY,<br />
scrollLeft: this.viewport.scrollLeft,<br />
scrollTop: this.viewport.scrollTop<br />
};<br />
this.viewport.style.cursor = 'grabbing';<br />
e.preventDefault();<br />
});<br />
<br />
window.addEventListener('mousemove', (e) => {<br />
if (!this.isPanning) return;<br />
this.viewport.scrollLeft = this.panStart.scrollLeft - (e.clientX - this.panStart.x);<br />
this.viewport.scrollTop = this.panStart.scrollTop - (e.clientY - this.panStart.y);<br />
});<br />
<br />
window.addEventListener('mouseup', () => {<br />
this.isPanning = false;<br />
this.viewport.style.cursor = 'grab';<br />
});<br />
<br />
this.viewport.addEventListener('wheel', (e) => {<br />
e.preventDefault();<br />
const oldZoom = this.currentZoom;<br />
if (e.deltaY < 0) {<br />
this.currentZoom = Math.min(this.currentZoom + this.zoomStep, this.maxZoom);<br />
} else {<br />
this.currentZoom = Math.max(this.currentZoom - this.zoomStep, this.minZoom);<br />
}<br />
if (oldZoom !== this.currentZoom) {<br />
const rect = this.viewport.getBoundingClientRect();<br />
const mouseX = e.clientX - rect.left;<br />
const mouseY = e.clientY - rect.top;<br />
const mapX = (this.viewport.scrollLeft + mouseX) / oldZoom;<br />
const mapY = (this.viewport.scrollTop + mouseY) / oldZoom;<br />
<br />
document.querySelectorAll('.mapa-image').forEach(img => {<br />
img.style.transform = `scale(${this.currentZoom})`;<br />
});<br />
<br />
this.updateMarkersPosition();<br />
this.viewport.scrollLeft = mapX * this.currentZoom - mouseX;<br />
this.viewport.scrollTop = mapY * this.currentZoom - mouseY;<br />
}<br />
});<br />
}<br />
<br />
loadConfig(config) {<br />
this.config = this.normalizeConfig(config);<br />
if (!this.config.layers || this.config.layers.length === 0) {<br />
console.error('Nenhuma camada encontrada');<br />
return;<br />
}<br />
this.currentZoom = this.config.mapConfig?.defaultZoom || 1;<br />
this.currentFloor = this.config.mapConfig?.initialFloor || 0;<br />
this.minZoom = this.config.mapConfig?.minZoom || 0.3;<br />
this.maxZoom = this.config.mapConfig?.maxZoom || 3;<br />
this.zoomStep = this.config.mapConfig?.zoomStep || 0.1;<br />
this.render();<br />
this.setupKeyboardShortcuts();<br />
return this;<br />
}<br />
<br />
loadJSON(url) {<br />
fetch(url)<br />
.then(response => response.json())<br />
.then(config => this.loadConfig(config))<br />
.catch(error => console.error('Erro ao carregar JSON:', error));<br />
return this;<br />
}<br />
<br />
normalizeConfig(config) {<br />
if (!config.mapConfig) config.mapConfig = {};<br />
if (!config.layers) config.layers = [];<br />
config.layers.forEach((layer, idx) => {<br />
if (layer.id === undefined) layer.id = idx;<br />
if (layer.name === undefined) layer.name = `Andar ${idx + 1}`;<br />
if (layer.imageUrl === undefined) layer.imageUrl = '';<br />
if (layer.offsetX === undefined) layer.offsetX = 0;<br />
if (layer.offsetY === undefined) layer.offsetY = 0;<br />
if (layer.scale === undefined || layer.scale === null) layer.scale = 1;<br />
if (layer.opacity === undefined || layer.opacity === null) layer.opacity = 100;<br />
if (!layer.markers) layer.markers = [];<br />
layer.markers.forEach(marker => {<br />
if (marker.x === undefined) marker.x = 0;<br />
if (marker.y === undefined) marker.y = 0;<br />
if (marker.hasBadge === undefined) marker.hasBadge = false;<br />
if (marker.action === undefined) marker.action = 'popup';<br />
if (!marker.actionData) marker.actionData = {};<br />
if (marker.iconUrl === undefined) marker.iconUrl = '';<br />
});<br />
});<br />
return config;<br />
}<br />
<br />
render() {<br />
if (!this.config || !this.config.layers.length) {<br />
this.showError('Nenhum dado para renderizar');<br />
return;<br />
}<br />
this.layersContainer.innerHTML = '';<br />
this.layers = [];<br />
this.markers = [];<br />
<br />
this.config.layers.forEach((layer) => {<br />
const $layer = document.createElement('div');<br />
$layer.className = 'mapa-layer';<br />
$layer.setAttribute('data-floor', layer.id);<br />
$layer.style.display = layer.id === this.currentFloor ? 'block' : 'none';<br />
$layer.style.position = 'absolute';<br />
$layer.style.top = '0';<br />
$layer.style.left = '0';<br />
$layer.style.transform = `translate(${layer.offsetX}px, ${layer.offsetY}px)`;<br />
$layer.style.opacity = (layer.opacity || 100) / 100;<br />
<br />
const $img = document.createElement('img');<br />
$img.className = 'mapa-image';<br />
$img.style.display = 'block';<br />
$img.style.transform = `scale(${this.currentZoom})`;<br />
$img.style.transformOrigin = '0 0';<br />
$img.style.pointerEvents = 'none';<br />
$img.src = layer.imageUrl || '';<br />
<br />
$img.onerror = () => {<br />
const canvas = document.createElement('canvas');<br />
canvas.width = 800;<br />
canvas.height = 600;<br />
const ctx = canvas.getContext('2d');<br />
ctx.fillStyle = '#334155';<br />
ctx.fillRect(0, 0, canvas.width, canvas.height);<br />
ctx.fillStyle = 'white';<br />
ctx.font = '20px Arial';<br />
ctx.fillText(layer.name || 'Andar', 50, 100);<br />
$img.src = canvas.toDataURL();<br />
};<br />
<br />
$img.onload = () => {<br />
this.layersContainer.style.width = `${$img.width}px`;<br />
this.layersContainer.style.height = `${$img.height}px`;<br />
this.centerMap();<br />
};<br />
<br />
$layer.appendChild($img);<br />
<br />
const $markersContainer = document.createElement('div');<br />
$markersContainer.style.position = 'absolute';<br />
$markersContainer.style.top = '0';<br />
$markersContainer.style.left = '0';<br />
$markersContainer.style.width = '100%';<br />
$markersContainer.style.height = '100%';<br />
$markersContainer.style.pointerEvents = 'none';<br />
<br />
if (layer.markers && layer.markers.length) {<br />
layer.markers.forEach(marker => {<br />
const $marker = this.createMarker(marker, layer.id);<br />
$markersContainer.appendChild($marker);<br />
this.markers.push({ element: $marker, data: marker });<br />
});<br />
}<br />
<br />
$layer.appendChild($markersContainer);<br />
this.layersContainer.appendChild($layer);<br />
this.layers.push($layer);<br />
});<br />
this.updateMarkersPosition();<br />
this.isReady = true;<br />
}<br />
<br />
createMarker(marker, floorId) {<br />
const $marker = document.createElement('div');<br />
$marker.className = 'mapa-marker';<br />
$marker.setAttribute('data-marker-id', marker.id);<br />
$marker.setAttribute('data-floor', floorId);<br />
$marker.style.position = 'absolute';<br />
$marker.style.left = `${marker.x * this.currentZoom}px`;<br />
$marker.style.top = `${marker.y * this.currentZoom}px`;<br />
$marker.style.zIndex = '100';<br />
$marker.style.transform = 'translate(-50%, -50%)';<br />
$marker.style.pointerEvents = 'auto';<br />
<br />
const hasAction = marker.action && marker.action !== 'none';<br />
$marker.style.cursor = hasAction ? 'pointer' : 'default';<br />
<br />
const iconSize = Math.max(16, Math.floor(16 * this.currentZoom));<br />
let iconHtml = '';<br />
<br />
if (marker.iconUrl && marker.iconUrl !== '') {<br />
iconHtml = `<img src="${marker.iconUrl}" style="width:${iconSize}px; height:${iconSize}px; object-fit:contain;">`;<br />
} else {<br />
iconHtml = `<i class="fas fa-map-marker-alt" style="font-size:${iconSize}px;"></i>`;<br />
}<br />
<br />
$marker.innerHTML = `<br />
<div class="mapa-marker-icon" style="display:flex; align-items:center; justify-content:center; pointer-events:none;">${iconHtml}</div><br />
<div class="mapa-marker-tooltip" style="position:absolute; bottom:100%; left:50%; transform:translateX(-50%); background:#1e293b; color:white; padding:4px 8px; border-radius:6px; font-size:10px; white-space:nowrap; opacity:0; visibility:hidden; transition:0.2s; pointer-events:none; z-index:101;"><br />
<strong>${marker.name || 'Marcador'}</strong><br />
</div><br />
`;<br />
<br />
$marker.addEventListener('mouseenter', () => {<br />
$marker.style.transform = 'translate(-50%, -50%) scale(1.1)';<br />
const tooltip = $marker.querySelector('.mapa-marker-tooltip');<br />
if (tooltip) {<br />
tooltip.style.opacity = '1';<br />
tooltip.style.visibility = 'visible';<br />
}<br />
});<br />
<br />
$marker.addEventListener('mouseleave', () => {<br />
$marker.style.transform = 'translate(-50%, -50%) scale(1)';<br />
const tooltip = $marker.querySelector('.mapa-marker-tooltip');<br />
if (tooltip) {<br />
tooltip.style.opacity = '0';<br />
tooltip.style.visibility = 'hidden';<br />
}<br />
});<br />
<br />
if (hasAction) {<br />
$marker.addEventListener('click', (e) => {<br />
e.stopPropagation();<br />
this.executeAction(marker);<br />
});<br />
}<br />
<br />
return $marker;<br />
}<br />
<br />
executeAction(marker) {<br />
switch (marker.action) {<br />
case 'popup':<br />
this.showPopup(marker);<br />
break;<br />
case 'nextFloor':<br />
this.nextFloor();<br />
break;<br />
case 'prevFloor':<br />
this.prevFloor();<br />
break;<br />
case 'gotoFloor':<br />
if (marker.actionData?.floorId !== undefined) {<br />
this.goToFloor(marker.actionData.floorId);<br />
}<br />
break;<br />
case 'link':<br />
if (marker.actionData?.url) {<br />
window.open(marker.actionData.url, marker.actionData.target || '_blank');<br />
}<br />
break;<br />
}<br />
}<br />
<br />
showPopup(marker) {<br />
let modal = document.getElementById('mapa-viewer-modal');<br />
if (!modal) {<br />
modal = document.createElement('div');<br />
modal.id = 'mapa-viewer-modal';<br />
modal.style.cssText = 'display:none; position:fixed; z-index:10000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7); justify-content:center; align-items:center;';<br />
modal.innerHTML = `<br />
<div style="background:#1e293b; border-radius:16px; max-width:350px; width:90%; padding:20px; position:relative; border:1px solid #334155;"><br />
<span style="position:absolute; right:15px; top:10px; font-size:24px; cursor:pointer; color:#94a3b8;">&times;</span><br />
<div id="mapa-viewer-popup-content"></div><br />
</div><br />
`;<br />
document.body.appendChild(modal);<br />
modal.querySelector('span').addEventListener('click', () => {<br />
modal.style.display = 'none';<br />
});<br />
modal.addEventListener('click', (e) => {<br />
if (e.target === modal) modal.style.display = 'none';<br />
});<br />
}<br />
<br />
const content = modal.querySelector('#mapa-viewer-popup-content');<br />
content.innerHTML = `<br />
<div style="display:flex; align-items:center; margin-bottom:12px;"><br />
<h3 style="margin:0; color:#a5b4fc;">${marker.name}</h3><br />
</div><br />
<p style="color:#cbd5e1;">${marker.actionData?.text || 'Sem informações'}</p><br />
`;<br />
modal.style.display = 'flex';<br />
}<br />
<br />
updateMarkersPosition() {<br />
this.markers.forEach(({ element, data }) => {<br />
if (parseInt(element.getAttribute('data-floor')) === this.currentFloor) {<br />
const zoomedX = data.x * this.currentZoom;<br />
const zoomedY = data.y * this.currentZoom;<br />
element.style.left = `${zoomedX}px`;<br />
element.style.top = `${zoomedY}px`;<br />
<br />
const iconSize = Math.max(24, Math.floor(24 * this.currentZoom));<br />
const iconDiv = element.querySelector('.mapa-marker-icon');<br />
if (iconDiv) {<br />
if (data.iconUrl && data.iconUrl !== '') {<br />
let img = iconDiv.querySelector('img');<br />
if (img) {<br />
img.style.width = `${iconSize}px`;<br />
img.style.height = `${iconSize}px`;<br />
}<br />
} else {<br />
let icon = iconDiv.querySelector('i');<br />
if (icon) {<br />
icon.style.fontSize = `${iconSize}px`;<br />
}<br />
}<br />
}<br />
}<br />
});<br />
}<br />
<br />
centerMap() {<br />
setTimeout(() => {<br />
const layersWidth = this.layersContainer.scrollWidth;<br />
const layersHeight = this.layersContainer.scrollHeight;<br />
const viewportWidth = this.viewport.clientWidth;<br />
const viewportHeight = this.viewport.clientHeight;<br />
if (layersWidth > 0 && layersHeight > 0) {<br />
this.viewport.scrollLeft = (layersWidth - viewportWidth) / 2;<br />
this.viewport.scrollTop = (layersHeight - viewportHeight) / 2;<br />
}<br />
}, 100);<br />
}<br />
<br />
zoomIn() {<br />
const oldZoom = this.currentZoom;<br />
this.currentZoom = Math.min(this.currentZoom + this.zoomStep, this.maxZoom);<br />
if (oldZoom !== this.currentZoom) {<br />
this.applyZoomChange(oldZoom);<br />
}<br />
}<br />
<br />
zoomOut() {<br />
const oldZoom = this.currentZoom;<br />
this.currentZoom = Math.max(this.currentZoom - this.zoomStep, this.minZoom);<br />
if (oldZoom !== this.currentZoom) {<br />
this.applyZoomChange(oldZoom);<br />
}<br />
}<br />
<br />
applyZoomChange(oldZoom) {<br />
const rect = this.viewport.getBoundingClientRect();<br />
const centerX = rect.width / 2;<br />
const centerY = rect.height / 2;<br />
const scrollX = (this.viewport.scrollLeft + centerX) / oldZoom;<br />
const scrollY = (this.viewport.scrollTop + centerY) / oldZoom;<br />
<br />
document.querySelectorAll('.mapa-image').forEach(img => {<br />
img.style.transform = `scale(${this.currentZoom})`;<br />
});<br />
<br />
this.updateMarkersPosition();<br />
this.viewport.scrollLeft = scrollX * this.currentZoom - centerX;<br />
this.viewport.scrollTop = scrollY * this.currentZoom - centerY;<br />
}<br />
<br />
resetView() {<br />
this.currentZoom = this.config.mapConfig?.defaultZoom || 1;<br />
document.querySelectorAll('.mapa-image').forEach(img => {<br />
img.style.transform = `scale(${this.currentZoom})`;<br />
});<br />
this.centerMap();<br />
this.updateMarkersPosition();<br />
}<br />
<br />
prevFloor() {<br />
const layers = this.config.layers.sort((a,b) => a.id - b.id);<br />
const currentIndex = layers.findIndex(l => l.id === this.currentFloor);<br />
if (currentIndex > 0) {<br />
this.goToFloor(layers[currentIndex - 1].id);<br />
}<br />
}<br />
<br />
nextFloor() {<br />
const layers = this.config.layers.sort((a,b) => a.id - b.id);<br />
const currentIndex = layers.findIndex(l => l.id === this.currentFloor);<br />
if (currentIndex < layers.length - 1) {<br />
this.goToFloor(layers[currentIndex + 1].id);<br />
}<br />
}<br />
<br />
goToFloor(floorId) {<br />
this.currentFloor = floorId;<br />
this.layers.forEach(layer => {<br />
const layerFloor = parseInt(layer.getAttribute('data-floor'));<br />
layer.style.display = layerFloor === floorId ? 'block' : 'none';<br />
});<br />
this.updateMarkersPosition();<br />
}<br />
<br />
goToCoordinates(x, y, zoom = null, floorId = null) {<br />
if (floorId !== null && floorId !== this.currentFloor) {<br />
this.goToFloor(floorId);<br />
setTimeout(() => this._centerOnPoint(x, y, zoom), 100);<br />
} else {<br />
this._centerOnPoint(x, y, zoom);<br />
}<br />
}<br />
<br />
_centerOnPoint(x, y, zoom) {<br />
if (zoom !== null && zoom !== this.currentZoom) {<br />
const oldZoom = this.currentZoom;<br />
this.currentZoom = Math.min(Math.max(zoom, this.minZoom), this.maxZoom);<br />
if (oldZoom !== this.currentZoom) {<br />
this.applyZoomChange(oldZoom);<br />
}<br />
}<br />
<br />
const viewportWidth = this.viewport.clientWidth;<br />
const viewportHeight = this.viewport.clientHeight;<br />
let screenX = x * this.currentZoom;<br />
let screenY = y * this.currentZoom;<br />
let targetScrollX = screenX - (viewportWidth / 2);<br />
let targetScrollY = screenY - (viewportHeight / 2);<br />
<br />
this.viewport.scrollLeft = Math.max(0, targetScrollX);<br />
this.viewport.scrollTop = Math.max(0, targetScrollY);<br />
}<br />
<br />
setupKeyboardShortcuts() {<br />
const handler = (e) => {<br />
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;<br />
switch (e.key) {<br />
case '+': case '=': e.preventDefault(); this.zoomIn(); break;<br />
case '-': case '_': e.preventDefault(); this.zoomOut(); break;<br />
case 'r': case 'R': e.preventDefault(); this.resetView(); break;<br />
case 'ArrowUp': case 'PageUp': e.preventDefault(); this.prevFloor(); break;<br />
case 'ArrowDown': case 'PageDown': e.preventDefault(); this.nextFloor(); break;<br />
}<br />
};<br />
document.removeEventListener('keydown', this.keyHandler);<br />
this.keyHandler = handler;<br />
document.addEventListener('keydown', this.keyHandler);<br />
}<br />
<br />
showError(message) {<br />
this.container.innerHTML = `<div style="display:flex; align-items:center; justify-content:center; height:100%; color:#ef4444; text-align:center; padding:20px;"><br />
<div>❌ ${message}</div><br />
</div>`;<br />
}<br />
<br />
destroy() {<br />
if (this.keyHandler) {<br />
document.removeEventListener('keydown', this.keyHandler);<br />
}<br />
this.container.innerHTML = '';<br />
this.isReady = false;<br />
}<br />
}<br />
<br />
(function() {<br />
var containerId = 'mapa-viewer-<!--{$id|escape:'quotes'|default:'mapa-default'}-->';<br />
var configJSON = <!--{$configJSON|default:'null'}-->; // Recebe o JSON<br />
var urlJSON = '<!--{$url|escape:'quotes'}-->'; // Recebe URL do JSON<br />
<br />
// Nome da variável global única para este mapa<br />
var globalVarName = 'mapaViewer_<!--{$id|escape:'quotes'|default:'mapa-default'}-->';<br />
<br />
function iniciarMapa() {<br />
var container = document.getElementById(containerId);<br />
if (!container) return;<br />
if (container.hasAttribute('data-iniciado')) return;<br />
<br />
container.setAttribute('data-iniciado', 'true');<br />
<br />
var viewer = null;<br />
<br />
if (configJSON && configJSON !== 'null') {<br />
// Configuração inline<br />
viewer = new MapaViewer(containerId, configJSON);<br />
} else if (urlJSON) {<br />
// Configuração via URL<br />
fetch(urlJSON)<br />
.then(response => response.json())<br />
.then(config => {<br />
window[globalVarName] = new MapaViewer(containerId, config);<br />
})<br />
.catch(error => {<br />
console.error('Erro ao carregar mapa:', error);<br />
container.innerHTML = '<div style="color:red;padding:20px;">❌ Erro ao carregar mapa: ' + error.message + '</div>';<br />
});<br />
return; // Sai porque o fetch é assíncrono<br />
} else {<br />
container.innerHTML = '<div style="color:red;padding:20px;">❌ Nenhuma configuração fornecida</div>';<br />
return;<br />
}<br />
<br />
// Guarda a instância globalmente para acesso externo<br />
if (viewer) {<br />
window[globalVarName] = viewer;<br />
console.log('Mapa inicializado! Use window.' + globalVarName + ' para controlar');<br />
console.log('Exemplo: window.' + globalVarName + '.nextFloor()');<br />
}<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', iniciarMapa);<br />
} else {<br />
iniciarMapa();<br />
}<br />
})();<br />
</script><br />
</includeonly></div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Mapa:BlackMarket&diff=45989
Mapa:BlackMarket
2026-04-11T13:21:51Z
<p>Ceu azul: </p>
<hr />
<div>{<br />
"mapConfig": {<br />
"initialFloor": 0,<br />
"defaultZoom": 1,<br />
"minZoom": 0.3,<br />
"maxZoom": 3,<br />
"zoomStep": 0.1<br />
},<br />
"layers": [<br />
{<br />
"id": 1,<br />
"name": "Andar",<br />
"imageUrl": "https://wiki.gla.com.br/images/b/b7/Black_market_andar01.png",<br />
"offsetX": 0,<br />
"offsetY": 0,<br />
"scale": 1,<br />
"opacity": 100,<br />
"markers": [<br />
{<br />
"id": "m_1775913455257",<br />
"name": "Novo Marcador",<br />
"x": 641.25,<br />
"y": 385,<br />
"iconUrl": "https://wiki.gla.com.br/images/a/ab/Escada.png",<br />
"hasBadge": false,<br />
"action": "nextFloor",<br />
"actionData": {}<br />
},<br />
{<br />
"id": "m_1775913456593",<br />
"name": "Novo Marcador",<br />
"x": 641.25,<br />
"y": 257.5,<br />
"iconUrl": "https://wiki.gla.com.br/images/a/ab/Escada.png",<br />
"hasBadge": false,<br />
"action": "nextFloor",<br />
"actionData": {}<br />
}<br />
]<br />
},<br />
{<br />
"id": 0,<br />
"name": "Andar",<br />
"imageUrl": "https://wiki.gla.com.br/images/2/22/Black_market_terreo.png",<br />
"offsetX": 0,<br />
"offsetY": 0,<br />
"scale": 1,<br />
"opacity": 100,<br />
"markers": [<br />
{<br />
"id": "m_1775913428226",<br />
"name": "Novo Marcador",<br />
"x": 245,<br />
"y": 490,<br />
"iconUrl": "https://wiki.gla.com.br/images/a/ab/Escada.png",<br />
"hasBadge": false,<br />
"action": "nextFloor",<br />
"actionData": {}<br />
},<br />
{<br />
"id": "m_1775913431714",<br />
"name": "Novo Marcador",<br />
"x": 580,<br />
"y": 538,<br />
"iconUrl": "https://wiki.gla.com.br/images/a/ab/Escada.png",<br />
"hasBadge": false,<br />
"action": "nextFloor",<br />
"actionData": {}<br />
},<br />
{<br />
"id": "m_1775913440529",<br />
"name": "Novo Marcador",<br />
"x": 693.076923076923,<br />
"y": 489.9999999999999,<br />
"iconUrl": "https://wiki.gla.com.br/images/a/ab/Escada.png",<br />
"hasBadge": false,<br />
"action": "nextFloor",<br />
"actionData": {}<br />
},<br />
{<br />
"id": "m_1775913443737",<br />
"name": "Novo Marcador",<br />
"x": 804.6153846153844,<br />
"y": 539.2307692307692,<br />
"iconUrl": "https://wiki.gla.com.br/images/a/ab/Escada.png",<br />
"hasBadge": false,<br />
"action": "nextFloor",<br />
"actionData": {}<br />
},<br />
{<br />
"id": "m_1775913449649",<br />
"name": "Novo Marcador",<br />
"x": 1157.2727272727273,<br />
"y": 506.3636363636363,<br />
"iconUrl": "https://wiki.gla.com.br/images/a/ab/Escada.png",<br />
"hasBadge": false,<br />
"action": "nextFloor",<br />
"actionData": {}<br />
},<br />
{<br />
"id": "m_1775913482097",<br />
"name": "Novo Marcador",<br />
"x": 638.8888888888889,<br />
"y": 385.55555555555554,<br />
"iconUrl": "https://wiki.gla.com.br/images/a/ab/Escada.png",<br />
"hasBadge": false,<br />
"action": "prevFloor",<br />
"actionData": {}<br />
},<br />
{<br />
"id": "m_1775913483337",<br />
"name": "Novo Marcador",<br />
"x": 641.1111111111111,<br />
"y": 255.55555555555554,<br />
"iconUrl": "https://wiki.gla.com.br/images/a/ab/Escada.png",<br />
"hasBadge": false,<br />
"action": "prevFloor",<br />
"actionData": {}<br />
}<br />
]<br />
},<br />
{<br />
"id": 2,<br />
"name": "Andar",<br />
"imageUrl": "https://wiki.gla.com.br/images/d/d8/Black_market_subsolo01.png",<br />
"offsetX": 0,<br />
"offsetY": 0,<br />
"scale": 1,<br />
"opacity": 100,<br />
"markers": [<br />
{<br />
"id": "m_1775913462330",<br />
"name": "Novo Marcador",<br />
"x": 693.75,<br />
"y": 508.75,<br />
"iconUrl": "https://wiki.gla.com.br/images/a/ab/Escada.png",<br />
"hasBadge": false,<br />
"action": "prevFloor",<br />
"actionData": {}<br />
},<br />
{<br />
"id": "m_1775913463385",<br />
"name": "Novo Marcador",<br />
"x": 711.25,<br />
"y": 511.25,<br />
"iconUrl": "https://wiki.gla.com.br/images/a/ab/Escada.png",<br />
"hasBadge": false,<br />
"action": "prevFloor",<br />
"actionData": {}<br />
},<br />
{<br />
"id": "m_1775913466441",<br />
"name": "Novo Marcador",<br />
"x": 725,<br />
"y": 510,<br />
"iconUrl": "https://wiki.gla.com.br/images/a/ab/Escada.png",<br />
"hasBadge": false,<br />
"action": "prevFloor",<br />
"actionData": {}<br />
},<br />
{<br />
"id": "m_1775913469345",<br />
"name": "Novo Marcador",<br />
"x": 1172.5,<br />
"y": 510,<br />
"iconUrl": "https://wiki.gla.com.br/images/a/ab/Escada.png",<br />
"hasBadge": false,<br />
"action": "prevFloor",<br />
"actionData": {}<br />
},<br />
{<br />
"id": "m_1775913474121",<br />
"name": "Novo Marcador",<br />
"x": 245.55555555555554,<br />
"y": 496.66666666666663,<br />
"iconUrl": "https://wiki.gla.com.br/images/a/ab/Escada.png",<br />
"hasBadge": false,<br />
"action": "prevFloor",<br />
"actionData": {}<br />
}<br />
]<br />
}<br />
]<br />
}</div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Arquivo:Escada.png&diff=45988
Arquivo:Escada.png
2026-04-11T13:15:40Z
<p>Ceu azul: Arquivo enviado com MsUpload</p>
<hr />
<div>Arquivo enviado com MsUpload</div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Arquivo:Black_market_terreo.png&diff=45987
Arquivo:Black market terreo.png
2026-04-11T13:10:02Z
<p>Ceu azul: Arquivo enviado com MsUpload</p>
<hr />
<div>Arquivo enviado com MsUpload</div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Arquivo:Black_market_subsolo01.png&diff=45986
Arquivo:Black market subsolo01.png
2026-04-11T13:10:01Z
<p>Ceu azul: Arquivo enviado com MsUpload</p>
<hr />
<div>Arquivo enviado com MsUpload</div>
Ceu azul
https://wiki.gla.com.br/index.php?title=Arquivo:Black_market_andar01.png&diff=45985
Arquivo:Black market andar01.png
2026-04-11T13:09:59Z
<p>Ceu azul: Arquivo enviado com MsUpload</p>
<hr />
<div>Arquivo enviado com MsUpload</div>
Ceu azul