a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
Re-add Current Use legend entries, update colour map
This commit is contained in:
Maciej Ziarkowski 2020-07-16 17:15:59 +02:00 committed by GitHub
commit 252d94b2b3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/map_styles/polygon.xml
View File

@ -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>

8
app/src/frontend/map/legend.css
View File

@ -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;

28
app/src/frontend/map/legend.tsx
View File

@ -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>
<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>