ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add elevation label to buildings on mapsheets

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2024-05-19 11:52:30 -07:00
parent cdf1557c94
commit 56cb96c0f8
2 changed files with 28 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/assets/css/map.css
View File

@ -433,3 +433,12 @@ g[data-y="76"] { --i: 76; }
fill: black; fill: black;
fill-opacity: 0.2; fill-opacity: 0.2;
} }
.elevation {
font-family: sans-serif;
font-weight: bold;
font-size: 6pt;
text-anchor: middle;
user-select: none;
pointer-events: none;
}

19
public/assets/images/mapsheets.svg
View File

@ -467,6 +467,7 @@
<use style="transform: translate(17px, 46.5px)" href="#cabinet"/> <use style="transform: translate(17px, 46.5px)" href="#cabinet"/>
<use style="transform: translate(-23.5px, 48.25px)" href="#cabinet"/> <use style="transform: translate(-23.5px, 48.25px)" href="#cabinet"/>
</g> </g>
<text class="elevation" x="28" y="59.5">1</text>
</g> </g>
<g class="building2" style="transform: translate(92px, 281px)"> <g class="building2" style="transform: translate(92px, 281px)">
<use href="#building2"/> <use href="#building2"/>
@ -486,6 +487,7 @@
<use style="transform: translate(-43.25px, 24px) rotate(-90deg)" href="#desk"/> <use style="transform: translate(-43.25px, 24px) rotate(-90deg)" href="#desk"/>
<use style="transform: translate(3.5px, 39.5px) rotate(90deg)" href="#desk"/> <use style="transform: translate(3.5px, 39.5px) rotate(90deg)" href="#desk"/>
</g> </g>
<text class="elevation" x="30" y="58">1</text>
</g> </g>
<g class="building3" style="transform: translate(441.5px, 100.5px)"> <g class="building3" style="transform: translate(441.5px, 100.5px)">
<use style="transform: rotate(180deg)" href="#building3"/> <use style="transform: rotate(180deg)" href="#building3"/>
@ -507,6 +509,7 @@
m 0 2.75 h 14 v 2.3 h -14 z m 0 2.75 h 14 v 2.3 h -14 z
"/> "/>
</g> </g>
<text class="elevation" x="27" y="42">2</text>
</g> </g>
<g class="building6" style="transform: translate(440.75px, 288.5px)"> <g class="building6" style="transform: translate(440.75px, 288.5px)">
<use style="transform: rotate(180deg)" href="#building6"/> <use style="transform: rotate(180deg)" href="#building6"/>
@ -518,6 +521,7 @@
<use style="transform: translate(3px, -12.25px) rotate(90deg)" href="#cabinet"/> <use style="transform: translate(3px, -12.25px) rotate(90deg)" href="#cabinet"/>
<use style="transform: translate(10px, 18.25px) rotate(90deg)" href="#cabinet"/> <use style="transform: translate(10px, 18.25px) rotate(90deg)" href="#cabinet"/>
</g> </g>
<text class="elevation" x="17" y="56">1</text>
</g> </g>
</g> </g>
@ -536,6 +540,7 @@
<use style="transform: translate(27px, 26px)" href="#cabinet"/> <use style="transform: translate(27px, 26px)" href="#cabinet"/>
<use style="transform: translate(-26.75px, 58px) rotate(90deg)" href="#cabinet"/> <use style="transform: translate(-26.75px, 58px) rotate(90deg)" href="#cabinet"/>
</g> </g>
<text class="elevation" x="14" y="59">1</text>
</g> </g>
<g class="building2" style="transform: translate(108px, 282px)"> <g class="building2" style="transform: translate(108px, 282px)">
<use href="#building2"/> <use href="#building2"/>
@ -553,6 +558,7 @@
<use style="transform: translate(-30px, -21.5px)" href="#desk"/> <use style="transform: translate(-30px, -21.5px)" href="#desk"/>
<use style="transform: translate(-25px, -49px)" href="#desk"/> <use style="transform: translate(-25px, -49px)" href="#desk"/>
</g> </g>
<text class="elevation" x="32" y="58">1</text>
</g> </g>
<g class="building3" style="transform: translate(485.5px, 264.5px)"> <g class="building3" style="transform: translate(485.5px, 264.5px)">
<use style="transform: rotate(180deg)" href="#building3"/> <use style="transform: rotate(180deg)" href="#building3"/>
@ -566,6 +572,7 @@
<use style="transform: translate(-24.5px, -18px) rotate(90deg)" href="#cabinet"/> <use style="transform: translate(-24.5px, -18px) rotate(90deg)" href="#cabinet"/>
<use style="transform: translate(17.5px, -17.5px) rotate(-90deg)" href="#desk"/> <use style="transform: translate(17.5px, -17.5px) rotate(-90deg)" href="#desk"/>
</g> </g>
<text class="elevation" x="28" y="41">1</text>
</g> </g>
<g class="building4" style="transform: translate(377.25px, 278.75px)"> <g class="building4" style="transform: translate(377.25px, 278.75px)">
<use href="#building4"/> <use href="#building4"/>
@ -583,6 +590,7 @@
<use style="transform: translate(7.5px, 29px) rotate(90deg)" href="#cabinet"/> <use style="transform: translate(7.5px, 29px) rotate(90deg)" href="#cabinet"/>
<use style="transform: translate(-30.5px, 48.5px)" href="#cabinet"/> <use style="transform: translate(-30.5px, 48.5px)" href="#cabinet"/>
</g> </g>
<text class="elevation" x="30" y="60">1</text>
</g> </g>
<g class="building5" style="transform: translate(103px, 84.75px)"> <g class="building5" style="transform: translate(103px, 84.75px)">
<use href="#building5"/> <use href="#building5"/>
@ -600,6 +608,7 @@
<use style="transform: translate(49.75px, 13.75px) rotate(90deg)" href="#cabinet"/> <use style="transform: translate(49.75px, 13.75px) rotate(90deg)" href="#cabinet"/>
<use style="transform: translate(65px, -5.5px)" href="#stairs"/> <use style="transform: translate(65px, -5.5px)" href="#stairs"/>
</g> </g>
<text class="elevation" x="71" y="29">3</text>
</g> </g>
<g class="building6" style="transform: translate(224px, 85.75px)"> <g class="building6" style="transform: translate(224px, 85.75px)">
<use href="#building6"/> <use href="#building6"/>
@ -611,6 +620,7 @@
<use style="transform: translate(12px, 12px) rotate(90deg)" href="#cabinet"/> <use style="transform: translate(12px, 12px) rotate(90deg)" href="#cabinet"/>
<use style="transform: translate(-15px, 42.5px) rotate(90deg)" href="#cabinet"/> <use style="transform: translate(-15px, 42.5px) rotate(90deg)" href="#cabinet"/>
</g> </g>
<text class="elevation" x="16" y="56">1</text>
</g> </g>
<g class="building7" style="transform: translate(427.75px, 110px)"> <g class="building7" style="transform: translate(427.75px, 110px)">
<use href="#building7"/> <use href="#building7"/>
@ -650,6 +660,7 @@
m 0 3.3 h 10.5 v 3 h -10.5 z m 0 3.3 h 10.5 v 3 h -10.5 z
"/> "/>
</g> </g>
<text class="elevation" x="108" y="40">3</text>
</g> </g>
</g> </g>
@ -668,6 +679,7 @@
<rect class="bed" x="-19.75" y="42.25" width="10" height="18"/> <rect class="bed" x="-19.75" y="42.25" width="10" height="18"/>
<rect class="bed" x="17.25" y="41.25" width="10" height="18"/> <rect class="bed" x="17.25" y="41.25" width="10" height="18"/>
</g> </g>
<text class="elevation" x="9" y="59">1</text>
</g> </g>
<g class="building2" style="transform: translate(185px, 77.5px)"> <g class="building2" style="transform: translate(185px, 77.5px)">
<use style="transform: rotate(180deg)" href="#building2"/> <use style="transform: rotate(180deg)" href="#building2"/>
@ -697,6 +709,7 @@
m 0 2.75 h 14 v 2.3 h -14 z m 0 2.75 h 14 v 2.3 h -14 z
"/> "/>
</g> </g>
<text class="elevation" x="14" y="57">3</text>
</g> </g>
<g class="building3" style="transform: translate(51.25px, 65.75px)"> <g class="building3" style="transform: translate(51.25px, 65.75px)">
<use href="#building3"/> <use href="#building3"/>
@ -709,6 +722,7 @@
<use style="transform: translate(26px, 29.5px) rotate(90deg)" href="#cabinet"/> <use style="transform: translate(26px, 29.5px) rotate(90deg)" href="#cabinet"/>
<use style="transform: translate(-13.75px, 16px) rotate(90deg)" href="#desk"/> <use style="transform: translate(-13.75px, 16px) rotate(90deg)" href="#desk"/>
</g> </g>
<text class="elevation" x="26" y="41">1</text>
</g> </g>
<g class="building4" style="transform: translate(499px, 96px)"> <g class="building4" style="transform: translate(499px, 96px)">
<use style="transform: rotate(180deg)" href="#building4"/> <use style="transform: rotate(180deg)" href="#building4"/>
@ -726,6 +740,7 @@
<use style="transform: translate(28.75px, 31.75px) rotate(90deg)" href="#cabinet"/> <use style="transform: translate(28.75px, 31.75px) rotate(90deg)" href="#cabinet"/>
<use style="transform: translate(-28px, 48.25px) rotate(90deg)" href="#cabinet"/> <use style="transform: translate(-28px, 48.25px) rotate(90deg)" href="#cabinet"/>
</g> </g>
<text class="elevation" x="24" y="59">1</text>
</g> </g>
<g class="building5" style="transform: translate(103px, 294.5px)"> <g class="building5" style="transform: translate(103px, 294.5px)">
<use href="#building5"/> <use href="#building5"/>
@ -743,6 +758,7 @@
<use style="transform: translate(48.5px, 14px) rotate(90deg)" href="#cabinet"/> <use style="transform: translate(48.5px, 14px) rotate(90deg)" href="#cabinet"/>
<use style="transform: translate(65px, -5.5px)" href="#stairs"/> <use style="transform: translate(65px, -5.5px)" href="#stairs"/>
</g> </g>
<text class="elevation" x="70" y="30">2</text>
</g> </g>
<g class="building6" style="transform: translate(224.5px, 275px)"> <g class="building6" style="transform: translate(224.5px, 275px)">
<use style="transform: rotate(180deg)" href="#building6"/> <use style="transform: rotate(180deg)" href="#building6"/>
@ -756,6 +772,7 @@
<use style="transform: translate(-11px, -13.5px) rotate(90deg)" href="#cabinet"/> <use style="transform: translate(-11px, -13.5px) rotate(90deg)" href="#cabinet"/>
<use style="transform: translate(8px, 42.5px)" href="#cabinet"/> <use style="transform: translate(8px, 42.5px)" href="#cabinet"/>
</g> </g>
<text class="elevation" x="18" y="55">1</text>
</g> </g>
<g class="building7" style="transform: translate(419px, 305.75px)"> <g class="building7" style="transform: translate(419px, 305.75px)">
<use href="#building7"/> <use href="#building7"/>
@ -795,6 +812,7 @@
m 0 3.3 h 10.5 v 3 h -10.5 z m 0 3.3 h 10.5 v 3 h -10.5 z
"/> "/>
</g> </g>
<text class="elevation" x="108" y="40">2</text>
</g> </g>
</g> </g>
@ -841,6 +859,7 @@
<use style="transform: translate(31px, 51px) rotate(90deg)" href="#cabinet"/> <use style="transform: translate(31px, 51px) rotate(90deg)" href="#cabinet"/>
<use style="transform: translate(87.5px, 58px)" href="#cabinet"/> <use style="transform: translate(87.5px, 58px)" href="#cabinet"/>
</g> </g>
<text class="elevation" x="115" y="90">2</text>
</g> </g>
</g> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 41 KiB