TemplateStyle:ZoomableMap.css

.zoomablemap { position: relative; overflow: auto; }

.zoomablemap.loadcomplete { overflow: hidden; }

.zoomablemap > .mapcontent { position: relative; height: 90vh; overflow: hidden; cursor: move; user-select: none; touch-action: none; }

.zoomablemap > .mapcontent > .mapinner { transform-origin: left top; }

/* revertir el CSS aplicado a móviles, que causa que las imágenes se reduzcan hasta caber en pantalla */ /* .zoomablemap .mapinner img { height: inherit !important; max-width: inherit !important; } .zoomablemap.loadcomplete > .mapcontent > .mapinner { transition: transform .5s, height .5s; }

.zoomablemap.loadcomplete > .mapcontent.pointerdown > .mapinner { transition: none; }

.zoomablemap > .mapcontrols { position: absolute; top: 10px; left: 10px; width: 20px; font-family: sans-serif; box-shadow: 1px 1px 2px #777; user-select: none; }

.zoomablemap > .mapcontrols > .control { box-sizing: border-box; width: 20px; height: 20px; text-align: center; font-weight: bold; font-size: 18px; line-height: 18px; background: #eeeeee; background: linear-gradient(135deg, #eeeeee 0%,#cccccc 100%); color: #000000; border: 1px solid #222; cursor: pointer; }

.zoomablemap > .mapcontrols > .control:active { background: linear-gradient(315deg, #eeeeee 0%,#cccccc 100%); }