Provinces legend-box

I added a functional legend-box for provinces. Opens when clicked a new button added with standard icon for legends in Provinces editor dialog.
Bonus: Corrected a typo 'cuture'.

index.html

@@ -4486,6 +4486,7 @@
         <div id="provincesBottom">
           <button id="provincesEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
           <button id="provincesEditStyle" data-tip="Edit provinces style in Style Editor" class="icon-adjust"></button>
+          <button id="provincesLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button>
           <button
             id="provincesRecolor"
             data-tip="Recolor listed provinces based on state color"

modules/dynamic/editors/states-editor.js

@@ -434,13 +434,13 @@ function editStateName(state) {
   modules.editStateName = true;
 
   // add listeners
-  byId("stateNameEditorShortCulture").on("click", regenerateShortNameCuture);
+  byId("stateNameEditorShortCulture").on("click", regenerateShortNameCulture);
   byId("stateNameEditorShortRandom").on("click", regenerateShortNameRandom);
   byId("stateNameEditorAddForm").on("click", addCustomForm);
   byId("stateNameEditorCustomForm").on("change", addCustomForm);
   byId("stateNameEditorFullRegenerate").on("click", regenerateFullName);
 
-  function regenerateShortNameCuture() {
+  function regenerateShortNameCulture() {
     const state = +stateNameEditor.dataset.state;
     const culture = pack.states[state].culture;
     const name = Names.getState(Names.getCultureShort(culture), culture);

modules/ui/provinces-editor.js

@@ -26,6 +26,7 @@ function editProvinces() {
   document.getElementById("provincesEditorRefresh").addEventListener("click", refreshProvincesEditor);
   document.getElementById("provincesEditStyle").addEventListener("click", () => editStyle("provs"));
   document.getElementById("provincesFilterState").addEventListener("change", provincesEditorAddLines);
+  document.getElementById("provincesLegend").addEventListener("click", toggleLegend);
   document.getElementById("provincesPercentage").addEventListener("click", togglePercentageMode);
   document.getElementById("provincesChart").addEventListener("click", showChart);
   document.getElementById("provincesToggleLabels").addEventListener("click", toggleLabels);
@@ -520,12 +521,12 @@ function editProvinces() {
     modules.editProvinceName = true;
 
     // add listeners
-    document.getElementById("provinceNameEditorShortCulture").addEventListener("click", regenerateShortNameCuture);
+    document.getElementById("provinceNameEditorShortCulture").addEventListener("click", regenerateShortNameCulture);
     document.getElementById("provinceNameEditorShortRandom").addEventListener("click", regenerateShortNameRandom);
     document.getElementById("provinceNameEditorAddForm").addEventListener("click", addCustomForm);
     document.getElementById("provinceNameEditorFullRegenerate").addEventListener("click", regenerateFullName);
 
-    function regenerateShortNameCuture() {
+    function regenerateShortNameCulture() {
       const province = +provinceNameEditor.dataset.province;
       const culture = pack.cells.culture[pack.provinces[province].center];
       const name = Names.getState(Names.getCultureShort(culture), culture);
@@ -573,6 +574,17 @@ function editProvinces() {
     pack.provinces[p].burg = +value;
   }
   
+  function toggleLegend() {
+  if (legend.selectAll("*").size()) return clearLegend(); // hide legend
+
+  const selectedState = +document.getElementById("provincesFilterState").value;
+  const data = pack.provinces
+    .filter(p => p.i && !p.removed && ((selectedState < 0) || (selectedState >= 0 && p.state == selectedState)))
+    .sort((a, b) => b.area - a.area)
+    .map(p => [p.i, p.color, p.name]);
+  drawLegend("Provinces", data);
+}
+
   function togglePercentageMode() {
     if (body.dataset.type === "absolute") {
       body.dataset.type = "percentage";