[%- FOR row IN map.tiles -%] [%- FOR tile IN row -%] [%- top_px = tile.row_offset * map.tile_size -%] [%- left_px = tile.col_offset * map.tile_size %] <[% map.img_type | safe %] class="square-map__tile" alt="[% tile.alt %]" id="[% nsm_prefix %]t[% tile.dotted_id %]" name="tile_[% tile.dotted_id %]" src="[% tile.src %]" style="width: [% 100 / map.cols %]%; height: auto; float: left;"> [%- END -%] [% END %]
[% FOR pin IN map.pins %][% INCLUDE pin %][% END %]
[% INCLUDE 'maps/_compass.html' %]
[% BLOCK pin %] [% SET pin_top = pin.py / ( map.tile_size * map.rows ) * 100; SET pin_left = pin.px / ( map.tile_size * map.cols ) * 100; # -24px half of 48px wide image, -64px all of 64px tall image INCLUDE 'maps/pin.html' pin_style = 'top:' _ pin_top _ '%; left:' _ pin_left _ '%; position:absolute; margin-left:-24px; margin-top:-64px;' %] [% END %]