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

  <div id="app-container">
    <div id="qd30map-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' id='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='map-search' 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 id="loading-placeholder"><h1>ALWAYS QD30!!</h1></div>
  </div>