cesium-drupal/qd30map/templates/qd30mini.html.twig

  <div id="app-container">
    <div id="boutique-map-cesium"></div>
    {#<div id="form-wrap">#}

      {#<div class="form-container">#}
        {#<form id="map-form" role="search" method="get" class="search-form">#}
          {#<ul class="categories" id="categories"><span>Categories</span>#}
          {#</ul>#}
          {#<br>#}
        {#</form>#}
      {#</div>#}
    {#</div>#}
    {#<div class='nav-ui-wrap'>#}
      {#<div id='zoom'>#}
        {#<button id='zoom-in' class='map-button'>+#}
        {#</button>#}
        {#<button id='zoom-out' class='map-button'>-#}
        {#</button>#}
      {#</div>#}


      {#<div id='nav-arrows'>#}
        {#<button id='nav-up' class='map-button'>↑#}
        {#</button>#}
        {#<button id='nav-left' class='map-button'>←#}
        {#</button>#}
        {#<button id='nav-down' class='map-button'>↓#}
        {#</button>#}
        {#<button id='nav-right' class='map-button'>→#}
        {#</button>#}
      {#</div>#}

      {#<button id='nav-reset' class='map-button'>#}
      {#</button>#}
      {#<button id='layer-toggle'></button>#}
      {#<button class='map-button' id='open-legend'>?</button>#}
    {#</div>#}

    {#<div id ='legend' class='map-legend'>#}
      {#<button title='Open legend' class='legend'>?</button>#}
      {#<div class='map-legend-info'>#}
        {#<div class='legend-title'>Legend</div>#}
        {#<div class='closelegend'>#}
          {#<button class='closemenu' title='Close legend'>#}
            {#<span class='smallcaps'>Close</span>#}
            {#<img class='icon' src='sites/quartierdix30/modules/custom/qd30map/gfx/icon_menuclose-greydk.svg' alt=''/>#}
          {#</button>#}
        {#</div>#}

        {#<div class='legend-row'>#}
          {#<img class='icon' src='sites/quartierdix30/modules/custom/qd30map/gfx/icon_mappointer-b.svg' alt='Icon of a map pointer'/>#}
          {#<div>Selected</div>#}
        {#</div>#}
        {#<div class='legend-row'>#}
          {#<img class='icon' src='sites/quartierdix30/modules/custom/qd30map/gfx/icon_mappointer-w_outlined.svg' alt='Icon of a map pointer'/>#}
          {#<div>Highlighted (e.g. search results)</div>#}
        {#</div>#}
        {#<div class='legend-row'>#}
          {#<img class='icon' src='sites/quartierdix30/modules/custom/qd30map/gfx/icon_grill.svg' alt='Icon of a square with a diagonal grill pattern'/>#}
          {#<div>Has a current event</div>#}
        {#</div>#}

        {#<div class='legend-controls'>#}
          {#<img class='legend-control-icon' src='sites/quartierdix30/modules/custom/qd30map/gfx/map-zoom.svg' alt='Icon of plus/minus buttons'/>#}
          {#<div>Zoom</div>#}
          {#<img class='legend-control-icon' src='sites/quartierdix30/modules/custom/qd30map/gfx/map-navigate.svg' alt='Icon of arrow keys'/>#}
          {#<div>Navigate</div>#}
        {#</div>#}
      {#</div>#}
    {#</div>#}
  </div>