Translate error labels

[lapchenkovbyu]

Hi everyone!

Even when 'de-DE' locale for geocoder is set (as it is referenced at example), 'No resutls found' error is displayed in English, rather then in locale selected.

Expected behavior: Localized error output.

Example may be found here - official documentation page

[andrewharvey]

Hi! This isn't yet implemented. The codebase was recently enhanced to allow the search placeholder to be localised by default, so this could be extended to include the other error text strings.

See https://github.com/mapbox/mapbox-gl-geocoder/blob/master/lib/localization.js

Are you interested in submitting a PR to implement this? I'm happy to help review one.

[lapchenkovbyu]

I’m not sure if I am able to invest some time right now, but it’s definitely a nice little thing to do. If it will be still open as soon as I will have some free time- I will definitely make an effort

пн, 16 дек. 2019 г. в 23:48, Andrew Harvey [email protected]:

Hi! This isn't yet implemented. The codebase was recently enhanced to allow the search placeholder to be localised by default, so this could be extended to include the other error text strings.

See https://github.com/mapbox/mapbox-gl-geocoder/blob/master/lib/localization.js

Are you interested in submitting a PR to implement this? I'm happy to help review one.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mapbox/mapbox-gl-geocoder/issues/328?email_source=notifications&email_token=AG7NCSDVDSB6ICKG6PYAG4TQY7ZUJA5CNFSM4J3LM3VKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHAG5BA#issuecomment-566259332, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG7NCSB3TZ3EHH74MP5UWDTQY7ZUJANCNFSM4J3LM3VA .

[gregoryscode]

Hey guys,

I found a workaround to this issue using the DOMSubtreeModified event listener. I added this event listener to the 'suggestions' class that holds the 'No results found' message. In the code below I'll show how to translate this message and the 'Search' placeholder of the search input as well. I'm working with angular btw.

  setupGeocoder() {
    var geocoder = new MapboxGeocoder({
      accessToken: Mapboxgl.accessToken,
      language: 'pt-BR',
      mapboxgl: Mapboxgl
    });

    // Place the search input outside the map
    document.getElementById('geocoder').appendChild(geocoder.onAdd(this.map));

    // Translate the search input placeholder
    document.getElementsByClassName('mapboxgl-ctrl-geocoder--input')[0].setAttribute('placeholder', 'Pesquise por cidade, rua, bairro ou CEP');

    // Translate the 'no records found' message
    document.getElementsByClassName('suggestions')[0].addEventListener("DOMSubtreeModified", this.onChange.bind(this));
  }

  onChange(event) {
    if (event.path[0].innerText === "No results found") {
      event.path[0].innerHTML = event.path[0].innerHTML.replace("No results found", "Nenhum resultado encontrado.");
    }
  }

[lapchenkovbyu]

Thank you for your idea, though grabbing element from a DOM tree directly is on surface, and was never considered a good practice. I think we can do something about this in a nearest future, as I have some time now for this kind of entertainment ;-)

Regards

вт, 16 июня 2020 г. в 05:40, Gregory Perozzo [email protected]:

Hey guys,

I found a workaround to this issue using the DOMSubtreeModified event listener. I added this event listener to the 'suggestions' class that holds the 'No results found' message. In the code below I'll show how to translate this message and the 'Search' placeholder of the search input as well. I'm working with angular btw.

setupGeocoder() { var geocoder = new MapboxGeocoder({ accessToken: Mapboxgl.accessToken, language: 'pt-BR', mapboxgl: Mapboxgl });

// Place the search input outside the map
document.getElementById('geocoder').appendChild(geocoder.onAdd(this.map));

// Translate the search input placeholder
document.getElementsByClassName('mapboxgl-ctrl-geocoder--input')[0].setAttribute('placeholder', 'Pesquise por cidade, rua, bairro ou CEP');

// Translate the 'no records found' message
document.getElementsByClassName('suggestions')[0].addEventListener("DOMSubtreeModified", this.onChange.bind(this));

}

onChange(event) { if (event.path[0].innerText === "No results found") { event.path[0].innerHTML = event.path[0].innerHTML.replace("No results found", "Nenhum resultado encontrado."); } }

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mapbox/mapbox-gl-geocoder/issues/328#issuecomment-644496215, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG7NCSEGGAP7FFR77KWKZZTRW3LR5ANCNFSM4J3LM3VA .

[kreba]

I can pass a locale option when instantiating a new map. Something like this for the geocoder GUI would be very nice indeed!

[knitzie2]

+1

[pnavarretec01]

Hey guys,

I found a workaround to this issue using the DOMSubtreeModified event listener. I added this event listener to the 'suggestions' class that holds the 'No results found' message. In the code below I'll show how to translate this message and the 'Search' placeholder of the search input as well. I'm working with angular btw.

  setupGeocoder() {
    var geocoder = new MapboxGeocoder({
      accessToken: Mapboxgl.accessToken,
      language: 'pt-BR',
      mapboxgl: Mapboxgl
    });

    // Place the search input outside the map
    document.getElementById('geocoder').appendChild(geocoder.onAdd(this.map));

    // Translate the search input placeholder
    document.getElementsByClassName('mapboxgl-ctrl-geocoder--input')[0].setAttribute('placeholder', 'Pesquise por cidade, rua, bairro ou CEP');

    // Translate the 'no records found' message
    document.getElementsByClassName('suggestions')[0].addEventListener("DOMSubtreeModified", this.onChange.bind(this));
  }

  onChange(event) {
    if (event.path[0].innerText === "No results found") {
      event.path[0].innerHTML = event.path[0].innerHTML.replace("No results found", "Nenhum resultado encontrado.");
    }
  }

it work for me!! thanks!!

[luisdoniad]

CSS solution: .mapbox-gl-geocoder--no-results { display: none; }

[dev7ch]

..mmh, i was able to work around with:

    geocoder.on('results', () => {
        const noResults = document.querySelector('.mapbox-gl-geocoder--error.mapbox-gl-geocoder--no-results')
        if (noResults) {
          noResults.innerHTML = 'Keine Strassennamen in Basel gefunden.'
        }
      })