Merge pull request #622 from mz8i/feature/land-use-tweaks

Re-add Current Use legend entries, update colour map

app/map_styles/polygon.xml

@@ -347,7 +347,11 @@
     <Style name="landuse">
         <Rule>
             <Filter>[current_landuse_order] = "Agriculture And Fisheries"</Filter>
-            <PolygonSymbolizer fill="#52403c" />
+            <PolygonSymbolizer fill="#fa667d" />
+        </Rule>
+        <Rule>
+            <Filter>[current_landuse_order] = "Minerals"</Filter>
+            <PolygonSymbolizer fill="#53f5dd" />
         </Rule>
         <Rule>
             <Filter>[current_landuse_order] = "Recreation And Leisure"</Filter>

app/src/frontend/map/legend.css

@@ -80,10 +80,14 @@
     display: inline-block;
     width: 1.3rem;
     height: 1.3rem;
-    text-indent: -30px;
-    margin: 0.125rem 0.5rem 0.125rem 0;
+    margin-right: 0.3rem;
     vertical-align: middle;
     overflow: hidden;
+    border: solid 1px #ddd;
+}
+
+.data-legend h6 {
+    margin-top: 5px;
 }
 .map-legend .data-intro {
     padding: 0 0.5rem;

app/src/frontend/map/legend.tsx

@@ -20,16 +20,18 @@ const LEGEND_CONFIG = {
     use: {
         title: 'Land Use',
         elements: [
-            { color: '#4a54a6', text: 'Residential' },
             { color: '#e5050d', text: 'Mixed Use' },
-            { color: '#ff8c00', text: 'Retail (pure)' },
+            { subtitle: 'Single use:'},
+            { color: '#4a54a6', text: 'Residential' },
+            { color: '#ff8c00', text: 'Retail' },
             { color: '#f5f58f', text: 'Industry & Business' },
             { color: '#73ccd1', text: 'Community Services' },
             { color: '#ffbfbf', text: 'Recreation & Leisure' },
             { color: '#b3de69', text: 'Transport' },
             { color: '#cccccc', text: 'Utilities & Infrastructure' },
             { color: '#898944', text: 'Defence' },
-            { color: '#52403c', text: 'Agriculture'},
+            { color: '#fa667d', text: 'Agriculture' },
+            { color: '#53f5dd', text: 'Minerals' },
             { color: '#ffffff', text: 'Vacant & Derelict' }
         ]
     },
@@ -216,14 +218,28 @@ class Legend extends React.Component<LegendProps, LegendState> {
                                     <p className='legend-disclaimer'>{details.disclaimer}</p>
                             }
                             {
-                                elements.map((item) => (
+                                elements.map((item) => {
+                                    if(item.subtitle != undefined) {
+                                        return (<li key={item.subtitle}>
+                                            <h6>{item.subtitle}</h6>
+                                        </li>);
+                                    }
+
+                                    return (
 
                                        <li key={item.color} >
-                                            <span className="key" style={ { background: item.color, border: item.border } }>-</span>
-                                            { item.text }
+                                           <tr>
+                                            <td>
+                                                <div className="key" style={ { background: item.color, border: item.border } }></div>
+                                            </td>
+                                            <td>
+                                                { item.text }
+                                            </td>
+                                           </tr>
                                        </li>
 
-                                ))
+                                    );
+                                })
                             }
                         </ul>
                         : <p className="data-intro">Coming soon…</p>