7 |
13 |
48 |
49 |
56 |
57 | )
58 | }
59 | }
60 |
61 | export default About;
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # OSM Analytics Health Module
2 |
3 | [](https://circleci.com/gh/hotosm/osma-health/tree/master)
4 |
5 | osma-health is an independent extension of OSM Analytics for health campaigns run by HOT. The current phase is to understand the progress and completeness of Malaria campaigns.
6 |
7 | This repository will be the main ticket tracker, as well as the front-end code. Other repos are:
8 |
9 | * [osma-health-infra](https://github.com/hotosm/osma-health-infra) - private infrastructure code.
10 | * [osma-health-workers](https://github.com/hotosm/osma-health-workers) - workers to prepare data for analysis.
11 | * [hotosm-population](https://github.com/azavea/hot-osm-population) - WorldPop based OSM data completeness estimates.
12 | * [osmlint](https://github.com/hotosm/osmlint) - fork of OSMLint with validators specific for this project.
13 |
14 | osma-health is being built by [Development Seed](https://developmentseed.org/).
15 |
16 | ## Setup
17 | The front-end is hosted on S3 bucket called `osma-health`. To deploy, merge a PR to master and CircleCI will automatically push a dist to S3.
18 |
19 | ## Background
20 |
21 | OSM Analytics for Health aims to help field-based, academic and governmental organizations to improve their prevention strategies by tracking where the map is incomplete. `hotosm/osma-health` is a web application developed by HOT and Development Seed to assess the quality and accuracy of OpenStreetMap data.
22 |
23 | By combining Worldpop and completely mapped areas in OSM, we can train a model to estimate gaps in building density. We overlay this with other metrics to provide a report of coverage area.
24 |
25 | The purpose of this document is to outline the metrics required by the application and the underlying infrastructure that produces them. At a high level our approach involves a periodic generation of vector spatial datasets from primary sources.
26 |
27 | ## Infrastructure Requirements
28 | - Periodic updating of metrics
29 | - Use of AWS technologies
30 | - Static frontend with minimal API infrastructure
31 | ## Data requirements
32 |
33 | **Data sources**
34 | Sources of data that will be used to generate the metrics and the map layers
35 |
36 |
37 | - [**WorldPop**](http://www.worldpop.org.uk/): a raster spatial layer of population counts per 100x100m pixel
38 | - [**OpenStreetMap QA Tiles**](http://osmlab.github.io/osm-qa-tiles): a vector tile dataset containing all OSM data
39 | - **Areas of Interest**: A list of vector geometries for each area where the report is generated
40 |
41 | **Derived metrics**
42 | Metrics displayed alongside an area of interest
43 |
44 |
45 | - **Overall quality indicator**: A qualitative measure of the completeness of the area of interest.
46 | - **Last time of update:** When was the report last generated?
47 | - **Estimated population**: Population in the area of interest
48 | - **Relative completeness**: A quantitative measure of completeness based on Worldpop and building density
49 | - **Attribute completeness**: A measure of what percentage of missing tags such as ‘residential building’ in OSM building data
50 | - **Recency of edits**: A histogram of how fresh the data in the area of interest is
51 | - **Number of duplicate buildings**: The number of buildings that were mapped multiple times
52 | - **Logical consistency errors**: The number of features that are misaligned or overlapping illogically with other features
53 |
54 | **Map layers**
55 |
56 | - **Area of interest geometry**: A bounding perimeter around the report area
57 | - **Recency layer**: A spatial gradient layer that displays recency of data
58 | - **Completeness layer**: A spatial category layer that displays relative completeness
59 | ## Implementation Overview
60 |
61 | Our approach will be two-fold, using a one-time job to generate the “relative completeness” metric and associated tile layer, alongside periodic jobs to generate the other metrics. The output of these jobs is spatial vector data stored in AWS S3, either in GeoJSON or Mapbox Vector Tile format.
62 |
63 |
64 | 
65 |
66 |
67 | **One-time ML job**
68 | Azavea is leading the task of building a relative completess metric for a given area of interest. Given WorldPop and the OSM QA tiles, a machine learning training process will generate a model that can fit population counts to OSM building coverage. It will then output geojson for each tile at zoom 12. These tiles will contain:
69 |
70 |
71 | - Estimated population
72 | - Actual OSM building coverage
73 | - Expected building coverage
74 | - A ratio of projected population to worldpop estimate
75 |
76 | The last ratio is the measure of relative completeness. In perfectly mapped areas, it tends to 1, and in poor coverage areas it is less than 1. This 0 to 1 scale can be used for a heatmap layer.
77 |
78 | **Periodic batch jobs**
79 | For the other metrics, Development Seed is building an AWS Batch pipeline that takes in WorldPop and the OSM QA tiles and generates vector data. The AWS Batch pipeline is triggered weekly using a scheduled AWS Lambda function. At that time, a job will be scheduled for each country that covers the areas of interest. The underlying cluster for the jobs are spot instances that scale up to meet the demands of the batch then terminate at the end of all jobs in that batch.
80 |
81 | The batch jobs will each trigger a series of [OSM Lint](https://github.com/osmlab/osmlint) and aggregation tasks. The HOT organization has forked the osmlint repository to add additional tasks that suit `osma-health`'s purpose.
82 |
--------------------------------------------------------------------------------
/src/components/ReportMap.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import mapboxgl from 'mapbox-gl';
3 | import centerOfMass from '@turf/center-of-mass';
4 | import * as d3Scale from 'd3-scale';
5 | import * as d3Chromatic from 'd3-scale-chromatic';
6 |
7 | mapboxgl.accessToken = 'pk.eyJ1IjoiZGV2c2VlZCIsImEiOiJnUi1mbkVvIn0.018aLhX0Mb0tdtaT2QNe2Q';
8 |
9 | export default class ReportMap extends Component {
10 | constructor(props) {
11 | super(props);
12 | this.state = {
13 | layer: 'Default',
14 | switchImg: 'images/sat.jpg'
15 | }
16 | this.map = null;
17 | }
18 | componentDidMount() {
19 | const center = centerOfMass(this.props.aoi).geometry.coordinates;
20 |
21 | this.map = new mapboxgl.Map({
22 | container: this.mapContainer,
23 | style: 'mapbox://styles/devseed/cjfvggcjha5ml2rmyy25i1vde',
24 | zoom: 9,
25 | center
26 | });
27 | this.map.addControl(
28 | new mapboxgl.NavigationControl({showCompass: false}),
29 | 'bottom-right'
30 | );
31 |
32 | this.map.on('load', () => {
33 | this.addDataToMap();
34 | this.map.on('zoomend', () => {
35 | const z = this.map.getZoom();
36 | this.props.onZoom(z);
37 | });
38 | });
39 | }
40 |
41 | componentWillUnmount(){
42 | this.map.remove();
43 | }
44 |
45 | addDataToMap() {
46 | let scale = d3Scale.scaleQuantile()
47 | .domain(this.props.domain)
48 | .range(d3Chromatic.schemeRdYlGn[9])
49 |
50 | const stops = scale.quantiles().map( value => {
51 | return [value, scale(value)]
52 | });
53 | const aoi = this.props.aoi;
54 | if (aoi && this.props.domain && this.map) {
55 | // prepare a quantile scale with the domain of predictions.
56 | if (!this.map.getSource('aoi')){
57 | this.map.addSource('aoi', {
58 | 'type': 'geojson',
59 | 'data': aoi
60 | });
61 | }
62 |
63 | if (!this.map.getSource('buildings-osm')){
64 | this.map.addSource('buildings-osm', {
65 | type: 'vector',
66 | url: 'mapbox://devseed.9lcaji8y'
67 | });
68 | }
69 |
70 | if (!this.map.getSource('completeness')){
71 | this.map.addSource('completeness', {
72 | type: 'vector',
73 | url: `mapbox://hot.${this.props.country}-completeness`
74 | })
75 | }
76 |
77 | if (!this.map.getLayer('completeness')) {
78 | this.map.addLayer({
79 | 'id': 'completeness',
80 | type: 'fill',
81 | source: 'completeness',
82 | 'source-layer': 'completeness',
83 | paint: {
84 | 'fill-color': {
85 | 'property': 'index',
86 | 'stops': stops
87 | },
88 | 'fill-opacity': {
89 | "stops": [
90 | [1, 0.5],
91 | [12, 0.3],
92 | [14, 0.05]
93 | ]
94 | }
95 | },
96 | "filter": [">", "index", -1]
97 | })
98 | }
99 |
100 | if (!this.map.getLayer('aoi-line')) {
101 | this.map.addLayer({
102 | 'id': 'aoi-line',
103 | 'type': 'line',
104 | 'source': 'aoi',
105 | 'paint': {
106 | 'line-color': '#36414D',
107 | 'line-opacity': 1,
108 | 'line-width': 2,
109 | }
110 | });
111 | }
112 |
113 | if (!this.map.getLayer('buildings-osm')) {
114 | this.map.addLayer({
115 | 'id': 'buildings-osm',
116 | type: 'fill',
117 | source: 'buildings-osm',
118 | 'source-layer': 'osm',
119 | paint: {
120 | 'fill-color': [
121 | 'interpolate',
122 | ['linear'],
123 | ['number', ['get', '@timestamp']],
124 | Math.floor(new Date('2016-1-01')/1000), 'rgba(54, 66, 77, 0.1)',
125 | Math.floor(new Date()/1000), 'rgba(54, 66, 77, 1)',
126 | ],
127 | 'fill-outline-color': 'rgba(255, 255, 255, 0.1)'
128 | },
129 | });
130 | }
131 | }
132 | }
133 |
134 | switchBaseLayer() {
135 | if (this.state.layer === 'Default') {
136 | this.setState({layer: 'Satellite'});
137 | this.setState({switchImg: 'images/streets.png'});
138 | this.map.setStyle('mapbox://styles/mapbox/satellite-v9');
139 | } else {
140 | this.setState({layer: 'Default'});
141 | this.setState({switchImg: 'images/sat.jpg'});
142 | this.map.setStyle('mapbox://styles/devseed/cjfvggcjha5ml2rmyy25i1vde');
143 | }
144 | this.map.on('styledata', () => {
145 | this.addDataToMap();
146 | });
147 | }
148 |
149 | render () {
150 | const style = {
151 | textAlign: 'left',
152 | height: '100%'
153 | };
154 |
155 | return
8 |
12 |
9 |
11 | HOT Analytics for Health
10 |
14 | 
15 | 
25 | 
32 |
47 |
15 | HOT Analytics for Health is one of the OSM Analytics projects focussed on data quality and mapping progress for Malaria campaigns. HOT Analytics for Health uses OSM QA Tiles and Worldpop for analysis in the following areas:
16 | 17 |Malaria Mapping
18 |
19 |
22 |
23 | With support of the Bill and Melinda Gates Foundation and the Clinton Health Access Initiative, we have designed an analysis tool to evaluate the accuracy and precision of OpenStreetMap field data. This credential scoring of OpenStreetMap feature completeness provides a more complete understanding of OpenStreetMap data in a specific area.
20 |This work features OpenStreetMap analysis for improved malaria prevention but can be applied to any use case to understand OSM data. Check out our github documentation to learn more. Key features are highlighted below.
21 |1. Attribute Completeness
24 |
25 |
26 |
29 |
30 | For Malaria campaigns, it's important to identify residential structures on the map with use of the building, roof and wall type. The analysis uses OSMLint to find `buildings=residential` that does not have `roof=*` or `wall=*` attributes.
27 |These numbers directly inform how completely we can identify a building on OSM. If roof or wall attributes are missing, they can be inferred from satellite imagery or a field mission.
28 |2. Relative Completeness
31 |
32 |
33 |
41 |
42 | The most effective Malaria campaign requires all buildings to be mapped in an area. We use Worldpop to predict area of buildings based on a distribution of population per pixel. The machine learning model is trained using rural and urban areas that are identified with good quality residential buildings in OSM. For more information on the model see the repository. The model helps to arrive at the following conclusions:
34 |-
35 |
- OSM coverage is poor, however population density is present 36 |
- OSM coverage is fair, about what population density would imply 37 |
- OSM coverage is good, better than population density would imply 38 |
While WorldPop is last updated in 2015 from census, and potentially outdated in many parts of the world it still presents a relatively good way of understanding populated areas on the map. The model makes assumptions on quality of distribution of population, and the lack of granularity in Worldpop implies that we can only generate meaningful analyses over large aggregate areas, and not at the pixel level.
40 |3. Data Errors
43 |
44 |
46 | Duplicate buildings are also highlighted as part of the report. A higher number of duplicate buildings will lead to wrong estimation of resources.
45 |
50 | 
51 |
55 |
51 | 52 | This service is created the Humanitarian OpenStreetMap Team and is open source. If you are interested in getting involved don’t hesitate reach out! 53 |
54 | this.mapContainer = el}>
156 |
;
166 | }
167 | }
168 |
--------------------------------------------------------------------------------
/src/styles/scss/settings/_mixins.scss:
--------------------------------------------------------------------------------
1 | /* ==========================================================================
2 | Media queries
3 | ========================================================================== */
4 |
5 | @mixin media($arg) {
6 | @if $arg == screen {
7 | @media #{$screen} { @content; }
8 | }
9 | @if $arg == landscape {
10 | @media #{$screen} and (orientation: landscape) { @content; }
11 | }
12 | @if $arg == portrait {
13 | @media #{$screen} and (orientation: portrait) { @content; }
14 | }
15 | @if $arg == xsmall-up {
16 | @media #{$screen} and (min-width: lower-bound($xsmall-range)) { @content; }
17 | }
18 | @if $arg == xsmall-only {
19 | @media #{$screen} and (max-width: upper-bound($xsmall-range)) { @content; }
20 | }
21 | @if $arg == small-up {
22 | @media #{$screen} and (min-width: lower-bound($small-range)) { @content; }
23 | }
24 | @if $arg == small-only {
25 | @media #{$screen} and (min-width: lower-bound($small-range)) and (max-width: upper-bound($small-range)) { @content; }
26 | }
27 | @if $arg == small-down {
28 | @media #{$screen} and (max-width: upper-bound($small-range)) { @content; }
29 | }
30 | @if $arg == medium-up {
31 | @media #{$screen} and (min-width: lower-bound($medium-range)) { @content; }
32 | }
33 | @if $arg == medium-down {
34 | @media #{$screen} and (max-width: upper-bound($medium-range)) { @content; }
35 | }
36 | @if $arg == medium-only {
37 | @media #{$screen} and (min-width: lower-bound($medium-range)) and (max-width: upper-bound($medium-range)) { @content; }
38 | }
39 | @if $arg == large-up {
40 | @media #{$screen} and (min-width: lower-bound($large-range)) { @content; }
41 | }
42 | @if $arg == large-only {
43 | @media #{$screen} and (min-width: lower-bound($large-range)) and (max-width: upper-bound($large-range)) { @content; }
44 | }
45 | @if $arg == xlarge-up {
46 | @media #{$screen} and (min-width: lower-bound($xlarge-range)) { @content; }
47 | }
48 | @if $arg == xlarge-only {
49 | @media #{$screen} and (min-width: lower-bound($xlarge-range)) and (max-width: upper-bound($xlarge-range)) { @content; }
50 | }
51 | @if $arg == xxlarge-up {
52 | @media #{$screen} and (min-width: lower-bound($xxlarge-range)) { @content; }
53 | }
54 | }
55 |
56 |
57 | /* ==========================================================================
58 | Typography
59 | ========================================================================== */
60 |
61 | @mixin heading($font-size, $max-media: small-up) {
62 | font-size: $font-size;
63 | line-height: $font-size + 0.5;
64 |
65 | @if $max-media == medium-up or $max-media == large-up or $max-media == xlarge-up {
66 | @include media(medium-up) {
67 | $font-size: $font-size + 0.25;
68 | font-size: $font-size;
69 | line-height: $font-size + 0.5;
70 | }
71 | }
72 |
73 | @if $max-media == large-up or $max-media == xlarge-up {
74 | @include media(large-up) {
75 | $font-size: $font-size + 0.25;
76 | font-size: $font-size;
77 | line-height: $font-size + 0.5;
78 | }
79 | }
80 |
81 | @if $max-media == xlarge-up {
82 | @include media(xlarge-up) {
83 | $font-size: $font-size + 0.25;
84 | font-size: $font-size;
85 | line-height: $font-size + 0.5;
86 | }
87 | }
88 | }
89 |
90 |
91 | /* ==========================================================================
92 | Buttons
93 | ========================================================================== */
94 |
95 | @mixin button-variation($color, $style, $brightness) {
96 | $text-color: null;
97 | $bg-color: null;
98 | $bg-color-hover: null;
99 | $bg-color-active: null;
100 |
101 | @if $style == "filled" {
102 |
103 | @if $brightness == "light" {
104 | $text-color: $color;
105 | $bg-color: tint($color, 90%);
106 | $bg-color-hover: tint($color, 100%);
107 | $bg-color-active: tint($color, 92%);
108 | }
109 |
110 | @else if $brightness == "dark" {
111 | $text-color: #FFF;
112 | $bg-color: $color;
113 | $bg-color-hover: shade($color, 8%);
114 | $bg-color-active: shade($color, 12%);
115 | }
116 |
117 | @else {
118 | @error "Invalid brightness property for button raised.";
119 | }
120 | }
121 |
122 | @else if $style == "glass" {
123 | $text-color: $color;
124 | $bg-color: rgba($base-color, 0.08);
125 | $bg-color-hover: rgba($color, 0.16);
126 | $bg-color-active: rgba($color, 0.24);
127 |
128 | /**
129 | * $shadow-color isn't used here to color projected shadows.
130 | * For a border-like effect, $color is applied directly in the box-shadow property.
131 | */
132 | }
133 |
134 | @else if $style == "bounded" {
135 | $text-color: $color;
136 | $bg-color: rgba($color, 0);
137 | $bg-color-hover: rgba($color, 0.16);
138 | $bg-color-active: rgba($color, 0.24);
139 | box-shadow: inset 0 0 0 ($base-border-width * 2) $color;
140 | }
141 |
142 | @else if $style == "plain" {
143 | $text-color: $color;
144 | $bg-color: rgba($color, 0);
145 | $bg-color-hover: rgba($color, 0.16);
146 | $bg-color-active: rgba($color, 0.24);
147 | }
148 |
149 | @else {
150 | @error "Invalid style property for button.";
151 | }
152 |
153 | background-color: $bg-color;
154 |
155 | &, &:visited {
156 | color: $text-color;
157 | }
158 |
159 | &.button--hover,
160 | &:hover {
161 | background-color: $bg-color-hover;
162 | }
163 |
164 | .drop--open > &,
165 | &.button--active,
166 | &.button--active:hover,
167 | &:active {
168 | background-color: $bg-color-active;
169 | }
170 | }
--------------------------------------------------------------------------------
/src/styles/scss/global/_buttons.scss:
--------------------------------------------------------------------------------
1 | /* ==========================================================================
2 | Buttons
3 | ========================================================================== */
4 |
5 | .button {
6 | @extend .antialiased;
7 | user-select: none;
8 | display: inline-block;
9 | text-align: center;
10 | white-space: nowrap;
11 | vertical-align: middle;
12 | line-height: 1.5rem;
13 | font-size: 1rem;
14 | padding: 0.25rem 0.75rem;
15 | min-width: 2rem;
16 | background: none;
17 | text-shadow: none;
18 | border: 0;
19 | border-radius: $base-border-radius;
20 | font-weight: $base-font-regular;
21 | cursor: pointer;
22 |
23 | /* States */
24 |
25 | &:hover {
26 | opacity: initial;
27 | }
28 |
29 | .drop--open > &,
30 | &.button--active,
31 | &:active {
32 | z-index: 2;
33 | transform: none;
34 | }
35 |
36 | &, &:focus {
37 | outline: none; // This causes usability problems. Needs fixing.
38 | }
39 |
40 | /* Icon handling */
41 |
42 | /* &::before,
43 | &::after,
44 | [class^="collecticon-"],
45 | [class*=" collecticon-"] {
46 | font-size: 1rem;
47 | }
48 | */
49 | &::before { margin-right: 0.375rem; }
50 | &::after { margin-left: 0.375rem; }
51 |
52 | &::before,
53 | &::after,
54 | > * {
55 | vertical-align: top;
56 | display: inline-block;
57 | line-height: inherit !important;
58 | }
59 |
60 | /* Checkbox/radio handling */
61 |
62 | > input[type=checkbox],
63 | > input[type=radio] {
64 | @extend .visually-hidden;
65 | }
66 |
67 | /* Animation */
68 |
69 | transition: background-color 0.24s ease 0s;
70 | }
71 |
72 |
73 | /* Button color modifiers
74 | ========================================================================== */
75 |
76 | .button--primary-filled {
77 | @include button-variation($primary-color, "filled", "dark");
78 | &:hover {
79 | background-color: lighten($primary-color, 10%);
80 | };
81 | }
82 |
83 | .button--tertiary-filled {
84 | @include button-variation($tertiary-color, "filled", "dark");
85 | &:hover {
86 | background-color: lighten($tertiary-color, 10%);
87 | };
88 | }
89 |
90 | .button--primary-bounded {
91 | @include button-variation($primary-color, "bounded", null);
92 | }
93 |
94 | .button--base-bounded {
95 | @include button-variation($base-color, "bounded", null);
96 | }
97 |
98 | .button--secondary-filled {
99 | @include button-variation($secondary-color, "filled", "dark");
100 | }
101 |
102 | .button--secondary-bounded {
103 | @include button-variation($secondary-color, "bounded", null);
104 | }
105 |
106 | .button--secondary-light {
107 | @include button-variation($secondary-color, "filled", "light");
108 | }
109 | /* Primary Plain */
110 |
111 | .button--base-plain {
112 | @include button-variation($base-color, "plain", null);
113 | }
114 |
115 | .button--primary-plain {
116 | @include button-variation($primary-color, "plain", null);
117 | }
118 |
119 | .button--secondary-plain {
120 | @include button-variation($secondary-color, "plain", null);
121 | }
122 |
123 |
124 | /* Achromic Glass (white ghost-like) */
125 |
126 | .button--base-glass {
127 | @include button-variation($base-color, "glass", null);
128 | }
129 |
130 | .button--primary-glass {
131 | @include button-variation($primary-color, "glass", null);
132 | }
133 |
134 | .button--secondary-glass {
135 | @include button-variation($secondary-color, "glass", null);
136 | }
137 |
138 | /* Button size modifiers
139 | ========================================================================== */
140 |
141 | /* Small (24px) */
142 |
143 | .button--small,
144 | .button-group--small .button {
145 | line-height: 1.25rem;
146 | font-size: 0.875rem;
147 | padding: 0.75rem 0.75rem;
148 | min-width: 2rem;
149 | }
150 |
151 | /* Medium (32px)
152 | Default
153 | */
154 |
155 | .button--medium,
156 | .button-group--medium .button {
157 | line-height: 1.5rem;
158 | font-size: 1rem;
159 | padding: 0.5rem 1.5rem;
160 | min-width: 2.5rem;
161 | }
162 |
163 | /* Large (40px) */
164 |
165 | .button--large,
166 | .button-group--large .button {
167 | line-height: 1.5rem;
168 | font-size: 1rem;
169 | padding: 0.5rem 2rem;
170 | min-width: 3rem;
171 | }
172 |
173 | /* XLarge (48px) */
174 |
175 | .button--xlarge,
176 | .button-group--xlarge .button {
177 | line-height: 2rem;
178 | font-size: 1rem;
179 | padding: 0.5rem 2rem;
180 | min-width: 3rem;
181 | }
182 |
183 |
184 | /* Button contaning icons & icons modifiers
185 | ========================================================================== */
186 |
187 | /*.button--text-hidden {
188 | &::before,
189 | &::after {
190 | margin: 0;
191 | }
192 | > *:not([class^="collecticon-"]):not([class*=" collecticon-"]) {
193 | @extend .visually-hidden;
194 | }
195 | /* :not(.button-group) & {
196 | padding-left: 0;
197 | padding-right: 0;
198 | }*/
199 |
200 |
201 | /* Button misc modifiers
202 | ========================================================================== */
203 |
204 | .button--block {
205 | display: block;
206 | width: 100%;
207 | }
208 |
209 | .button--semi-fluid {
210 | min-width: 16rem;
211 | }
212 |
213 | .button--capsule {
214 | border-radius: $full-border-radius;
215 | }
216 |
217 | .button--close {
218 | &:before {
219 | font-size: 1rem;
220 | line-height: inherit;
221 | vertical-align: top;
222 | margin-left: 0.25rem;
223 | }
224 | }
225 |
226 | .button--slide-open {
227 | position: relative;
228 | padding: 2rem 0;
229 | &:before {
230 | content: url(../../graphics/icons/chevron-right.svg);
231 | position: absolute;
232 | height: 1rem;
233 | width: 1rem;
234 | margin-left: 0.25rem;
235 | margin-top: 0.25rem;
236 | height: 1rem;
237 | width: 1rem;
238 | left: 0;
239 | top: 1rem;
240 | }
241 | }
242 |
243 | .button--slide-close {
244 | position: relative;
245 | padding: 2rem 0;
246 | &:before {
247 | content: url(../../graphics/icons/chevron-left.svg);
248 | position: absolute;
249 | height: 1rem;
250 | width: 1rem;
251 | margin-left: 0.25rem;
252 | margin-top: 0.25rem;
253 | height: 1rem;
254 | width: 1rem;
255 | left: 0;
256 | top: 1rem;
257 | }
258 | }
259 |
260 | .button--info {
261 | padding-bottom: 0;
262 | float: right;
263 | margin-top: 0.35rem;
264 | height: 1rem;
265 | width: 1rem;
266 | .info-text {
267 | visibility: hidden;
268 | background-color: #FFF;
269 | color: $primary-color;
270 | font-size: 0.75rem;
271 | font-weight: $base-font-light;
272 | font-style: italic;
273 | position: absolute;
274 | border-radius: $global-spacing/4;
275 | z-index: 5;
276 | padding: ($global-spacing/4) ($global-spacing/2);
277 | margin-left: $global-spacing/4;
278 | span {
279 | width: 50%;
280 | word-break: break-all;
281 | }
282 | }
283 | }
284 |
285 | .button--info:hover .info-text {
286 | visibility: visible;
287 | }
288 |
289 | /* ==========================================================================
290 | Button groups
291 | ========================================================================== */
292 |
293 | .button-group {
294 | position: relative;
295 | display: inline-block;
296 | vertical-align: middle;
297 |
298 | > .button {
299 | display: block;
300 | position: relative;
301 | margin: 0;
302 | z-index: 2;
303 | }
304 | }
305 |
306 | /* Horizontal */
307 |
308 | .button-group--horizontal {
309 | > .button {
310 | float: left;
311 | }
312 |
313 | > .button:first-child:not(:last-child) {
314 | border-top-right-radius: 0;
315 | border-bottom-right-radius: 0;
316 | clip-path: inset(-100% 0 -100% -100%);
317 | }
318 |
319 | > .button:last-child:not(:first-child) {
320 | border-top-left-radius: 0;
321 | border-bottom-left-radius: 0;
322 | clip-path: inset(-100% -100% -100% 0);
323 | }
324 |
325 | > .button:not(:first-child):not(:last-child) {
326 | border-radius: 0;
327 | clip-path: inset(-100% 0);
328 | }
329 |
330 | > .button + .button {
331 | margin-left: -$base-border-width;
332 | }
333 | }
334 |
335 | /* Vertical */
336 |
337 | .button-group--vertical {
338 | > .button {
339 | clear: both;
340 | width: 100%;
341 | border-radius: $base-border-radius;
342 | }
343 |
344 | > .button:first-child:not(:last-child) {
345 | border-bottom-right-radius: 0;
346 | border-bottom-left-radius: 0;
347 | clip-path: inset(-100% -100% 0 -100%);
348 | }
349 |
350 | > .button:last-child:not(:first-child) {
351 | border-top-left-radius: 0;
352 | border-top-right-radius: 0;
353 | clip-path: inset(0 -100% -100% -100%);
354 | }
355 |
356 | > .button:not(:first-child):not(:last-child) {
357 | border-radius: 0;
358 | clip-path: inset(0 -100%);
359 | }
360 |
361 | > .button + .button {
362 | margin-top: -$base-border-width;
363 | }
364 | }
365 |
366 | .link-back {
367 | text-decoration: none;
368 | &:before {
369 | content: url(../../graphics/icons/chevron-left.svg);
370 | height: 1rem;
371 | width: 1rem;
372 | margin-top: 0.1rem;
373 | height: 1rem;
374 | width: 1rem;
375 | left: 0;
376 | top: 1rem;
377 | }
378 | }
379 |
380 | .report-link {
381 | font-size: 0.875rem;
382 | padding-top: 0.75rem;
383 | }
384 |
--------------------------------------------------------------------------------
/src/styles/scss/map/_global.scss:
--------------------------------------------------------------------------------
1 | .page__body {
2 | @include column(12/12);
3 | }
4 |
5 | .map {
6 | position: relative;
7 | @include column(12/12);
8 | background-color: rgba($base-color, 0.2);
9 | height: calc(100vh - 62px);
10 | }
11 |
12 | .map__actions {
13 | position: absolute;
14 | right: 1rem;
15 | margin-top: $global-spacing;
16 | li {
17 | display: inline-block;
18 | margin-right: $global-spacing/2;
19 | a {
20 | text-decoration: none;
21 | }
22 | &:last-child {
23 | margin-left: 0;
24 | };
25 | }
26 | }
27 |
28 | .map__layer-switch {
29 | background-color: $background-color;
30 | color: $primary-color;
31 | border-radius: 3px;
32 | position: absolute;
33 | bottom: $global-spacing * 1.75;
34 | right: $global-spacing * 3.3;
35 | padding: 0.7rem 0.6rem 0.6rem 0.65rem;
36 | font-size: 0.75rem;
37 | z-index: 4;
38 | cursor: pointer;
39 | }
40 |
41 | .map__layer-switch-img {
42 | float: left;
43 | display: flex;
44 | }
45 |
46 | .map__layer-switch-info {
47 | float: right;
48 | align-items: center;
49 | margin-left: 0.5rem;
50 | min-width: 3.8rem;
51 | }
52 |
53 | .map__layer-switch-info p {
54 | padding-top: 1.1rem;
55 | display: block;
56 | color: $secondary-color-light;
57 | line-height: 0.5rem;
58 | }
59 |
60 | .map__layer-switch-info h4 {
61 | display: block;
62 | text-align: left;
63 | position: relative;
64 | color: $base-color;
65 | font-weight: 600;
66 | }
67 |
68 | .map__legend {
69 | background-color: $background-color;
70 | color: $primary-color;
71 | border-radius: 3px;
72 | position: absolute;
73 | bottom: $global-spacing * 1.75;
74 | right: $global-spacing * 13.3;
75 | padding: 0.6rem 0.75rem;
76 | font-size: 0.75rem;
77 | width: 13rem;
78 | }
79 |
80 | .legend-label {
81 | color: $base-color;
82 | position: relative;
83 | margin-bottom: 0.15rem;
84 | font-weight: $base-font-bold;
85 | }
86 |
87 | .legend-sub {
88 | position: relative;
89 | font-weight: $base-font-regular;
90 | font-style: italic;
91 | font-size: 0.75rem;
92 | margin-bottom: 0.15rem;
93 | }
94 |
95 | .legend-bar {
96 | height: 0.75rem;
97 | position: relative;
98 | width: 100%;
99 | }
100 |
101 | .legend-bar-osm {
102 | background: linear-gradient(to right, rgba(54, 65, 77, 0.3), rgba(54, 65, 77, 1));
103 | &:before {
104 | content:'2012';
105 | position: absolute;
106 | left: 0;
107 | bottom: -1.25rem;
108 | font-size: 0.675rem;
109 | font-weight: $base-font-regular;
110 | };
111 | &:after {
112 | content:'2018';
113 | position: absolute;
114 | right: 0;
115 | bottom: -1.25rem;
116 | font-size: 0.675rem;
117 | font-weight: $base-font-regular;
118 | };
119 | }
120 |
121 | .report__panel-container {
122 | position: absolute;
123 | @include column(6/12);
124 | top: 14px;
125 | transition: left 0.5s ease-in-out;
126 | }
127 |
128 | .report__panel-container--closed {
129 | left: -46%;
130 | }
131 |
132 | .report__panel-container--open {
133 | left: 10px;
134 | }
135 |
136 | .report__panel-button {
137 | position: relative;
138 | right: 0;
139 | height: 3.5rem;
140 | background: $primary-color;
141 | width: 5%;
142 | float: right;
143 | }
144 |
145 | .report__panel {
146 | color: #FFF;
147 | height: calc(100vh - 76px);
148 | width: 95%;
149 | float: left;
150 | background: $background-color;
151 | overflow: auto;
152 | .inner::-webkit-scrollbar {
153 | display: none;
154 | }
155 | }
156 |
157 | .report__panel::-webkit-scrollbar {
158 | display: none;
159 | }
160 |
161 | .report__actions {
162 | @include column(12/12);
163 | padding: $global-spacing*2 0;
164 | p {
165 | float: left;
166 | padding-top: 0.5rem;
167 | }
168 | button {
169 | float: right;
170 | display: none;
171 | }
172 | }
173 |
174 | .report__header {
175 | @include column(12/12);
176 | margin:($global-spacing*2) 0 ($global-spacing * 3) 0;
177 | padding-bottom: $global-spacing * 4;
178 | border-bottom: solid 1px rgba($base-color, 0.2);
179 | }
180 |
181 | .report__label {
182 | color: $highlight-color;
183 | text-transform: uppercase;
184 | font-size: 1.15rem;
185 | }
186 |
187 | .report__body {
188 | @include column(12/12);
189 | }
190 |
191 | .stat-list, .stat-list-single {
192 | margin-left: 0;
193 | width: 100%;
194 | float: left;
195 | }
196 |
197 | .report__section {
198 | @extend .clearfix;
199 | margin: ($global-spacing * 2) 0;
200 | padding-bottom: $global-spacing * 2;
201 | border-bottom: solid 1px rgba($base-color, 0.1);
202 | &:first-child {
203 | margin-top: 0;
204 | }
205 | &:last-child {
206 | border-bottom: 0;
207 | };
208 | }
209 |
210 |
211 | .report__section-header {
212 | @extend .clearfix;
213 | margin-bottom: $global-spacing * 2;
214 | h2 {
215 | font-size: 1.15rem;
216 | font-weight: $base-font-bold;
217 | float: left;
218 | }
219 | p {
220 | margin-top: $global-spacing/2;
221 | }
222 | }
223 |
224 | .section__number {
225 | text-transform: uppercase;
226 | font-size: 0.875rem;
227 | line-height: 1rem;
228 | color: $highlight-color;
229 | }
230 |
231 | .report__section-description {
232 | font-weight: $base-font-light;
233 | opacity: 0.8;
234 | font-size: 0.875rem;
235 | width: 85%;
236 | float: left;
237 | }
238 |
239 | .report__section-update-date {
240 | font-weight: $base-font-light;
241 | color: $tertiary-color;
242 | font-size: 0.875rem;
243 | padding-bottom: 5px;
244 | }
245 |
246 | .report__title {
247 | font-weight: $base-font-regular;
248 | color: $base-color;
249 | font-size: 2.3rem;
250 | padding-top: 5px;
251 | padding-bottom: 7px;
252 | }
253 |
254 | .report__meta {
255 | margin-left: 0;
256 | margin-bottom: $global-spacing;
257 | padding-top: 5px;
258 | li {
259 | opacity: 1;
260 | font-size: 1rem;
261 | font-weight: $base-font-regular;
262 | display: inline-block;
263 | margin-left: $global-spacing*0.7;
264 | padding-left: $global-spacing*0.7;
265 | border-left: solid 1px rgba($base-color, 0.2);
266 | &:first-child {
267 | border-left: none;
268 | padding-left: 0;
269 | margin-left: 0;
270 | }
271 | }
272 | }
273 |
274 | .report__section-body {
275 | margin-top: $global-spacing;
276 | position: relative;
277 | .stat-list {
278 | li {
279 | @include column(4/12);
280 | }
281 | li.section-button {
282 | margin-left: $global-spacing * 2;
283 | font-size: 0.875rem;
284 | }
285 | }
286 | .stat-list-single {
287 | li {
288 | @include column(12/12);
289 | }
290 | }
291 | p {
292 | font-size: 1.15rem;
293 | margin-bottom: $global-spacing;
294 | small {
295 | opacity: 0.7;
296 | font-weight: 300;
297 | margin-left: $global-spacing/2;
298 | }
299 | }
300 | }
301 |
302 | .report__summary-status, .report__summary-general {
303 | padding-left: 1.9rem;
304 | padding-top: 0.5rem;
305 | }
306 |
307 | .report__summary-general {
308 | color: #fff;
309 | font-size: 0.875rem;
310 | font-weight: $base-font-light;
311 | }
312 |
313 | .report__status {
314 | p {
315 | position: relative;
316 | padding-left: $global-spacing;
317 | font-weight: $base-font-bold;
318 | font-size: 0.85rem;
319 | float: left;
320 | }
321 | button {
322 | float: right;
323 | }
324 | }
325 |
326 | .white-bg-text {
327 | background-color: #fff;
328 | color: $background-color;
329 | padding: 0 2px;
330 | font-weight: bold;
331 | }
332 |
333 | .report__text--poor {
334 | color: #EB6856;
335 | }
336 |
337 | .report__status--poor {
338 | p {
339 | &:before {
340 | content: '';
341 | position: absolute;
342 | left: 0;
343 | top: 0.19rem;
344 | height: 12px;
345 | width: 12px;
346 | border-radius: 99999px;
347 | background-color: #EB6856;
348 | };
349 | }
350 | }
351 |
352 | .report__text--fair {
353 | color: #FFF11A;
354 | }
355 |
356 | .report__status--fair {
357 | p {
358 | &:before {
359 | content: '';
360 | position: absolute;
361 | left: 0;
362 | top: 0.19rem;
363 | height: 12px;
364 | width: 12px;
365 | border-radius: 99999px;
366 | background-color: #FFF11A;
367 | };
368 | }
369 | }
370 |
371 | .report__text--good {
372 | color: #39CC31;
373 | }
374 |
375 | .report__status--good {
376 | p {
377 | &:before {
378 | content: '';
379 | position: absolute;
380 | left: 0;
381 | top: 0.19rem;
382 | height: 12px;
383 | width: 12px;
384 | border-radius: 99999px;
385 | background-color: #39CC31;
386 | };
387 | }
388 | }
389 |
390 | .report__summary-item {
391 | font-size: 0.8rem;
392 | font-weight: $base-font-bold;
393 | color: $tertiary-color;
394 | height: 4rem;
395 | }
396 |
397 | .report__summary-item-title {
398 | padding-left: 1rem;
399 | }
400 |
401 | .color-scale__container {
402 | float: left;
403 | width: 100%;
404 | }
405 |
406 | .recency-scale__container {
407 | padding-bottom: $global-spacing;
408 | }
409 |
410 | .color-scale {
411 | list-style: none;
412 | padding-right: 0;
413 | margin: 0;
414 | position: relative;
415 | }
416 |
417 | .color-scale__item {
418 | float: left;
419 | height: 0.75rem;
420 | width: 12.5%;
421 | &:first-child {
422 | background-color: #D73027;
423 | }
424 | &:nth-child(2) {
425 | background-color: #F46D43;
426 | }
427 | &:nth-child(3) {
428 | background-color: #FDAE61;
429 | }
430 | &:nth-child(4) {
431 | background-color: #FEE08B;
432 | }
433 | &:nth-child(5) {
434 | background-color: #D9EF8B;
435 | }
436 | &:nth-child(6) {
437 | background-color: #A6D96A;
438 | }
439 | &:nth-child(7) {
440 | background-color: #66BD63;
441 | }
442 | &:nth-child(8) {
443 | background-color: #1A9850;
444 | }
445 | }
446 |
447 | .scale-number-bad {
448 | color: #D73027;
449 | }
450 |
451 | .scale-number-good {
452 | color: #1A9850;
453 | }
454 |
455 | .scale-labels {
456 | width: 100%;
457 | p {
458 | text-align: center;
459 | font-size: 0.675rem;
460 | font-weight: $base-font-bold;
461 | }
462 | }
463 |
464 | .less {
465 | float: left;
466 | }
467 |
468 | .more {
469 | float: right;
470 | }
471 |
472 | .report-link {
473 | font-size: 0.875rem;
474 | padding-top: 0.75rem;
475 | }
476 |
477 | .mapboxgl-ctrl-group {
478 | background-color: $background-color;
479 | border-radius: 1px;
480 | box-shadow: 0 0 0 2px $background-color !important;
481 | moz-box-shadow: $background-color;
482 | }
483 |
484 | .mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in {
485 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%23FFFFFF%3B%27%20d%3D%27M%2010%206%20C%209.446%206%209%206.4459904%209%207%20L%209%209%20L%207%209%20C%206.446%209%206%209.446%206%2010%20C%206%2010.554%206.446%2011%207%2011%20L%209%2011%20L%209%2013%20C%209%2013.55401%209.446%2014%2010%2014%20C%2010.554%2014%2011%2013.55401%2011%2013%20L%2011%2011%20L%2013%2011%20C%2013.554%2011%2014%2010.554%2014%2010%20C%2014%209.446%2013.554%209%2013%209%20L%2011%209%20L%2011%207%20C%2011%206.4459904%2010.554%206%2010%206%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A");
486 | }
487 |
488 | .mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out {
489 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%23FFFFFF%3B%27%20d%3D%27m%207%2C9%20c%20-0.554%2C0%20-1%2C0.446%20-1%2C1%200%2C0.554%200.446%2C1%201%2C1%20l%206%2C0%20c%200.554%2C0%201%2C-0.446%201%2C-1%200%2C-0.554%20-0.446%2C-1%20-1%2C-1%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A");
490 | }
491 |
--------------------------------------------------------------------------------
/src/views/Report.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import { Link } from 'react-router-dom';
4 | import ReportMap from '../components/ReportMap';
5 | import ReportEditsChart from '../components/ReportEditsChart';
6 | import PanelContainer from '../components/PanelContainer';
7 | import CompletenessStatus from '../components/CompletenessStatus';
8 | import { requestBoundary } from '../state/ReportState';
9 | import numeral from 'numeral';
10 | import { subMonths, format } from 'date-fns';
11 | import upperFirst from 'lodash.upperfirst';
12 |
13 | class Report extends Component {
14 | constructor(props) {
15 | super(props);
16 | const { country, aoi } = this.props.match.params;
17 | this.state = {
18 | mapZoom: 9
19 | }
20 | this.props.getStats(country, aoi);
21 | this.onMapZoom = this.onMapZoom.bind(this);
22 | }
23 |
24 | onMapZoom (z) {
25 | this.setState({
26 | mapZoom: z
27 | });
28 | }
29 |
30 | render() {
31 | const { country, aoi } = this.props.match.params;
32 | const { boundaries, stats, domain } = this.props;
33 |
34 | let layer = null;
35 | if (boundaries.length > 0) {
36 | layer = boundaries.filter(bnd => {
37 | return (
38 | bnd.properties.country === country &&
39 | bnd.properties.id === aoi
40 | );
41 | })[0];
42 | }
43 |
44 | if (!stats || !domain || !layer) return ; //FIXME Should return loading indicator
45 |
46 | const {
47 | buildingResidential,
48 | buildingResidentialIncomplete,
49 | duplicateCount,
50 | totalBuildings,
51 | untaggedWays,
52 | population,
53 | averageCompleteness
54 | } = stats['building-stats'];
55 |
56 | const timestamp = stats.timestamp;
57 | const timeBins = stats['time-bins'];
58 |
59 | // Stats calculation
60 | const numberUntaggedWays = numeral(untaggedWays);
61 | const numberBuildings = numeral(totalBuildings);
62 | const numberResidential = numeral(buildingResidential);
63 | const numberBuildingResidentialIncomplete = numeral(buildingResidentialIncomplete)
64 | const percentResidentialBuildings = numeral(numberResidential.value() / numberBuildings.value());
65 | const percentCompleteBuildings = numeral((numberResidential.value() - numberBuildingResidentialIncomplete.value()) / numberBuildings.value());
66 | const numberDuplicates = numeral(duplicateCount);
67 | const estimatePopulation = numeral(population)
68 |
69 | // Calculate recent buildings
70 | // Get only the bins in the past 6 months
71 | const today = new Date();
72 | let recentEditsFromTimeBins = 0;
73 | let totalEditsFromTimeBins = 0;
74 | for (let i = 0; i < 1; i++) {
75 | const date = subMonths(today, i);
76 | const key = format(date, 'YYYYMM');
77 | if (timeBins[key]) {
78 | recentEditsFromTimeBins += timeBins[key]
79 | }
80 | }
81 | Object.values(timeBins).forEach(timebin => {
82 | totalEditsFromTimeBins += timebin;
83 | });
84 | const percentRecentBuildings = numeral(recentEditsFromTimeBins / totalEditsFromTimeBins);
85 |
86 | return (
87 | this.switchBaseLayer()}>
157 |
165 |
158 | 
159 |
160 |
161 |
164 | View
162 |{this.state.layer}
163 |
89 | {
91 |
209 |
210 |
92 |
93 |
208 |
94 |
207 |
95 |
96 | Report Index
97 |
98 | {
99 | (layer.properties.hot_export
100 | ?
102 | Export data from this report
103 |
104 | :
105 | )
106 | }
107 |
108 |
109 |
147 |
110 |
112 | Updated {format(timestamp, 'MMM. D, YYYY')}
111 |
113 |
119 | {upperFirst(aoi)} District
114 |-
115 |
- {upperFirst(country)} 116 |
- Est. Population {estimatePopulation.format('0,0')} 117 |
120 |
146 |
121 |
126 | 1.Relative Completeness
122 |
123 |
125 |
127 |
133 | 2.Attribute Completeness
128 |
129 | {numberUntaggedWays.format('0,0')} untagged closeways
130 | / {percentResidentialBuildings.format('0.00%')} residential buildings
131 |
132 |
134 |
139 | 3.Temporal Accuracy
135 |
136 | {percentRecentBuildings.format('0.00%')} buildings edited last month
137 |
138 |
140 |
145 | 4.Data Errors
141 |
142 | {numberDuplicates.format('0,0')} data errors
143 |
144 |
148 |
206 |
149 |
158 |
159 |
150 |
154 | Section 1
151 |Relative Completeness
152 |Distribution of buildings in OpenStreetMap compared population estimates from WorldPop.
153 |
155 |
157 |
160 |
174 |
175 |
161 |
165 | Section 2
162 |Attribute Completeness
163 |Metadata about use of building, roof and wall type. Using `buildings=residential`, `roof=*` and `wall=*` attributes.
164 |
166 |
173 | {numberBuildings.format('0,0')}OSM buildings in this AOI
167 |-
168 |
- {numberUntaggedWays.format('0,0')}untagged closeways 169 |
- {percentResidentialBuildings.format('0.00%')}residential buildings 170 |
- {percentCompleteBuildings.format('0.00%')}residential buildings with roof and wall tags 171 |
176 |
192 |
193 |
177 |
181 | Section 3
178 |Temporal Accuracy
179 |Recency of building data, and the distribution over the last few years.
180 |
182 |
191 | -
183 |
- {percentRecentBuildings.format('0.00%')}buildings edited in the last 6 months 184 |
- Zoom into map to see OSM buildings and edit recency. 185 |
187 |
190 | Buildings Edited by Month
188 |
194 |
205 |
195 |
199 | Section 4
196 |Data Errors
197 |Buildings that are potentially overlapping causing overestimation.
198 |
200 |
204 | -
201 |
- {numberDuplicates.format('0,0')}duplicate buildings 202 |
211 |
238 |
212 |
228 | {
229 | (this.state.mapZoom > 12) ?
230 | Completeness
213 |-
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
224 |
227 | Bad
225 |Good
226 |
231 |
234 | :
235 |
236 | }
237 | OSM Edit Recency
232 | 233 |