From 260dae2e4b15d7f9197b4fc392aaf5e3068ff37e Mon Sep 17 00:00:00 2001 From: David Date: Fri, 15 Nov 2024 13:08:25 +0100 Subject: [PATCH] feature: localize draw (#2068) * feat: localize draw and make measure work correctly again * fix: spell "circle" properly * fix: x marks the cross * fix: x is a cross in english, plus is a cross in swedish --- src/controls/draw.js | 64 +++++++++++++++------------- src/controls/draw/drawtools.js | 20 ++++----- src/controls/measure.js | 4 +- src/loc/en_US.json | 66 ++++++++++++++++++++++++++++- src/loc/sv_SE.json | 68 +++++++++++++++++++++++++++++- src/style/drawstyles.js | 14 +++--- src/style/styletemplate.js | 75 +++++++++++++++++---------------- src/style/stylewindow.js | 27 +++++++----- src/utils/formatlengthstring.js | 5 ++- src/viewer.js | 2 +- 10 files changed, 243 insertions(+), 102 deletions(-) diff --git a/src/controls/draw.js b/src/controls/draw.js index dd2a5c6aa..4ef6640a3 100644 --- a/src/controls/draw.js +++ b/src/controls/draw.js @@ -5,8 +5,14 @@ import exportToFile from '../utils/exporttofile'; import validate from '../utils/validate'; const Draw = function Draw(options = {}) { + const localization = options.localization; + + function localize(key) { + return localization.getStringByKeys({ targetParentKey: 'draw', targetKey: key }); + } + const { - buttonText = 'Rita', + buttonText = localize('title'), placement = ['menu'], icon = '#fa-pencil', annotation, @@ -21,9 +27,9 @@ const Draw = function Draw(options = {}) { } = options; const drawDefaults = { - layerTitle: 'Ritlager', + layerTitle: localize('drawLayerTitleDefault'), groupName: 'none', - groupTitle: 'Ritlager', + groupTitle: localize('drawGroupTitleDefault'), visible: true, styleByAttribute: true, queryable: false, @@ -105,19 +111,19 @@ const Draw = function Draw(options = {}) { cls: 'margin-small icon-smaller light box-shadow', style: 'border-radius: 3px', icon: '#ic_save_24px', - text: 'Spara' + text: localize('popupSaveButton') }); const cancelButton = Button({ cls: 'margin-small icon-smaller light box-shadow', style: 'border-radius: 3px', icon: '#ic_close_24px', - text: 'Avbryt' + text: localize('popupCancelButton') }); const inputEl = Input({ cls: 'no-margin', - placeholderText: 'Ange popuptext', + placeholderText: localize('popupPlaceholderText'), value: val }); @@ -127,7 +133,7 @@ const Draw = function Draw(options = {}) { }); const modal = Modal({ - title: 'Popuptext', + title: localize('popupTextModalTitle'), contentCmp: modalContent, target: viewer.getId() }); @@ -175,7 +181,7 @@ const Draw = function Draw(options = {}) { const inputEl = Input({ cls: 'margin-right', - placeholderText: 'Ange lagernamn', + placeholderText: localize('layerDialogLayerNamePlaceholder'), value: layerTitle }); @@ -191,7 +197,7 @@ const Draw = function Draw(options = {}) { drawHandler.setActiveLayer(drawLayer); thisForm.dispatch('activeLayerChange', { layername: layerName }); }, - tooltipText: 'Aktivera ritlager', + tooltipText: localize('layerDialogActivateLayerTooltip'), tooltipPlacement: 'west' }); @@ -203,13 +209,13 @@ const Draw = function Draw(options = {}) { cls: 'padding-small icon-smaller round light box-shadow relative o-tooltip', icon: '#ic_delete_24px', async click() { - if (window.confirm('Vill du radera det här ritlagret?') === true) { + if (window.confirm(localize('layerDialogDeleteLayerConfirm')) === true) { await map.removeLayer(drawLayer); modal.closeModal(); thisForm.show(); } }, - tooltipText: 'Radera ritlager', + tooltipText: localize('layerDialogDeleteLayerTooltip'), tooltipPlacement: 'west' }); @@ -223,7 +229,7 @@ const Draw = function Draw(options = {}) { filename: drawLayer.get('title') || 'export' }); }, - tooltipText: 'Ladda ner ritlager', + tooltipText: localize('layerDialogDownloadLayerTooltip'), tooltipPlacement: 'west' }); @@ -240,7 +246,7 @@ const Draw = function Draw(options = {}) { cls: 'icon-smaller light box-shadow', style: 'border-radius: 3px', icon: '#ic_add_24px', - text: 'Nytt ritlager', + text: localize('layerDialogAddLayerButton'), async click() { let title = drawOptions.layerTitle; if (viewer.getLayersByProperty('title', title).length > 0) { @@ -295,15 +301,15 @@ const Draw = function Draw(options = {}) { inputEl.value = null; inputEl.click(); }, - text: 'Importera ritlager', - ariaLabel: 'Importera ritlager' + text: localize('layerDialogImportLayerButton'), + ariaLabel: localize('layerDialogImportLayerButton') }); const okButton = Button({ cls: 'icon-smaller light box-shadow', style: 'border-radius: 3px', icon: '#ic_check_24px', - text: 'OK', + text: localize('layerDialogOkButton'), click() { modal.closeModal(); } @@ -324,7 +330,7 @@ const Draw = function Draw(options = {}) { }); modal = Modal({ - title: 'Ritlager', + title: localize('layerDialogTitle'), contentCmp: modalContent, target: viewer.getId(), style: 'max-width:100%;width:400px;' @@ -344,7 +350,7 @@ const Draw = function Draw(options = {}) { } }, icon: '#ic_place_24px', - tooltipText: 'Punkt', + tooltipText: localize('pointButtonTooltip'), tooltipPlacement: 'south', tooltipStyle: 'bottom:-5px;', state: 'inactive' @@ -360,7 +366,7 @@ const Draw = function Draw(options = {}) { } }, icon: '#ic_timeline_24px', - tooltipText: 'Linje', + tooltipText: localize('lineButtonTooltip'), tooltipPlacement: 'south', tooltipStyle: 'bottom:-5px;' }); @@ -375,7 +381,7 @@ const Draw = function Draw(options = {}) { } }, icon: '#o_polygon_24px', - tooltipText: 'Polygon', + tooltipText: localize('polygonButtonTooltip'), tooltipPlacement: 'south', tooltipStyle: 'bottom:-5px;' }); @@ -390,7 +396,7 @@ const Draw = function Draw(options = {}) { } }, icon: '#ic_title_24px', - tooltipText: 'Text', + tooltipText: localize('textButtonTooltip'), tooltipPlacement: 'south', tooltipStyle: 'bottom:-5px;' }); @@ -404,7 +410,7 @@ const Draw = function Draw(options = {}) { attributeForm.show(); }, icon: '#ic_textsms_24px', - tooltipText: 'Attribut', + tooltipText: localize('attributeButtonTooltip'), tooltipPlacement: 'south', tooltipStyle: 'bottom:-5px;', state: 'disabled' @@ -423,7 +429,7 @@ const Draw = function Draw(options = {}) { } else { this.setState('active'); } }, icon: '#ic_palette_24px', - tooltipText: 'Stil', + tooltipText: localize('styleButtonTooltip'), tooltipPlacement: 'south', tooltipStyle: 'bottom:-5px;' }); @@ -437,7 +443,7 @@ const Draw = function Draw(options = {}) { layerForm.show(); }, icon: '#ic_layers_24px', - tooltipText: 'Lager', + tooltipText: localize('layerButtonTooltip'), tooltipPlacement: 'south', tooltipStyle: 'bottom:-5px;' }); @@ -452,7 +458,7 @@ const Draw = function Draw(options = {}) { thisComponent.dispatch('saveFeatures', true); }, icon: '#ic_save_24px', - tooltipText: 'Spara', + tooltipText: localize('saveButtonTooltip'), tooltipPlacement: 'south', tooltipStyle: 'bottom:-5px;', state: 'disabled' @@ -473,7 +479,7 @@ const Draw = function Draw(options = {}) { }); }, icon: '#ic_download_24px', - tooltipText: 'Ladda ner', + tooltipText: localize('downloadButtonTooltip'), tooltipPlacement: 'south', tooltipStyle: 'bottom:-5px;' }); @@ -488,7 +494,7 @@ const Draw = function Draw(options = {}) { } }, icon: '#ic_delete_24px', - tooltipText: 'Ta bort', + tooltipText: localize('deleteButtonTooltip'), tooltipPlacement: 'south', tooltipStyle: 'bottom:-5px;', state: 'disabled' @@ -505,7 +511,7 @@ const Draw = function Draw(options = {}) { viewer.dispatch('toggleClickInteraction', { name: 'draw', active: false }); }, icon: '#ic_close_24px', - tooltipText: 'Stäng', + tooltipText: localize('closeButtonTooltip'), tooltipPlacement: 'south', tooltipStyle: 'bottom:-5px;' }); @@ -549,7 +555,7 @@ const Draw = function Draw(options = {}) { Text: textButton }; const extraTools = drawOptions.drawTools || []; - drawExtraTools(extraTools, viewer, drawTools); + drawExtraTools({ extraTools, viewer, toolCmps: drawTools, localize }); }, onAdd(evt) { viewer = evt.target; diff --git a/src/controls/draw/drawtools.js b/src/controls/draw/drawtools.js index 93fd2f010..001cdd868 100644 --- a/src/controls/draw/drawtools.js +++ b/src/controls/draw/drawtools.js @@ -3,19 +3,17 @@ import utils from '../../utils'; const createElement = utils.createElement; -let viewer; - -const drawToolsSelector = function drawToolsSelector(extraTools, v, toolCmps) { +const drawToolsSelector = function drawToolsSelector({ extraTools, viewer, toolCmps, localize }) { const toolNames = { - Polygon: 'Polygon', - Point: 'Punkt', - LineString: 'Linje', - box: 'Rektangel', - square: 'Kvadrat', - circle: 'Cirkel', - freehand: 'Frihandsläge' + Polygon: localize('drawPolygon'), + Point: localize('drawPoint'), + LineString: localize('drawLine'), + box: localize('drawBox'), + square: localize('drawSquare'), + circle: localize('drawCircle'), + freehand: localize('drawFreehand') }; - viewer = v; + const drawCmp = viewer.getControlByName('draw'); let drawTools; const map = viewer.getMap(); diff --git a/src/controls/measure.js b/src/controls/measure.js index 69b958198..fcfb87696 100644 --- a/src/controls/measure.js +++ b/src/controls/measure.js @@ -87,11 +87,11 @@ const Measure = function Measure({ if (!drawType || drawType === geomType) { if (geomType === 'Polygon') { point = geometry.getInteriorPoint(); - label = drawStyles.formatArea(geometry, useHectare, projection, 0, localization); + label = drawStyles.formatArea({ polygon: geometry, useHectare, projection, featureArea: 0, localization }); line = new LineString(geometry.getCoordinates()[0]); } else if (geomType === 'LineString') { point = new Point(geometry.getLastCoordinate()); - label = drawStyles.formatLength(geometry, projection, localization); + label = drawStyles.formatLength({ line: geometry, projection, localization }); line = geometry; } } diff --git a/src/loc/en_US.json b/src/loc/en_US.json index fe8490d26..649aea7a4 100644 --- a/src/loc/en_US.json +++ b/src/loc/en_US.json @@ -69,6 +69,42 @@ "portraitAriaLabel": "Portrait", "landscape": "Landscape", "landscapeAriaLabel": "Landscape" + }, + "draw": { + "title": "Draw", + "popupSaveButton": "Save", + "popupCancelButton": "Cancel", + "popupPlaceholderText": "Enter popup text", + "popupTextModalTitle": "Popup text", + "layerDialogLayerNamePlaceholder": "Enter layer name", + "layerDialogActivateLayerTooltip": "Activate layer", + "layerDialogDeleteLayerConfirm": "Delete draw layer?", + "layerDialogDeleteLayerTooltip": "Delete draw layer", + "layerDialogDownloadLayerTooltip": "Download draw layer", + "layerDialogAddLayerButton": "New", + "layerDialogImportLayerButton": "Import", + "layerDialogOkButton": "OK", + "layerDialogTitle": "Draw layers", + "pointButtonTooltip": "Point", + "lineButtonTooltip": "Line", + "polygonButtonTooltip": "Polygon", + "textButtonTooltip": "Text", + "attributeButtonTooltip": "Attributes", + "styleButtonTooltip": "Style", + "layerButtonTooltip": "Layers", + "saveButtonTooltip": "Save", + "downloadButtonTooltip": "Download", + "deleteButtonTooltip": "Delete", + "closeButtonTooltip": "Close", + "drawLayerTitleDefault": "Draw layer", + "drawGroupTitleDefault": "Draw layers", + "drawPolygon": "Polygon", + "drawPoint": "Point", + "drawLine": "Line", + "drawBox": "Rectangle", + "drawSquare": "Square", + "drawCircle": "Circle", + "drawFreehand": "Freehand" } }, "style": { @@ -80,7 +116,35 @@ }, "styleTemplate": { - + "fillColor": "Fill", + "backgroundFillColor": "Background fill", + "opacity": "Opacity", + "strokeWidth": "Line width", + "textSize": "Text size", + "pointSize": "Point size", + "showLengthArea": "Show length/area", + "showSegments": "Show segments", + "stroke": "Line", + "strokeTypeSolid": "Solid line", + "strokeTypeDotted": "Dotted line", + "strokeTypeDashed" : "Dashed line", + "strokeTypeDashedDotted" : "Dash-dotted line", + "dimensions": "Dimensions", + "margins": "Margins", + "rotation": "Rotation", + "degreesRotation": "Degrees", + "marginForText": "Margin", + "frame": "Frame", + "margin": "Margin", + "point": "Point", + "pointTypePoint": "Point", + "pointTypeCircle": "Circle", + "pointTypeX": "X", + "pointTypePlus": "Plus", + "pointTypeStar": "Star", + "pointTypeTriangle": "Triangle", + "pointTypeSquare": "Square", + "pointTypeMarker": "Marker" } } } \ No newline at end of file diff --git a/src/loc/sv_SE.json b/src/loc/sv_SE.json index d35dbd3e0..48a06422e 100644 --- a/src/loc/sv_SE.json +++ b/src/loc/sv_SE.json @@ -69,6 +69,42 @@ "portraitAriaLabel": "Stående", "landscape": "Liggande", "landscapeAriaLabel": "Liggande" + }, + "draw": { + "title": "Rita", + "popupSaveButton": "Spara", + "popupCancelButton": "Avbryt", + "popupPlaceholderText": "Ange popuptext", + "popupTextModalTitle": "Popuptext", + "layerDialogLayerNamePlaceholder": "Ange lagernamn", + "layerDialogActivateLayerTooltip": "Aktivera ritlager", + "layerDialogDeleteLayerConfirm": "Vill du radera det här ritlagret?", + "layerDialogDeleteLayerTooltip": "Radera ritlager", + "layerDialogDownloadLayerTooltip": "Ladda ner ritlager", + "layerDialogAddLayerButton": "Nytt ritlager", + "layerDialogImportLayerButton": "Importera ritlager", + "layerDialogOkButton": "OK", + "layerDialogTitle": "Ritlager", + "pointButtonTooltip": "Punkt", + "lineButtonTooltip": "Linje", + "polygonButtonTooltip": "Polygon", + "textButtonTooltip": "Text", + "attributeButtonTooltip": "Attribut", + "styleButtonTooltip": "Stil", + "layerButtonTooltip": "Lager", + "saveButtonTooltip": "Spara", + "downloadButtonTooltip": "Ladda ner", + "deleteButtonTooltip": "Ta bort", + "closeButtonTooltip": "Stäng", + "drawLayerTitleDefault": "Ritlager", + "drawGroupTitleDefault": "Ritlager", + "drawPolygon": "Polygon", + "drawPoint": "Punkt", + "drawLine": "Linje", + "drawBox": "Rektangel", + "drawSquare": "Fyrkant", + "drawCircle": "Cirkel", + "drawFreehand": "Frihand" } }, @@ -77,11 +113,39 @@ "modifyTooltip": "Dra för att ändra" }, "styleWindow": { - "title": "Configure style" + "title": "Definiera stil" }, "styleTemplate": { - + "fillColor": "Fyllning", + "backgroundFillColor": "Bakgrundsfyllning", + "opacity": "Opacitet", + "strokeWidth": "Linjebredd", + "textSize": "Textstorlek", + "pointSize": "Punktstorlek", + "showLengthArea": "Visa längd/area", + "showSegments": "Visa dellängder", + "stroke": "Linje", + "strokeTypeSolid": "Heldragen linje", + "strokeTypeDotted": "Punktad linje", + "strokeTypeDashed" : "Streckad linje", + "strokeTypeDashedDotted" : "Streck-punkt-linje", + "dimensions": "Mått", + "margins": "Marginaler", + "rotation": "Rotation", + "degreesRotation": "Grader", + "marginForText": "Marginal", + "frame": "Ram", + "margin": "Marginal", + "point": "Punkt", + "pointTypePoint": "Punkt", + "pointTypeCircle": "Cirkel", + "pointTypeX": "Kryss", + "pointTypePlus": "Kors", + "pointTypeStar": "Stjärna", + "pointTypeTriangle": "Tringel", + "pointTypeSquare": "Fyrkant", + "pointTypeMarker": "Markör" } } } \ No newline at end of file diff --git a/src/style/drawstyles.js b/src/style/drawstyles.js index c84fe4313..4df186ca7 100644 --- a/src/style/drawstyles.js +++ b/src/style/drawstyles.js @@ -140,8 +140,8 @@ function createRegularShape(type, pointSize, pointFill, pointStroke, pointRotati return style; } -function formatLength(line, projection, localization) { - const localeNumberFormat = new Intl.NumberFormat(localization.getCurrentLocaleId()); +function formatLength({ line, projection, localization }) { + const localeNumberFormat = localization?.getCurrentLocaleId() ? new Intl.NumberFormat(localization?.getCurrentLocaleId()) : new Intl.NumberFormat(); const length = getLength(line, { projection }); let output; @@ -153,12 +153,10 @@ function formatLength(line, projection, localization) { return output; } -function formatArea(polygon, useHectare, projection, featureArea, localization) { +function formatArea({ polygon, useHectare, projection, featureArea, localization }) { const area = featureArea || getArea(polygon, { projection }); - console.log('area'); - console.log(area); - const localeNumberFormat = new Intl.NumberFormat(localization.getCurrentLocaleId()); + const localeNumberFormat = localization?.getCurrentLocaleId() ? new Intl.NumberFormat(localization?.getCurrentLocaleId()) : new Intl.NumberFormat(); let output; if (area > 10000000) { output = `${localeNumberFormat.format(Math.round((area / 1000000) * 100) / 100)} km\xB2`; @@ -171,7 +169,7 @@ function formatArea(polygon, useHectare, projection, featureArea, localization) } function formatRadius(feat, localization) { - const localeNumberFormat = new Intl.NumberFormat(localization.getCurrentLocaleId()); + const localeNumberFormat = localization?.getCurrentLocaleId() ? new Intl.NumberFormat(localization?.getCurrentLocaleId()) : new Intl.NumberFormat(); let output; const length = feat.getGeometry().getRadius(); if (length > 10000) { @@ -406,7 +404,7 @@ function getSegmentLabelStyle({ line, projection, scale = 1, segmentStyles = [], const style = []; line.forEachSegment((a, b) => { const segment = new LineString([a, b]); - const segmentLabel = formatLength(segment, projection, localization); + const segmentLabel = formatLength({ line: segment, projection, localization }); if (segmentStyles.length - 1 < count) { segmentStyles.push(segmentStyle(scale).clone()); } diff --git a/src/style/styletemplate.js b/src/style/styletemplate.js index da92b8161..44f7c9953 100644 --- a/src/style/styletemplate.js +++ b/src/style/styletemplate.js @@ -1,7 +1,10 @@ -export default function styleTemplate(palette, swStyle) { +export default function styleTemplate({ palette, swStyle, localization }) { + function localize(key) { + return localization.getStringByKeys({ targetParentKey: 'styleTemplate', targetKey: key }); + } const colorArray = palette; - let fillHtml = '
Fyllning
    '; - let backgroundFillHtml = '
    Bakgrundsfyllning
      '; + let fillHtml = `
      ${localize('fillColor')}
        `; + let backgroundFillHtml = `
        ${localize('backgroundFillColor')}
          `; if (!colorArray.includes(swStyle.fillColor)) { colorArray.push(swStyle.fillColor); } @@ -24,7 +27,7 @@ export default function styleTemplate(palette, swStyle) {
          5% - Opacitet + ${localize('opacity')} 100%
        `; @@ -33,12 +36,12 @@ export default function styleTemplate(palette, swStyle) {
        0% - Opacitet + ${localize('opacity')} 100%
      `; - let strokeHtml = '
      Kantlinje
        '; + let strokeHtml = `
        ${localize('stroke')}
          `; for (let i = 0; i < colorArray.length; i += 1) { const checked = colorArray[i] === swStyle.strokeColor ? ' checked=true' : ''; strokeHtml += `
        • @@ -51,7 +54,7 @@ export default function styleTemplate(palette, swStyle) {
          5% - Opacitet + ${localize('opacity')} 100%
        @@ -59,20 +62,20 @@ export default function styleTemplate(palette, swStyle) {
        1px - Linjebredd + ${localize('strokeWidth')} 10px
      `; - let backgroundStrokeHtml = '
      Bakgrundsram
        '; + let backgroundStrokeHtml = `
        ${localize('frame')}
          `; for (let i = 0; i < colorArray.length; i += 1) { const checked = colorArray[i] === swStyle.backgroundStrokeColor ? ' checked=true' : ''; backgroundStrokeHtml += `
        • @@ -85,7 +88,7 @@ export default function styleTemplate(palette, swStyle) {
          0% - Opacitet + ${localize('opacity')} 100%
        @@ -93,36 +96,36 @@ export default function styleTemplate(palette, swStyle) {
        1px - Linjebredd + ${localize('strokeWidth')} 10px
      `; - const pointHtml = `
      Punkt
      + const pointHtml = `
      ${localize('point')}
      1px - Punktstorlek + ${localize('pointSize')} 50px
      `; @@ -130,7 +133,7 @@ export default function styleTemplate(palette, swStyle) {
      8px - Textstorlek + ${localize('textSize')} 128px
      @@ -138,31 +141,31 @@ export default function styleTemplate(palette, swStyle) {
      `; - const measureHtml = `
      Mått
      + const measureHtml = `
      ${localize('dimensions')}
      - +
      - +
      `; - const rotateHtml = `
      Rotation
      + const rotateHtml = `
      ${localize('rotation')}
      0° - Graders rotation + ${localize('degreesRotation')} 360°
      `; - const paddingHtml = `
      Marginaler
      + const paddingHtml = `
      ${localize('margins')}
      0px - Marginal till text + ${localize('marginForText')} 30px
      `; diff --git a/src/style/stylewindow.js b/src/style/stylewindow.js index 1597d5069..d69a2bddf 100644 --- a/src/style/stylewindow.js +++ b/src/style/stylewindow.js @@ -12,8 +12,13 @@ import { Component, Button, Element, dom } from '../ui'; import formatLengthString from '../utils/formatlengthstring'; const Stylewindow = function Stylewindow(optOptions = {}) { + const { localization } = optOptions; + function localize(key) { + return localization.getStringByKeys({ targetParentKey: 'styleWindow', targetKey: key }); + } + const { - title = 'Anpassa stil', + title = localize('title'), cls = 'control overflow-hidden hidden', css = '', viewer, @@ -384,11 +389,11 @@ const Stylewindow = function Stylewindow(optOptions = {}) { stroke }); if (newStyleObj.showMeasureSegments) { - const segmentLabelStyle = drawStyles.getSegmentLabelStyle({ line: geom, projection, scale: styleScale }); + const segmentLabelStyle = drawStyles.getSegmentLabelStyle({ line: geom, projection, scale: styleScale, localization }); style = style.concat(segmentLabelStyle); } if (newStyleObj.showMeasure) { - const label = drawStyles.formatLength(geom, projection); + const label = drawStyles.formatLength({ line: geom, projection, localization }); const point = new Point(geom.getLastCoordinate()); const labelStyle = drawStyles.getLabelStyle(styleScale); labelStyle.setGeometry(point); @@ -404,7 +409,7 @@ const Stylewindow = function Stylewindow(optOptions = {}) { const featureCoords = feature.getGeometry().getCoordinates(); featureCoords.forEach(part => { const line = new LineString(part); - const segmentLabelStyle = drawStyles.getSegmentLabelStyle({ line, projection, scale: styleScale }); + const segmentLabelStyle = drawStyles.getSegmentLabelStyle({ line, projection, scale: styleScale, localization }); style = style.concat(segmentLabelStyle); }); } @@ -412,7 +417,7 @@ const Stylewindow = function Stylewindow(optOptions = {}) { const featureCoords = feature.getGeometry().getCoordinates(); featureCoords.forEach(part => { const line = new LineString(part); - const label = drawStyles.formatLength(line, projection); + const label = drawStyles.formatLength({ line, projection, localization }); const point = new Point(line.getLastCoordinate()); const labelStyle = drawStyles.getLabelStyle(styleScale); labelStyle.setGeometry(point); @@ -429,14 +434,14 @@ const Stylewindow = function Stylewindow(optOptions = {}) { if (newStyleObj.showMeasureSegments) { const radius = geom.getRadius(); const circ = radius * 2 * Math.PI; - const label = formatLengthString(circ, { decimals: 2 }); + const label = formatLengthString(circ, { decimals: 2, localization }); const labelStyle = drawStyles.getBufferLabelStyle(label, styleScale); style = style.concat(labelStyle); } if (newStyleObj.showMeasure) { const radius = geom.getRadius(); const area = radius * radius * Math.PI; - const label = drawStyles.formatArea(undefined, true, projection, area); + const label = drawStyles.formatArea({ useHectare: true, projection, featureArea: area, localization }); const point = new Point(geom.getCenter()); const labelStyle = drawStyles.getLabelStyle(styleScale); labelStyle.setGeometry(point); @@ -451,11 +456,11 @@ const Stylewindow = function Stylewindow(optOptions = {}) { }); if (newStyleObj.showMeasureSegments) { const line = new LineString(geom.getCoordinates()[0]); - const segmentLabelStyle = drawStyles.getSegmentLabelStyle({ line, projection, scale: styleScale }); + const segmentLabelStyle = drawStyles.getSegmentLabelStyle({ line, projection, scale: styleScale, localization }); style = style.concat(segmentLabelStyle); } if (newStyleObj.showMeasure) { - const label = drawStyles.formatArea(geom, true, projection); + const label = drawStyles.formatArea({ polygon: geom, useHectare: true, projection, localization }); const point = geom.getInteriorPoint(); const labelStyle = drawStyles.getLabelStyle(styleScale); labelStyle.setGeometry(point); @@ -482,7 +487,7 @@ const Stylewindow = function Stylewindow(optOptions = {}) { const featureCoords = feature.getGeometry().getCoordinates(); featureCoords.forEach(parts => { const polygon = new Polygon(parts); - const label = drawStyles.formatArea(polygon, true, projection); + const label = drawStyles.formatArea({ polygon, useHectare: true, projection, localization }); const point = polygon.getInteriorPoint(); const labelStyle = drawStyles.getLabelStyle(styleScale); labelStyle.setGeometry(point); @@ -719,7 +724,7 @@ const Stylewindow = function Stylewindow(optOptions = {}) { contentEl = Element({ cls: 'o-draw-stylewindow-content overflow-auto', - innerHTML: `${styleTemplate(palette, swStyle)}` + innerHTML: `${styleTemplate({ palette, swStyle, localization })}` }); this.addComponent(headerEl); diff --git a/src/utils/formatlengthstring.js b/src/utils/formatlengthstring.js index 616898f73..7a33dcaf1 100644 --- a/src/utils/formatlengthstring.js +++ b/src/utils/formatlengthstring.js @@ -5,7 +5,8 @@ */ function formatLengthString(length, opts = {}) { const { - decimals + decimals, + localization } = opts; let result = length; let unit = 'm'; @@ -16,6 +17,8 @@ function formatLengthString(length, opts = {}) { if (decimals !== undefined) { result = result.toFixed(decimals); + const localeNumberFormat = new Intl.NumberFormat(localization?.getCurrentLocaleId()); + result = localeNumberFormat.format(result); } const retstr = `${result} ${unit}`; return retstr; diff --git a/src/viewer.js b/src/viewer.js index 0414a9986..b77826728 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -567,7 +567,7 @@ const Viewer = function Viewer(targetOption, options = {}) { })); tileGrid = maputils.tileGrid(tileGridSettings); - stylewindow = Stylewindow({ palette, viewer: this }); + stylewindow = Stylewindow({ palette, viewer: this, localization: controls.find((control) => control.name === 'localization') }); setMap(Map(Object.assign(options, { projection, center, zoom, target: this.getId() })));