Merge pull request #622 from mz8i/feature/land-use-tweaks
Re-add Current Use legend entries, update colour map
This commit is contained in:
commit
252d94b2b3
@ -347,7 +347,11 @@
|
|||||||
<Style name="landuse">
|
<Style name="landuse">
|
||||||
<Rule>
|
<Rule>
|
||||||
<Filter>[current_landuse_order] = "Agriculture And Fisheries"</Filter>
|
<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>
|
||||||
<Rule>
|
<Rule>
|
||||||
<Filter>[current_landuse_order] = "Recreation And Leisure"</Filter>
|
<Filter>[current_landuse_order] = "Recreation And Leisure"</Filter>
|
||||||
|
@ -80,10 +80,14 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1.3rem;
|
width: 1.3rem;
|
||||||
height: 1.3rem;
|
height: 1.3rem;
|
||||||
text-indent: -30px;
|
margin-right: 0.3rem;
|
||||||
margin: 0.125rem 0.5rem 0.125rem 0;
|
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
border: solid 1px #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-legend h6 {
|
||||||
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
.map-legend .data-intro {
|
.map-legend .data-intro {
|
||||||
padding: 0 0.5rem;
|
padding: 0 0.5rem;
|
||||||
|
@ -20,16 +20,18 @@ const LEGEND_CONFIG = {
|
|||||||
use: {
|
use: {
|
||||||
title: 'Land Use',
|
title: 'Land Use',
|
||||||
elements: [
|
elements: [
|
||||||
{ color: '#4a54a6', text: 'Residential' },
|
|
||||||
{ color: '#e5050d', text: 'Mixed Use' },
|
{ 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: '#f5f58f', text: 'Industry & Business' },
|
||||||
{ color: '#73ccd1', text: 'Community Services' },
|
{ color: '#73ccd1', text: 'Community Services' },
|
||||||
{ color: '#ffbfbf', text: 'Recreation & Leisure' },
|
{ color: '#ffbfbf', text: 'Recreation & Leisure' },
|
||||||
{ color: '#b3de69', text: 'Transport' },
|
{ color: '#b3de69', text: 'Transport' },
|
||||||
{ color: '#cccccc', text: 'Utilities & Infrastructure' },
|
{ color: '#cccccc', text: 'Utilities & Infrastructure' },
|
||||||
{ color: '#898944', text: 'Defence' },
|
{ color: '#898944', text: 'Defence' },
|
||||||
{ color: '#52403c', text: 'Agriculture'},
|
{ color: '#fa667d', text: 'Agriculture' },
|
||||||
|
{ color: '#53f5dd', text: 'Minerals' },
|
||||||
{ color: '#ffffff', text: 'Vacant & Derelict' }
|
{ color: '#ffffff', text: 'Vacant & Derelict' }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@ -216,14 +218,28 @@ class Legend extends React.Component<LegendProps, LegendState> {
|
|||||||
<p className='legend-disclaimer'>{details.disclaimer}</p>
|
<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} >
|
<li key={item.color} >
|
||||||
<span className="key" style={ { background: item.color, border: item.border } }>-</span>
|
<tr>
|
||||||
{ item.text }
|
<td>
|
||||||
|
<div className="key" style={ { background: item.color, border: item.border } }></div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{ item.text }
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
))
|
);
|
||||||
|
})
|
||||||
}
|
}
|
||||||
</ul>
|
</ul>
|
||||||
: <p className="data-intro">Coming soon…</p>
|
: <p className="data-intro">Coming soon…</p>
|
||||||
|
Loading…
Reference in New Issue
Block a user