Initial commit (no tests, most popup stuff not localized yet)

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':

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;

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é'
  }
 };

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

src/mapml/control/AttributionButton.js

@@ -3,7 +3,11 @@ export var AttributionButton = L.Control.Attribution.extend({
  prefix:
  '<img src="https://www.w3.org/community/wp-content/themes/StoryTeller/favicon.ico" style="position: relative; top: 5px" alt="W3C Community and Business Groups logo"> <a href="https://www.w3.org/community/maps4html/">Maps for HTML Community Group</a> | <img src="data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTIiIGhlaWdodD0iOCI+PHBhdGggZmlsbD0iIzRDN0JFMSIgZD0iTTAgMGgxMnY0SDB6Ii8+PHBhdGggZmlsbD0iI0ZGRDUwMCIgZD0iTTAgNGgxMnYzSDB6Ii8+PHBhdGggZmlsbD0iI0UwQkMwMCIgZD0iTTAgN2gxMnYxSDB6Ii8+PC9zdmc+" style="padding-right: 0.3em;" alt="Slava Ukraini"> <a href="https://leafletjs.com" title="A JS library for interactive maps">Leaflet</a> '
  },
-
+ _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 =
- `<b>${M.options.locale.kbdShortcuts} </b><button aria-label="Close" onclick='this.parentElement.close()'>X</button>` +
- `<ul><b>${M.options.locale.kbdMovement}</b><li><kbd>&#8593</kbd> ${M.options.locale.kbdPanUp}</li><li><kbd>&#8595</kbd> ${M.options.locale.kbdPanDown}</li><li><kbd>&#8592</kbd> ${M.options.locale.kbdPanLeft}</li><li><kbd>&#8594</kbd> ${M.options.locale.kbdPanRight}</li><li><kbd>+</kbd> ${M.options.locale.btnZoomIn}</li><li><kbd>-</kbd> ${M.options.locale.btnZoomOut}</li><li><kbd>shift</kbd> + <kbd>&#8592/&#8593/&#8594/&#8595</kbd> 3x ${M.options.locale.kbdPanIncrement}</li><li><kbd>ctrl</kbd> + <kbd>&#8592/&#8593/&#8594/&#8595</kbd> 0.2x ${M.options.locale.kbdPanIncrement}</li><li><kbd>shift</kbd> + <kbd>+/-</kbd> ${M.options.locale.kbdZoom}</li></ul>` +
- `<ul><b>${M.options.locale.kbdFeature}</b><li><kbd>&#8592/&#8593</kbd> ${M.options.locale.kbdPrevFeature}</li><li><kbd>&#8594/&#8595</kbd> ${M.options.locale.kbdNextFeature}</li></ul>`;
+ `<b>${locale.kbdShortcuts} </b><button aria-label="Close" onclick='this.parentElement.close()'>X</button>` +
+ `<ul><b>${locale.kbdMovement}</b><li><kbd>&#8593</kbd> ${locale.kbdPanUp}</li><li><kbd>&#8595</kbd> ${locale.kbdPanDown}</li><li><kbd>&#8592</kbd> ${locale.kbdPanLeft}</li><li><kbd>&#8594</kbd> ${locale.kbdPanRight}</li><li><kbd>+</kbd> ${locale.btnZoomIn}</li><li><kbd>-</kbd> ${locale.btnZoomOut}</li><li><kbd>shift</kbd> + <kbd>&#8592/&#8593/&#8594/&#8595</kbd> 3x ${locale.kbdPanIncrement}</li><li><kbd>ctrl</kbd> + <kbd>&#8592/&#8593/&#8594/&#8595</kbd> 0.2x ${locale.kbdPanIncrement}</li><li><kbd>shift</kbd> + <kbd>+/-</kbd> ${locale.kbdZoom}</li></ul>` +
+ `<ul><b>${locale.kbdFeature}</b><li><kbd>&#8592/&#8593</kbd> ${locale.kbdPrevFeature}</li><li><kbd>&#8594/&#8595</kbd> ${locale.kbdNextFeature}</li></ul>`;
  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 =
  `<summary><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 0 24 24" width="30px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path></svg></summary>` +
  '<div class="mapml-attribution-container">' +
- `<button onclick="this.closest(\'.leaflet-container\').querySelector(\'.shortcuts-dialog\').showModal()" class="shortcuts-button mapml-button">${M.options.locale.kbdShortcuts}</button> | ` +
+ `<button onclick="this.closest(\'.leaflet-container\').querySelector(\'.shortcuts-dialog\').showModal()" class="shortcuts-button mapml-button">${locale.kbdShortcuts}</button> | ` +
  prefixAndAttribs.join(' <span aria-hidden="true">|</span> ') +
  '</div>';
  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);
  }
 });
 

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'

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'] };

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 = "<span aria-hidden='true'>&#x021BA</span>";
- link.title = M.options.locale.cmReload;
+ link.title = locale.cmReload;
  link.setAttribute('type', 'button');
  link.classList.add('mapml-button');
  link.setAttribute('aria-label', 'Reload');

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');

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);

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;
  }