Update ControlPoint UI to use milsymbol library.

This gets us out of the business of maintaining our own icons. The
milsymbol library generates the SVG data needed to display anything
covered by APP-6.
This commit is contained in:
Dan Albert
2022-02-27 19:06:21 -08:00
parent e1cdbed2e1
commit e7398af877
37 changed files with 59121 additions and 82 deletions

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="158" height="118" viewBox="21 36 158 118"><path d="M25,50 l150,0 0,100 -150,0 z" stroke-width="4" stroke="black" fill="rgb(0,107,140)" fill-opacity="1" ></path><path d="M100,80 l0,40 M81,90.5 l38,19 M81,109.5 l38,-19" stroke-width="4" stroke="black" fill="none" ></path><circle cx="100" cy="100" r="20" stroke-width="4" stroke="black" fill="none" ></circle><path d="M80,70 l40,0 M80,80 l25,-25 M100,80 l0,40 M81,90.5 l38,19 M81,109.5 l38,-19" stroke-width="4" stroke="black" fill="none" ></path><circle cx="100" cy="100" r="20" stroke-width="4" stroke="black" fill="none" ></circle><path d="M85,48 85,40 115,40 115,48 100,46 Z" stroke-width="4" stroke="black" fill="black" ></path></svg>

Before

Width:  |  Height:  |  Size: 767 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="158" height="148" viewBox="21 36 158 148"><path d="M25,50 l150,0 0,100 -150,0 z" stroke-width="4" stroke="black" fill="rgb(0,107,140)" fill-opacity="1" ></path><path d="M100,80 l0,40 M81,90.5 l38,19 M81,109.5 l38,-19" stroke-width="4" stroke="black" fill="none" ></path><circle cx="100" cy="100" r="20" stroke-width="4" stroke="black" fill="none" ></circle><path d="M80,70 l40,0 M80,80 l25,-25 M100,80 l0,40 M81,90.5 l38,19 M81,109.5 l38,-19" stroke-width="4" stroke="black" fill="none" ></path><circle cx="100" cy="100" r="20" stroke-width="4" stroke="black" fill="none" ></circle><path d="M85,48 85,40 115,40 115,48 100,46 Z" stroke-width="4" stroke="black" fill="black" ></path><path d="M25,155 l150,0 0,25 -150,0 z" stroke-width="4" stroke="black" fill="rgb(255,255,0)" ></path></svg>

Before

Width:  |  Height:  |  Size: 868 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="158" height="148" viewBox="21 36 158 148"><path d="M25,50 l150,0 0,100 -150,0 z" stroke-width="4" stroke="black" fill="rgb(0,107,140)" fill-opacity="1" ></path><path d="M100,80 l0,40 M81,90.5 l38,19 M81,109.5 l38,-19" stroke-width="4" stroke="black" fill="none" ></path><circle cx="100" cy="100" r="20" stroke-width="4" stroke="black" fill="none" ></circle><path d="M80,70 l40,0 M80,80 l25,-25 M100,80 l0,40 M81,90.5 l38,19 M81,109.5 l38,-19" stroke-width="4" stroke="black" fill="none" ></path><circle cx="100" cy="100" r="20" stroke-width="4" stroke="black" fill="none" ></circle><path d="M85,48 85,40 115,40 115,48 100,46 Z" stroke-width="4" stroke="black" fill="black" ></path><path d="M25,155 l150,0 0,25 -150,0 z" stroke-width="4" stroke="black" fill="rgb(255,0,0)" ></path></svg>

Before

Width:  |  Height:  |  Size: 866 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="152" height="162" viewBox="24 14 152 162"><path d="M 100,28 L172,100 100,172 28,100 100,28 Z" stroke-width="4" stroke="black" fill="rgb(200,0,0)" fill-opacity="1" ></path><path d="M100,80 l0,40 M81,90.5 l38,19 M81,109.5 l38,-19" stroke-width="4" stroke="black" fill="none" ></path><circle cx="100" cy="100" r="20" stroke-width="4" stroke="black" fill="none" ></circle><path d="M80,70 l40,0 M80,80 l25,-25 M100,80 l0,40 M81,90.5 l38,19 M81,109.5 l38,-19" stroke-width="4" stroke="black" fill="none" ></path><circle cx="100" cy="100" r="20" stroke-width="4" stroke="black" fill="none" ></circle><path d="M85,40 85,18 115,18 115,40 100,24 Z" stroke-width="4" stroke="black" fill="black" ></path></svg>

Before

Width:  |  Height:  |  Size: 778 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="152" height="192" viewBox="24 14 152 192"><path d="M 100,28 L172,100 100,172 28,100 100,28 Z" stroke-width="4" stroke="black" fill="rgb(200,0,0)" fill-opacity="1" ></path><path d="M100,80 l0,40 M81,90.5 l38,19 M81,109.5 l38,-19" stroke-width="4" stroke="black" fill="none" ></path><circle cx="100" cy="100" r="20" stroke-width="4" stroke="black" fill="none" ></circle><path d="M80,70 l40,0 M80,80 l25,-25 M100,80 l0,40 M81,90.5 l38,19 M81,109.5 l38,-19" stroke-width="4" stroke="black" fill="none" ></path><circle cx="100" cy="100" r="20" stroke-width="4" stroke="black" fill="none" ></circle><path d="M85,40 85,18 115,18 115,40 100,24 Z" stroke-width="4" stroke="black" fill="black" ></path><path d="M28,177 l144,0 0,25 -144,0 z" stroke-width="4" stroke="black" fill="rgb(255,255,0)" ></path></svg>

Before

Width:  |  Height:  |  Size: 879 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="152" height="192" viewBox="24 14 152 192"><path d="M 100,28 L172,100 100,172 28,100 100,28 Z" stroke-width="4" stroke="black" fill="rgb(200,0,0)" fill-opacity="1" ></path><path d="M100,80 l0,40 M81,90.5 l38,19 M81,109.5 l38,-19" stroke-width="4" stroke="black" fill="none" ></path><circle cx="100" cy="100" r="20" stroke-width="4" stroke="black" fill="none" ></circle><path d="M80,70 l40,0 M80,80 l25,-25 M100,80 l0,40 M81,90.5 l38,19 M81,109.5 l38,-19" stroke-width="4" stroke="black" fill="none" ></path><circle cx="100" cy="100" r="20" stroke-width="4" stroke="black" fill="none" ></circle><path d="M85,40 85,18 115,18 115,40 100,24 Z" stroke-width="4" stroke="black" fill="black" ></path><path d="M28,177 l144,0 0,25 -144,0 z" stroke-width="4" stroke="black" fill="rgb(255,0,0)" ></path></svg>

Before

Width:  |  Height:  |  Size: 877 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="128" height="128" viewBox="36 36 128 128"><circle cx="100" cy="100" r="60" stroke-width="4" stroke="black" fill="rgb(0,107,140)" fill-opacity="1" ></circle><path d="m 80,100 20,20 20,-20 -20,0 0,-20 -20,0 z" stroke-width="4" stroke="black" fill="black" ></path></svg>

Before

Width:  |  Height:  |  Size: 347 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="128" height="158" viewBox="36 36 128 158"><circle cx="100" cy="100" r="60" stroke-width="4" stroke="black" fill="rgb(0,107,140)" fill-opacity="1" ></circle><path d="m 80,100 20,20 20,-20 -20,0 0,-20 -20,0 z" stroke-width="4" stroke="black" fill="black" ></path><path d="M40,165 l120,0 0,25 -120,0 z" stroke-width="4" stroke="black" fill="rgb(255,255,0)" ></path></svg>

Before

Width:  |  Height:  |  Size: 448 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="128" height="128" viewBox="36 36 128 128"><circle cx="100" cy="100" r="60" stroke-width="4" stroke="black" fill="rgb(0,107,140)" fill-opacity="1" ></circle><circle cx="100" cy="100" r="60" stroke-width="5" stroke-dasharray="8,12" stroke="rgb(239, 239, 239)" fill="none" ></circle><path d="m 80,100 20,20 20,-20 -20,0 0,-20 -20,0 z" stroke-width="4" stroke="black" fill="black" ></path></svg>

Before

Width:  |  Height:  |  Size: 471 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="128" height="158" viewBox="36 36 128 158"><circle cx="100" cy="100" r="60" stroke-width="4" stroke="black" fill="rgb(0,107,140)" fill-opacity="1" ></circle><path d="m 80,100 20,20 20,-20 -20,0 0,-20 -20,0 z" stroke-width="4" stroke="black" fill="black" ></path><path d="M40,165 l120,0 0,25 -120,0 z" stroke-width="4" stroke="black" fill="rgb(255,0,0)" ></path></svg>

Before

Width:  |  Height:  |  Size: 446 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="152" height="152" viewBox="24 24 152 152"><path d="M100,28 L172,100 100,172 28,100 100,28 Z" stroke-width="4" stroke="black" fill="rgb(200,0,0)" fill-opacity="1" ></path><path d="m 80,100 20,20 20,-20 -20,0 0,-20 -20,0 z" stroke-width="4" stroke="black" fill="black" ></path></svg>

Before

Width:  |  Height:  |  Size: 361 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="152" height="182" viewBox="24 24 152 182"><path d="M100,28 L172,100 100,172 28,100 100,28 Z" stroke-width="4" stroke="black" fill="rgb(200,0,0)" fill-opacity="1" ></path><path d="m 80,100 20,20 20,-20 -20,0 0,-20 -20,0 z" stroke-width="4" stroke="black" fill="black" ></path><path d="M28,177 l144,0 0,25 -144,0 z" stroke-width="4" stroke="black" fill="rgb(255,255,0)" ></path></svg>

Before

Width:  |  Height:  |  Size: 462 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="152" height="152" viewBox="24 24 152 152"><path d="M100,28 L172,100 100,172 28,100 100,28 Z" stroke-width="4" stroke="black" fill="rgb(200,0,0)" fill-opacity="1" ></path><path d="M100,28 L172,100 100,172 28,100 100,28 Z" stroke-width="5" stroke-dasharray="8,12" stroke="rgb(239, 239, 239)" fill="none" ></path><path d="m 80,100 20,20 20,-20 -20,0 0,-20 -20,0 z" stroke-width="4" stroke="black" fill="black" ></path></svg>

Before

Width:  |  Height:  |  Size: 501 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="152" height="182" viewBox="24 24 152 182"><path d="M100,28 L172,100 100,172 28,100 100,28 Z" stroke-width="4" stroke="black" fill="rgb(200,0,0)" fill-opacity="1" ></path><path d="m 80,100 20,20 20,-20 -20,0 0,-20 -20,0 z" stroke-width="4" stroke="black" fill="black" ></path><path d="M28,177 l144,0 0,25 -144,0 z" stroke-width="4" stroke="black" fill="rgb(255,0,0)" ></path></svg>

Before

Width:  |  Height:  |  Size: 460 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 417 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="158" height="118" viewBox="21 36 158 118"><path d="M25,50 l150,0 0,100 -150,0 z" stroke-width="4" stroke="black" fill="rgb(0,107,140)" fill-opacity="1" ></path><path d="m 75,85 50,30 m -50,0 50,-30" stroke-width="4" stroke="black" fill="none" ></path><path d="M85,48 85,40 115,40 115,48 100,46 Z" stroke-width="4" stroke="black" fill="black" ></path></svg>

Before

Width:  |  Height:  |  Size: 436 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="158" height="148" viewBox="21 36 158 148"><path d="M25,50 l150,0 0,100 -150,0 z" stroke-width="4" stroke="black" fill="rgb(0,107,140)" fill-opacity="1" ></path><path d="m 75,85 50,30 m -50,0 50,-30" stroke-width="4" stroke="black" fill="none" ></path><path d="M85,48 85,40 115,40 115,48 100,46 Z" stroke-width="4" stroke="black" fill="black" ></path><path d="M25,155 l150,0 0,25 -150,0 z" stroke-width="4" stroke="black" fill="rgb(255,255,0)" ></path></svg>

Before

Width:  |  Height:  |  Size: 537 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="158" height="148" viewBox="21 36 158 148"><path d="M25,50 l150,0 0,100 -150,0 z" stroke-width="4" stroke="black" fill="rgb(0,107,140)" fill-opacity="1" ></path><path d="m 75,85 50,30 m -50,0 50,-30" stroke-width="4" stroke="black" fill="none" ></path><path d="M85,48 85,40 115,40 115,48 100,46 Z" stroke-width="4" stroke="black" fill="black" ></path><path d="M25,155 l150,0 0,25 -150,0 z" stroke-width="4" stroke="black" fill="rgb(255,0,0)" ></path></svg>

Before

Width:  |  Height:  |  Size: 535 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="152" height="162" viewBox="24 14 152 162"><path d="M 100,28 L172,100 100,172 28,100 100,28 Z" stroke-width="4" stroke="black" fill="rgb(200,0,0)" fill-opacity="1" ></path><path d="m 75,85 50,30 m -50,0 50,-30" stroke-width="4" stroke="black" fill="none" ></path><path d="M85,40 85,18 115,18 115,40 100,24 Z" stroke-width="4" stroke="black" fill="black" ></path></svg>

Before

Width:  |  Height:  |  Size: 447 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="152" height="192" viewBox="24 14 152 192"><path d="M 100,28 L172,100 100,172 28,100 100,28 Z" stroke-width="4" stroke="black" fill="rgb(200,0,0)" fill-opacity="1" ></path><path d="m 75,85 50,30 m -50,0 50,-30" stroke-width="4" stroke="black" fill="none" ></path><path d="M85,40 85,18 115,18 115,40 100,24 Z" stroke-width="4" stroke="black" fill="black" ></path><path d="M28,177 l144,0 0,25 -144,0 z" stroke-width="4" stroke="black" fill="rgb(255,255,0)" ></path></svg>

Before

Width:  |  Height:  |  Size: 548 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="152" height="192" viewBox="24 14 152 192"><path d="M 100,28 L172,100 100,172 28,100 100,28 Z" stroke-width="4" stroke="black" fill="rgb(200,0,0)" fill-opacity="1" ></path><path d="m 75,85 50,30 m -50,0 50,-30" stroke-width="4" stroke="black" fill="none" ></path><path d="M85,40 85,18 115,18 115,40 100,24 Z" stroke-width="4" stroke="black" fill="black" ></path><path d="M28,177 l144,0 0,25 -144,0 z" stroke-width="4" stroke="black" fill="rgb(255,0,0)" ></path></svg>

Before

Width:  |  Height:  |  Size: 546 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="128" height="128" viewBox="36 36 128 128"><circle cx="100" cy="100" r="60" stroke-width="4" stroke="black" fill="rgb(0,107,140)" fill-opacity="1" ></circle><text x="100" y="110" text-anchor="middle" font-size="35" font-family="Arial" font-weight="bold" stroke-width="4" stroke="none" fill="black" >LHA</text></svg>

Before

Width:  |  Height:  |  Size: 394 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="128" height="158" viewBox="36 36 128 158"><circle cx="100" cy="100" r="60" stroke-width="4" stroke="black" fill="rgb(0,107,140)" fill-opacity="1" ></circle><text x="100" y="110" text-anchor="middle" font-size="35" font-family="Arial" font-weight="bold" stroke-width="4" stroke="none" fill="black" >LHA</text><path d="M40,165 l120,0 0,25 -120,0 z" stroke-width="4" stroke="black" fill="rgb(255,255,0)" ></path></svg>

Before

Width:  |  Height:  |  Size: 495 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="128" height="128" viewBox="36 36 128 128"><circle cx="100" cy="100" r="60" stroke-width="4" stroke="black" fill="rgb(0,107,140)" fill-opacity="1" ></circle><circle cx="100" cy="100" r="60" stroke-width="5" stroke-dasharray="8,12" stroke="rgb(239, 239, 239)" fill="none" ></circle><text x="100" y="110" text-anchor="middle" font-size="35" font-family="Arial" font-weight="bold" stroke-width="4" stroke="none" fill="black" >LHA</text></svg>

Before

Width:  |  Height:  |  Size: 518 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="128" height="158" viewBox="36 36 128 158"><circle cx="100" cy="100" r="60" stroke-width="4" stroke="black" fill="rgb(0,107,140)" fill-opacity="1" ></circle><text x="100" y="110" text-anchor="middle" font-size="35" font-family="Arial" font-weight="bold" stroke-width="4" stroke="none" fill="black" >LHA</text><path d="M40,165 l120,0 0,25 -120,0 z" stroke-width="4" stroke="black" fill="rgb(255,0,0)" ></path></svg>

Before

Width:  |  Height:  |  Size: 493 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="152" height="152" viewBox="24 24 152 152"><path d="M100,28 L172,100 100,172 28,100 100,28 Z" stroke-width="4" stroke="black" fill="rgb(200,0,0)" fill-opacity="1" ></path><text x="100" y="110" text-anchor="middle" font-size="35" font-family="Arial" font-weight="bold" stroke-width="4" stroke="none" fill="black" >LHA</text></svg>

Before

Width:  |  Height:  |  Size: 408 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="152" height="182" viewBox="24 24 152 182"><path d="M100,28 L172,100 100,172 28,100 100,28 Z" stroke-width="4" stroke="black" fill="rgb(200,0,0)" fill-opacity="1" ></path><text x="100" y="110" text-anchor="middle" font-size="35" font-family="Arial" font-weight="bold" stroke-width="4" stroke="none" fill="black" >LHA</text><path d="M28,177 l144,0 0,25 -144,0 z" stroke-width="4" stroke="black" fill="rgb(255,255,0)" ></path></svg>

Before

Width:  |  Height:  |  Size: 509 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="152" height="152" viewBox="24 24 152 152"><path d="M100,28 L172,100 100,172 28,100 100,28 Z" stroke-width="4" stroke="black" fill="rgb(200,0,0)" fill-opacity="1" ></path><path d="M100,28 L172,100 100,172 28,100 100,28 Z" stroke-width="5" stroke-dasharray="8,12" stroke="rgb(239, 239, 239)" fill="none" ></path><text x="100" y="110" text-anchor="middle" font-size="35" font-family="Arial" font-weight="bold" stroke-width="4" stroke="none" fill="black" >LHA</text></svg>

Before

Width:  |  Height:  |  Size: 548 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="152" height="182" viewBox="24 24 152 182"><path d="M100,28 L172,100 100,172 28,100 100,28 Z" stroke-width="4" stroke="black" fill="rgb(200,0,0)" fill-opacity="1" ></path><text x="100" y="110" text-anchor="middle" font-size="35" font-family="Arial" font-weight="bold" stroke-width="4" stroke="none" fill="black" >LHA</text><path d="M28,177 l144,0 0,25 -144,0 z" stroke-width="4" stroke="black" fill="rgb(255,0,0)" ></path></svg>

Before

Width:  |  Height:  |  Size: 507 B

View File

@@ -18,6 +18,8 @@
<link rel="stylesheet" href="lib/leaflet-ruler/leaflet-ruler.css">
<script src="lib/leaflet-ruler/leaflet-ruler.js"></script>
<script src="lib/milsymbol/milsymbol.js"></script>
<script src="map.js" defer="defer"></script>
<style>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -61,36 +61,6 @@ const UnitState = Object.freeze({
Destroyed: "destroyed",
});
class CpIcons {
constructor() {
this.icons = {};
for (const player of [true, false]) {
this.icons[player] = {};
for (const state of Object.values(UnitState)) {
this.icons[player][state] = {
airfield: this.loadIcon("airfield", player, state),
cv: this.loadIcon("cv", player, state),
fob: this.loadIcon("fob", player, state),
lha: this.loadIcon("lha", player, state),
offmap: this.loadIcon("airfield", player, state),
};
}
}
}
icon(category, player, state) {
return this.icons[player][state][category];
}
loadIcon(category, player, state) {
const color = player ? "blue" : "red";
return new L.Icon({
iconUrl: `../ground_assets/${category}_${color}_${state}.svg`,
iconSize: [32, 32],
});
}
}
class TgoIcons {
constructor() {
this.icons = {};
@@ -163,7 +133,6 @@ class AirIcons {
}
const Icons = Object.freeze({
ControlPoints: new CpIcons(),
Objectives: new TgoIcons(),
AirIcons: new AirIcons(),
});
@@ -458,11 +427,14 @@ class ControlPoint {
}
icon() {
return Icons.ControlPoints.icon(
this.cp.category,
this.cp.blue,
this.cp.status
);
const symbol = new ms.Symbol(this.cp.sidc, {
size: 24,
colorMode: "Dark",
});
return L.icon({
iconUrl: symbol.toDataURL(),
iconAnchor: L.point(symbol.getAnchor().x, symbol.getAnchor().y),
});
}
hasDestination() {