abaev-basex-htmx/xq/site/components/map.xqm

module namespace map = 'http://ossetic-studies.org/ns/abaevdict-site/map';

import module namespace abv-m = 'http://ossetic-studies.org/ns/abaevdict-mod' at '../../abv-mod.xqm';

declare %rest:path("{$lang}/map")
        %rest:query-param("entry", "{$entry}")
        %rest:GET
        %rest:produces("text/html")
        %output:method("html")
        %output:html-version('5')
        function map:map($lang as xs:string, $entry as xs:string) {
          let $mapdata := abv-m:make-geomap(
            doc(`abaevdict_{$lang}/xml/{$entry}.xml`), 
            $lang)
          return
          (<article>
            <header>
              <button class="abv-close-map" aria-label="Close" rel="prev">
              </button>
              <p>{if ($lang = 'ru') then 'Карта' else 'Map'}</p>
            </header>
            <p>
              <div id="map-display" style="width:100%;height:80%;"></div>
            </p>
            <footer>
              <button class="abv-close-map" 
              hx-on-click="document.getElementById('modal_map').close()">
              {if ($lang = 'ru') then 'Закрыть' else 'Close'}
              </button>
            </footer>
          </article>,
          <script defer="1">
          {concat(`var mapdata = {json:serialize($mapdata)}`,
            "
            map = document.getElementById('map-display');
            var layout = {
                    // title: {
                    //     text: 'Canadian cities',
                    //     font: {
                    //         family: 'Droid Serif, serif',
                    //         size: 16
                    //     }
                    // },
                    geo: {
                        scope: 'world',
                        resolution: 50,
                        fitbounds: 'locations',
                        showrivers: true,
                        rivercolor: '#fff',
                        showlakes: true,
                        lakecolor: '#fff',
                        showland: true,
                        landcolor: '#EAEAAE',
                        showcountries: false,
                        subunitcolor: '#d3d3d3'
                    }
                };
            Plotly.newPlot(map, [mapdata], layout);          
          ")}
          </script>)       
        };
        
declare %rest:path("map")
        %rest:query-param("entry", "{$entry}")
        %rest:GET
        %rest:produces("text/html")
        %output:method("html")
        %output:html-version('5')
        function map:map($entry as xs:string) {
          map:map('en', $entry)
};