Map popups not showing translated content - ^v10

Created on 8 August 2024, 5 months ago
Updated 2 September 2024, 4 months ago

Same as issue reported for 8.x-1.x-dev version - https://www.drupal.org/project/leaflet/issues/2913312

Currently, map popups seem to only show the default language, not translations. Example in the wild - https://www.kobejet.com/ja/changsuo/bingkuquyisuo

The popup should show the Hyogo Ward Office information in the translated language (Japanese).

💬 Support request
Status

Fixed

Version

10.2

Component

Code

Created by

🇺🇸United States w01f

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @w01f
  • Status changed to Closed: cannot reproduce 5 months ago
  • 🇮🇹Italy itamair

    Please don't report and mark issues as Bugs if you don't have clear evidences that it is so, and only assume due the fact things don't work as you expect on your specific side.
    Moreover you are referring to an existing similar Bug report that looks resolved / fixed.

    Indeed I cannot reproduce what you report (with latest 10.2.23 Leaflet version) and all looks good on the Translations side, both on the Leaflet Popups and Tooltips and whatsoever, as you can see from attached screenshots.

    In the end the Leaflet View Style is reflecting normal translation features of the View module itself, and you should probably address this issue on your specific setup.

    For instance, make sure you you are using proper Content Translation setup, Translation detection and negotiation, so as
    Rendering Language: Interface text language selected for page
    in Language View Style setting ... etc.

    Move this back to BUG only if you have deeply debugged what is wrong in the Leaflet module code base and you can clearly prove and document you buggy code findings ...

  • Status changed to Needs work 5 months ago
  • 🇺🇸United States w01f

    Hi Italo,

    Here are additional, hopefully helpful details.

    The referenced fixed issue was for Drupal 8 - I was including it as it seems related, though for a different major Drupal version.

    The issue presents itself when using Layout Builder on a content type and selecting the "Leaflet Map" formatter option for a Geofield-type field block. For example:
    https://www.kobejet.com/ja/locations/map

    For views using the Leaflet Map format, the popups do indeed show the correct selected interface language. For example:
    https://www.kobejet.com/ja/locations/map

    I'm including the leaflet part of the config in LB for the

            layout_id: layout_onecol
            layout_settings:
              label: ''
              context_mapping: {  }
            components:
              831530ed-4b00-40b5-adaa-7e67867314fb:
                uuid: 831530ed-4b00-40b5-adaa-7e67867314fb
                region: content
                configuration:
                  id: 'field_block:node:location:field_location'
                  label: Location
                  label_display: '0'
                  provider: layout_builder
                  context_mapping:
                    entity: layout_builder.entity
                    view_mode: view_mode
                  formatter:
                    type: leaflet_formatter_default
                    label: above
                    settings:
                      multiple_map: false
                      leaflet_map: 'OSM Mapnik'
                      height: 400
                      height_unit: px
                      hide_empty_map: true
                      disable_wheel: false
                      gesture_handling: true
                      fitbounds_options: '{"padding":[0,0]}'
                      reset_map:
                        control: false
                        options: '{"position":"topleft","title":"Reset View"}'
                      map_scale:
                        control: false
                        options: '{"position":"bottomright","maxWidth":100,"metric":true,"imperial":false,"updateWhenIdle":false}'
                      locate:
                        control: true
                        options: '{"position":"topright","setView":"false","returnToPrevBounds":true,"keepCurrentZoomLevel":true,"strings":{"title":"Locate my position"}}'
                        automatic: true
                      leaflet_tooltip:
                        value: ''
                        options: '{"permanent":false,"direction":"center"}'
                      leaflet_popup:
                        control: '1'
                        content: "<h2>[node:title]</h2>\r\n[node:field_address]"
                        options: '{"maxWidth":"300","minWidth":"50","autoPan":true}'
                      map_position:
                        force: false
                        center:
                          lat: 0.0
                          lon: 0.0
                        zoomControlPosition: topleft
                        zoom: 14
                        minZoom: 1
                        maxZoom: 18
                        zoomFiner: 0
                      icon:
                        iconType: marker
                        iconUrl: ''
                        shadowUrl: ''
                        className: ''
                        iconSize:
                          x: ''
                          'y': ''
                        iconAnchor:
                          x: ''
                          'y': ''
                        shadowSize:
                          x: ''
                          'y': ''
                        shadowAnchor:
                          x: ''
                          'y': ''
                        popupAnchor:
                          x: ''
                          'y': ''
                        html: '<div></div>'
                        html_class: leaflet-map-divicon
                        circle_marker_options: '{"radius":100,"color":"red","fillColor":"#f03","fillOpacity":0.5}'
                      leaflet_markercluster:
                        control: true
                        options: '{"spiderfyOnMaxZoom":true,"showCoverageOnHover":true,"removeOutsideVisibleBounds":false}'
                        include_path: false
                      fullscreen:
                        control: true
                        options: '{"position":"topleft","pseudoFullscreen":false}'
                      path: '{"color":"#3388ff","opacity":"1.0","stroke":true,"weight":3,"fill":"depends","fillColor":"*","fillOpacity":"0.2","radius":"6"}'
                      feature_properties:
                        values: ''
                      geocoder:
                        control: false
                        settings:
                          autocomplete:
                            placeholder: 'Search Address'
                            title: 'Search an Address on the Map'
                          position: topright
                          input_size: 25
                          providers:
                            freegeoip:
                              weight: 0
                              checked: false
                            googlemaps:
                              weight: 0
                              checked: false
                            openstreetmap:
                              weight: 0
                              checked: false
                          min_terms: 4
                          delay: 800
                          zoom: 16
                          popup: false
                          options: ''
                      map_lazy_load:
                        lazy_load: true
                    third_party_settings:
                      fences:
                        fences_field_tag: div
                        fences_field_classes: ''
                        fences_field_items_wrapper_tag: none
                        fences_field_items_wrapper_classes: ''
                        fences_field_item_tag: div
                        fences_field_item_classes: ''
                        fences_label_tag: div
                        fences_label_classes: ''
                weight: 6
                additional: {  }
            third_party_settings: {  }
  • Status changed to Fixed 5 months ago
  • 🇮🇹Italy itamair

    @W01F still cannot reproduce this issue of you,
    as all looks properly translated in the Leaflet Popup, also when the Leaflet Map (Formatter) in injected and rendered throughout the Layout Builder.

    I also specifically provided the following translated Content demo page, for your evidence:

    Fat Cat: https://www.geodemocracy.com/drupal_geofield_stack_demo/web/geo-place/fa...
    Gatto Grosso (corresponding in Italian): https://www.geodemocracy.com/drupal_geofield_stack_demo/web/it/geo-place...

    Note: Differently from the Leaflet Formatter field (first map on the right region),
    the second bottom map (below on the right region) is being rendered with the following technique (that I prefer over the Leaflet Formatter):
    - still use the Leaflet View style, but render only the feature / item corresponding to the node that is being viewed (throughout the Contextual Filter);
    - inject the above set Leaflet View in the specific Node content View throughout the View field module (properly setup for the specific Node / Content type): https://www.drupal.org/project/viewfield

    Hence, I cannot say what could be wrong on your side / setup (also because all looks good to my side ... ),
    BUT, if Leaflet Popup translations works fine with the Leaflet View, well, surely you could go with the 2nd Leaflet Map View technique that I briefly described here ...

  • 🇺🇸United States w01f

    Hi Itamair... no idea what I did or happened, but it now seems to be fixed. Thank you for taking the time to also investigate and your thorough responses. If I figure out what changed I'll follow up here to potentially help anyone else who might experience the same thing.

  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024