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

Update base layers

Browse Source 
- simplify age render (no outline)
- base_light/base_night tiles
- cyan highlight

[Closes #50]
This commit is contained in:
Tom Russell 2018-10-25 10:16:18 +01:00
parent bed063f238
commit 3abbf4bbe8
3 changed files with 54 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
app/map_styles/polygon.xml
View File

@ -1,25 +1,25 @@
<Map minimum-version="2.0.0">
<Style name="polygon">
<Style name="base_light">
<Rule>
<PolygonSymbolizer fill="#4682B477" />
<LineSymbolizer stroke="white" stroke-width="0.3" />
<PolygonSymbolizer fill="#cccccc" />
<TextSymbolizer face-name="DejaVu Sans Condensed Bold" fill="#000000">
[location_number]
</TextSymbolizer>
</Rule>
</Style>
<Style name="base_night">
<Rule>
<PolygonSymbolizer fill="#303044" />
<TextSymbolizer face-name="DejaVu Sans Condensed Bold" fill="#ffffff">
[location_number]
</TextSymbolizer>
</Rule>
</Style>
<Style name="highlight">
<Rule>
<Filter>[focus] = true</Filter>
<LineSymbolizer stroke="black" stroke-width="5" stroke-opacity="0.5" />
<LineSymbolizer stroke="white" stroke-width="3" />
<TextSymbolizer face-name="DejaVu Sans Condensed Bold">
[location_number]
</TextSymbolizer>
</Rule>
<Rule>
<ElseFilter />
<LineSymbolizer stroke="black" stroke-width="0.3" />
<TextSymbolizer face-name="DejaVu Sans Condensed Bold">
[location_number]
</TextSymbolizer>
<LineSymbolizer stroke="#00ffffaa" stroke-width="4.5" />
<LineSymbolizer stroke="#00ffffff" stroke-width="2.5" />
</Rule>
</Style>
<Style name="size_storeys">
@ -56,102 +56,78 @@
<Rule>
<Filter>[date_year] &gt;= 2000</Filter>
<PolygonSymbolizer fill="#f0eaba" />
<LineSymbolizer stroke="white" stroke-width="0.3" />
</Rule>
<Rule>
<Filter>[date_year] &gt;= 1980 and [date_year] &lt; 2000</Filter>
<PolygonSymbolizer fill="#fae269" />
<LineSymbolizer stroke="white" stroke-width="0.3" />
</Rule>
<Rule>
<Filter>[date_year] &gt;= 1960 and [date_year] &lt; 1980</Filter>
<PolygonSymbolizer fill="#fbaf27" />
<LineSymbolizer stroke="white" stroke-width="0.3" />
</Rule>
<Rule>
<Filter>[date_year] &gt;= 1940 and [date_year] &lt; 1960</Filter>
<PolygonSymbolizer fill="#e6711d" />
<LineSymbolizer stroke="white" stroke-width="0.3" />
</Rule>
<Rule>
<Filter>[date_year] &gt;= 1920 and [date_year] &lt; 1940</Filter>
<PolygonSymbolizer fill="#d73d3a" />
<LineSymbolizer stroke="white" stroke-width="0.3" />
</Rule>
<Rule>
<Filter>[date_year] &gt;= 1900 and [date_year] &lt; 1920</Filter>
<PolygonSymbolizer fill="#ba221c" />
<LineSymbolizer stroke="white" stroke-width="0.3" />
</Rule>
<Rule>
<Filter>[date_year] &gt;= 1880 and [date_year] &lt; 1900</Filter>
<PolygonSymbolizer fill="#bb859b" />
<LineSymbolizer stroke="white" stroke-width="0.3" />
</Rule>
<Rule>
<Filter>[date_year] &gt;= 1860 and [date_year] &lt; 1880</Filter>
<PolygonSymbolizer fill="#8b3654" />
<LineSymbolizer stroke="white" stroke-width="0.3" />
</Rule>
<Rule>
<Filter>[date_year] &gt;= 1840 and [date_year] &lt; 1860</Filter>
<PolygonSymbolizer fill="#8f5385" />
<LineSymbolizer stroke="white" stroke-width="0.3" />
</Rule>
<Rule>
<Filter>[date_year] &gt;= 1820 and [date_year] &lt; 1840</Filter>
<PolygonSymbolizer fill="#56619b" />
<LineSymbolizer stroke="white" stroke-width="0.3" />
</Rule>
<Rule>
<Filter>[date_year] &gt;= 1800 and [date_year] &lt; 1820</Filter>
<PolygonSymbolizer fill="#6793b2" />
<LineSymbolizer stroke="white" stroke-width="0.3" />
</Rule>
<Rule>
<Filter>[date_year] &gt;= 1780 and [date_year] &lt; 1800</Filter>
<PolygonSymbolizer fill="#83c3b3" />
<LineSymbolizer stroke="white" stroke-width="0.3" />
</Rule>
<Rule>
<Filter>[date_year] &gt;= 1760 and [date_year] &lt; 1780</Filter>
<PolygonSymbolizer fill="#adc88f" />
<LineSymbolizer stroke="white" stroke-width="0.3" />
</Rule>
<Rule>
<Filter>[date_year] &gt;= 1740 and [date_year] &lt; 1760</Filter>
<PolygonSymbolizer fill="#83a663" />
<LineSymbolizer stroke="white" stroke-width="0.3" />
</Rule>
<Rule>
<Filter>[date_year] &gt;= 1720 and [date_year] &lt; 1740</Filter>
<PolygonSymbolizer fill="#77852d" />
<LineSymbolizer stroke="white" stroke-width="0.3" />
</Rule>
<Rule>
<Filter>[date_year] &gt;= 1700 and [date_year] &lt; 1720</Filter>
<PolygonSymbolizer fill="#69814e" />
<LineSymbolizer stroke="white" stroke-width="0.3" />
</Rule>
<Rule>
<Filter>[date_year] &gt;= 1680 and [date_year] &lt; 1700</Filter>
<PolygonSymbolizer fill="#d0c291" />
<LineSymbolizer stroke="white" stroke-width="0.3" />
</Rule>
<Rule>
<Filter>[date_year] &gt;= 1660 and [date_year] &lt; 1680</Filter>
<PolygonSymbolizer fill="#918158" />
<LineSymbolizer stroke="white" stroke-width="0.3" />
</Rule>
<Rule>
<Filter>[date_year] &lt; 1660</Filter>
<PolygonSymbolizer fill="#7a5732" />
<LineSymbolizer stroke="white" stroke-width="0.3" />
</Rule>
<Rule>
<ElseFilter />
<PolygonSymbolizer fill="#00000000" />
<LineSymbolizer stroke="black" stroke-width="0.3" />
</Rule>
</Style>
</Map>

5
app/src/frontend/map.js
View File

@ -89,6 +89,10 @@ class ColouringMap extends Component {
<TileLayer key={this.props.building.building_id} url={highlight} />
: null;
const base_layer_url = (this.state.theme === 'light')?
`/tiles/base_light/{z}/{x}/{y}.png`
: `/tiles/base_night/{z}/{x}/{y}.png`
return (
<Fragment>
<Map
@ -102,6 +106,7 @@ class ColouringMap extends Component {
onClick={this.handleClick}
>
<TileLayer url={url} attribution={attribution} />
<TileLayer url={base_layer_url} />
{ dataLayer }
{ highlightLayer }
<ZoomControl position="topright" />

38
app/src/tileserver.js
View File

@ -11,10 +11,41 @@ import { strictParseInt } from './parse';
const router = express.Router()
// basic geometry tiles
router.get('/outline/:z/:x/:y.png', function(req, res) {
router.get('/base_light/:z/:x/:y.png', function(req, res) {
const bbox = get_bbox(req.params)
const table_def = 'geometries'
const style_def = ['polygon']
const table_def = `(
SELECT
b.location_number as location_number,
g.geometry_geom
FROM
geometries as g,
buildings as b
WHERE
g.geometry_id = b.geometry_id
) as outline`
const style_def = ['base_light']
render_tile(bbox, table_def, style_def, function(err, im) {
if (err) throw err
res.writeHead(200, {'Content-Type': 'image/png'})
res.end(im.encodeSync('png'))
})
});
// dark theme
router.get('/base_night/:z/:x/:y.png', function(req, res) {
const bbox = get_bbox(req.params)
const table_def = `(
SELECT
b.location_number as location_number,
g.geometry_geom
FROM
geometries as g,
buildings as b
WHERE
g.geometry_id = b.geometry_id
) as outline`
const style_def = ['base_night']
render_tile(bbox, table_def, style_def, function(err, im) {
if (err) throw err
@ -35,7 +66,6 @@ router.get('/highlight/:z/:x/:y.png', function(req, res) {
const table_def = `(
SELECT
g.geometry_id = ${geometry_id} as focus,
b.location_number as location_number,
g.geometry_geom
FROM
geometries as g,