@@ -52,5 +52,13 @@ export const OsmError = () => {
);
}
+ if (Object.keys(feature.tags).length === 0 && !feature.point) {
+ return (
+
+ {t('featurepanel.info_no_tags')}
+
+ );
+ }
+
return null;
};
diff --git a/src/components/FeaturePanel/Properties/IdSchemeFields.tsx b/src/components/FeaturePanel/Properties/IdSchemeFields.tsx
new file mode 100644
index 000000000..d03ca6a0d
--- /dev/null
+++ b/src/components/FeaturePanel/Properties/IdSchemeFields.tsx
@@ -0,0 +1,173 @@
+import React, { ReactNode } from 'react';
+import styled from 'styled-components';
+import { Field } from '../../../services/tagging/types/Fields';
+import { useToggleState } from '../../helpers';
+import { buildAddress } from '../../../services/helpers';
+import { Feature } from '../../../services/types';
+import { t } from '../../../services/intl';
+import { TagsTableInner } from './TagsTableInner';
+import { EditIconButton } from '../helpers/EditIconButton';
+import { useEditDialogContext } from '../helpers/EditDialogContext';
+import { renderValue } from './renderValue';
+import { Table } from './Table';
+import { ShowMoreButton } from './helpers';
+import { useFeatureContext } from '../../utils/FeatureContext';
+import { Subheading } from '../helpers/Subheading';
+import { UiField } from '../../../services/tagging/types/Presets';
+
+const Spacer = styled.div`
+ width: 100%;
+ height: 50px;
+`;
+
+const render = (uiField: UiField, feature: Feature): string | ReactNode => {
+ const { field, key: k, value: v, tagsForField, fieldTranslation } = uiField;
+
+ if (field.type === 'address') {
+ return buildAddress(feature.tags, feature.center);
+ }
+
+ if (field.fieldKey === 'wikidata') {
+ return renderValue('wikidata', feature.tags.wikidata);
+ }
+
+ if (fieldTranslation?.types && fieldTranslation?.options) {
+ return tagsForField.map(({ key, value: value2 }) => (
+
+ {fieldTranslation.types[key]}:{' '}
+ {renderValue(key, fieldTranslation.options[value2]?.title)}
+
+ ));
+ }
+
+ if (field?.type === 'manyCombo') {
+ return tagsForField.map(({ key, value: value2 }) => (
+
+ {fieldTranslation.options[key]}:{' '}
+ {renderValue(key, fieldTranslation.options[value2]?.title ?? value2)}
+
+ ));
+ }
+
+ if (tagsForField?.length >= 2) {
+ return (
+ <>
+ {tagsForField.map(({ key, value: value2 }) => (
+ {renderValue(key, value2)}
+ ))}
+
+ );
+ }
+
+ if (!k) {
+ return renderValue(tagsForField[0].key, tagsForField[0].value);
+ }
+
+ return renderValue(k, v);
+};
+
+// TODO some fields eg. oneway/bicycle doesnt have units in brackets
+const unitRegExp = / \((.+)\)$/i;
+const removeUnits = (label) => label.replace(unitRegExp, '');
+const addUnits = (label, value: string | ReactNode) => {
+ if (typeof value !== 'string') return value;
+ const unit = label.match(unitRegExp);
+ return `${value}${unit ? ` (${unit[1]})` : ''}`;
+};
+
+const getTooltip = (field: Field, key: string) =>
+ `field: ${field.fieldKey}${key === field.fieldKey ? '' : `, key: ${key}`} (${
+ field.type
+ })`;
+
+const UiFields = ({ fields }: { fields: UiField[] }) => {
+ const { openWithTag } = useEditDialogContext();
+ const { feature } = useFeatureContext();
+
+ return (
+ <>
+ {fields.map((uiField) => {
+ const { key, label, field, tagsForField } = uiField;
+ return (
+
+ | {removeUnits(label)} |
+
+ openWithTag(tagsForField?.[0]?.key ?? key)}
+ />
+ {addUnits(label, render(uiField, feature))}
+ |
+
+ );
+ })}
+
+ );
+};
+
+const OtherTagsSection = () => {
+ const [otherTagsShown, toggleOtherTagsShown] = useToggleState(false);
+ const { feature } = useFeatureContext();
+ const { schema } = feature;
+
+ return (
+ <>
+
+ |
+
+ |
+
+ {otherTagsShown && (
+ <>
+
+ ({ ...acc, [key]: feature.tags[key] }),
+ {},
+ )}
+ center={feature.center}
+ />
+
+ )}
+
+ );
+};
+
+export const IdSchemeFields = () => {
+ const { feature } = useFeatureContext();
+ const { schema } = feature;
+ const { keysTodo, featuredTags, matchedFields, tagsWithFields } = schema;
+
+ // TODO add link to osm key reference as Tooltip https://wiki.openstreetmap.org/w/api.php?action=wbgetentities&format=json&languagefallback=1&languages=en%7Ccs%7Cen-us%7Csk&origin=*&sites=wiki&titles=Locale%3Acs%7CLocale%3Aen-us%7CLocale%3Ask%7CKey%3Astart%20date%7CTag%3Astart%20date%3D1752
+ // TODO preset translations https://github.com/zbycz/osmapp/issues/190
+
+ const numberOfItems =
+ featuredTags.length +
+ matchedFields.length +
+ tagsWithFields.length +
+ keysTodo.length;
+
+ if (!numberOfItems) {
+ return ;
+ }
+
+ const showDetailsHeading = !!(featuredTags.length && matchedFields.length);
+ const showOtherTagsSection = !!(tagsWithFields.length || keysTodo.length);
+
+ return (
+ <>
+ {showDetailsHeading && (
+ {t('featurepanel.details_heading')}
+ )}
+
+
+
+
+ {showOtherTagsSection && }
+
+
+
+ );
+};
diff --git a/src/components/FeaturePanel/Properties/Properties.tsx b/src/components/FeaturePanel/Properties/Properties.tsx
new file mode 100644
index 000000000..a4237c110
--- /dev/null
+++ b/src/components/FeaturePanel/Properties/Properties.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { FeaturedTags } from '../FeaturedTags';
+import { IdSchemeFields } from './IdSchemeFields';
+import { t } from '../../../services/intl';
+import { TagsTableInner } from './TagsTableInner';
+import { useFeatureContext } from '../../utils/FeatureContext';
+import { Subheading } from '../helpers/Subheading';
+import { Wrapper } from './Wrapper';
+import { Table } from './Table';
+
+export const Properties = ({ showTags }) => {
+ const { feature } = useFeatureContext();
+
+ return (
+ <>
+ {!showTags && (
+ <>
+
+
+
+ )}
+ {showTags && (
+ <>
+ {!!Object.keys(feature.tags).length && (
+ {t('featurepanel.all_tags_heading')}
+ )}
+
+
+
+
+ )}
+
+ );
+};
diff --git a/src/components/FeaturePanel/Properties/Table.tsx b/src/components/FeaturePanel/Properties/Table.tsx
new file mode 100644
index 000000000..b680c5a93
--- /dev/null
+++ b/src/components/FeaturePanel/Properties/Table.tsx
@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+
+export const Table = styled.table`
+ font-size: 1rem;
+ width: 100%;
+
+ th,
+ td {
+ padding: 0.1em;
+ overflow: hidden;
+ vertical-align: baseline;
+
+ &:hover .show-on-hover {
+ display: block !important;
+ }
+ }
+
+ th {
+ width: 140px;
+ max-width: 140px;
+ color: ${({ theme }) => theme.palette.text.secondary};
+ text-align: left;
+ font-weight: normal;
+ vertical-align: baseline;
+ padding-left: 0;
+ }
+
+ table {
+ padding-left: 1em;
+ padding-bottom: 1em;
+ }
+`;
diff --git a/src/components/FeaturePanel/Properties/TagsTableInner.tsx b/src/components/FeaturePanel/Properties/TagsTableInner.tsx
new file mode 100644
index 000000000..ac6b28d75
--- /dev/null
+++ b/src/components/FeaturePanel/Properties/TagsTableInner.tsx
@@ -0,0 +1,180 @@
+import React from 'react';
+import truncate from 'lodash/truncate';
+
+import { useToggleState } from '../../helpers';
+import { EditIconButton } from '../helpers/EditIconButton';
+import { buildAddress } from '../../../services/helpers';
+import { ToggleButton } from '../helpers/ToggleButton';
+import { renderValue } from './renderValue';
+import { useEditDialogContext } from '../helpers/EditDialogContext';
+
+const isAddr = (k) => k.match(/^addr:|uir_adr|:addr/);
+const isName = (k) => k.match(/^name(:|$)/);
+const isShortName = (k) => k.match(/^short_name(:|$)/);
+const isAltName = (k) => k.match(/^alt_name(:|$)/);
+const isOfficialName = (k) => k.match(/^official_name(:|$)/);
+const isOldName = (k) => k.match(/^old_name(:|$)/);
+const isBuilding = (k) =>
+ k.match(/building|roof|^min_level|^max_level|height$/);
+const isNetwork = (k) => k.match(/network/);
+const isBrand = (k) => k.match(/^brand/);
+const isOperator = (k) => k.match(/^operator/);
+const isPayment = (k) => k.match(/^payment/);
+
+const TagsGroup = ({ tags, label, value, hideArrow = false, onEdit }) => {
+ const [isShown, toggle] = useToggleState(false);
+
+ if (!tags.length) {
+ return null;
+ }
+
+ return (
+ <>
+
+ | {label} |
+
+ onEdit(tags[0][0])} />
+ {value || tags[0]?.[1]}
+ {!hideArrow && }
+ |
+
+ {isShown && (
+
+
+
+
+ {tags.map(([k, v]) => (
+
+ | {k} |
+ {renderValue(k, v)} |
+
+ ))}
+
+
+ |
+
+ )}
+
+ );
+};
+
+// TODO make it dynamic - count how many "first parts before :" are there, and group all >= 2
+
+export const TagsTableInner = ({ tags, center, except = [] }) => {
+ const { openWithTag: onEdit } = useEditDialogContext();
+
+ const tagsEntries = Object.entries(tags).filter(([k]) => !except.includes(k));
+
+ const addrs = tagsEntries.filter(([k]) => isAddr(k));
+ const names = tagsEntries.filter(([k]) => isName(k));
+ const shortNames = tagsEntries.filter(([k]) => isShortName(k));
+ const altNames = tagsEntries.filter(([k]) => isAltName(k));
+ const officialNames = tagsEntries.filter(([k]) => isOfficialName(k));
+ const oldNames = tagsEntries.filter(([k]) => isOldName(k));
+ const buildings = tagsEntries.filter(([k]) => isBuilding(k));
+ const networks = tagsEntries.filter(([k]) => isNetwork(k));
+ const brands = tagsEntries.filter(([k]) => isBrand(k));
+ const operator = tagsEntries.filter(([k]) => isOperator(k));
+ const payments = tagsEntries.filter(([k]) => isPayment(k));
+ const rest = tagsEntries.filter(
+ ([k]) =>
+ !isName(k) &&
+ !isShortName(k) &&
+ !isAltName(k) &&
+ !isOfficialName(k) &&
+ !isOldName(k) &&
+ !isAddr(k) &&
+ !isBuilding(k) &&
+ !isNetwork(k) &&
+ !isOperator(k) &&
+ !isPayment(k) &&
+ !isBrand(k),
+ );
+
+ return (
+ <>
+
+
+
+
+
+
+ {rest.map(([k, v]) => (
+
+ | {k} |
+
+ onEdit(k)} />
+ {renderValue(k, v)}
+ |
+
+ ))}
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/FeaturePanel/Properties/Wrapper.tsx b/src/components/FeaturePanel/Properties/Wrapper.tsx
new file mode 100644
index 000000000..b35e02735
--- /dev/null
+++ b/src/components/FeaturePanel/Properties/Wrapper.tsx
@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+ position: relative;
+ margin-bottom: 2em;
+`;
diff --git a/src/components/FeaturePanel/helpers/getUrlForTag.tsx b/src/components/FeaturePanel/Properties/getUrlForTag.tsx
similarity index 86%
rename from src/components/FeaturePanel/helpers/getUrlForTag.tsx
rename to src/components/FeaturePanel/Properties/getUrlForTag.tsx
index 90be731f7..4be68437c 100644
--- a/src/components/FeaturePanel/helpers/getUrlForTag.tsx
+++ b/src/components/FeaturePanel/Properties/getUrlForTag.tsx
@@ -31,6 +31,10 @@ export const getUrlForTag = (k, v) => {
if (k === 'ref:edubase') {
return `https://get-information-schools.service.gov.uk/Establishments/Establishment/Details/${v}`;
}
+ if (k === 'gnis:feature_id') {
+ // alternative url in https://github.com/openstreetmap/id-tagging-schema/issues/272
+ return `https://edits.nationalmap.gov/apps/gaz-domestic/public/search/names/${v}`;
+ }
if (k === 'website') {
return v.match(urlRegExp) ? v : `http://${v}`;
}
diff --git a/src/components/FeaturePanel/Properties/helpers.tsx b/src/components/FeaturePanel/Properties/helpers.tsx
new file mode 100644
index 000000000..079841819
--- /dev/null
+++ b/src/components/FeaturePanel/Properties/helpers.tsx
@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import Button from '@material-ui/core/Button';
+import ChevronRight from '@material-ui/icons/ChevronRight';
+import ExpandLessIcon from '@material-ui/icons/ExpandLess';
+import React from 'react';
+import { t } from '../../../services/intl';
+
+const StyledToggleButton = styled(Button)`
+ svg {
+ font-size: 17px;
+ }
+`;
+
+export const ShowMoreButton = ({ onClick, isShown }) => (
+
+ {!isShown && (
+ <>
+ {t('show_more')}
+
+ )}
+ {isShown && (
+ <>
+ {t('show_less')}
+
+ )}
+
+);
diff --git a/src/components/FeaturePanel/Properties/renderValue.tsx b/src/components/FeaturePanel/Properties/renderValue.tsx
new file mode 100644
index 000000000..01ec4d657
--- /dev/null
+++ b/src/components/FeaturePanel/Properties/renderValue.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { getUrlForTag } from './getUrlForTag';
+import { slashToOptionalBr } from '../../helpers';
+
+const getEllipsisHumanUrl = (humanUrl) => {
+ const MAX_LENGTH = 40;
+ return humanUrl.replace(/^([^/]+.{0,5})(.*)$/, (full, hostname, rest) => {
+ const charsLeft = MAX_LENGTH - 10 - hostname.length;
+ return (
+ hostname +
+ (full.length > MAX_LENGTH
+ ? `…${rest.substring(rest.length - charsLeft)}`
+ : rest)
+ );
+ });
+};
+
+const getHumanValue = (k, v, featured: boolean) => {
+ const humanValue = v.replace(/^https?:\/\//, '').replace(/^([^/]+)\/$/, '$1');
+
+ if (v.startsWith('https://commons.wikimedia.org/wiki/')) {
+ return v
+ .substring('https://commons.wikimedia.org/wiki/'.length)
+ .replace(/_/g, ' ');
+ }
+ if (k === 'image') {
+ return getEllipsisHumanUrl(humanValue);
+ }
+ if (k.match(/:?wikipedia$/) && v.match(/:/)) {
+ return v.split(':', 2)[1];
+ }
+ if (featured && k === 'wikidata') {
+ return `Wikipedia (wikidata)`; // TODO fetch label from wikidata
+ }
+ if (v === 'yes') {
+ return '✓';
+ }
+ if (v === 'no') {
+ return '✗';
+ }
+
+ return humanValue;
+};
+
+export const renderValue = (k, v, featured = false) => {
+ const url = getUrlForTag(k, v);
+ const humanValue = getHumanValue(k, v, featured);
+
+ return url ? {slashToOptionalBr(humanValue)} : humanValue;
+};
diff --git a/src/components/FeaturePanel/PublicTransport/LineNumber.tsx b/src/components/FeaturePanel/PublicTransport/LineNumber.tsx
new file mode 100644
index 000000000..c57733adf
--- /dev/null
+++ b/src/components/FeaturePanel/PublicTransport/LineNumber.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import { useUserThemeContext } from '../../../helpers/theme';
+
+interface LineNumberProps {
+ name: string;
+ color: string;
+}
+
+/**
+ * A function to map a color name to hex. When a color is not found, it is returned as is, the same goes for hex colors.
+ * @param color The color to map to hex
+ * @returns The color in hex format, e.g. #ff0000
+ */
+function mapColorToHex(color: string) {
+ switch (color.toLowerCase()) {
+ case 'black':
+ return '#000000';
+ case 'gray':
+ case 'grey':
+ return '#808080';
+ case 'maroon':
+ return '#800000';
+ case 'olive':
+ return '#808000';
+ case 'green':
+ return '#008000';
+ case 'teal':
+ return '#008080';
+ case 'navy':
+ return '#000080';
+ case 'purple':
+ return '#800080';
+ case 'white':
+ return '#ffffff';
+ case 'silver':
+ return '#c0c0c0';
+ case 'red':
+ return '#ff0000';
+ case 'yellow':
+ return '#ffff00';
+ case 'lime':
+ return '#00ff00';
+ case 'aqua':
+ case 'cyan':
+ return '#00ffff';
+ case 'blue':
+ return '#0000ff';
+ case 'fuchsia':
+ case 'magenta':
+ return '#ff00ff';
+ default:
+ return color;
+ }
+}
+/**
+ * A function to determine whether the text color should be black or white
+ * @param hexBgColor The background color in hex format, e.g. #ff0000
+ * @returns 'black' or 'white' depending on the brightness of the background color
+ */
+function whiteOrBlackText(hexBgColor) {
+ const r = parseInt(hexBgColor.slice(1, 3), 16);
+ const g = parseInt(hexBgColor.slice(3, 5), 16);
+ const b = parseInt(hexBgColor.slice(5, 7), 16);
+ const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+ return brightness > 125 ? 'black' : 'white';
+}
+
+export const LineNumber: React.FC = ({ name, color }) => {
+ const { currentTheme } = useUserThemeContext();
+ const darkmode = currentTheme === 'dark';
+
+ let bgcolor: string;
+ if (!color) bgcolor = darkmode ? '#898989' : '#dddddd';
+ // set the default color
+ else bgcolor = mapColorToHex(color);
+
+ const divStyle: React.CSSProperties = {
+ backgroundColor: bgcolor,
+ paddingBlock: '0.2rem',
+ paddingInline: '0.4rem',
+ borderRadius: '0.125rem',
+ display: 'inline',
+ color: whiteOrBlackText(bgcolor),
+ };
+
+ return {name}
;
+};
diff --git a/src/components/FeaturePanel/PublicTransport/PublicTransport.tsx b/src/components/FeaturePanel/PublicTransport/PublicTransport.tsx
new file mode 100644
index 000000000..ec9f3fd1c
--- /dev/null
+++ b/src/components/FeaturePanel/PublicTransport/PublicTransport.tsx
@@ -0,0 +1,91 @@
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
+import { Typography } from '@material-ui/core';
+import { LineInformation, requestLines } from './requestRoutes';
+import { PublicTransportWrapper } from './PublicTransportWrapper';
+import { FeatureTags } from '../../../services/types';
+import { LineNumber } from './LineNumber';
+
+interface PublicTransportProps {
+ tags: FeatureTags;
+}
+
+const useLoadingState = () => {
+ const [routes, setRoutes] = useState([]);
+ const [error, setError] = useState();
+ const [loading, setLoading] = useState(true);
+
+ const finishRoutes = (payload) => {
+ setLoading(false);
+ setRoutes(payload);
+ };
+
+ const startRoutes = () => {
+ setLoading(true);
+ setRoutes([]);
+ setError(undefined);
+ };
+
+ const failRoutes = () => {
+ setError('Could not load routes');
+ setLoading(false);
+ };
+
+ return { routes, error, loading, startRoutes, finishRoutes, failRoutes };
+};
+
+const PublicTransportInner = () => {
+ const router = useRouter();
+
+ const { routes, error, loading, startRoutes, finishRoutes, failRoutes } =
+ useLoadingState();
+
+ useEffect(() => {
+ const loadData = async () => {
+ startRoutes();
+ const lines = await requestLines(
+ router.query.all[0] as any,
+ Number(router.query.all[1]),
+ ).catch(failRoutes);
+ finishRoutes(lines);
+ };
+
+ loadData();
+ }, []);
+
+ return (
+
+ {loading ? (
+ <>
+
.
+
.
+
.
+
+ ) : (
+
+ {routes.map((line) => (
+
+ ))}
+
+ )}
+ {error && (
+
+ Error: {error}
+
+ )}
+
{children}
;
+};
diff --git a/src/components/FeaturePanel/PublicTransport/requestRoutes.ts b/src/components/FeaturePanel/PublicTransport/requestRoutes.ts
new file mode 100644
index 000000000..fb21ac6e0
--- /dev/null
+++ b/src/components/FeaturePanel/PublicTransport/requestRoutes.ts
@@ -0,0 +1,43 @@
+import { fetchText } from '../../../services/fetch';
+
+export interface LineInformation {
+ ref: string;
+ colour: string | undefined;
+}
+
+export async function requestLines(
+ featureType: 'node' | 'way' | 'relation',
+ id: number,
+) {
+ // use the overpass api to request the lines in
+ const overpassQuery = `[out:csv(ref, colour; false; ';')];
+ ${featureType}(${id});
+ rel(bn)["public_transport"="stop_area"];
+node(r: "stop") -> .stops;
+ rel(bn.stops)["route"~"bus|train|tram|subway|light_rail|ferry|monorail"];
+ out;`;
+
+ // send the request
+ const response: string = await fetchText(
+ `https://overpass-api.de/api/interpreter?data=${encodeURIComponent(
+ overpassQuery,
+ )}`,
+ );
+
+ let resData = response.split('\n').map((line) => {
+ const ref = line.split(';').slice(0, -1).join(';');
+ let colour = line.split(';')[line.split(';').length - 1];
+
+ // set colour to undefined if it is empty
+ if (colour === '') colour = undefined;
+ return { ref, colour } as LineInformation;
+ });
+
+ resData = resData.filter((line) => line.ref !== '');
+ // remove duplicats
+ resData = resData.filter(
+ (line, index) => resData.findIndex((l) => l.ref === line.ref) === index,
+ );
+ resData.sort((a, b) => a.ref.localeCompare(b.ref));
+ return resData;
+}
diff --git a/src/components/FeaturePanel/TagsTable.tsx b/src/components/FeaturePanel/TagsTable.tsx
deleted file mode 100644
index 6bbefb7bc..000000000
--- a/src/components/FeaturePanel/TagsTable.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import truncate from 'lodash/truncate';
-
-import { slashToOptionalBr, useToggleState } from '../helpers';
-import { getUrlForTag } from './helpers/getUrlForTag';
-import { EditIconButton } from './helpers/EditIconButton';
-import { buildAddress } from '../../services/helpers';
-import { ToggleButton } from './helpers/ToggleButton';
-
-const Wrapper = styled.div`
- position: relative;
- margin-bottom: 2em;
-`;
-
-const Table = styled.table`
- font-size: 1rem;
- width: 100%;
-
- th,
- td {
- padding: 0.1em;
- overflow: hidden;
-
- &:hover .show-on-hover {
- display: block !important;
- }
- }
-
- th {
- width: 140px;
- max-width: 140px;
- color: ${({ theme }) => theme.palette.text.secondary};
- text-align: left;
- font-weight: normal;
- vertical-align: baseline;
- padding-left: 0;
- }
-
- table {
- padding-left: 1em;
- padding-bottom: 1em;
- }
-`;
-
-const renderValue = (k, v) => {
- const url = getUrlForTag(k, v);
- let humanUrl = v.replace(/^https?:\/\//, '').replace(/^([^/]+)\/$/, '$1');
- if (k === 'image') {
- humanUrl = humanUrl.replace(/^([^/]+.{0,5})(.*)$/, (full, p1, p2) => {
- const charsLeft = 30 - p1.length;
- return (
- p1 + (full.length > 40 ? `…${p2.substring(p2.length - charsLeft)}` : p2)
- );
- });
- }
- return url ? {slashToOptionalBr(humanUrl)} : v;
-};
-
-const isAddr = (k) => k.match(/^addr:|uir_adr|:addr/);
-const isName = (k) => k.match(/^name(:|$)/);
-const isShortName = (k) => k.match(/^short_name(:|$)/);
-const isAltName = (k) => k.match(/^alt_name(:|$)/);
-const isOfficialName = (k) => k.match(/^official_name(:|$)/);
-const isOldName = (k) => k.match(/^old_name(:|$)/);
-const isBuilding = (k) =>
- k.match(/building|roof|^min_level|^max_level|height$/);
-const isNetwork = (k) => k.match(/network/);
-const isBrand = (k) => k.match(/^brand/);
-const isPayment = (k) => k.match(/^payment/);
-
-const TagsGroup = ({ tags, label, value, hideArrow = false, onEdit }) => {
- const [isShown, toggle] = useToggleState(false);
-
- if (!tags.length) {
- return null;
- }
-
- return (
- <>
-
- | {label} |
-
- onEdit(tags[0][0])} />
- {value || tags[0]?.join(' = ')}
- {!hideArrow && }
- |
-
- {isShown && (
-
-
-
-
- {tags.map(([k, v]) => (
-
- | {k} |
- {renderValue(k, v)} |
-
- ))}
-
-
- |
-
- )}
-
- );
-};
-
-// This is supposed to be replaced by iD presets in future (see https://github.com/zbycz/osmapp/issues/116)
-export const TagsTable = ({ tags, center, except, onEdit }) => {
- const tagsEntries = Object.entries(tags).filter(([k]) => !except.includes(k));
-
- const addrs = tagsEntries.filter(([k]) => isAddr(k));
- const names = tagsEntries.filter(([k]) => isName(k));
- const shortNames = tagsEntries.filter(([k]) => isShortName(k));
- const altNames = tagsEntries.filter(([k]) => isAltName(k));
- const officialNames = tagsEntries.filter(([k]) => isOfficialName(k));
- const oldNames = tagsEntries.filter(([k]) => isOldName(k));
- const buildings = tagsEntries.filter(([k]) => isBuilding(k));
- const networks = tagsEntries.filter(([k]) => isNetwork(k));
- const brands = tagsEntries.filter(([k]) => isBrand(k));
- const payments = tagsEntries.filter(([k]) => isPayment(k));
- const rest = tagsEntries.filter(
- ([k]) =>
- !isName(k) &&
- !isShortName(k) &&
- !isAltName(k) &&
- !isOfficialName(k) &&
- !isOldName(k) &&
- !isAddr(k) &&
- !isBuilding(k) &&
- !isNetwork(k) &&
- !isPayment(k) &&
- !isBrand(k),
- );
-
- return (
-
-
-
-
-
-
-
-
-
- {rest.map(([k, v]) => (
-
- | {k} |
-
- onEdit(k)} />
- {renderValue(k, v)}
- |
-
- ))}
-
-
-
-
-
-
-
- );
-};
diff --git a/src/components/FeaturePanel/helpers/EditDialogContext.tsx b/src/components/FeaturePanel/helpers/EditDialogContext.tsx
new file mode 100644
index 000000000..809efbcfb
--- /dev/null
+++ b/src/components/FeaturePanel/helpers/EditDialogContext.tsx
@@ -0,0 +1,36 @@
+import React, { createContext, useContext, useState } from 'react';
+import Router from 'next/router';
+import { isBrowser } from '../../helpers';
+
+interface EditDialogType {
+ opened: boolean;
+ focusTag: string | boolean;
+ open: () => void;
+ close: () => void;
+ openWithTag: (tag: string) => void;
+}
+
+export const EditDialogContext = createContext(undefined);
+
+// lives in App.tsx because it needs ctx in SSR
+export const EditDialogProvider = ({ children }) => {
+ const initialState = isBrowser() ? Router.query.all?.[2] === 'edit' : false; // TODO supply router.query in SSR
+ const [openedWithTag, setOpenedWithTag] =
+ useState(initialState);
+
+ const value = {
+ opened: !!openedWithTag,
+ focusTag: openedWithTag,
+ open: () => setOpenedWithTag(true),
+ close: () => setOpenedWithTag(false),
+ openWithTag: setOpenedWithTag,
+ };
+
+ return (
+
+ {children}
+
+ );
+};
+
+export const useEditDialogContext = () => useContext(EditDialogContext);
diff --git a/src/components/FeaturePanel/helpers/Subheading.tsx b/src/components/FeaturePanel/helpers/Subheading.tsx
new file mode 100644
index 000000000..8c3b5f90c
--- /dev/null
+++ b/src/components/FeaturePanel/helpers/Subheading.tsx
@@ -0,0 +1,8 @@
+import { Typography } from '@material-ui/core';
+import React from 'react';
+
+export const Subheading = ({ children }) => (
+
+ {children}
+
+);
diff --git a/src/components/FeaturePanel/renderers/FoodHygieneRatingScheme.tsx b/src/components/FeaturePanel/renderers/FoodHygieneRatingScheme.tsx
new file mode 100644
index 000000000..e0021230d
--- /dev/null
+++ b/src/components/FeaturePanel/renderers/FoodHygieneRatingScheme.tsx
@@ -0,0 +1,105 @@
+import React, { useEffect, useState } from 'react';
+import { Tooltip, Typography } from '@material-ui/core';
+import RestaurantIcon from '@material-ui/icons/Restaurant';
+import styled from 'styled-components';
+import { getEstablishmentRatingValue } from '../../../services/fhrsApi';
+
+const useLoadingState = () => {
+ const [rating, setRating] = useState();
+ const [error, setError] = useState();
+ const [loading, setLoading] = useState(true);
+
+ const finishRating = (payload) => {
+ setLoading(false);
+ setRating(payload);
+ };
+
+ const startRating = () => {
+ setLoading(true);
+ setRating(undefined);
+ setError(undefined);
+ };
+
+ const failRating = () => {
+ setError('Could not load rating');
+ setLoading(false);
+ };
+
+ return { rating, error, loading, startRating, finishRating, failRating };
+};
+
+const Wrapper = styled.div`
+ display: flex;
+ gap: 0.5rem;
+
+ .MuiRating-root {
+ margin-top: -2px;
+ }
+`;
+
+const RatingRound = styled.span`
+ border-radius: 50%;
+ background-color: #1a6500;
+ color: #fff;
+ padding: 0.25rem 0.5rem;
+ font-size: 0.75rem;
+ font-weight: bold;
+ position: relative;
+ top: -1px;
+`;
+
+export const FoodHygieneRatingSchemeRenderer = ({ v }) => {
+ const { rating, error, loading, startRating, finishRating, failRating } =
+ useLoadingState();
+
+ useEffect(() => {
+ const loadData = async () => {
+ startRating();
+ const ratingValue = await getEstablishmentRatingValue(v);
+ if (Number.isNaN(rating)) {
+ failRating();
+ }
+ finishRating(ratingValue);
+ };
+
+ loadData();
+ }, []);
+
+ if (loading) {
+ return (
+ <>
+
+
+
+
+ );
+ }
+
+ return (
+ <>
+
+
+
+
+ FHRS{' '}
+ {Number.isNaN(rating) || error ? (
+
+ (Error while fetching rating)
+
+ ) : (
+ {rating}
+ )}
+
+
+
+
+ );
+};
diff --git a/src/components/FeaturePanel/renderers/PhoneRenderer.tsx b/src/components/FeaturePanel/renderers/PhoneRenderer.tsx
index 9dfa49db8..6b4850be3 100644
--- a/src/components/FeaturePanel/renderers/PhoneRenderer.tsx
+++ b/src/components/FeaturePanel/renderers/PhoneRenderer.tsx
@@ -4,8 +4,14 @@ import LocalPhone from '@material-ui/icons/LocalPhone';
export const WebsiteRenderer = ({ v }) => (
<>
-
- {v}
+
+ {v.split(';').map((v2, index) => (
+ <>
+ {index === 0 ? '' : ', '}
+ {v2}
+
+ ))}
+
);
diff --git a/src/components/FeaturePanel/renderers/WikidataRenderer.tsx b/src/components/FeaturePanel/renderers/WikidataRenderer.tsx
new file mode 100644
index 000000000..c14731833
--- /dev/null
+++ b/src/components/FeaturePanel/renderers/WikidataRenderer.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { renderValue } from '../Properties/renderValue';
+import { WikipediaIcon } from '../../../assets/WikipediaIcon';
+
+export const WikidataRenderer = ({ k, v }) => (
+ <>
+
+ {renderValue(k, v, true)}
+
+);
diff --git a/src/components/FeaturePanel/renderers/WikipediaRenderer.tsx b/src/components/FeaturePanel/renderers/WikipediaRenderer.tsx
new file mode 100644
index 000000000..ed5798496
--- /dev/null
+++ b/src/components/FeaturePanel/renderers/WikipediaRenderer.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { WikipediaIcon } from '../../../assets/WikipediaIcon';
+import { renderValue } from '../Properties/renderValue';
+
+export const WikipediaRenderer = ({ k, v }) => (
+ <>
+
+ {renderValue(k, v)}
+
+);
diff --git a/src/components/HomepagePanel/HomepagePanel.tsx b/src/components/HomepagePanel/HomepagePanel.tsx
index 503176133..3d7b0ebb0 100644
--- a/src/components/HomepagePanel/HomepagePanel.tsx
+++ b/src/components/HomepagePanel/HomepagePanel.tsx
@@ -156,16 +156,14 @@ export const HomepagePanel = () => {
-
- }
- color="primary"
- href="/install"
- >
- {t('install.button')}
-
-
+ }
+ color="primary"
+ href="/install"
+ >
+ {t('install.button')}
+
diff --git a/src/components/HomepagePanel/InstallDialog.tsx b/src/components/HomepagePanel/InstallDialog.tsx
index e6e299114..54c2c694c 100644
--- a/src/components/HomepagePanel/InstallDialog.tsx
+++ b/src/components/HomepagePanel/InstallDialog.tsx
@@ -140,25 +140,25 @@ export function InstallDialog() {
{' '}
-
+
{' '}
-
+
@@ -178,12 +178,12 @@ export function InstallDialog() {
-
+
-
+
@@ -203,13 +203,13 @@ export function InstallDialog() {
{' '}
-
+
diff --git a/src/components/LayerSwitcher/LayerSwitcherContent.tsx b/src/components/LayerSwitcher/LayerSwitcherContent.tsx
index b5802358b..00632a81b 100644
--- a/src/components/LayerSwitcher/LayerSwitcherContent.tsx
+++ b/src/components/LayerSwitcher/LayerSwitcherContent.tsx
@@ -13,8 +13,9 @@ import {
RemoveUserLayerAction,
} from './helpers';
import { osmappLayers } from './osmappLayers';
-import { Layer, useMapStateContext } from '../utils/MapStateContext';
+import { Layer, useMapStateContext, View } from '../utils/MapStateContext';
import { usePersistedState } from '../utils/usePersistedState';
+import { isViewInsideAfrica } from '../Map/styles/makinaAfricaStyle';
const StyledList = styled(List)`
.MuiListItemIcon-root {
@@ -36,14 +37,16 @@ const Spacer = styled.div`
padding-bottom: 1.5em;
`;
-const getAllLayers = (userLayers: Layer[]): Layer[] => {
- const spacer = { type: 'spacer' as const, key: 'userSpacer' };
+const getAllLayers = (userLayers: Layer[], view: View): Layer[] => {
+ const spacer: Layer = { type: 'spacer' as const, key: 'userSpacer' };
+ const toLayer = ([key, layer]) => ({ ...layer, key });
+
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const filterMakina = ([key, _]) =>
+ key === 'makinaAfrica' ? isViewInsideAfrica(view) : true; // needs suppressHydrationWarning
return [
- ...Object.entries(osmappLayers).map(([key, layer]) => ({
- ...layer,
- key,
- })),
+ ...Object.entries(osmappLayers).filter(filterMakina).map(toLayer),
...(userLayers.length ? [spacer] : []),
...userLayers.map((layer) => ({
...layer,
@@ -55,15 +58,19 @@ const getAllLayers = (userLayers: Layer[]): Layer[] => {
};
export const LayerSwitcherContent = () => {
- const { activeLayers, setActiveLayers } = useMapStateContext();
+ const { view, activeLayers, setActiveLayers } = useMapStateContext();
const [userLayers, setUserLayers] = usePersistedState('userLayers', []);
- const layers = getAllLayers(userLayers);
+ const layers = getAllLayers(userLayers, view);
return (
<>
-
+
{layers.map(({ key, name, type, url, Icon }) => {
if (type === 'spacer') {
return ;
diff --git a/src/components/LayerSwitcher/osmappLayers.tsx b/src/components/LayerSwitcher/osmappLayers.tsx
index 55421ad7a..d392d2c29 100644
--- a/src/components/LayerSwitcher/osmappLayers.tsx
+++ b/src/components/LayerSwitcher/osmappLayers.tsx
@@ -5,28 +5,59 @@ import SatelliteIcon from '@material-ui/icons/Satellite';
import DirectionsBikeIcon from '@material-ui/icons/DirectionsBike';
import { Layer } from '../utils/MapStateContext';
import { t } from '../../services/intl';
+import { isBrowser } from '../helpers';
interface Layers {
[key: string]: Layer;
}
-const retina = (window.devicePixelRatio || 1) >= 2 ? '@2x' : '';
+const retina =
+ ((isBrowser() && window.devicePixelRatio) || 1) >= 2 ? '@2x' : '';
export const osmappLayers: Layers = {
- basic: { name: t('layers.basic'), type: 'basemap', Icon: ExploreIcon },
- outdoor: { name: t('layers.outdoor'), type: 'basemap', Icon: FilterHdrIcon },
+ basic: {
+ name: t('layers.basic'),
+ type: 'basemap',
+ Icon: ExploreIcon,
+ attribution: ['maptiler', 'osm'],
+ },
+ makinaAfrica: {
+ name: t('layers.makina_africa'),
+ type: 'basemap',
+ Icon: ExploreIcon,
+ attribution: [
+ 'OPG © OpenMapTiles',
+ 'osm',
+ ],
+ },
+ outdoor: {
+ name: t('layers.outdoor'),
+ type: 'basemap',
+ Icon: FilterHdrIcon,
+ attribution: ['maptiler', 'osm'],
+ },
s1: { type: 'spacer' },
mapnik: {
name: t('layers.mapnik'),
type: 'basemap',
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
Icon: MapIcon,
+ attribution: ['osm'],
},
sat: {
- name: t('layers.sat'),
+ name: t('layers.maptilerSat'),
type: 'basemap',
- url: 'https://api.maptiler.com/tiles/satellite/tiles.json?key=7dlhLl3hiXQ1gsth0kGu',
+ url: 'https://api.maptiler.com/tiles/satellite-v2/tiles.json?key=7dlhLl3hiXQ1gsth0kGu',
Icon: SatelliteIcon,
+ attribution: ['maptiler'],
+ },
+ bingSat: {
+ name: t('layers.bingSat'),
+ type: 'basemap',
+ url: 'https://ecn.{bingSubdomains}.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=13657',
+ Icon: SatelliteIcon,
+ attribution: ['© Microsoft'],
+ maxzoom: 19,
},
// mtb: {
// name: t('layers.mtb'),
@@ -36,12 +67,16 @@ export const osmappLayers: Layers = {
bike: {
name: t('layers.bike'),
type: 'basemap',
- url: `https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}${retina}.png?apikey=00291b657a5d4c91bbacb0ff096e2c25`,
+ url: `https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}${retina}.png?apikey=18c0cb31f2fd41d28ac90abe4059e359`,
Icon: DirectionsBikeIcon,
+ attribution: [
+ '© Thunderforest',
+ 'osm',
+ ],
},
// snow: {
// name: t('layers.snow'),
- // type: 'basemap',
+ // type: 'overlay',
// url: 'https://www.opensnowmap.org/tiles-pistes/{z}/{x}/{y}.png',
// },
// s2: { type: 'spacer' },
diff --git a/src/components/Map/BrowserMap.tsx b/src/components/Map/BrowserMap.tsx
index ad430d5ec..10403ac83 100644
--- a/src/components/Map/BrowserMap.tsx
+++ b/src/components/Map/BrowserMap.tsx
@@ -1,6 +1,5 @@
import React from 'react';
import 'maplibre-gl/dist/maplibre-gl.css';
-import maplibregl from 'maplibre-gl';
import { useAddMapEvent, useMapEffect, useMobileMode } from '../helpers';
import { useMapStateContext } from '../utils/MapStateContext';
import { useFeatureContext } from '../utils/FeatureContext';
@@ -10,6 +9,8 @@ import { useUpdateViewOnMove } from './behaviour/useUpdateViewOnMove';
import { useUpdateStyle } from './behaviour/useUpdateStyle';
import { useInitMap } from './behaviour/useInitMap';
import { Translation } from '../../services/intl';
+import { useToggleTerrainControl } from './behaviour/useToggleTerrainControl';
+import { isWebglSupported } from './helpers';
const useOnMapLoaded = useAddMapEvent((map, onMapLoaded) => ({
eventType: 'load',
@@ -32,7 +33,7 @@ const NotSupportedMessage = () => (
// TODO https://cdn.klokantech.com/openmaptiles-language/v1.0/openmaptiles-language.js + use localized name in FeaturePanel
const BrowserMap = ({ onMapLoaded }) => {
- if (!maplibregl.supported()) {
+ if (!isWebglSupported()) {
onMapLoaded();
return ;
}
@@ -46,6 +47,7 @@ const BrowserMap = ({ onMapLoaded }) => {
const { viewForMap, setViewFromMap, setBbox, activeLayers } =
useMapStateContext();
useUpdateViewOnMove(map, setViewFromMap, setBbox);
+ useToggleTerrainControl(map);
useUpdateMap(map, viewForMap);
useUpdateStyle(map, activeLayers);
diff --git a/src/components/Map/MapFooter/LangSwitcher.tsx b/src/components/Map/MapFooter/LangSwitcher.tsx
index 1fe8014bb..96a859868 100644
--- a/src/components/Map/MapFooter/LangSwitcher.tsx
+++ b/src/components/Map/MapFooter/LangSwitcher.tsx
@@ -1,6 +1,7 @@
import getConfig from 'next/config';
import React from 'react';
import { Menu, MenuItem } from '@material-ui/core';
+import { useRouter } from 'next/router';
import { useBoolState } from '../../helpers';
import { changeLang, intl, t } from '../../../services/intl';
@@ -8,15 +9,16 @@ export const LangSwitcher = () => {
const {
publicRuntimeConfig: { languages },
} = getConfig();
+ const { asPath } = useRouter();
const anchorRef = React.useRef();
const [opened, open, close] = useBoolState(false);
- const setLang = (k) => {
- changeLang(k);
+ const getLangSetter = (lang) => (e) => {
+ e.preventDefault();
+ changeLang(lang);
close();
};
- // TODO make a link and allow google to index all langs
return (
<>