- Layer: {formatLayerId(this.props.layer.id)} + {t("Layer: {{layerId}}", { layerId: formatLayerId(this.props.layer.id) })}

- @@ -340,3 +360,6 @@ export default class LayerEditor extends React.Component } } + +const LayerEditor = withTranslation()(LayerEditorInternal); +export default LayerEditor; diff --git a/src/components/LayerList.tsx b/src/components/LayerList.tsx index 8d6e11e..a066aa8 100644 --- a/src/components/LayerList.tsx +++ b/src/components/LayerList.tsx @@ -10,6 +10,7 @@ import {SortEndHandler, SortableContainer} from 'react-sortable-hoc'; import type {LayerSpecification} from 'maplibre-gl'; import generateUniqueId from '../libs/document-uid'; import { findClosestCommonPrefix, layerPrefix } from '../libs/layer'; +import { WithTranslation, withTranslation } from 'react-i18next'; type LayerListContainerProps = { layers: LayerSpecification[] @@ -22,6 +23,7 @@ type LayerListContainerProps = { sources: object errors: any[] }; +type LayerListContainerInternalProps = LayerListContainerProps & WithTranslation; type LayerListContainerState = { collapsedGroups: {[ket: string]: boolean} @@ -31,14 +33,14 @@ type LayerListContainerState = { }; // List of collapsible layer editors -class LayerListContainer extends React.Component { +class LayerListContainerInternal extends React.Component { static defaultProps = { onLayerSelect: () => {}, } selectedItemRef: React.RefObject; scrollContainerRef: React.RefObject; - constructor(props: LayerListContainerProps) { + constructor(props: LayerListContainerInternalProps) { super(props); this.selectedItemRef = React.createRef(); this.scrollContainerRef = React.createRef(); @@ -259,10 +261,12 @@ class LayerListContainer extends React.Component
- Layers + {t("Layers")}
@@ -283,7 +287,11 @@ class LayerListContainer extends React.Component - {this.state.areAllGroupsExpanded === true ? "Collapse" : "Expand"} + {this.state.areAllGroupsExpanded === true ? + t("Collapse") + : + t("Expand") + }
@@ -293,14 +301,14 @@ class LayerListContainer extends React.Component - Add Layer + {t("Add Layer")}
    {listItems} @@ -310,6 +318,13 @@ class LayerListContainer extends React.Component ) diff --git a/src/components/MapMaplibreGl.tsx b/src/components/MapMaplibreGl.tsx index 16135cb..6a987ca 100644 --- a/src/components/MapMaplibreGl.tsx +++ b/src/components/MapMaplibreGl.tsx @@ -14,6 +14,7 @@ import '../libs/maplibre-rtl' //@ts-ignore import MaplibreGeocoder from '@maplibre/maplibre-gl-geocoder'; import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css'; +import { withTranslation, WithTranslation } from 'react-i18next' function renderPopup(popup: JSX.Element, mountNode: ReactDOM.Container): HTMLElement { ReactDOM.render(popup, mountNode); @@ -51,7 +52,7 @@ function buildInspectStyle(originalMapStyle: StyleSpecification, coloredLayers: return inspectStyle } -type MapMaplibreGlProps = { +type MapMaplibreGlInternalProps = { onDataChange?(event: {map: Map | null}): unknown onLayerSelect(...args: unknown[]): unknown mapStyle: StyleSpecification @@ -64,7 +65,7 @@ type MapMaplibreGlProps = { } replaceAccessTokens(mapStyle: StyleSpecification): StyleSpecification onChange(value: {center: LngLat, zoom: number}): unknown -}; +} & WithTranslation; type MapMaplibreGlState = { map: Map | null @@ -72,7 +73,7 @@ type MapMaplibreGlState = { zoom?: number }; -export default class MapMaplibreGl extends React.Component { +class MapMaplibreGlInternal extends React.Component { static defaultProps = { onMapLoaded: () => {}, onDataChange: () => {}, @@ -82,7 +83,7 @@ export default class MapMaplibreGl extends React.Component this.container = x} data-wd-key="maplibre:map" >
} } +const MapMaplibreGl = withTranslation()(MapMaplibreGlInternal); +export default MapMaplibreGl; diff --git a/src/components/MapOpenLayers.tsx b/src/components/MapOpenLayers.tsx index 9055d01..ce2da02 100644 --- a/src/components/MapOpenLayers.tsx +++ b/src/components/MapOpenLayers.tsx @@ -1,5 +1,6 @@ import React from 'react' import {throttle} from 'lodash'; +import { WithTranslation, withTranslation } from 'react-i18next'; import MapMaplibreGlLayerPopup from './MapMaplibreGlLayerPopup'; @@ -23,7 +24,7 @@ function renderCoords (coords: string[]) { } } -type MapOpenLayersProps = { +type MapOpenLayersInternalProps = { onDataChange?(...args: unknown[]): unknown mapStyle: object accessToken?: string @@ -32,7 +33,7 @@ type MapOpenLayersProps = { debugToolbox: boolean replaceAccessTokens(...args: unknown[]): unknown onChange(...args: unknown[]): unknown -}; +} & WithTranslation; type MapOpenLayersState = { zoom: string @@ -42,7 +43,7 @@ type MapOpenLayersState = { selectedFeatures?: any[] }; -export default class MapOpenLayers extends React.Component { +class MapOpenLayersInternal extends React.Component { static defaultProps = { onMapLoaded: () => {}, onDataChange: () => {}, @@ -54,7 +55,7 @@ export default class MapOpenLayers extends React.Component
this.popupContainer = x} @@ -160,7 +162,7 @@ export default class MapOpenLayers extends React.Component × @@ -170,20 +172,20 @@ export default class MapOpenLayers extends React.Component
- Zoom: {this.state.zoom} + {t("Zoom:")} {this.state.zoom}
{this.props.debugToolbox &&
- + {renderCoords(this.state.cursor)}
- + {renderCoords(this.state.center)}
- + {this.state.rotation}
@@ -192,7 +194,7 @@ export default class MapOpenLayers extends React.Component this.container = x} role="region" - aria-label="Map view" + aria-label={t("Map view")} style={{ ...this.props.style, }}> @@ -201,3 +203,5 @@ export default class MapOpenLayers extends React.Component { +class ModalInternal extends React.Component { static defaultProps = { underlayClickExits: true } @@ -32,6 +32,7 @@ export default class Modal extends React.Component { } render() { + const t = this.props.t; if(this.props.isOpen) { return {

{this.props.title}