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

Allow custom highlight colour based on data layer

Browse Source
This commit is contained in:
Maciej Ziarkowski 2019-09-10 16:58:14 +01:00
parent 1c1e8df704
commit bc060bb666
4 changed files with 24 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

@ -35,6 +35,12 @@
</Style>
<Style name="highlight">
<Rule>
<Filter>[base_layer] = 'location' or [base_layer] = 'conservation_area'</Filter>
<LineSymbolizer stroke="#ff0000aa" stroke-width="4.5" />
<LineSymbolizer stroke="#ff0000ff" stroke-width="2.5" />
</Rule>
<Rule>
<ElseFilter />
<LineSymbolizer stroke="#00ffffaa" stroke-width="4.5" />
<LineSymbolizer stroke="#00ffffff" stroke-width="2.5" />
</Rule>

2
app/src/frontend/map.tsx
View File

@ -123,7 +123,7 @@ class ColouringMap extends Component<any, any> { // TODO: add proper types
// highlight
const geometryId = (this.props.building) ? this.props.building.geometry_id : undefined;
const highlight = `/tiles/highlight/{z}/{x}/{y}.png?highlight=${geometryId}`
const highlight = `/tiles/highlight/{z}/{x}/{y}.png?highlight=${geometryId}&base=${tileset}`
const highlightLayer = (isBuilding && this.props.building) ?
<TileLayer
key={this.props.building.building_id}

15
app/src/tiles/tile.ts
View File

@ -147,15 +147,19 @@ function getXYZ(bbox, z) {
return mercator.xyz(bbox, z, false, '900913')
}
function renderTile(tileset, z, x, y, geometryId, cb) {
interface HighlightOptions {
geometryId?: number;
baseTileset?: string;
}
function renderTile(tileset, z, x, y, {geometryId, baseTileset}: HighlightOptions, cb) {
const bbox = getBbox(z, x, y)
const map = new mapnik.Map(TILE_SIZE, TILE_SIZE, PROJ4_STRING);
map.bufferSize = TILE_BUFFER_SIZE;
const layer = new mapnik.Layer('tile', PROJ4_STRING);
const tableDefinition = (tileset === 'highlight') ?
getHighlightTableDefinition(geometryId)
const tableDefinition = tileset === 'highlight' ?
getHighlightTableDefinition(geometryId, baseTileset)
: MAP_STYLE_TABLE_DEFINITIONS[tileset];
const conf = Object.assign({ table: tableDefinition }, DATASOURCE_CONFIG)
@ -187,10 +191,11 @@ function renderTile(tileset, z, x, y, geometryId, cb) {
}
// highlight single geometry, requires geometryId in the table query
function getHighlightTableDefinition(geometryId) {
function getHighlightTableDefinition(geometryId: number, baseLayer: string = 'default') {
return `(
SELECT
g.geometry_geom
g.geometry_geom,
'${baseLayer}' as base_layer
FROM
geometries as g
WHERE

11
app/src/tiles/tileserver.ts
View File

@ -99,7 +99,7 @@ function renderOrStitchTile(tileset, z, x, y) {
} else {
return new Promise((resolve, reject) => {
renderTile(tileset, z, x, y, undefined, (err, im) => {
renderTile(tileset, z, x, y, {}, (err, im) => {
if (err) {
reject(err)
return
@ -193,9 +193,9 @@ function handleHighlightTileRequest(req, res) {
}
// highlight layer uses geometry_id to outline a single building
const { highlight } = req.query
const { highlight, base } = req.query
const geometryId = strictParseInt(highlight);
if (isNaN(geometryId)) {
if (isNaN(geometryId) || ( base != undefined && !base.match(/^\w+$/) )) {
res.status(400).send({ error: 'Bad parameter' })
return
}
@ -204,7 +204,10 @@ function handleHighlightTileRequest(req, res) {
return emptyTile()
}
renderTile('highlight', intZ, intX, intY, geometryId, function (err, im) {
renderTile('highlight', intZ, intX, intY, {
geometryId,
baseTileset: base
}, function (err, im) {
if (err) {throw err}
res.writeHead(200, { 'Content-Type': 'image/png' })