From 3da580b6bdbc4171e2528a5181ad9abfa9f7e494 Mon Sep 17 00:00:00 2001 From: Peter Rushforth Date: Thu, 17 Oct 2024 16:02:28 -0400 Subject: [PATCH] Initial commit (no tests, most popup stuff not localized yet) --- src/map-extent.js | 4 +- src/mapml-viewer.js | 18 +++++- src/mapml/DefaultMapOptions.js | 61 +++++++++++++++++++ src/mapml/GlobalM.js | 2 + src/mapml/control/AttributionButton.js | 23 ++++--- src/mapml/control/FullscreenButton.js | 15 ++++- src/mapml/control/GeolocationButton.js | 19 +++--- src/mapml/control/ReloadButton.js | 9 ++- .../extents/createLayerControlForExtent.js | 2 +- .../layers/createLayerControlForLayer.js | 2 +- src/mapml/handlers/AnnounceMovement.js | 26 ++++---- src/mapml/handlers/ContextMenu.js | 46 ++++++++------ src/mapml/layers/FeatureIndexOverlay.js | 3 +- src/mapml/utils/Util.js | 10 +-- src/web-map.js | 18 +++++- 15 files changed, 192 insertions(+), 66 deletions(-) diff --git a/src/map-extent.js b/src/map-extent.js index b65a568be..9b8795b95 100644 --- a/src/map-extent.js +++ b/src/map-extent.js @@ -28,7 +28,7 @@ export class MapExtent extends HTMLElement { get label() { return this.hasAttribute('label') ? this.getAttribute('label') - : M.options.locale.dfExtent; + : this.mapEl.locale.dfExtent; } set label(val) { if (val) { @@ -148,7 +148,7 @@ export class MapExtent extends HTMLElement { if (oldValue !== newValue) { this._layerControlHTML.querySelector( '.mapml-extent-item-name' - ).innerHTML = newValue || M.options.locale.dfExtent; + ).innerHTML = newValue || this.getMapEl().locale.dfExtent; } break; case 'checked': diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js index 2486d8b16..a2693de65 100644 --- a/src/mapml-viewer.js +++ b/src/mapml-viewer.js @@ -169,6 +169,7 @@ export class MapViewer extends HTMLElement { connectedCallback() { this.whenProjectionDefined(this.projection) .then(() => { + this._setLocale(); this._initShadowRoot(); this._controlsList = new DOMTokenList( @@ -232,6 +233,16 @@ export class MapViewer extends HTMLElement { throw new Error('Projection not defined'); }); } + _setLocale() { + if (this.closest(':lang(fr)') === this) { + this.locale = M.options.localeFr; + } else if (this.closest(':lang(en)') === this) { + this.locale = M.options.localeEn; + } else { + // "browser" locale + this.locale = M.options.locale; + } + } _initShadowRoot() { if (!this.shadowRoot) { this.attachShadow({ mode: 'open' }); @@ -460,7 +471,12 @@ export class MapViewer extends HTMLElement { // Only add controls if there is enough top left vertical space if (!this._zoomControl && totalSize + 93 <= mapSize) { totalSize += 93; - this._zoomControl = L.control.zoom().addTo(this._map); + this._zoomControl = L.control + .zoom({ + zoomInTitle: this.locale.btnZoomIn, + zoomOutTitle: this.locale.btnZoomOut + }) + .addTo(this._map); } if (!this._reloadButton && totalSize + 49 <= mapSize) { totalSize += 49; diff --git a/src/mapml/DefaultMapOptions.js b/src/mapml/DefaultMapOptions.js index 89a9ac047..345c2884a 100644 --- a/src/mapml/DefaultMapOptions.js +++ b/src/mapml/DefaultMapOptions.js @@ -56,7 +56,68 @@ export var Options = { dfLayer: 'Layer', dfExtent: 'Sub-layer', popupZoom: 'Zoom to here', + popupPropName: 'Property name', + popupPropValue: 'Property value', dfPastedLayer: 'Pasted layer', fIndexNoFeatures: 'No features found' + }, + localeFr: { + cmBack: 'Retour', + cmForward: "Vers l'avant", + cmReload: 'Rechargez', + cmToggleControls: 'Basculer les contrôles', + cmCopyCoords: 'Copie', + cmToggleDebug: 'Basculer le mode de débogage', + cmCopyMapML: 'Carte', + cmCopyExtent: 'Étendue', + cmCopyLocation: 'Localisation', + cmPasteLayer: 'Coller', + cmViewSource: 'Voir la source de la carte', + lmZoomToLayer: 'Zoomer sur la couche', + lmCopyLayer: 'Copier (la couche)', + lmZoomToExtent: 'Zoomer sur la sous-couche', + lmCopyExtent: 'Copier (la sous-couche)', + lcOpacity: 'Opacité', + btnZoomIn: 'Zoomer', + btnZoomOut: 'Dézoomer', + btnAttribution: 'Attribution des données cartographiques', + btnFullScreen: 'Affichage plein écran', + btnExitFullScreen: 'Quitter le plein écran', + btnLocTrackOn: 'Afficher ma position - suivi de la position activé', + btnMyLocTrackOn: 'Ma position actuelle, affichée sur la carte', + btnLocTrackOff: 'Afficher ma position - suivi de la position désactivé', + btnMyLastKnownLocTrackOn: + 'Ma dernière position connue, indiquée sur la carte', + btnLocTrackLastKnown: + 'Afficher ma position - dernière position connue affichée', + amZoom: 'Niveau de zoom', + amColumn: 'Colonne', + amRow: 'Rangée', + amMaxZoom: 'Au niveau de zoom maximal, le zoom avant est désactivé', + amMinZoom: 'Niveau de zoom minimum, le zoom arrière désactivé', + amZoomedOut: 'Zoomé en dehors des limites, retour à', + amDraggedOut: 'Traîné hors des limites, retour à', + amEastBound: "Atteint la limite est, déplacement ver l'est désactivé", + amWestBound: "Atteint la limite ouest, déplacement ver l'ouest désactivé", + amNorthBound: 'Atteint la limite nord, déplacement vers le nord désactivé', + amSouthBound: 'Atteint la limite sud, déplacement vers le sud désactivé', + kbdShortcuts: 'Raccourcis clavier', + kbdMovement: 'Touches de mouvement', + kbdFeature: 'Touches de navigation dans les éléments géographiques', + kbdPanUp: 'Panoramique vers le haut', + kbdPanDown: 'Panoramique en bas', + kbdPanLeft: 'Panoramique vers la gauche', + kbdPanRight: 'Panoramique vers la droite', + kbdPanIncrement: 'Incrémenter le panoramique', + kbdZoom: 'Zoom avant/arrière 3 niveaux', + kbdPrevFeature: 'Élément géographique précédente', + kbdNextFeature: 'Élément géographique suivante', + dfLayer: 'Couche', + dfExtent: 'Sous-couche', + dfPastedLayer: 'Couche collée', + popupZoom: 'Zoomer ici', + popupPropName: 'Nom de la propriété', + popupPropValue: 'Valeur de la propriété', + fIndexNoFeatures: 'Aucun élément géographique trouvé' } }; diff --git a/src/mapml/GlobalM.js b/src/mapml/GlobalM.js index 2d0cda1f9..457133c3c 100644 --- a/src/mapml/GlobalM.js +++ b/src/mapml/GlobalM.js @@ -15,6 +15,8 @@ import './handlers/keyboard'; M.options = Options; if (mapOptions) M.options = Object.assign(M.options, JSON.parse(mapOptions.innerHTML)); + // make a copy of the default locale strings as localeEn to support gcds-map + M.options.localeEn = Options.locale; // see https://leafletjs.com/reference-1.5.0.html#crs-l-crs-base // "new classes can't inherit from (L.CRS), and methods can't be added diff --git a/src/mapml/control/AttributionButton.js b/src/mapml/control/AttributionButton.js index 5c1a442c9..23bf383f4 100644 --- a/src/mapml/control/AttributionButton.js +++ b/src/mapml/control/AttributionButton.js @@ -3,7 +3,11 @@ export var AttributionButton = L.Control.Attribution.extend({ prefix: 'W3C Community and Business Groups logo Maps for HTML Community Group | Slava Ukraini Leaflet ' }, - + _getLocale: function () { + return this.options.mapEl && this.options.mapEl.locale + ? this.options.mapEl.locale + : M.options.locale; + }, onAdd: function (map) { map.attributionControl = this; this._container = L.DomUtil.create( @@ -28,10 +32,11 @@ export var AttributionButton = L.Control.Attribution.extend({ dialog.onclick = function (e) { e.stopPropagation(); }; + let locale = this._getLocale(); dialog.innerHTML = - `${M.options.locale.kbdShortcuts} ` + - `` + - ``; + `${locale.kbdShortcuts} ` + + `` + + ``; map._container.appendChild(dialog); return this._container; @@ -58,17 +63,15 @@ export var AttributionButton = L.Control.Attribution.extend({ if (attribs.length) { prefixAndAttribs.push(attribs.join(', ')); } + let locale = this._getLocale(); this._container.innerHTML = `` + '
' + - ` | ` + + ` | ` + prefixAndAttribs.join(' ') + '
'; this._container.setAttribute('role', 'group'); - this._container.setAttribute( - 'aria-label', - `${M.options.locale.btnAttribution}` - ); + this._container.setAttribute('aria-label', `${locale.btnAttribution}`); } }); @@ -79,7 +82,7 @@ L.Map.mergeOptions({ L.Map.addInitHook(function () { if (this.options.toggleableAttributionControl) { - new AttributionButton().addTo(this); + attributionButton({ mapEl: this.options.mapEl }).addTo(this); } }); diff --git a/src/mapml/control/FullscreenButton.js b/src/mapml/control/FullscreenButton.js index e4f69868d..b907542cc 100644 --- a/src/mapml/control/FullscreenButton.js +++ b/src/mapml/control/FullscreenButton.js @@ -3,12 +3,21 @@ export var FullscreenButton = L.Control.extend({ options: { position: 'topleft', title: { - false: 'View Fullscreen', - true: 'Exit Fullscreen' + false: M.options.locale.btnFullScreen, + true: M.options.locale.btnExitFullScreen } }, - + _getLocale: function (map) { + return map.options.mapEl && map.options.mapEl.locale + ? map.options.mapEl.locale + : M.options.locale; + }, onAdd: function (map) { + let locale = this._getLocale(map); + this.options.title = { + false: locale.btnFullScreen, + true: locale.btnExitFullScreen + }; var container = L.DomUtil.create( 'div', 'leaflet-control-fullscreen leaflet-bar leaflet-control' diff --git a/src/mapml/control/GeolocationButton.js b/src/mapml/control/GeolocationButton.js index a69311735..779ff3d39 100644 --- a/src/mapml/control/GeolocationButton.js +++ b/src/mapml/control/GeolocationButton.js @@ -2,7 +2,11 @@ export var GeolocationButton = L.Control.extend({ options: { position: 'bottomright' }, - + _getLocale: function (map) { + return map.options.mapEl && map.options.mapEl.locale + ? map.options.mapEl.locale + : M.options.locale; + }, onAdd: function (map) { // customize locate control to focus map after start/stop, so that // featureIndexOverlay is correctly displayed @@ -16,10 +20,11 @@ export var GeolocationButton = L.Control.extend({ map.getContainer().focus(); } }); + let locale = this._getLocale(map); this.locateControl = new L.Control.CustomLocate({ showPopup: false, strings: { - title: M.options.locale.btnLocTrackOff + title: locale.btnLocTrackOff }, position: this.options.position, locateOptions: { @@ -34,15 +39,15 @@ export var GeolocationButton = L.Control.extend({ container.classList.contains('active') && container.classList.contains('following') ) { - container.firstChild.title = M.options.locale.btnLocTrackOn; - button._marker.bindTooltip(M.options.locale.btnMyLocTrackOn, { + container.firstChild.title = locale.btnLocTrackOn; + button._marker.bindTooltip(locale.btnMyLocTrackOn, { permanent: true }); } else if (container.classList.contains('active')) { - container.firstChild.title = M.options.locale.btnLocTrackLastKnown; - button._marker.bindTooltip(M.options.locale.btnMyLastKnownLocTrackOn); + container.firstChild.title = locale.btnLocTrackLastKnown; + button._marker.bindTooltip(locale.btnMyLastKnownLocTrackOn); } else { - container.firstChild.title = M.options.locale.btnLocTrackOff; + container.firstChild.title = locale.btnLocTrackOff; } }); var observerConfig = { attributes: true, attributeFilter: ['class'] }; diff --git a/src/mapml/control/ReloadButton.js b/src/mapml/control/ReloadButton.js index 90bbc256f..0ba4a8d68 100644 --- a/src/mapml/control/ReloadButton.js +++ b/src/mapml/control/ReloadButton.js @@ -2,13 +2,18 @@ export var ReloadButton = L.Control.extend({ options: { position: 'topleft' }, - + _getLocale: function (map) { + return map.options.mapEl && map.options.mapEl.locale + ? map.options.mapEl.locale + : M.options.locale; + }, onAdd: function (map) { + let locale = this._getLocale(map); let container = L.DomUtil.create('div', 'mapml-reload-button leaflet-bar'); let link = L.DomUtil.create('button', 'mapml-reload-button', container); link.innerHTML = ""; - link.title = M.options.locale.cmReload; + link.title = locale.cmReload; link.setAttribute('type', 'button'); link.classList.add('mapml-button'); link.setAttribute('aria-label', 'Reload'); diff --git a/src/mapml/elementSupport/extents/createLayerControlForExtent.js b/src/mapml/elementSupport/extents/createLayerControlForExtent.js index 34ee4e731..cdf56d798 100644 --- a/src/mapml/elementSupport/extents/createLayerControlForExtent.js +++ b/src/mapml/elementSupport/extents/createLayerControlForExtent.js @@ -102,7 +102,7 @@ export var createLayerControlExtentHTML = function () { extentLabel.appendChild(input); extentsettingsButton.appendChild(extentNameIcon); extentNameIcon.appendChild(svgExtentControlIcon); - extentOpacitySummary.innerText = 'Opacity'; + extentOpacitySummary.innerText = mapEl.locale.lcOpacity; extentOpacitySummary.id = 'mapml-extent-item-opacity-' + L.stamp(extentOpacitySummary); opacity.setAttribute('type', 'range'); diff --git a/src/mapml/elementSupport/layers/createLayerControlForLayer.js b/src/mapml/elementSupport/layers/createLayerControlForLayer.js index e80b9a2df..406bf285c 100644 --- a/src/mapml/elementSupport/layers/createLayerControlForLayer.js +++ b/src/mapml/elementSupport/layers/createLayerControlForLayer.js @@ -149,7 +149,7 @@ export var createLayerControlHTML = async function () { layerItemName.innerHTML = this._layer._title; } layerItemName.id = 'mapml-layer-item-name-{' + L.stamp(layerItemName) + '}'; - opacityControlSummary.innerText = 'Opacity'; + opacityControlSummary.innerText = mapEl.locale.lcOpacity; opacityControlSummary.id = 'mapml-layer-item-opacity-' + L.stamp(opacityControlSummary); opacityControl.appendChild(opacityControlSummary); diff --git a/src/mapml/handlers/AnnounceMovement.js b/src/mapml/handlers/AnnounceMovement.js index 7dc4207ef..e70b4f279 100644 --- a/src/mapml/handlers/AnnounceMovement.js +++ b/src/mapml/handlers/AnnounceMovement.js @@ -38,6 +38,7 @@ export var AnnounceMovement = L.Handler.extend({ focusAnnouncement: function () { let mapEl = this; + let locale = this.locale; setTimeout(function () { let el = mapEl.querySelector('.mapml-web-map') ? mapEl @@ -46,12 +47,12 @@ export var AnnounceMovement = L.Handler.extend({ : mapEl.shadowRoot.querySelector('.leaflet-container'); let mapZoom = mapEl._map.getZoom(); - let standard = M.options.locale.amZoom + ' ' + mapZoom; + let standard = locale.amZoom + ' ' + mapZoom; if (mapZoom === mapEl._map.getMaxZoom()) { - standard = M.options.locale.amMaxZoom + ' ' + standard; + standard = locale.amMaxZoom + ' ' + standard; } else if (mapZoom === mapEl._map._layersMinZoom) { - standard = M.options.locale.amMinZoom + ' ' + standard; + standard = locale.amMinZoom + ' ' + standard; } el.setAttribute('aria-roledescription', 'region ' + standard); @@ -65,6 +66,7 @@ export var AnnounceMovement = L.Handler.extend({ if (this._traversalCall > 0) { return; } + let locale = this.locale; let mapZoom = this._map.getZoom(); let mapBounds = Util.pixelToPCRSBounds( this._map.getPixelBounds(), @@ -86,7 +88,7 @@ export var AnnounceMovement = L.Handler.extend({ ) : this.shadowRoot.querySelector('.mapml-screen-reader-output'); - let standard = M.options.locale.amZoom + ' ' + mapZoom; + let standard = locale.amZoom + ' ' + mapZoom; if (!visible) { let outOfBoundsPos = this._history[this._historyIndex]; @@ -95,26 +97,26 @@ export var AnnounceMovement = L.Handler.extend({ this._history.pop(); if (outOfBoundsPos.zoom !== inBoundsPos.zoom) { - output.innerText = M.options.locale.amZoomedOut; + output.innerText = locale.amZoomedOut; } else if (this._map.dragging._draggable.wasDragged) { - output.innerText = M.options.locale.amDraggedOut; + output.innerText = locale.amDraggedOut; } else if (outOfBoundsPos.x > inBoundsPos.x) { - output.innerText = M.options.locale.amEastBound; + output.innerText = locale.amEastBound; } else if (outOfBoundsPos.x < inBoundsPos.x) { - output.innerText = M.options.locale.amWestBound; + output.innerText = locale.amWestBound; } else if (outOfBoundsPos.y < inBoundsPos.y) { - output.innerText = M.options.locale.amNorthBound; + output.innerText = locale.amNorthBound; } else if (outOfBoundsPos.y > inBoundsPos.y) { - output.innerText = M.options.locale.amSouthBound; + output.innerText = locale.amSouthBound; } } else { let prevZoom = this._history[this._historyIndex - 1] ? this._history[this._historyIndex - 1].zoom : this._history[this._historyIndex].zoom; if (mapZoom === this._map.getMaxZoom() && mapZoom !== prevZoom) { - output.innerText = M.options.locale.amMaxZoom + ' ' + standard; + output.innerText = locale.amMaxZoom + ' ' + standard; } else if (mapZoom === this._map._layersMinZoom && mapZoom !== prevZoom) { - output.innerText = M.options.locale.amMinZoom + ' ' + standard; + output.innerText = locale.amMinZoom + ' ' + standard; } else { output.innerText = standard; } diff --git a/src/mapml/handlers/ContextMenu.js b/src/mapml/handlers/ContextMenu.js index 696c84f97..628d70e93 100644 --- a/src/mapml/handlers/ContextMenu.js +++ b/src/mapml/handlers/ContextMenu.js @@ -15,9 +15,14 @@ export var ContextMenu = L.Handler.extend({ : L.Browser.pointer ? 'pointerdown' : 'touchstart', - + _getLocale: function (map) { + return map.options.mapEl && map.options.mapEl.locale + ? map.options.mapEl.locale + : M.options.locale; + }, initialize: function (map) { L.Handler.prototype.initialize.call(this, map); + let locale = this._getLocale(map); this.activeIndex = 0; //current fous index on menu this.excludedIndices = [4, 7]; //menu indexes that are -------- this.isRunned = false; //variable for tracking edge case @@ -50,22 +55,22 @@ export var ContextMenu = L.Handler.extend({ this._items = [ { // 0 - text: M.options.locale.cmBack + ' (Alt+Left Arrow)', + text: locale.cmBack + ' (Alt+Left Arrow)', callback: this._goBack }, { // 1 - text: M.options.locale.cmForward + ' (Alt+Right Arrow)', + text: locale.cmForward + ' (Alt+Right Arrow)', callback: this._goForward }, { // 2 - text: M.options.locale.cmReload + ' (Ctrl+R)', + text: locale.cmReload + ' (Ctrl+R)', callback: this._reload }, { // 3 - text: M.options.locale.btnFullScreen + ' (F)', + text: locale.btnFullScreen + ' (F)', callback: this._toggleFullScreen }, { @@ -74,31 +79,31 @@ export var ContextMenu = L.Handler.extend({ }, { // 5 - text: M.options.locale.cmCopyCoords + ' (C)', + text: locale.cmCopyCoords + ' (C)', callback: this._copyCoords, hideOnSelect: false, popup: true, submenu: [ { // 5.0 - text: M.options.locale.cmCopyMapML, + text: locale.cmCopyMapML, callback: this._copyMapML }, { // 5.1 - text: M.options.locale.cmCopyExtent, + text: locale.cmCopyExtent, callback: this._copyExtent }, { // 5.2 - text: M.options.locale.cmCopyLocation, + text: locale.cmCopyLocation, callback: this._copyLocation } ] }, { // 6 - text: M.options.locale.cmPasteLayer + ' (P)', + text: locale.cmPasteLayer + ' (P)', callback: this._paste }, { @@ -107,17 +112,17 @@ export var ContextMenu = L.Handler.extend({ }, { // 8 - text: M.options.locale.cmToggleControls + ' (T)', + text: locale.cmToggleControls + ' (T)', callback: this._toggleControls }, { // 9 - text: M.options.locale.cmToggleDebug + ' (D)', + text: locale.cmToggleDebug + ' (D)', callback: this._toggleDebug }, { // 10 - text: M.options.locale.cmViewSource + ' (V)', + text: locale.cmViewSource + ' (V)', callback: this._viewSource } ]; @@ -136,12 +141,12 @@ export var ContextMenu = L.Handler.extend({ this._layerItems = [ { // 0 - text: M.options.locale.lmZoomToLayer + ' (Z)', + text: locale.lmZoomToLayer + ' (Z)', callback: this._zoomToLayer }, { // 1 - text: M.options.locale.lmCopyLayer + ' (L)', + text: locale.lmCopyLayer + ' (L)', callback: this._copyLayer } ]; @@ -149,12 +154,12 @@ export var ContextMenu = L.Handler.extend({ this._extentLayerItems = [ { // 0 - text: M.options.locale.lmZoomToExtent + ' (Z)', + text: locale.lmZoomToExtent + ' (Z)', callback: this._zoomToMapExtent }, { // 1 - text: M.options.locale.lmCopyExtent + ' (L)', + text: locale.lmCopyExtent + ' (L)', callback: this._copyMapExtent } ]; @@ -1370,7 +1375,8 @@ export var ContextMenu = L.Handler.extend({ _onItemMouseOver: function (e) { L.DomUtil.addClass(e.target || e.srcElement, 'over'); - if (e.srcElement.innerText === M.options.locale.cmCopyCoords + ' (C)') + let locale = e.locale || M.options.locale; + if (e.srcElement.innerText === locale.cmCopyCoords + ' (C)') this._showCopySubMenu(e); }, @@ -1407,10 +1413,10 @@ export var ContextMenu = L.Handler.extend({ setViewFullScreenInnerHTML: function (options) { if (options === 'view') { this._map.contextMenu._items[3].el.el.innerHTML = - M.options.locale.btnFullScreen + ' (F)'; + this._map.options.mapEl.locale.btnFullScreen + ' (F)'; } else if (options === 'exit') { this._map.contextMenu._items[3].el.el.innerHTML = - M.options.locale.btnExitFullScreen + ' (F)'; + this._map.options.mapEl.locale.btnExitFullScreen + ' (F)'; } } }); diff --git a/src/mapml/layers/FeatureIndexOverlay.js b/src/mapml/layers/FeatureIndexOverlay.js index 1fe22a5b3..09efce4a5 100644 --- a/src/mapml/layers/FeatureIndexOverlay.js +++ b/src/mapml/layers/FeatureIndexOverlay.js @@ -75,7 +75,8 @@ export var FeatureIndexOverlay = L.Layer.extend({ let keys = Object.keys(features); let body = this._body; let noFeaturesMessage = document.createElement('span'); - noFeaturesMessage.innerHTML = M.options.locale.fIndexNoFeatures; + noFeaturesMessage.innerHTML = + this._map.options.mapEl.locale.fIndexNoFeatures; body.innerHTML = ''; body.index = 0; diff --git a/src/mapml/utils/Util.js b/src/mapml/utils/Util.js index 8ee8109e0..532c448ee 100644 --- a/src/mapml/utils/Util.js +++ b/src/mapml/utils/Util.js @@ -655,8 +655,8 @@ export const Util = { ''; + mapEl.locale.dfLayer + + '" checked="">'; mapEl.insertAdjacentHTML('beforeend', l); mapEl.lastElementChild.whenReady().catch(() => { if (mapEl) { @@ -677,7 +677,7 @@ export const Util = { text.slice(-14) === '' ) { let layer = - ` + ` ` + text + ''; @@ -703,8 +703,8 @@ export const Util = { let row = thead.insertRow(); let th1 = document.createElement('th'); let th2 = document.createElement('th'); - th1.appendChild(document.createTextNode('Property name')); - th2.appendChild(document.createTextNode('Property value')); + th1.appendChild(document.createTextNode(M.options.locale.popupPropName)); + th2.appendChild(document.createTextNode(M.options.locale.popupPropValue)); th1.setAttribute('role', 'columnheader'); th2.setAttribute('role', 'columnheader'); th1.setAttribute('scope', 'col'); diff --git a/src/web-map.js b/src/web-map.js index e24109fa1..610e21cd5 100644 --- a/src/web-map.js +++ b/src/web-map.js @@ -161,6 +161,7 @@ export class WebMap extends HTMLMapElement { connectedCallback() { this.whenProjectionDefined(this.projection) .then(() => { + this._setLocale(); this._initShadowRoot(); this._controlsList = new DOMTokenList( @@ -222,6 +223,16 @@ export class WebMap extends HTMLMapElement { throw new Error('Projection not defined'); }); } + _setLocale() { + if (this.closest(':lang(fr)') === this) { + this.locale = M.options.localeFr; + } else if (this.closest(':lang(en)') === this) { + this.locale = M.options.localeEn; + } else { + // "browser" locale + this.locale = M.options.locale; + } + } _initShadowRoot() { let tmpl = document.createElement('template'); /* jshint ignore:start */ @@ -503,7 +514,12 @@ export class WebMap extends HTMLMapElement { // Only add controls if there is enough top left vertical space if (!this._zoomControl && totalSize + 93 <= mapSize) { totalSize += 93; - this._zoomControl = L.control.zoom().addTo(this._map); + this._zoomControl = L.control + .zoom({ + zoomInTitle: this.locale.btnZoomIn, + zoomOutTitle: this.locale.btnZoomOut + }) + .addTo(this._map); } if (!this._reloadButton && totalSize + 49 <= mapSize) { totalSize += 49;