diff --git a/origo.js b/origo.js index 7a72cfcaf..9c16f6277 100644 --- a/origo.js +++ b/origo.js @@ -50,6 +50,7 @@ const Origo = function Origo(configPath, options = {}) { }, breakPointsPrefix: 'o-media', defaultControls: [ + { name: 'localization' }, { name: 'scaleline' }, { name: 'zoom' }, { name: 'rotate' }, @@ -67,10 +68,30 @@ const Origo = function Origo(configPath, options = {}) { const initControls = (controlDefs) => { const controls = []; + const locControlDefs = controlDefs.shift(); // Localization is first of the defaultControls; + + if (!(locControlDefs.options)) { + locControlDefs.options = { + localeId: 'sv-SE' + }; + } + + // a potential loc query param for Localization needs to be set + const localizationComponent = origoControls.Localization(locControlDefs.options); + localizationComponent.options = locControlDefs.options; + + const searchParams = new URLSearchParams(window.location.search); + if (searchParams.has('loc')) { + const localization = searchParams.get('loc'); + localizationComponent.setLocale(localization); + } + controls.push(localizationComponent); + controlDefs.forEach((def) => { if ('name' in def) { const controlName = titleCase(def.name); const controlOptions = def.options || {}; + controlOptions.localization = localizationComponent; if (controlName in origoControls) { const control = origoControls[controlName](controlOptions); control.options = Object.assign(control.options || {}, controlOptions); diff --git a/scss/_localization.scss b/scss/_localization.scss new file mode 100644 index 000000000..9cdd6cd86 --- /dev/null +++ b/scss/_localization.scss @@ -0,0 +1,3 @@ +.localization-selected { + background-color: #d0e9ff +} diff --git a/scss/origo.scss b/scss/origo.scss index 3b2003b57..2d53f2426 100644 --- a/scss/origo.scss +++ b/scss/origo.scss @@ -50,6 +50,7 @@ @import 'embedded-overlay'; @import 'spinner'; @import 'logger'; + @import 'localization'; } html, diff --git a/scss/ui/helpers/_padding.scss b/scss/ui/helpers/_padding.scss index 5fc65b6f4..7b57e9dbc 100644 --- a/scss/ui/helpers/_padding.scss +++ b/scss/ui/helpers/_padding.scss @@ -60,6 +60,37 @@ padding-top: $padding-large; } +// larger padding +.padding-larger { + padding: $padding-larger; +} + +.padding-top-larger { + padding-top: $padding-larger; +} + +.padding-right-larger { + padding-right: $padding-larger; +} + +.padding-bottom-larger { + padding-bottom: $padding-larger; +} + +.padding-left-larger { + padding-left: $padding-larger; +} + +.padding-x-larger { + padding-left: $padding-larger; + padding-right: $padding-larger; +} + +.padding-y-larger { + padding-bottom: $padding-larger; + padding-top: $padding-larger; +} + // small padding .padding-small { padding: $padding-small; diff --git a/src/controls.js b/src/controls.js index 590bb335d..e3ce402a9 100644 --- a/src/controls.js +++ b/src/controls.js @@ -23,3 +23,4 @@ export { default as Splash } from './controls/splash'; export { default as Zoom } from './controls/zoom'; export { default as Externalurl } from './controls/externalurl'; export { default as Scalepicker } from './controls/scalepicker'; +export { default as Localization } from './controls/localization'; diff --git a/src/controls/localization.js b/src/controls/localization.js new file mode 100644 index 000000000..3eaa1eda9 --- /dev/null +++ b/src/controls/localization.js @@ -0,0 +1,287 @@ +import enLocale from '../loc/en_US.json'; +import svLocale from '../loc/sv_SE.json'; +import { Component, Button, Element, Collapse } from '../ui'; + +const Localization = function Localization(options = {}) { + const { + localeId, // name of an existing locale imported above + fallbackLocaleId = 'sv-SE', + showLocMenu = false + } = options; + + let localizationMenu; + let viewer; + let locMenuId; + + let currentLocaleId = localeId || fallbackLocaleId; + + const locales = { + 'en-US': enLocale, + 'sv-SE': svLocale + }; + + function getLocaleExists(locId) { + return Object.hasOwn(locales, locId); + } + function getStoredLocales() { + return JSON.parse(localStorage.getItem('origoAddedLocales') || '[]'); + } + + const storedLocales = getStoredLocales(); + + // if there are local-stored locales at startup then add these locally + if (storedLocales.length > 0) { + storedLocales.forEach(locale => { + locales[locale.id] = locale; + }); + } + + // if there is an origoSelectedLocale locale specification in local storage then use that + const origoSelectedLocale = localStorage.getItem('origoSelectedLocale'); + if (origoSelectedLocale) { + if (getLocaleExists(origoSelectedLocale)) { + currentLocaleId = origoSelectedLocale; + } + } + + function setStoredLocales(localLocales) { + localStorage.setItem('origoAddedLocales', JSON.stringify(localLocales)); + } + + function drawLocMenu(redraw = false) { + if (redraw) { + document.getElementById(locMenuId).remove(); + } + const mapMenu = viewer.getControlByName('mapmenu'); + // eslint-disable-next-line no-use-before-define + localizationMenu = createLocalizationMenu(); + mapMenu.appendMenuItem(localizationMenu); + localizationMenu.onRender(); + locMenuId = localizationMenu.getId(); + } + + /** + * Adds an array of locales to the locales object and stores them in localStorage. + * + * @param {Array} locs - An array of locale objects to be added. Defaults to an empty array if not provided. + * If a locale id matches a current locale then the current locale will be overwritten. + * @return {boolean} True if locales were added, false otherwise. + */ + function addLocales(locs = []) { + if (locs.length > 0) { + locs.forEach(locale => { // replace if locale already appears to exist (id) + locales[locale.id] = locale; + const matchedLocaleIndex = storedLocales.findIndex(storedLocale => storedLocale.id === locale.id); + if (matchedLocaleIndex > -1) { + storedLocales[matchedLocaleIndex] = locale; + } else storedLocales.push(locale); + }); + setStoredLocales(storedLocales); + drawLocMenu(true); + localizationMenu.expand(); // to illustrate that there's a new locale available, expand the localization menu + return true; + } + return false; + } + + function getLocale(locId = currentLocaleId) { + if (Object.hasOwn(locales, locId)) { + return locales[locId]; + } return false; + } + + function getCurrentLocaleId() { + return currentLocaleId; + } + + // setLocale only changes currentLocaleId if the proposed locale exists and if origoSelectedLocale is not already in local storage. + function setLocale(locId) { + if (getLocaleExists(locId)) { + if (!origoSelectedLocale) { + currentLocaleId = locId; + return true; + } + } return false; + } + + /** + * Adds a new plugin language object to the specified existing locale. + * + * @param {string} locId - The ID of the locale to add the plugin to. + * @param {object} additionObj - The plugin language object to add to the locale. + * @return {boolean} True if the plugin language object was added, false otherwise. + */ + function addPluginToLocale(locId, additionObj) { + if (getLocaleExists(locId)) { + locales[locId].plugins = { ...locales[locId].plugins, ...additionObj }; + return true; + } return false; + } + + const recursiveSearch = ({ obj, objName = undefined, targetParentKey = undefined, targetKey }) => { + if (obj === null || obj === undefined) { + return undefined; + } + let result; + const keys = Object.keys(obj); + for (let i = 0; i < keys.length; i += 1) { + const key = keys[i]; + // base case + if ((key === targetKey) && ((targetParentKey === undefined) || (objName === targetParentKey))) { + result = obj[key]; + break; + } + + // recursive case + const value = obj[key]; + if (typeof value === 'object') { + result = recursiveSearch({ obj: value, objName: key, targetParentKey, targetKey }); + if (result !== undefined) { + break; + } + } + // case leaf that doesn't match, next key of the current object.. (iteration in the for-loop) + } + return result; + }; + + function getStringByKeys({ targetParentKey, targetKey }) { + // first call of recursiveSearch may have a targetParentKey and won't have an objName since the top level of the json object + let result = recursiveSearch({ obj: getLocale(currentLocaleId), targetParentKey, targetKey }); + if (!(result) && (localeId !== fallbackLocaleId)) { + result = recursiveSearch({ obj: getLocale(fallbackLocaleId), targetParentKey, targetKey }); + } + return result; + } + + // UI bits start -----> + + function createCollapseHeader() { + const headerButton = Button({ + cls: 'icon-smaller compact no-grow o-tooltip', + icon: '#ic_chevron_right_24px', + iconCls: 'rotate' + }); + + const headerTitleCmp = Component({ + render() { // the title of the dropdown needs localization too + return `
${getStringByKeys({ targetKey: 'menuTitle' })}
`; + } + }); + + return Component({ + onRender() { + const el = document.getElementById(this.getId()); + el.addEventListener('click', () => { + const customEvt = new CustomEvent('collapse:toggle', { + bubbles: true + }); + el.blur(); + el.dispatchEvent(customEvt); + }); + }, + render() { + return `
  • + ${headerButton.render()} + ${headerTitleCmp.render()} +
    • `; + } + }); + } + + function createLocItem(loc) { + let locTextCmpClasses = 'grow padding-left-larger'; + if (loc.id === currentLocaleId) { + locTextCmpClasses = `${locTextCmpClasses} localization-selected`; + } + const locTextCmp = Element({ + cls: locTextCmpClasses, + innerHTML: loc.title, + attributes: { + data: { + locale: loc.id + } + } + }); + + return Component({ + onRender() { + const el = document.getElementById(this.getId()); + el.addEventListener('click', () => { + if (loc.id === currentLocaleId) return; + localStorage.setItem('origoSelectedLocale', loc.id); + const newUrl = new URL(window.location.href); + newUrl.searchParams.set('loc', el.firstElementChild.dataset.locale); + window.location.href = newUrl.href; + }); + }, + render() { + const classString = 'class="flex row align-center padding-x padding-y-smaller hover pointer'; + return `
  • + ${locTextCmp.render()} +
    • `; + } + }); + } + + function createCollapseContent() { + return Component({ + onInit() { + Object.keys(locales).forEach(loc => { + this.addComponent(createLocItem(locales[loc])); + }); + }, + renderItems() { + let linkItems = ''; + this.getComponents().forEach(contentCmp => { + linkItems += contentCmp.render(); + }); + return linkItems; + }, + render() { + return ``; + }, + onRender() { + this.dispatch('render'); + } + }); + } + + function createLocalizationMenu() { + return Collapse({ + headerComponent: createCollapseHeader(), + contentComponent: createCollapseContent(), + collapseX: false, + contentStyle: 'max-height: 300px; overflow-y: auto' + }); + } + + // ------ UI bits end --/ + + return Component({ + name: 'localization', + getLocaleExists, + getLocale, + getStringByKeys, + getCurrentLocaleId, + addLocales, + setLocale, + addPluginToLocale, + + onAdd(evt) { + viewer = evt.target; + if (showLocMenu) { + drawLocMenu(); + } + }, + onInit() { + + }, + render() { + this.dispatch('render'); + } + }); +}; +export default Localization; diff --git a/src/controls/measure.js b/src/controls/measure.js index 0d91c355e..69b958198 100644 --- a/src/controls/measure.js +++ b/src/controls/measure.js @@ -24,7 +24,8 @@ const Measure = function Measure({ snapIsActive = true, snapLayers, snapRadius = 15, - highlightColor + highlightColor, + localization } = {}) { let map; let activeButton; @@ -67,11 +68,15 @@ const Measure = function Measure({ let projection; const tipStyle = drawStyles.tipStyle; - const modifyStyle = drawStyles.modifyStyle; + const modifyStyle = drawStyles.modifyStyle(localization); const measureStyle = drawStyles.measureStyle; const source = new VectorSource(); const modify = new Modify({ source, style: modifyStyle }); + function localize(key) { + return localization.getStringByKeys({ targetParentKey: 'measure', targetKey: key }); + } + function styleFunction(feature, segments, drawType, tip) { const styleScale = feature.get('styleScale') || 1; const labelStyle = drawStyles.getLabelStyle(styleScale); @@ -82,16 +87,16 @@ const Measure = function Measure({ if (!drawType || drawType === geomType) { if (geomType === 'Polygon') { point = geometry.getInteriorPoint(); - label = drawStyles.formatArea(geometry, useHectare, projection); + label = drawStyles.formatArea(geometry, useHectare, projection, 0, localization); line = new LineString(geometry.getCoordinates()[0]); } else if (geomType === 'LineString') { point = new Point(geometry.getLastCoordinate()); - label = drawStyles.formatLength(geometry, projection); + label = drawStyles.formatLength(geometry, projection, localization); line = geometry; } } if (segments && line) { - const segmentLabelStyle = drawStyles.getSegmentLabelStyle(line, projection); + const segmentLabelStyle = drawStyles.getSegmentLabelStyle({ line, projection, localization }); styles = styles.concat(segmentLabelStyle); } if (label !== '0 m²') { @@ -190,7 +195,7 @@ const Measure = function Measure({ const styleScale = feature.get('styleScale') || 1; const featureStyle = drawStyles.getLabelStyle(styleScale); feature.setStyle(featureStyle); - feature.getStyle().getText().setText('Hämtar höjd...'); + feature.getStyle().getText().setText(localize('fetchingElevation')); fetch(url).then(response => response.json({ cache: false @@ -209,7 +214,7 @@ const Measure = function Measure({ const bufferCircle = new Circle(pointCenter, bufferSize); feature.setStyle((feat) => { - const [styleColl, ...styles] = drawStyles.bufferStyleFunction(feat, highlightColor); + const [styleColl, ...styles] = drawStyles.bufferStyleFunction(feat, highlightColor, localization); return [...styleColl, ...styles]; }); feature.setGeometry(bufferCircle); @@ -233,10 +238,11 @@ const Measure = function Measure({ } function createRadiusModal(feature) { - const title = 'Ange buffert i meter (ex 1000):'; + const title = localize('bufferModalTitle'); + const ok = localize('bufferModalOkButton'); const content = `
    - +
    `; const modal = Modal({ title, @@ -342,7 +348,7 @@ const Measure = function Measure({ function addInteraction() { const drawType = type || 'LineString'; const activeTip = ''; - const idleTip = 'Klicka för att börja mäta'; + const idleTip = localize('startMeasureTooltip'); let tip = idleTip; measure = new Draw({ source, @@ -689,7 +695,7 @@ const Measure = function Measure({ addNode(); }, icon: '#ic_add_24px', - tooltipText: 'Lägg till punkt', + tooltipText: localize('addNodeTooltip'), tooltipPlacement: 'east' }); buttons.push(addNodeButton); @@ -708,7 +714,7 @@ const Measure = function Measure({ measure.getOverlay().changed(); }, icon: '#ic_linear_scale_24px', - tooltipText: 'Visa delsträckor', + tooltipText: localize('showSectionsTooltip'), tooltipPlacement: 'east' }); buttons.push(showSegmentLabelButton); @@ -749,7 +755,7 @@ const Measure = function Measure({ toggleMeasure(); }, icon: '#ic_straighten_24px', - tooltipText: 'Mäta', + tooltipText: localize('mainButtonTooltip'), tooltipPlacement: 'east' }); buttons.push(measureButton); @@ -763,7 +769,7 @@ const Measure = function Measure({ }, data: { tool: 'length' }, icon: '#ic_timeline_24px', - tooltipText: 'Längd', + tooltipText: localize('lengthTooltip'), tooltipPlacement: 'east' }); buttons.push(lengthToolButton); @@ -779,7 +785,7 @@ const Measure = function Measure({ }, data: { tool: 'area' }, icon: '#o_polygon_24px', - tooltipText: 'Yta', + tooltipText: localize('areaTooltip'), tooltipPlacement: 'east' }); buttons.push(areaToolButton); @@ -794,7 +800,7 @@ const Measure = function Measure({ }, data: { tool: 'elevation' }, icon: '#ic_height_24px', - tooltipText: 'Höjd', + tooltipText: localize('elevationTooltip'), tooltipPlacement: 'east' }); buttons.push(elevationToolButton); @@ -809,7 +815,7 @@ const Measure = function Measure({ }, data: { tool: 'buffer' }, icon: '#ic_adjust_24px', - tooltipText: 'Buffer', + tooltipText: localize('bufferTooltip'), tooltipPlacement: 'east' }); buttons.push(bufferToolButton); @@ -835,7 +841,7 @@ const Measure = function Measure({ undoLastPoint(); }, icon: '#ic_undo_24px', - tooltipText: 'Ångra', + tooltipText: localize('undoTooltip'), tooltipPlacement: 'east' }); buttons.push(undoButton); @@ -847,7 +853,7 @@ const Measure = function Measure({ viewer.removeOverlays(overlayArray); }, icon: '#ic_delete_24px', - tooltipText: 'Rensa', + tooltipText: localize('clearTooltip'), tooltipPlacement: 'east' }); buttons.push(clearButton); @@ -862,7 +868,7 @@ const Measure = function Measure({ toggleSnap(); }, icon: '#fa-magnet', - tooltipText: 'Snappning', + tooltipText: localize('snapTooltip'), tooltipPlacement: 'east' }); buttons.push(toggleSnapButton); diff --git a/src/controls/print/custom-size-control.js b/src/controls/print/custom-size-control.js index b11c76c8a..ff2a7c0ba 100644 --- a/src/controls/print/custom-size-control.js +++ b/src/controls/print/custom-size-control.js @@ -5,7 +5,8 @@ export default function CustomSizeControl(options = {}) { minHeight, maxHeight, minWidth, - maxWidth + maxWidth, + localize } = options; let { @@ -27,7 +28,7 @@ export default function CustomSizeControl(options = {}) { minValue: minHeight, style: { width: '100%' }, unit: 'mm', - label: 'Höjd' + label: localize('height') }); rangeWidthComponent = InputRange({ cls: '', @@ -36,7 +37,7 @@ export default function CustomSizeControl(options = {}) { minValue: minWidth, style: { width: '100%' }, unit: 'mm', - label: 'Bredd' + label: localize('width') }); this.addComponents([rangeHeightComponent, rangeWidthComponent]); rangeHeightComponent.on('change', this.onChangeHeight.bind(this)); diff --git a/src/controls/print/description-control.js b/src/controls/print/description-control.js index a621890e2..5e7485875 100644 --- a/src/controls/print/description-control.js +++ b/src/controls/print/description-control.js @@ -5,7 +5,8 @@ export default function DescriptionControl(options = {}) { description, descriptionPlaceholderText, descriptionAlignment, - descriptionSizes + descriptionSizes, + localize } = options; let { @@ -44,24 +45,24 @@ export default function DescriptionControl(options = {}) { }); alignLeftComponent = Button({ cls: 'grow light text-smaller', - text: 'Vänster', + text: localize('descriptionAlignLeft'), state: descriptionAlignment === 'left' ? 'active' : 'initial', style: { width: '34%' }, - ariaLabel: 'Text till vänster' + ariaLabel: localize('descriptionAlignLeftAriaLabel') }); alignCenterComponent = Button({ cls: 'grow light text-smaller', - text: 'Mitten', + text: localize('descriptionAlignCenter'), state: descriptionAlignment === 'center' ? 'active' : 'initial', style: { width: '34%' }, - ariaLabel: 'Text till mitten' + ariaLabel: localize('descriptionAlignCenterAriaLabel') }); alignRightComponent = Button({ cls: 'grow light text-smaller', - text: 'Höger', + text: localize('descriptionAlignRight'), state: descriptionAlignment === 'right' ? 'active' : 'initial', style: { width: '33%' }, - ariaLabel: 'Text till höger' + ariaLabel: localize('descriptionAlignRightAriaLabel') }); alignButtons = [alignLeftComponent, alignCenterComponent, alignRightComponent]; alignControl = ToggleGroup({ @@ -75,7 +76,7 @@ export default function DescriptionControl(options = {}) { contentCls: 'bg-grey-lighter text-smallest rounded', buttonCls: 'bg-white border text-black', buttonIconCls: 'black', - ariaLabel: 'Storlek på titel' + ariaLabel: localize('descriptionSizeAriaLabel') }); this.addComponents([textareaDescription, formatButton, alignControl, selectSize]); @@ -120,7 +121,7 @@ export default function DescriptionControl(options = {}) { render() { return `
    -
    Beskrivning
    +
    ${localize('description')}
    ${textareaDescription.render()} @@ -131,11 +132,11 @@ export default function DescriptionControl(options = {}) {
    -
    Justering beskrivning
    +
    ${localize('descriptionAlignment')}
    ${alignControl.render()}
    -
    Storlek beskrivning
    +
    ${localize('descriptionSize')}
    ${selectSize.render()}
    diff --git a/src/controls/print/index.js b/src/controls/print/index.js index 538cb2e3e..e593682ff 100644 --- a/src/controls/print/index.js +++ b/src/controls/print/index.js @@ -2,21 +2,29 @@ import { Component, Element as El, Button, dom } from '../../ui'; import PrintComponent from './print-component'; const Print = function Print(options = {}) { + const { + localization + } = options; + + function localize(key) { + return localization.getStringByKeys({ targetParentKey: 'print', targetKey: key }); + } + const { icon = '#ic_print_24px', placement = ['menu'], logo = {}, northArrow = {}, printLegend = {}, - title = 'Skriv ut', + title = localize('title'), headerText = '', - headerPlaceholderText = 'Här kan du skriva en titel', + headerPlaceholderText = localize('headerPlaceholderText'), headerAlignment = 'center', headerSizes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'], headerSize = 'h4', headerFormatIsVisible = false, descriptionText = '', - descriptionPlaceholderText = 'Här kan du skriva en beskrivning', + descriptionPlaceholderText = localize('descriptionPlaceholderText'), descriptionAlignment = 'center', descriptionSizes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'], descriptionSize = 'h4', @@ -33,9 +41,9 @@ const Print = function Print(options = {}) { sizeCustomMaxWidth = 420, orientation = 'portrait', resolutions = [ - { label: 'Låg', value: 75 }, - { label: 'Mellan', value: 150 }, - { label: 'Hög', value: 300 } + { label: localize('resolutionLabelLow'), value: 75 }, + { label: localize('resolutionLabelMedium'), value: 150 }, + { label: localize('resolutionLabelHigh'), value: 300 } ], resolution = 150, scales = [], @@ -124,7 +132,9 @@ const Print = function Print(options = {}) { leftFooterText, mapInteractionsActive, supressResolutionsRecalculation, - suppressNewDPIMethod + suppressNewDPIMethod, + localize, + localeId: localization.getCurrentLocaleId() }); if (placement.indexOf('screen') > -1) { mapTools = `${viewer.getMain().getMapTools().getId()}`; diff --git a/src/controls/print/orientation-control.js b/src/controls/print/orientation-control.js index 0c8add620..2641c6f87 100644 --- a/src/controls/print/orientation-control.js +++ b/src/controls/print/orientation-control.js @@ -1,17 +1,17 @@ import { Button, ToggleGroup } from '../../ui'; -export default function OrientaionControl({ orientation }) { +export default function OrientaionControl({ orientation, localize }) { const portraitButton = Button({ cls: 'grow light text-smaller padding-left-large', - text: 'Stående', + text: localize('portrait'), state: orientation === 'portrait' ? 'active' : 'initial', - ariaLabel: 'Stående' + ariaLabel: localize('portraitAriaLabel') }); const landscapeButton = Button({ cls: 'grow light text-smaller padding-right-large', - text: 'Liggande', + text: localize('landscape'), state: orientation === 'landscape' ? 'active' : 'initial', - ariaLabel: 'Liggande' + ariaLabel: localize('landscapeAriaLabel') }); const orientationControl = ToggleGroup({ cls: 'flex rounded bg-inverted border', diff --git a/src/controls/print/print-component.js b/src/controls/print/print-component.js index 54a3d6779..91d7729c1 100644 --- a/src/controls/print/print-component.js +++ b/src/controls/print/print-component.js @@ -51,7 +51,9 @@ const PrintComponent = function PrintComponent(options = {}) { mapInteractionsActive, supressResolutionsRecalculation, suppressNewDPIMethod, - settingsExpanded + settingsExpanded, + localize, + localeId } = options; let { @@ -226,7 +228,7 @@ const PrintComponent = function PrintComponent(options = {}) { }; const created = function created() { - return showCreated ? `${createdPrefix}${today.toLocaleDateString()} ${today.toLocaleTimeString()}` : ''; + return showCreated ? `${createdPrefix}${today.toLocaleDateString(localeId)} ${today.toLocaleTimeString(localeId)}` : ''; }; const titleComponent = Component({ @@ -334,11 +336,14 @@ const PrintComponent = function PrintComponent(options = {}) { showPrintLegend, rotation, rotationStep, - viewerResolutions: originalResolutions + viewerResolutions: originalResolutions, + localize }); - const printInteractionToggle = PrintInteractionToggle({ map, target, mapInteractionsActive, pageSettings: viewer.getViewerOptions().pageSettings }); + const printInteractionToggle = PrintInteractionToggle({ map, target, mapInteractionsActive, pageSettings: viewer.getViewerOptions().pageSettings, localize }); - const printToolbar = PrintToolbar(); + const printToolbar = PrintToolbar({ + localize + }); let mapLoadListenRefs; diff --git a/src/controls/print/print-interaction-toggle.js b/src/controls/print/print-interaction-toggle.js index d737b5995..6dc10353f 100644 --- a/src/controls/print/print-interaction-toggle.js +++ b/src/controls/print/print-interaction-toggle.js @@ -9,7 +9,8 @@ export default function PrintInteractionToggle(options = {}) { target, toggleIcon = '#ic_map_24px', mapInteractionsActive, - pageSettings + pageSettings, + localize } = options; const interactions = mapInteractions({ target, mapInteractions: pageSettings && pageSettings.mapInteractions ? pageSettings.mapInteractions : {} }); @@ -45,7 +46,7 @@ export default function PrintInteractionToggle(options = {}) { mapInteractionToggleButton = Button({ cls: 'padding-small icon-smaller round light box-shadow', icon: toggleIcon, - tooltipText: 'Ändra kartans läge', + tooltipText: localize('mapInteractionButtonTooltip'), tooltipPlacement: 'east', state: 'active', validStates: ['initial', 'active'], diff --git a/src/controls/print/print-settings.js b/src/controls/print/print-settings.js index 8cbb4cfd4..58d840ff6 100644 --- a/src/controls/print/print-settings.js +++ b/src/controls/print/print-settings.js @@ -51,7 +51,8 @@ const PrintSettings = function PrintSettings(options = {}) { showNorthArrow, showPrintLegend, rotation, - rotationStep + rotationStep, + localize } = options; let headerComponent; @@ -116,7 +117,7 @@ const PrintSettings = function PrintSettings(options = {}) { openButton = Button({ cls: 'padding-small icon-smaller round light box-shadow', icon: openIcon, - tooltipText: 'Visa inställningar', + tooltipText: localize('settingsButtonTooltip'), tooltipPlacement: 'east', state: settingsExpanded === true ? 'hidden' : 'initial', validStates: ['initial', 'hidden'], @@ -129,7 +130,7 @@ const PrintSettings = function PrintSettings(options = {}) { icon: closeIcon, state: settingsExpanded === true ? 'initial' : 'hidden', validStates: ['initial', 'hidden'], - ariaLabel: 'Stäng', + ariaLabel: localize('closeButtonAriaLabel'), click() { toggle(); } @@ -140,10 +141,11 @@ const PrintSettings = function PrintSettings(options = {}) { components: [openButton, closeButton] }); - const orientationControl = OrientationControl({ orientation }); + const orientationControl = OrientationControl({ orientation, localize }); const sizeControl = SizeControl({ initialSize: size, - sizes: Object.keys(sizes) + sizes: Object.keys(sizes), + localize }); const titleControl = TitleControl({ title, @@ -151,7 +153,8 @@ const PrintSettings = function PrintSettings(options = {}) { titleAlignment, titleSizes, titleSize, - titleFormatIsVisible + titleFormatIsVisible, + localize }); const descriptionControl = DescriptionControl({ description, @@ -159,7 +162,8 @@ const PrintSettings = function PrintSettings(options = {}) { descriptionAlignment, descriptionSizes, descriptionSize, - descriptionFormatIsVisible + descriptionFormatIsVisible, + localize }); const marginControl = MarginControl({ checked: showMargins }); const createdControl = CreatedControl({ checked: showCreated }); @@ -170,7 +174,7 @@ const PrintSettings = function PrintSettings(options = {}) { const showScaleControl = ShowScaleControl({ checked: showScale }); northArrowControl = NorthArrowControl({ showNorthArrow }); printLegendControl = PrintLegendControl({ showPrintLegend }); - rotationControl = map.getView().getConstraints().rotation(180) === 180 ? RotationControl({ rotation, rotationStep, map }) : undefined; + rotationControl = map.getView().getConstraints().rotation(180) === 180 ? RotationControl({ rotation, rotationStep, map, localize }) : undefined; customSizeControl = CustomSizeControl({ minHeight: sizeCustomMinHeight, maxHeight: sizeCustomMaxHeight, @@ -178,11 +182,13 @@ const PrintSettings = function PrintSettings(options = {}) { maxWidth: sizeCustomMaxWidth, height: sizes.custom ? sizes.custom[0] : sizeCustomMinHeight, width: sizes.custom ? sizes.custom[1] : sizeCustomMinWidth, - state: size === 'custom' ? 'active' : 'initial' + state: size === 'custom' ? 'active' : 'initial', + localize }); setScaleControl = SetScaleControl(map, { scales, - initialScale: scaleInitial + initialScale: scaleInitial, + localize }); contentComponent = Component({ @@ -202,7 +208,8 @@ const PrintSettings = function PrintSettings(options = {}) { setScaleControl, resolutionControl, showScaleControl, - printLegendControl + printLegendControl, + localize }); } }); diff --git a/src/controls/print/print-settings.template.js b/src/controls/print/print-settings.template.js index dc3ac49d8..650fff757 100644 --- a/src/controls/print/print-settings.template.js +++ b/src/controls/print/print-settings.template.js @@ -12,7 +12,8 @@ export default function printTemplate({ setScaleControl, resolutionControl, showScaleControl, - printLegendControl + printLegendControl, + localize }) { return `
    @@ -20,39 +21,39 @@ export default function printTemplate({
    ${descriptionControl.render()}
    -
    Storlek
    +
    ${localize('paperSize')}
    ${sizeControl.render()}
    ${customSizeControl.render()}
    -
    Orientering
    +
    ${localize('orientation')}
    ${orientationControl.render()} - ${resolutionControl ? `
    Upplösning
    ${resolutionControl.render()}` : ''} + ${resolutionControl ? `
    ${localize('resolution')}
    ${resolutionControl.render()}` : ''}
    ${setScaleControl.render()}
    -
    Använd marginaler
    +
    ${localize('useMargins')}
    ${marginControl.render()}
    -
    Visa skapad tid
    +
    ${localize('showCreatedDate')}
    ${createdControl.render()}
    -
    Visa skala
    +
    ${localize('showScale')}
    ${showScaleControl.render()}
    -
    Visa norrpil
    +
    ${localize('showNorthArrow')}
    ${northArrowControl.render()}
    -
    Visa teckenförklaring
    +
    ${localize('showLegend')}
    ${printLegendControl.render()}
    diff --git a/src/controls/print/print-toolbar.js b/src/controls/print/print-toolbar.js index 8f772e04e..53cea400d 100644 --- a/src/controls/print/print-toolbar.js +++ b/src/controls/print/print-toolbar.js @@ -1,14 +1,14 @@ import { Button, Component } from '../../ui'; -const PrintToolbar = function PrintToolbar() { +const PrintToolbar = function PrintToolbar({ localize }) { const pngButton = Button({ cls: 'light text-smaller padding-left-large', - text: 'Spara bild' + text: localize('pngButtonTitle') }); const pdfButton = Button({ cls: 'light text-smaller padding-right-large', - text: 'Skapa pdf' + text: localize('pdfButtonTitle') }); return Component({ diff --git a/src/controls/print/rotation-control.js b/src/controls/print/rotation-control.js index 012b7a011..1e5fb2d35 100644 --- a/src/controls/print/rotation-control.js +++ b/src/controls/print/rotation-control.js @@ -4,7 +4,8 @@ export default function RotationControl(options = {}) { const { rotation, rotationStep, - map + map, + localize } = options; const rotationSlider = InputRange({ @@ -17,7 +18,7 @@ export default function RotationControl(options = {}) { 'align-self': 'center' }, unit: '°', - label: 'Rotera karta' + label: localize('rotateMap') }); return Component({ diff --git a/src/controls/print/set-scale-control.js b/src/controls/print/set-scale-control.js index 8ab8ede4c..9269fba54 100644 --- a/src/controls/print/set-scale-control.js +++ b/src/controls/print/set-scale-control.js @@ -4,7 +4,8 @@ import mapUtils from '../../maputils'; export default function SetScaleControl(map, options = {}) { const { scales = [], - initialScale + initialScale, + localize } = options; let selectScale; @@ -25,7 +26,7 @@ export default function SetScaleControl(map, options = {}) { contentCls: 'bg-grey-lighter text-smallest rounded', buttonCls: 'bg-white border text-black', buttonIconCls: 'black', - text: 'Välj skala' + text: localize('selectScale') }); this.addComponents([selectScale]); }, @@ -53,7 +54,7 @@ export default function SetScaleControl(map, options = {}) { render() { return `
    -
    Välj utskriftsskala
    +
    ${localize('selectPrintScale')}
    ${selectScale.render()}
    `; diff --git a/src/controls/print/size-control.js b/src/controls/print/size-control.js index 3998ac37b..a8ec03cc6 100644 --- a/src/controls/print/size-control.js +++ b/src/controls/print/size-control.js @@ -2,15 +2,15 @@ import { Button, ToggleGroup } from '../../ui'; import round2 from '../../utils/round'; import titleCase from '../../utils/titlecase'; -export default function SizeControl({ initialSize, sizes }) { +export default function SizeControl({ initialSize, sizes, localize }) { const sizeButtons = sizes.map((size) => { if (size === 'custom') { return Button({ cls: 'grow light text-smaller', - text: 'Anpassa', + text: localize('configureSize'), state: initialSize === size ? 'active' : 'initial', style: { width: `${String(round2(100 - round2(100 / sizes.length, 1) * (sizes.length - 1), 1))}%` }, - ariaLabel: 'Anpassa egen storlek' + ariaLabel: localize('configureSizeAriaLabel') }); } return Button({ diff --git a/src/controls/print/title-control.js b/src/controls/print/title-control.js index 5a58fe799..89a71581d 100644 --- a/src/controls/print/title-control.js +++ b/src/controls/print/title-control.js @@ -5,7 +5,8 @@ export default function TitleControl(options = {}) { title, titlePlaceholderText, titleAlignment, - titleSizes + titleSizes, + localize } = options; let { @@ -43,24 +44,24 @@ export default function TitleControl(options = {}) { }); alignLeftComponent = Button({ cls: 'grow light text-smaller', - text: 'Vänster', + text: localize('titleAlignLeft'), state: titleAlignment === 'left' ? 'active' : 'initial', style: { width: '34%' }, - ariaLabel: 'Text till vänster' + ariaLabel: localize('titleAlignLeftAriaLabel') }); alignCenterComponent = Button({ cls: 'grow light text-smaller', - text: 'Mitten', + text: localize('titleAlignCenter'), state: titleAlignment === 'center' ? 'active' : 'initial', style: { width: '34%' }, - ariaLabel: 'Text till mitten' + ariaLabel: localize('titleAlignCenterAriaLabel') }); alignRightComponent = Button({ cls: 'grow light text-smaller', - text: 'Höger', + text: localize('titleAlignRight'), state: titleAlignment === 'right' ? 'active' : 'initial', style: { width: '33%' }, - ariaLabel: 'Text till höger' + ariaLabel: localize('titleAlignRightAriaLabel') }); alignButtons = [alignLeftComponent, alignCenterComponent, alignRightComponent]; alignControl = ToggleGroup({ @@ -74,7 +75,7 @@ export default function TitleControl(options = {}) { contentCls: 'bg-grey-lighter text-smallest rounded', buttonCls: 'bg-white border text-black', buttonIconCls: 'black', - ariaLabel: 'Storlek på titel' + ariaLabel: localize('titleSizeAriaLabel') }); this.addComponents([inputTitle, formatButton, alignControl, selectSize]); @@ -119,7 +120,7 @@ export default function TitleControl(options = {}) { render() { return `
    -
    Titel
    +
    ${localize('titleTitle')}
    ${inputTitle.render()} @@ -130,11 +131,11 @@ export default function TitleControl(options = {}) {
    -
    Justering titel
    +
    ${localize('titleAdjustment')}
    ${alignControl.render()}
    -
    Storlek titel
    +
    ${localize('titleSize')}
    ${selectSize.render()}
    diff --git a/src/controls/sharemap.js b/src/controls/sharemap.js index 12a838be8..8d516e44d 100644 --- a/src/controls/sharemap.js +++ b/src/controls/sharemap.js @@ -6,9 +6,17 @@ const ShareMap = function ShareMap(options = {}) { target } = options; + const { + localization + } = options; + + function localize(key) { + return localization.getStringByKeys({ targetParentKey: 'sharemap', targetKey: key }); + } + const { icon = '#ic_screen_share_outline_24px', - title = 'Dela karta', + title = localize('title'), storeMethod, serviceEndpoint } = options; @@ -17,9 +25,9 @@ const ShareMap = function ShareMap(options = {}) { let menuItem; let modal; - const createContent = function createContent() { - return '
    ' - + 'Kopiera och klistra in länken för att dela kartan.'; + const createContent = function createContent() { // Kopiera och klistra in länken för att dela kartan. + const shareMapInstruction = localize('shareMapInstruction'); + return `
    ${shareMapInstruction}`; }; const createLink = function createLink(data) { @@ -48,7 +56,7 @@ const ShareMap = function ShareMap(options = {}) { click() { mapMenu.close(); modal = Modal({ - title: 'Länk till karta', + title: localize('linkToMap'), content: createContent(), target }); diff --git a/src/loc/en_US.json b/src/loc/en_US.json new file mode 100644 index 000000000..fe8490d26 --- /dev/null +++ b/src/loc/en_US.json @@ -0,0 +1,86 @@ +{ + "id": "en-US", + "title": "English", + "menuTitle": "Language", + "controls": { + "measure": { + "mainButtonTooltip": "Measure", + "startMeasureTooltip": "Click to start measuring", + "lengthTooltip": "Length", + "areaTooltip": "Area", + "clearTooltip": "Clear", + "bufferTooltip": "Buffer", + "bufferModalTitle": "Enter buffer radius in meters (e.g. 1000):", + "bufferModalOkButton": "OK", + "snapTooltip": "Snap", + "showSectionsTooltip": "Show sections", + "addNodeTooltip": "Add node", + "elevationTooltip": "Elevation", + "fetchingElevation": "Fetching elevation...", + "undoTooltip": "Undo" + }, + "sharemap": { + "title": "Share map", + "linkToMap": "Link to map", + "shareMapInstruction": "Copy and paste the link in order to share the map" + }, + "print": { + "title": "Print", + "headerPlaceholderText": "Please enter a title", + "descriptionPlaceholderText": "Please enter a description", + "resolutionLabelLow": "Low", + "resolutionLabelHigh": "High", + "resolutionLabelMedium": "Medium", + "pdfButtonTitle": "Create pdf", + "pngButtonTitle": "Create png", + "settingsButtonTooltip": "Show settings", + "closeButtonAriaLabel": "Close", + "mapInteractionButtonTooltip": "Toggle map interaction", + "titleTitle": "Title", + "titleAdjustment": "Adjust title", + "titleSize": "Title size", + "titleSizeAriaLabel": "Title size", + "titleAlignLeft": "Left", + "titleAlignCenter": "Center", + "titleAlignRight": "Right", + "descriptionAlignLeft": "Left", + "descriptionAlignCenter": "Center", + "descriptionAlignRight": "Right", + "description": "Description", + "descriptionSize": "Description size", + "descriptionAlignment": "Adjust description", + "descriptionSizeAriaLabel": "Description size", + "paperSize": "Size", + "orientation": "Orientation", + "resolution": "Resolution", + "useMargins": "Use margins", + "showCreatedDate": "Show print date", + "showScale": "Show scale", + "showLegend": "Show legend", + "showNorthArrow": "Show north arrow", + "selectScale": "Select scale", + "selectPrintScale": "Select print scale", + "rotateMap": "Rotate map", + "configureSize": "Custom", + "configureSizeAriaLabel": "Configure size", + "height": "Height", + "width": "Width", + "portrait": "Portrait", + "portraitAriaLabel": "Portrait", + "landscape": "Landscape", + "landscapeAriaLabel": "Landscape" + } + }, + "style": { + "drawStyles": { + "modifyTooltip": "Drag to alter" + }, + "styleWindow": { + "title": "Configure style" + + }, + "styleTemplate": { + + } + } +} \ No newline at end of file diff --git a/src/loc/sv_SE.json b/src/loc/sv_SE.json new file mode 100644 index 000000000..d35dbd3e0 --- /dev/null +++ b/src/loc/sv_SE.json @@ -0,0 +1,87 @@ +{ + "id": "sv-SE", + "title": "Svenska", + "menuTitle": "Språk", + "controls": { + "measure": { + "mainButtonTooltip": "Mäta", + "startMeasureTooltip": "Klicka för att börja mäta", + "lengthTooltip": "Längd", + "areaTooltip": "Yta", + "clearTooltip": "Rensa", + "bufferTooltip": "Buffert", + "bufferModalTitle": "Ange buffert i meter (ex 1000):", + "bufferModalOkButton": "OK", + "snapTooltip": "Snappning", + "showSectionsTooltip": "Visa delsträckor", + "addNodeTooltip": "Lägg till punkt", + "elevationTooltip": "Höjd", + "fetchingElevation": "Hämtar höjd...", + "undoTooltip": "Ångra" + }, + "sharemap": { + "title": "Dela karta", + "linkToMap": "Länk till karta", + "shareMapInstruction": "Kopiera och klistra in länken för att dela kartan." + }, + "print": { + "title": "Skriv ut", + "headerPlaceholderText": "Här kan du skriva en titel", + "descriptionPlaceholderText": "Här kan du skriva en beskrivning", + "resolutionLabelLow": "Låg", + "resolutionLabelHigh": "Hög", + "resolutionLabelMedium": "Mellan", + "pdfButtonTitle": "Skapa pdf", + "pngButtonTitle": "Skapa png", + "settingsButtonTooltip": "Visa inställningar", + "closeButtonAriaLabel": "Stäng", + "mapInteractionButtonTooltip": "Ändra kartans läge", + "titleTitle": "Titel", + "titleAdjustment": "Justera titel", + "titleSize": "Storlek titel", + "titleSizeAriaLabel": "Storlek på titel", + "titleAlignLeft": "Vänster", + "titleAlignCenter": "Mitten", + "titleAlignRight": "Höger", + "descriptionAlignLeft": "Vänster", + "descriptionAlignCenter": "Mitten", + "descriptionAlignRight": "Höger", + "description": "Beskrivning", + "descriptionSize": "Storlek på beskrivning", + "descriptionAlignment": "Justering på beskrivning", + "descriptionSizeAriaLabel": "Storlek på beskrivning", + "paperSize": "Storlek", + "orientation": "Orientering", + "resolution": "Upplösning", + "useMargins": "Använd marginaler", + "showCreatedDate": "Visa utskriftsdatum", + "showScale": "Visa skala", + "showLegend": "Visa legend", + "showNorthArrow": "Visa nordpil", + "selectScale": "Välj skala", + "selectPrintScale": "Välj utskriftsskala", + "rotateMap": "Rotera karta", + "configureSize": "Ändra storlek", + "configureSizeAriaLabel": "Ändra storlek", + "height": "Höjd", + "width": "Bredd", + "portrait": "Stående", + "portraitAriaLabel": "Stående", + "landscape": "Liggande", + "landscapeAriaLabel": "Liggande" + } + + }, + "style": { + "drawStyles": { + "modifyTooltip": "Dra för att ändra" + }, + "styleWindow": { + "title": "Configure style" + + }, + "styleTemplate": { + + } + } +} \ No newline at end of file diff --git a/src/style/drawstyles.js b/src/style/drawstyles.js index 8b5c5681a..c84fe4313 100644 --- a/src/style/drawstyles.js +++ b/src/style/drawstyles.js @@ -140,39 +140,46 @@ function createRegularShape(type, pointSize, pointFill, pointStroke, pointRotati return style; } -function formatLength(line, projection) { +function formatLength(line, projection, localization) { + const localeNumberFormat = new Intl.NumberFormat(localization.getCurrentLocaleId()); + const length = getLength(line, { projection }); let output; if (length > 1000) { - output = `${Math.round((length / 1000) * 100) / 100} km`; + output = `${localeNumberFormat.format(Math.round((length / 1000) * 100) / 100)} km`; } else { - output = `${Math.round(length * 100) / 100} m`; + output = `${localeNumberFormat.format(Math.round(length * 100) / 100)} m`; } return output; } -function formatArea(polygon, useHectare, projection, featureArea) { +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()); let output; if (area > 10000000) { - output = `${Math.round((area / 1000000) * 100) / 100} km\xB2`; + output = `${localeNumberFormat.format(Math.round((area / 1000000) * 100) / 100)} km\xB2`; } else if (area > 10000 && useHectare) { - output = `${Math.round((area / 10000) * 100) / 100} ha`; + output = `${localeNumberFormat.format(Math.round((area / 10000) * 100) / 100)} ha`; } else { - output = `${Math.round(area * 100) / 100} m\xB2`; + output = `${localeNumberFormat.format(Math.round(area * 100) / 100)} m\xB2`; } return output; } -function formatRadius(feat) { +function formatRadius(feat, localization) { + const localeNumberFormat = new Intl.NumberFormat(localization.getCurrentLocaleId()); let output; const length = feat.getGeometry().getRadius(); if (length > 10000) { - output = `${Math.round((length / 1000) * 100) / 100} km`; + output = `${localeNumberFormat.format(Math.round((length / 1000) * 100) / 100)} km`; } else if (length > 100) { - output = `${Math.round(length)} m`; + output = `${localeNumberFormat.format(Math.round(length))} m`; } else { - output = `${Math.round(length * 100) / 100} m`; + output = `${localeNumberFormat.format(Math.round(length * 100) / 100)} m`; } return output; } @@ -310,30 +317,32 @@ const tipStyle = new Style({ }) }); -const modifyStyle = new Style({ - image: new CircleStyle({ - radius: 5, - stroke: new Stroke({ - color: 'rgba(0, 0, 0, 0.7)' +function modifyStyle(localization) { + return new Style({ + image: new CircleStyle({ + radius: 5, + stroke: new Stroke({ + color: 'rgba(0, 0, 0, 0.7)' + }), + fill: new Fill({ + color: 'rgba(0, 153, 255, 0.8)' + }) }), - fill: new Fill({ - color: 'rgba(0, 153, 255, 0.8)' + text: new Text({ + text: localization.getStringByKeys({ targetParentKey: 'drawStyles', targetKey: 'modifyTooltip' }), + font: '12px Calibri,sans-serif', + fill: new Fill({ + color: 'rgba(255, 255, 255, 1)' + }), + backgroundFill: new Fill({ + color: 'rgba(0, 0, 0, 0.7)' + }), + padding: [2, 2, 2, 2], + textAlign: 'left', + offsetX: 15 }) - }), - text: new Text({ - text: 'Dra för att ändra', - font: '12px Calibri,sans-serif', - fill: new Fill({ - color: 'rgba(255, 255, 255, 1)' - }), - backgroundFill: new Fill({ - color: 'rgba(0, 0, 0, 0.7)' - }), - padding: [2, 2, 2, 2], - textAlign: 'left', - offsetX: 15 - }) -}); + }); +} const segmentStyle = function segmentStyle(scale = 1) { return new Style({ @@ -392,12 +401,12 @@ function getBufferLabelStyle(label = '', scale = 1) { }); } -function getSegmentLabelStyle(line, projection, scale = 1, segmentStyles = []) { +function getSegmentLabelStyle({ line, projection, scale = 1, segmentStyles = [], localization }) { let count = 0; const style = []; line.forEachSegment((a, b) => { const segment = new LineString([a, b]); - const segmentLabel = formatLength(segment, projection); + const segmentLabel = formatLength(segment, projection, localization); if (segmentStyles.length - 1 < count) { segmentStyles.push(segmentStyle(scale).clone()); } @@ -436,9 +445,9 @@ function getBufferPointStyle(scale = 1) { }); } -function bufferStyleFunction(feature, highlightColor) { +function bufferStyleFunction(feature, highlightColor, localization) { const styleScale = feature.get('styleScale') || 1; - const bufferLabelStyle = getBufferLabelStyle(`${formatRadius(feature)}`, styleScale); + const bufferLabelStyle = getBufferLabelStyle(`${formatRadius(feature, localization)}`, styleScale); const pointStyle = getBufferPointStyle(styleScale); return [measureStyle({ scale: styleScale, highlightColor }), bufferLabelStyle, pointStyle]; } diff --git a/src/style/stylewindow.js b/src/style/stylewindow.js index 2bcef505c..1597d5069 100644 --- a/src/style/stylewindow.js +++ b/src/style/stylewindow.js @@ -384,7 +384,7 @@ const Stylewindow = function Stylewindow(optOptions = {}) { stroke }); if (newStyleObj.showMeasureSegments) { - const segmentLabelStyle = drawStyles.getSegmentLabelStyle(geom, projection, styleScale); + const segmentLabelStyle = drawStyles.getSegmentLabelStyle({ line: geom, projection, scale: styleScale }); style = style.concat(segmentLabelStyle); } if (newStyleObj.showMeasure) { @@ -404,7 +404,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, styleScale); + const segmentLabelStyle = drawStyles.getSegmentLabelStyle({ line, projection, scale: styleScale }); style = style.concat(segmentLabelStyle); }); } @@ -451,7 +451,7 @@ const Stylewindow = function Stylewindow(optOptions = {}) { }); if (newStyleObj.showMeasureSegments) { const line = new LineString(geom.getCoordinates()[0]); - const segmentLabelStyle = drawStyles.getSegmentLabelStyle(line, projection, styleScale); + const segmentLabelStyle = drawStyles.getSegmentLabelStyle({ line, projection, scale: styleScale }); style = style.concat(segmentLabelStyle); } if (newStyleObj.showMeasure) { @@ -473,7 +473,7 @@ const Stylewindow = function Stylewindow(optOptions = {}) { featureCoords.forEach(parts => { parts.forEach(part => { const line = new LineString(part); - const segmentLabelStyle = drawStyles.getSegmentLabelStyle(line, projection, styleScale); + const segmentLabelStyle = drawStyles.getSegmentLabelStyle({ line, projection, scale: styleScale }); style = style.concat(segmentLabelStyle); }); }); diff --git a/src/viewer.js b/src/viewer.js index 4dc16a4f8..0414a9986 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -130,6 +130,8 @@ const Viewer = function Viewer(targetOption, options = {}) { }; const addControls = function addControls() { + const locIndex = controls.findIndex((control) => control.name === 'localization'); + controls.push(controls.splice(locIndex, 1)[0]); // add localization last (after mapmenu) controls.forEach((control) => { this.addControl(control); });