diff --git a/backend/models/dtos/project_dto.py b/backend/models/dtos/project_dto.py
index dd855ada0..74803113a 100644
--- a/backend/models/dtos/project_dto.py
+++ b/backend/models/dtos/project_dto.py
@@ -199,7 +199,11 @@ class ProjectDTO(Model):
enforce_random_task_selection = BooleanType(
required=False, default=False, serialized_name="enforceRandomTaskSelection"
)
-
+ earliest_street_imagery = UTCDateTimeType(serialized_name="earliestStreetImagery")
+ image_capture_mode = BooleanType(
+ required=False, default=False, serialized_name="imageCaptureMode"
+ )
+ mapillary_organization_id = StringType(serialized_name="mapillaryOrganizationId")
private = BooleanType(required=True)
changeset_comment = StringType(serialized_name="changesetComment")
osmcha_filter_id = StringType(serialized_name="osmchaFilterId")
@@ -462,6 +466,11 @@ class ProjectSummary(Model):
author = StringType()
created = UTCDateTimeType()
due_date = UTCDateTimeType(serialized_name="dueDate")
+ earliest_street_imagery = UTCDateTimeType(serialized_name="earliestStreetImagery")
+ image_capture_mode = BooleanType(
+ required=False, default=False, serialized_name="imageCaptureMode"
+ )
+ mapillary_organization_id = StringType(serialized_name="mapillaryOrganizationId")
last_updated = UTCDateTimeType(serialized_name="lastUpdated")
priority = StringType(serialized_name="projectPriority")
campaigns = ListType(ModelType(CampaignDTO), default=[])
diff --git a/backend/models/postgis/project.py b/backend/models/postgis/project.py
index 11845c7cf..6575f1b6e 100644
--- a/backend/models/postgis/project.py
+++ b/backend/models/postgis/project.py
@@ -146,7 +146,10 @@ class Project(db.Model):
db.String
) # Optional custom filter id for filtering on OSMCha
due_date = db.Column(db.DateTime)
+ earliest_street_imagery = db.Column(db.DateTime)
imagery = db.Column(db.String)
+ image_capture_mode = db.Column(db.Boolean, default=False)
+ mapillary_organization_id = db.Column(db.String)
josm_preset = db.Column(db.String)
id_presets = db.Column(ARRAY(db.String))
extra_id_params = db.Column(db.String)
@@ -378,6 +381,9 @@ def update(self, project_dto: ProjectDTO):
self.mapper_level = MappingLevel[project_dto.mapper_level.upper()].value
self.changeset_comment = project_dto.changeset_comment
self.due_date = project_dto.due_date
+ self.earliest_street_imagery = project_dto.earliest_street_imagery
+ self.image_capture_mode = project_dto.image_capture_mode
+ self.mapillary_organization_id = project_dto.mapillary_organization_id
self.imagery = project_dto.imagery
self.josm_preset = project_dto.josm_preset
self.id_presets = project_dto.id_presets
@@ -836,6 +842,9 @@ def get_project_summary(self, preferred_locale) -> ProjectSummary:
summary.country_tag = self.country
summary.changeset_comment = self.changeset_comment
summary.due_date = self.due_date
+ summary.earliest_street_imagery = self.earliest_street_imagery
+ summary.image_capture_mode = self.image_capture_mode
+ summary.mapillary_organization_id = self.mapillary_organization_id
summary.created = self.created
summary.last_updated = self.last_updated
summary.osmcha_filter_id = self.osmcha_filter_id
@@ -1011,6 +1020,9 @@ def _get_project_and_base_dto(self):
base_dto.changeset_comment = self.changeset_comment
base_dto.osmcha_filter_id = self.osmcha_filter_id
base_dto.due_date = self.due_date
+ base_dto.earliest_street_imagery = self.earliest_street_imagery
+ base_dto.image_capture_mode = self.image_capture_mode
+ base_dto.mapillary_organization_id = self.mapillary_organization_id
base_dto.imagery = self.imagery
base_dto.josm_preset = self.josm_preset
base_dto.id_presets = self.id_presets
diff --git a/frontend/.env.expand b/frontend/.env.expand
index 3247d4410..916ae8ead 100644
--- a/frontend/.env.expand
+++ b/frontend/.env.expand
@@ -42,3 +42,4 @@ REACT_APP_SENTRY_FRONTEND_DSN=$TM_SENTRY_FRONTEND_DSN
REACT_APP_ENVIRONMENT=$TM_ENVIRONMENT
REACT_APP_TM_DEFAULT_CHANGESET_COMMENT=$TM_DEFAULT_CHANGESET_COMMENT
REACT_APP_RAPID_EDITOR_URL=$RAPID_EDITOR_URL
+REACT_APP_MAPILLARY_TOKEN=$MAPILLARY_ACCESS_TOKEN
\ No newline at end of file
diff --git a/frontend/src/assets/img/mapillary-compass.png b/frontend/src/assets/img/mapillary-compass.png
new file mode 100644
index 000000000..a0130dcc8
Binary files /dev/null and b/frontend/src/assets/img/mapillary-compass.png differ
diff --git a/frontend/src/assets/styles/_extra.scss b/frontend/src/assets/styles/_extra.scss
index b06e47f2a..aa7f0b01d 100644
--- a/frontend/src/assets/styles/_extra.scss
+++ b/frontend/src/assets/styles/_extra.scss
@@ -383,6 +383,10 @@ a[href="https://www.mapbox.com/map-feedback/"] {
}
}
+div.react-datepicker-popper {
+ z-index: 5;
+}
+
.comment-textarea {
box-sizing: border-box;
@@ -398,4 +402,4 @@ a[href="https://www.mapbox.com/map-feedback/"] {
.sticky-top {
position: sticky !important;
top: 0;
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/editor.js b/frontend/src/components/editor.js
index 82606344c..b9337e5e5 100644
--- a/frontend/src/components/editor.js
+++ b/frontend/src/components/editor.js
@@ -5,7 +5,15 @@ import '@hotosm/id/dist/iD.css';
import { OSM_CONSUMER_KEY, OSM_CONSUMER_SECRET, OSM_SERVER_URL } from '../config';
-export default function Editor({ setDisable, comment, presets, imagery, gpxUrl }) {
+export default function Editor({
+ setDisable,
+ comment,
+ presets,
+ imagery,
+ gpxUrl,
+ earliestStreetImagery,
+ imageCaptureMode,
+}) {
const dispatch = useDispatch();
const session = useSelector((state) => state.auth.get('session'));
const iDContext = useSelector((state) => state.editor.context);
@@ -105,8 +113,25 @@ export default function Editor({ setDisable, comment, presets, imagery, gpxUrl }
setDisable(false);
}
});
+
+ if (imageCaptureMode) {
+ if (earliestStreetImagery) {
+ iDContext.photos().setDateFilter('fromDate', earliestStreetImagery.substr(0, 10), false);
+ }
+ window.location.href =
+ window.location.href + '&photo_overlay=mapillary,mapillary-map-features,mapillary-signs';
+ }
}
- }, [session, iDContext, setDisable, presets, locale, gpxUrl]);
+ }, [
+ session,
+ iDContext,
+ setDisable,
+ presets,
+ locale,
+ gpxUrl,
+ earliestStreetImagery,
+ imageCaptureMode,
+ ]);
return ;
}
diff --git a/frontend/src/components/projectCreate/messages.js b/frontend/src/components/projectCreate/messages.js
index 2b57df0e1..f27b534a0 100644
--- a/frontend/src/components/projectCreate/messages.js
+++ b/frontend/src/components/projectCreate/messages.js
@@ -85,6 +85,14 @@ export default defineMessages({
id: 'management.projects.create.trim_tasks.trim_to_aoi',
defaultMessage: 'Trim the tasks to define the exact Area of Interest for mapping.',
},
+ trimExcludeWater: {
+ id: 'management.projects.create.trim_tasks.trim_exclude_water',
+ defaultMessage: 'Trim the tasks to exclude water areas.',
+ },
+ trimCoverPathsRoads: {
+ id: 'management.projects.create.trim_tasks.trim_cover_paths_roads',
+ defaultMessage: 'Trim the tasks to only cover paths and roads.',
+ },
tinyTasks: {
id: 'management.projects.create.trim_tasks.tiny_tasks',
defaultMessage:
diff --git a/frontend/src/components/projectCreate/trimProject.js b/frontend/src/components/projectCreate/trimProject.js
index 5fcaec0b9..10fba5f5e 100644
--- a/frontend/src/components/projectCreate/trimProject.js
+++ b/frontend/src/components/projectCreate/trimProject.js
@@ -39,6 +39,9 @@ const removeTinyTasks = (metadata, updateMetadata) => {
export default function TrimProject({ metadata, mapObj, updateMetadata }) {
const token = useSelector((state) => state.auth.get('token'));
const [clipStatus, setClipStatus] = useState(false);
+ const [roadStatus, setRoadStatus] = useState(false);
+ const [waterStatus, setWaterStatus] = useState(false);
+
const [tinyTasksNumber, setTinyTasksNumber] = useState(0);
const trimTaskGridAsync = useAsync(trimTaskGrid);
@@ -72,6 +75,28 @@ export default function TrimProject({ metadata, mapObj, updateMetadata }) {
onChange={() => setClipStatus(!clipStatus)}
label={}
/>
+
+
+ {
+ setWaterStatus(!waterStatus);
+ }}
+ label={}
+ />
+
+
+ {
+ setRoadStatus(!roadStatus);
+ }}
+ label={}
+ />
+
+
diff --git a/frontend/src/components/projectEdit/imageryForm.js b/frontend/src/components/projectEdit/imageryForm.js
index e80e9d585..853cd4603 100644
--- a/frontend/src/components/projectEdit/imageryForm.js
+++ b/frontend/src/components/projectEdit/imageryForm.js
@@ -1,17 +1,22 @@
import React, { useContext, useState, useLayoutEffect } from 'react';
import Select from 'react-select';
import { FormattedMessage } from 'react-intl';
-
+import DatePicker from 'react-datepicker';
+import { SwitchToggle } from '../formInputs';
import messages from './messages';
import { StateContext, styleClasses } from '../../views/projectEdit';
import { Code } from '../code';
import { fetchLocalJSONAPI } from '../../network/genericJSONRequest';
import { useImageryOption, IMAGERY_OPTIONS } from '../../hooks/UseImageryOption';
+import { MAPILLARY_TOKEN, MAPILLARY_GRAPH_URL } from '../../config';
+import axios from 'axios';
export const ImageryForm = () => {
const { projectInfo, setProjectInfo } = useContext(StateContext);
const [licenses, setLicenses] = useState(null);
+ const [organization, setOrganization] = useState(null);
+
useLayoutEffect(() => {
const fetchLicenses = async () => {
fetchLocalJSONAPI('licenses/')
@@ -21,6 +26,15 @@ export const ImageryForm = () => {
fetchLicenses();
}, [setLicenses]);
+ if (projectInfo.mapillaryOrganizationId) {
+ axios
+ .get(
+ `${MAPILLARY_GRAPH_URL}${projectInfo.mapillaryOrganizationId}?access_token=${MAPILLARY_TOKEN}&fields=name`,
+ )
+ .then((resp) => setOrganization(resp.data.name))
+ .catch(() => setOrganization(null));
+ }
+
let defaultValue = null;
if (licenses !== null && projectInfo.licenseId !== null) {
defaultValue = licenses.filter((l) => l.licenseId === projectInfo.licenseId)[0];
@@ -34,6 +48,7 @@ export const ImageryForm = () => {
+
+
+
+
+
+
+
+
}
+ labelPosition="right"
+ isChecked={projectInfo.imageCaptureMode}
+ onChange={() =>
+ setProjectInfo({ ...projectInfo, imageCaptureMode: !projectInfo.imageCaptureMode })
+ }
+ />
+
+
+
+ :
+
+ setProjectInfo({
+ ...projectInfo,
+ earliestStreetImagery: date,
+ })
+ }
+ placeholderText="DD/MM/YYYY"
+ dateFormat="dd/MM/yyyy"
+ className={styleClasses.inputClass}
+ showYearDropdown
+ scrollableYearDropdown
+ />
+
+
+
+
+
+
+
+
+
+
+
+
: {organization}
+
+
{
+ setProjectInfo({
+ ...projectInfo,
+ mapillaryOrganizationId: e.target.value,
+ });
+ }}
+ />
+
+
-
+
{tasksIds.length > 3 && (
diff --git a/frontend/src/components/taskSelection/footer.js b/frontend/src/components/taskSelection/footer.js
index 62e78bcef..24ab7351c 100644
--- a/frontend/src/components/taskSelection/footer.js
+++ b/frontend/src/components/taskSelection/footer.js
@@ -110,6 +110,14 @@ const TaskSelectionFooter = ({ defaultUserEditor, project, tasks, taskAction, se
}
})
.catch((e) => lockFailed(windowObjectReference, e.message));
+
+ if (project.imageCaptureMode) {
+ if (navigator.userAgent.includes('Android')) {
+ navigate('mapillary://mapillary/explore');
+ } else if (navigator.userAgent.includes('iPad|iPhone|iPod')) {
+ navigate('mapillary://goto/camera');
+ }
+ }
}
if (['resumeMapping', 'resumeValidation'].includes(taskAction)) {
const urlParams = openEditor(
diff --git a/frontend/src/components/taskSelection/index.js b/frontend/src/components/taskSelection/index.js
index adae01fa2..71cf8b377 100644
--- a/frontend/src/components/taskSelection/index.js
+++ b/frontend/src/components/taskSelection/index.js
@@ -367,8 +367,10 @@ export function TaskSelection({ project, type, loading }: Object) {
taskBordersOnly={false}
priorityAreas={priorityAreas}
animateZoom={false}
+ earliestStreetImagery={project.earliestStreetImagery}
+ mapillaryOrganizationId={parseInt(project.mapillaryOrganizationId) || 0}
/>
-
+
diff --git a/frontend/src/components/taskSelection/legend.js b/frontend/src/components/taskSelection/legend.js
index 98b9a60e1..d2ef76cf1 100644
--- a/frontend/src/components/taskSelection/legend.js
+++ b/frontend/src/components/taskSelection/legend.js
@@ -5,7 +5,7 @@ import messages from './messages';
import { TaskStatus } from './taskList';
import { LockIcon, ChevronDownIcon, ChevronUpIcon } from '../svgIcons';
-export function TasksMapLegend() {
+export function TasksMapLegend({ imageCaptureMode }) {
const lineClasses = 'mv2 blue-dark f5';
const [expand, setExpand] = useState(true);
return (
@@ -34,6 +34,19 @@ export function TasksMapLegend() {
+ {imageCaptureMode && (
+ <>
+
+
+
+
+
+
+
+
+
+
+ )}
diff --git a/frontend/src/components/taskSelection/map.js b/frontend/src/components/taskSelection/map.js
index 0ed0b1711..e66a8c594 100644
--- a/frontend/src/components/taskSelection/map.js
+++ b/frontend/src/components/taskSelection/map.js
@@ -1,16 +1,25 @@
-import React, { useLayoutEffect, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import bbox from '@turf/bbox';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import MapboxLanguage from '@mapbox/mapbox-gl-language';
import { FormattedMessage } from 'react-intl';
-
import WebglUnsupported from '../webglUnsupported';
import messages from './messages';
-import { MAPBOX_TOKEN, TASK_COLOURS, MAP_STYLE, MAPBOX_RTL_PLUGIN_URL } from '../../config';
+import {
+ MAPBOX_TOKEN,
+ TASK_COLOURS,
+ MAP_STYLE,
+ MAPBOX_RTL_PLUGIN_URL,
+ MAPILLARY_TOKEN,
+ MAPILLARY_GRAPH_URL,
+} from '../../config';
import lock from '../../assets/img/lock.png';
import redlock from '../../assets/img/red-lock.png';
+import axios from 'axios';
+import compassIcon from '../../assets/img/mapillary-compass.png';
+import { SwitchToggle } from '../formInputs';
let lockIcon = new Image(17, 20);
lockIcon.src = lock;
@@ -39,11 +48,14 @@ export const TasksMap = ({
animateZoom = true,
showTaskIds = false,
selected: selectedOnMap,
+ earliestStreetImagery = '1970-01-01T00:00:00.000000Z',
+ mapillaryOrganizationId,
}) => {
const mapRef = React.createRef();
const locale = useSelector((state) => state.preferences['locale']);
const authDetails = useSelector((state) => state.auth.get('userDetails'));
const [hoveredTaskId, setHoveredTaskId] = useState(null);
+ const [mapillaryShown, setMapillaryShown] = useState(false);
const [map, setMapObj] = useState(null);
@@ -164,6 +176,16 @@ export const TasksMap = ({
}
taskStatusCondition = [...taskStatusCondition, ...[locked, 'lock', '']];
+ map.addControl(
+ new mapboxgl.GeolocateControl({
+ positionOptions: {
+ enableHighAccuracy: true,
+ },
+ trackUserLocation: true,
+ showUserHeading: true,
+ }),
+ );
+
map.addLayer({
id: 'tasks-icon',
type: 'symbol',
@@ -197,6 +219,12 @@ export const TasksMap = ({
TASK_COLOURS.INVALIDATED,
'BADIMAGERY',
TASK_COLOURS.BADIMAGERY,
+ 'PENDING_IMAGE_CAPTURE',
+ TASK_COLOURS.PENDING_IMAGE_CAPTURE,
+ 'MORE_IMAGES_NEEDED',
+ TASK_COLOURS.MORE_IMAGES_NEEDED,
+ 'IMAGE_CAPTURE_DONE',
+ TASK_COLOURS.IMAGE_CAPTURE_DONE,
'rgba(0,0,0,0)',
],
'fill-opacity': 0.8,
@@ -205,6 +233,79 @@ export const TasksMap = ({
'tasks-icon',
);
+ map.addSource('mapillary', {
+ type: 'vector',
+ tiles: [
+ `https://tiles.mapillary.com/maps/vtp/mly1_public/2/{z}/{x}/{y}?access_token=${MAPILLARY_TOKEN}`,
+ ],
+ minzoom: 1,
+ maxzoom: 14,
+ });
+
+ map.addLayer({
+ id: 'mapillary-sequences',
+ type: 'line',
+ source: 'mapillary',
+ 'source-layer': 'sequence',
+ layout: {
+ 'line-join': 'round',
+ 'line-cap': 'round',
+ },
+ paint: {
+ 'line-color': '#05CB63',
+ 'line-width': 2,
+ },
+ layout: {
+ visibility: 'none',
+ },
+ });
+ map.addLayer({
+ id: 'mapillary-images',
+ type: 'circle',
+ source: 'mapillary',
+ 'source-layer': 'image',
+ paint: {
+ 'circle-color': '#05CB63',
+ 'circle-radius': 5,
+ },
+ layout: {
+ visibility: 'none',
+ },
+ });
+
+ map.loadImage(compassIcon, (error, image) => {
+ if (error) throw error;
+
+ map.addImage('compass', image);
+ });
+
+ map.addSource('point', {
+ type: 'geojson',
+ data: {
+ type: 'FeatureCollection',
+ features: [
+ {
+ type: 'Feature',
+ geometry: {
+ type: 'Point',
+ coordinates: [0, 0],
+ },
+ },
+ ],
+ },
+ });
+
+ map.addLayer({
+ id: 'mapillary-compass',
+ type: 'symbol',
+ source: 'point',
+ layout: {
+ 'icon-image': 'compass',
+ 'icon-size': 0.5,
+ visibility: 'none',
+ },
+ });
+
map.addLayer({
id: 'selected-tasks-border',
type: 'line',
@@ -233,6 +334,28 @@ export const TasksMap = ({
);
}
+ map.setFilter('mapillary-images', [
+ 'all',
+ ['>=', ['get', 'captured_at'], new Date(earliestStreetImagery).getTime()],
+ ]);
+
+ map.setFilter('mapillary-sequences', [
+ 'all',
+ ['>=', ['get', 'captured_at'], new Date(earliestStreetImagery).getTime()],
+ ]);
+
+ if (mapillaryOrganizationId > 0) {
+ map.setFilter('mapillary-images', [
+ 'all',
+ ['==', ['get', 'organization_id'], mapillaryOrganizationId],
+ ]);
+
+ map.setFilter('mapillary-sequences', [
+ 'all',
+ ['==', ['get', 'organization_id'], mapillaryOrganizationId],
+ ]);
+ }
+
if (map.getSource('tasks-outline') === undefined && taskBordersMap) {
map.addSource('tasks-outline', {
type: 'geojson',
@@ -383,6 +506,58 @@ export const TasksMap = ({
map.getCanvas().style.cursor = 'pointer';
}
});
+
+ const popup = new mapboxgl.Popup({
+ closeButton: true,
+ closeOnClick: false,
+ });
+
+ function displayMapPopup(e) {
+ popup.remove();
+
+ map.getCanvas().style.cursor = 'pointer';
+ let imageObj = e.features[0].properties;
+
+ axios
+ .get(
+ `${MAPILLARY_GRAPH_URL}${imageObj.id}?fields=thumb_256_url,computed_compass_angle,camera_type`,
+ {
+ headers: {
+ Authorization: `OAuth ${MAPILLARY_TOKEN}`,
+ },
+ },
+ )
+ .then((resp) => {
+ popup
+ .setLngLat([e.lngLat.lng, e.lngLat.lat])
+ .setHTML(`
`)
+ .addTo(map);
+
+ const geoJsonData = {
+ type: 'FeatureCollection',
+ features: [
+ {
+ type: 'Feature',
+ geometry: {
+ type: 'Point',
+ coordinates: [e.lngLat.lng, e.lngLat.lat],
+ },
+ },
+ ],
+ };
+
+ map.getSource('point').setData(geoJsonData);
+ map.setLayoutProperty('mapillary-compass', 'visibility', 'visible');
+ map.setLayoutProperty(
+ 'mapillary-compass',
+ 'icon-rotate',
+ resp.data.computed_compass_angle,
+ );
+ });
+ }
+ map.on('mousemove', 'mapillary-images', (e) => displayMapPopup(e));
+ popup.on('close', () => map.setLayoutProperty('mapillary-compass', 'visibility', 'none'));
+
map.on('click', 'tasks-fill', onSelectTaskClick);
map.on('mouseleave', 'tasks-fill', function (e) {
// Change the cursor style as a UI indicator.
@@ -463,8 +638,21 @@ export const TasksMap = ({
authDetails.id,
showTaskIds,
zoomedTaskId,
+ earliestStreetImagery,
+ mapillaryOrganizationId,
]);
+ useEffect(() => {
+ if (map) {
+ mapillaryShown
+ ? map.setLayoutProperty('mapillary-images', 'visibility', 'visible')
+ : map.setLayoutProperty('mapillary-images', 'visibility', 'none');
+ mapillaryShown
+ ? map.setLayoutProperty('mapillary-sequences', 'visibility', 'visible')
+ : map.setLayoutProperty('mapillary-sequences', 'visibility', 'none');
+ }
+ }, [mapillaryShown]);
+
if (!mapboxgl.supported()) {
return ;
} else {
@@ -475,7 +663,20 @@ export const TasksMap = ({
)}
-
+
+
+ setMapillaryShown(!mapillaryShown)}
+ label={}
+ />
+
+