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

Debug routing, id corner cases

Browse Source
This commit is contained in:
Tom Russell 2018-09-13 23:55:53 +01:00
parent 3baccffd36
commit 853def333e
10 changed files with 103 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/src/frontend/app.js
View File

@ -61,13 +61,16 @@ class App extends React.Component {
</Route>
<Route exact path="/map/:map.html" component={Legend} />
<Route exact path="/building/:building.html">
<BuildingView {...this.state.building}
<BuildingView
{...this.state.building}
user={this.state.user}
selectBuilding={this.selectBuilding}
/>
</Route>
<Route exact path="/building/:building/edit.html">
<BuildingEdit {...this.state.building}
<BuildingEdit
{...this.state.building}
{...props} // includes route history/match
user={this.state.user}
selectBuilding={this.selectBuilding}
/>
@ -75,7 +78,8 @@ class App extends React.Component {
</Switch>
</CSSTransition>
</TransitionGroup>
<ColouringMap {...props}
<ColouringMap
{...props}
building={this.state.building}
selectBuilding={this.selectBuilding}
/>

3
app/src/frontend/building-edit.js
View File

@ -11,6 +11,8 @@ class BuildingEdit extends Component {
const user = props.user || {};
this.state = {
error: undefined,
id: props.id,
geometry_id: props.geometry_id,
location_name: props.location_name,
location_number: props.location_number,
location_line_two: props.location_line_two,
@ -80,6 +82,7 @@ class BuildingEdit extends Component {
this.setState({error: res.error})
} else {
this.props.selectBuilding(this.state);
this.props.history.push(`/building/${this.props.id}.html`)
}
}.bind(this)).catch(
(err) => this.setState({error: err})

7
app/src/frontend/error-box.js
View File

@ -1,6 +1,8 @@
import React, { Fragment } from 'react';
const ErrorBox = (props) => (
function ErrorBox(props){
console.error(props.msg);
return (
<Fragment>
{
(props.msg)?
@ -15,6 +17,7 @@ const ErrorBox = (props) => (
) : null
}
</Fragment>
);
);
}
export default ErrorBox;

3
app/src/frontend/logo.css
View File

@ -1,7 +1,8 @@
/**
* Logo
*/
.logo {
.logo,
.logo.navbar-brand {
display: block;
width: 6em;
padding: 0;

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

@ -50,24 +50,33 @@ class ColouringMap extends Component {
}
render() {
const data_layer = (
this.props.match && this.props.match.params && this.props.match.params[1]
)? this.props.match.params[1].replace("/", "")
: 'date_year';
const position = [this.state.lat, this.state.lng];
// baselayer
const key = OS_API_KEY
const tilematrixSet = 'EPSG:3857'
const layer = (this.state.theme === 'light')? 'Light 3857' : 'Night 3857';
const url = `https://api2.ordnancesurvey.co.uk/mapping_api/v1/service/zxy/${tilematrixSet}/${layer}/{z}/{x}/{y}.png?key=${key}`
const attribution = 'Building attribute data is © Colouring London contributors. Maps contain OS data © Crown copyright: OS Maps baselayers and building outlines.'
const colour = `/tiles/${data_layer}/{z}/{x}/{y}.png`;
// colour-data tiles
var data_tileset, is_building;
if (this.props.match && this.props.match.params && this.props.match.params[1]) {
data_tileset = this.props.match.params[1].replace("/", "")
is_building = this.props.match.params[0] === 'building'
} else {
is_building = false;
data_tileset = 'date_year';
}
const dataLayer = !is_building ? (
<TileLayer key={data_tileset} url={`/tiles/${data_tileset}/{z}/{x}/{y}.png`} />
) : null;
// highlight
const geometry_id = (this.props.building) ? this.props.building.geometry_id : undefined;
const highlight = `/tiles/highlight/{z}/{x}/{y}.png?highlight=${geometry_id}`
const highlightLayer = this.props.building ? (
<TileLayer key={data_layer} url={highlight} />
const highlightLayer = is_building ? (
<TileLayer key={this.props.building.id} url={highlight} />
) : null;
return (
@ -83,7 +92,7 @@ class ColouringMap extends Component {
onClick={this.handleClick}
>
<TileLayer url={url} attribution={attribution} />
<TileLayer url={colour} />
{ dataLayer }
{ highlightLayer }
<ZoomControl position="topright" />
<AttributionControl prefix="" />

5
app/src/frontend/sidebar.css
View File

@ -10,6 +10,11 @@
z-index: 1000;
overflow-y: auto;
}
.info-container .h2:first-child {
margin-bottom: 0.5rem;
margin-top: 0.5rem;
margin-left: -0.1em;
}
.leaflet-container .leaflet-control-attribution {
width: 100%;
height: 3rem;

2
app/src/frontend/styles/layout.css
View File

@ -9,7 +9,7 @@
@media (min-width: 768px){
main.beta {
position: absolute;
top: 117px; /* 32px banner + 82px header + 3px border */
top: 114px; /* 32px banner + 82px header */
bottom: 0;
left: 0;
right: 0;

6
app/src/parse.js
View File

@ -15,10 +15,10 @@ function strictParseInt(value) {
function parseBuildingURL(url){
const re = /^\/building\/(.*)\/edit?.html$/;
const re = /^\/building\/([^\/]+)(\/edit)?.html$/;
const matches = re.exec(url);
if (matches && matches.length === 2) {
if (matches && matches.length >= 2) {
return strictParseInt(matches[1])
}
return undefined;

12
app/src/tile.js
View File

@ -56,7 +56,9 @@ function render_tile(bbox, table_def, style_def, cb){
const layer = new mapnik.Layer('tile', PROJ4_STRING);
const conf = Object.assign({table: table_def}, DATASOURCE_CONFIG)
const postgis = new mapnik.Datasource(conf);
var postgis;
try {
postgis = new mapnik.Datasource(conf);
layer.datasource = postgis;
layer.styles = style_def
@ -64,7 +66,10 @@ function render_tile(bbox, table_def, style_def, cb){
path.join(__dirname, '..', 'map_styles', 'polygon.xml'),
{ strict: true },
function(err, map){
if (err) throw err
if (err) {
console.error(err);
return
}
map.add_layer(layer)
const im = new mapnik.Image(map.width, map.height)
@ -72,6 +77,9 @@ function render_tile(bbox, table_def, style_def, cb){
map.render(im, cb);
}
)
} catch(err) {
console.error(err);
}
}
export { get_bbox, render_tile };

19
app/src/tileserver.js
View File

@ -1,6 +1,7 @@
import express from 'express';
import { get_bbox, render_tile } from './tile';
import { strictParseInt } from './parse';
// tiles router
const router = express.Router()
@ -21,8 +22,11 @@ router.get('/outline/:z/:x/:y.png', function(req, res) {
// highlight single geometry
router.get('/highlight/:z/:x/:y.png', function(req, res) {
const { highlight } = req.query
const geometry_id = parseInt(highlight);
if(!geometry_id) res.status(400).send({error:'Bad parameter'})
const geometry_id = strictParseInt(highlight);
if(isNaN(geometry_id)){
res.status(400).send({error:'Bad parameter'})
return
}
const bbox = get_bbox(req.params)
const table_def = `(
SELECT
@ -54,7 +58,7 @@ router.get('/date_year/:z/:x/:y.png', function(req, res) {
const table_def = `(
SELECT
cast(
b.building_doc->>'date_year'
NULLIF(b.building_doc->>'date_year', '')
as integer
) as date_year,
g.geometry_geom
@ -80,9 +84,14 @@ router.get('/size_storeys/:z/:x/:y.png', function(req, res) {
const table_def = `(
SELECT
cast(
b.building_doc->>'size_storeys'
NULLIF(b.building_doc->>'size_attic', '')
as integer
) as size_storeys,
) +
cast(
NULLIF(b.building_doc->>'size_core', '')
as integer
)
as size_storeys,
g.geometry_geom
FROM
geometries as g,