Convert legend to Json

mapfile/template.j2

@@ -106,12 +106,34 @@ LAYER
       "wms_title"     "Carrot rust fly (Psila rosae) temperature model {{ timestep_date }}"
       {% for language in languages %}
       "wms_abstract.{{language.language_code}}" "
-      <ul style=\"list-style: none; padding: 0;\">
-      <li style=\"margin-bottom: 5px;\"><span style=\"background-color: #707070;\">&nbsp;&nbsp;&nbsp;</span> {{language.no_forecast}}</li>
-      <li style=\"margin-bottom: 5px;\"><span style=\"background-color: #00B457;\">&nbsp;&nbsp;&nbsp;</span> {{language.no_risk}}</li>
-      <li style=\"margin-bottom: 5px;\"><span style=\"background-color: #FFCC00;\">&nbsp;&nbsp;&nbsp;</span> {{language.possible_risk}}</li>
-      <li><span style=\"background-color: #FF0000;\">&nbsp;&nbsp;&nbsp;</span> {{language.high_risk}}</li>
-      </ul>
+      {
+        \"legendItems\": [
+          {
+            \"isWarningStatus\": true,
+            \"classification\": 0,
+            \"legendLabel\": \"{{ language.no_forecast }}\",
+            \"legendIconCSS\": \"width: 25px; background-color: #707070;\"
+          },
+          {
+            \"isWarningStatus\": true,
+            \"classification\": 2,
+            \"legendLabel\": \"{{ language.no_risk }}\",
+            \"legendIconCSS\": \"width: 25px; background-color: #00B457;\"
+          },
+          {
+            \"isWarningStatus\": true,
+            \"classification\": 3,
+            \"legendLabel\": \"{{ language.possible_risk }}\",
+            \"legendIconCSS\": \"width: 25px; background-color: #FFCC00;\"
+          },
+          {
+            \"isWarningStatus\": true,
+            \"classification\": 4,
+            \"legendLabel\": \"{{ language.high_risk }}\",
+            \"legendIconCSS\": \"width: 25px; background-color: #FF0000;\"
+          }
+        ]
+      }
       "
       {% endfor %}
     END  
@@ -159,6 +181,16 @@ LAYER
        "wms_title"     "Carrot rust fly (Psila rosae) temperature model Day Degrees {{ timestep_date }}"
        {% for language in languages %}
       "wms_abstract.{{language.language_code}}" "
+      {
+        \"legendItems\": [
+          {
+            \"isWarningStatus\": false,
+            \"classification\": 0,
+            \"legendLabel\": \"{{ language.day_degrees }}\",
+            \"legendIconCSS\": \"width: 25px; background: linear-gradient(to right, #0000FF, #FF0000);\"
+          }
+        ]
+      }
       <ul style=\"list-style: none; padding: 0;\">
       <li style=\"margin-bottom: 5px;\"><span style=\"display: inline-block; width: 25px; background: linear-gradient(to right, #0000FF, #FF0000);\">&nbsp;</span> {{language.day_degrees}}</li>
       </ul>