layer-palette.hbs

<button
  class="button hollow expanded hide-for-medium hide-for-print
    {{if this.closed " no-margin"}}" type="button" {{action (mut this.closed) (not this.closed)}}
>
  {{#if this.closed}}
    <FaIcon @icon="chevron-down" /> Edit Map Layers
  {{else}}
    <FaIcon @icon="chevron-up" /> Close Map Layers
  {{/if}}
</button>
<div id="layers-menu" class="{{if this.closed "show-for-medium"}}">
  {{#if this.showToggleLayersBackOn}}
    <a
      class="button gray small no-layers-button hide-for-print"
      onclick={{action this.undoSetAllLayerVisibilityToFalse}}
      data-test-reset-query-params="true">
      <FaIcon @icon="undo" />
      Toggle Layers Back On
    </a>
  {{else}}
    <a
      class="button gray small no-layers-button hide-for-print"
      onclick={{action this.setAllLayerVisibilityToFalse}}
      data-test-reset-query-params="true">
      <FaIcon @icon="circle-xmark" @prefix="far" />
      Toggle All Map Layers Off
    </a>
  {{/if}}
  <LabsUiOverrides::LayerGroupsContainer
    @handleToggle={{action this.handleLayerGroupToggle}}
    @title="Zoning and Land Use" as |container|
  >
    <container.layer-group-toggle
      data-test-toggle-tax-lots
      @layerGroup={{this.layerGroups.tax-lots}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.tax-lots this.zoomWarningLabel this.mainMap.zoom}}>
      <label
        class="checkbox-wrapper"
        data-test-layer-option="land-use-checkbox"
        onclick={{action
          "setPaintForLayerGroup"
          this.layerGroups.tax-lots
          "pluto-fill"
          (hash fill-opacity=(if this.plutoFill 0 0.5))
        }}>
        {{input type="checkbox" checked=this.plutoFill}}
        Show Land Use Colors
      </label>
      {{#if this.plutoFill}}
        <ul class="layer-key">
          {{#each
            (array
              (hash color="#FEFFA8" title="One & Two Family Buildings")
              (hash color="#FCB842" title="Multi-Family Walk-Up Buildings")
              (hash color="#B16E00" title="Multi-Family Elevator Buildings")
              (hash
                color="#ff8341" title="Mixed Residential & Commercial Buildings"
              )
              (hash color="#fc2929" title="Commercial & Office Buildings")
              (hash color="#E362FB" title="Industrial & Manufacturing")
              (hash color="#E0BEEB" title="Transportation & Utility")
              (hash color="#44A3D5" title="Public Facilities & Institutions")
              (hash color="#78D271" title="Open Space & Outdoor Recreation")
              (hash color="#BAB8B6" title="Parking Facilities")
              (hash color="#555555" title="Vacant Land")
              (hash color="#E7E7E7" title="Other")
            ) as |landuse|
          }}
            <li>
              <span style={{sanitize (hash color=landuse.color)}}>
                <FaIcon @icon="square" />
              </span>
              {{landuse.title}}
            </li>
          {{/each}}
        </ul>
      {{/if}}
    </container.layer-group-toggle>
    <container.layer-group-toggle
      data-test-toggle-zoning-districts
      @layerGroup={{this.layerGroups.zoning-districts}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.zoning-districts this.zoomWarningLabel this.mainMap.zoom}}
    >
      <ul class="layer-menu-item--group-checkboxes">
        {{#each this.zoningDistrictOptionSets as |optionSet|}}
          <li>
            <GroupedCheckboxes
              @group={{optionSet}}
              @selected={{this.selectedZoning}}
              @selectionChanged={{action this.setFilterForZoning}}
            />
          </li>
        {{/each}}
      </ul>
    </container.layer-group-toggle>
    <container.layer-group-toggle
      data-test-toggle-commercial-overlays
      @layerGroup={{this.layerGroups.commercial-overlays}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.commercial-overlays this.zoomWarningLabel this.mainMap.zoom}}>
      <ul class="layer-menu-item--group-checkboxes">
        {{#each this.commercialOverlaysOptionSets as |optionSet|}}
          <li>
            <GroupedCheckboxes
              @group={{optionSet}}
              @selected={{this.selectedOverlays}}
              @selectionChanged={{action this.setFilterForOverlays}}
            />
          </li>
        {{/each}}
      </ul>
    </container.layer-group-toggle>
    <container.layer-group-toggle
      data-test-toggle-zoning-map-amendments
      @layerGroup={{this.layerGroups.zoning-map-amendments}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.zoning-map-amendments this.zoomWarningLabel this.mainMap.zoom}}>
      <LayerControlTimeline
        @layerGroup={{this.layerGroups.zoning-map-amendments}}
        @column="effective_epoch"/>
    </container.layer-group-toggle>
    <container.layer-group-toggle
      data-test-toggle-zoning-map-amendments-pending
      @layerGroup={{this.layerGroups.zoning-map-amendments-pending}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.zoning-map-amendments-pending this.zoomWarningLabel this.mainMap.zoom}}/>
    <container.layer-group-toggle
      data-test-toggle-special-purpose-districts
      @layerGroup={{this.layerGroups.special-purpose-districts}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.special-purpose-districts this.zoomWarningLabel this.mainMap.zoom}}/>
    <container.layer-group-toggle
      data-test-toggle-special-purpose-subdistricts
      @layerGroup={{this.layerGroups.special-purpose-subdistricts}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.special-purpose-subdistricts this.zoomWarningLabel this.mainMap.zoom}}/>
  </LabsUiOverrides::LayerGroupsContainer>
  <LabsUiOverrides::LayerGroupsContainer
    @handleToggle={{action this.handleLayerGroupToggle}}
    @title="Supporting Zoning Layers" as |container|>
    <container.layer-group-toggle
      data-test-toggle-mandatory-inclusionary-housing
      @layerGroup={{this.layerGroups.mandatory-inclusionary-housing}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.mandatory-inclusionary-housing this.zoomWarningLabel this.mainMap.zoom}}/>
    <container.layer-group-toggle
      data-test-toggle-inclusionary-housing
      @layerGroup={{this.layerGroups.inclusionary-housing}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.inclusionary-housing this.zoomWarningLabel this.mainMap.zoom}}/>
    <container.layer-group-toggle
      data-test-toggle-cho-greater-transit-zone
      @layerGroup={{this.layerGroups.cho-greater-transit-zone}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.cho-greater-transit-zone this.zoomWarningLabel this.mainMap.zoom}}>
      <LabsUi::LegendItems @items={{this.layerGroups.cho-greater-transit-zone.legend.items}} />
    </container.layer-group-toggle>
    <container.layer-group-toggle
      data-test-toggle-cho-transit-zones
      @layerGroup={{this.layerGroups.cho-transit-zones}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.cho-transit-zones this.zoomWarningLabel this.mainMap.zoom}}>
      <LabsUi::LegendItems @items={{this.layerGroups.cho-transit-zones.legend.items}} />
    </container.layer-group-toggle>
    <container.layer-group-toggle
      data-test-toggle-fresh
      @layerGroup={{this.layerGroups.fresh}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.fresh this.zoomWarningLabel this.mainMap.zoom}}>
      <LabsUi::LegendItems @items={{this.layerGroups.fresh.legend.items}} />
    </container.layer-group-toggle>
    <container.layer-group-toggle
      data-test-toggle-limited-height-districts
      @layerGroup={{this.layerGroups.limited-height-districts}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.limited-height-districts this.zoomWarningLabel this.mainMap.zoom}}/>
    <container.layer-group-toggle
      data-test-toggle-low-density-growth-mgmt-areas
      @layerGroup={{this.layerGroups.low-density-growth-mgmt-areas}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.low-density-growth-mgmt-areas this.zoomWarningLabel this.mainMap.zoom}}/>
    <container.layer-group-toggle
      data-test-toggle-coastal-zone-boundary
      @layerGroup={{this.layerGroups.coastal-zone-boundary}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.coastal-zone-boundary this.zoomWarningLabel this.mainMap.zoom}}/>
    <container.layer-group-toggle
      data-test-toggle-waterfront-access-plan
      @layerGroup={{this.layerGroups.waterfront-access-plan}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.waterfront-access-plan this.zoomWarningLabel this.mainMap.zoom}}/>
    <container.layer-group-toggle
      data-test-toggle-historic-districts
      @layerGroup={{this.layerGroups.historic-districts}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.historic-districts this.zoomWarningLabel this.mainMap.zoom}}/>
    <container.layer-group-toggle
      data-test-toggle-landmarks
      @layerGroup={{this.layerGroups.landmarks}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.landmarks this.zoomWarningLabel this.mainMap.zoom}}>
      <LabsUi::LegendItems @items={{this.layerGroups.landmarks.legend.items}} />
    </container.layer-group-toggle>
    <container.layer-group-toggle
      data-test-toggle-floodplain-efirm2007
      @layerGroup={{this.layerGroups.floodplain-efirm2007}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.floodplain-efirm2007 this.zoomWarningLabel this.mainMap.zoom}}>
      <ul class="layer-menu-item--group-checkboxes">
        {{#each this.firmOptionSets as |optionSet|}}
          <li>
            <GroupedCheckboxes
              @group={{optionSet}}
              @selected={{this.selectedFirm}}
              @selectionChanged={{action this.setFilterForFirm}}/>
          </li>
        {{/each}}
      </ul>
    </container.layer-group-toggle>
    <container.layer-group-toggle
      data-test-toggle-floodplain-pfirm2015
      @layerGroup={{this.layerGroups.floodplain-pfirm2015}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.floodplain-pfirm2015 this.zoomWarningLabel this.mainMap.zoom}}>
      <ul class="layer-menu-item--group-checkboxes">
        {{#each this.pfirmOptionSets as |optionSet|}}
          <li>
            <GroupedCheckboxes
              @group={{optionSet}}
              @selected={{this.selectedPfirm}}
              @selectionChanged={{action this.setFilterForPfirm}}
            />
          </li>
        {{/each}}
      </ul>
    </container.layer-group-toggle>
    <container.layer-group-toggle
      data-test-toggle-e-designations
      @layerGroup={{this.layerGroups.e-designations}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.e-designations this.zoomWarningLabel this.mainMap.zoom}}>
      <LabsUi::LegendItem @item={{this.layerGroups.e-designations.legend}} />
    </container.layer-group-toggle>
    <container.layer-group-toggle
      data-test-toggle-transit-zones
      @layerGroup={{this.layerGroups.transit-zones}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.transit-zones this.zoomWarningLabel this.mainMap.zoom}}/>
    <container.layer-group-toggle
      data-test-toggle-appendixj-designated-mdistricts
      @layerGroup={{this.layerGroups.appendixj-designated-mdistricts}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.appendixj-designated-mdistricts this.zoomWarningLabel this.mainMap.zoom}}/>
  </LabsUiOverrides::LayerGroupsContainer>
  <LabsUiOverrides::LayerGroupsContainer
    @handleToggle={{action this.handleLayerGroupToggle}}
    @title="Other Supporting Layers" as |container|>
    <container.layer-group-toggle
      data-test-toggle-business-improvement-districts
      @layerGroup={{this.layerGroups.business-improvement-districts}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.business-improvement-districts this.zoomWarningLabel this.mainMap.zoom}}/>
    <container.layer-group-toggle
      data-test-toggle-industrial-business-zones
      @layerGroup={{this.layerGroups.industrial-business-zones}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.industrial-business-zones this.zoomWarningLabel this.mainMap.zoom}}/>
  </LabsUiOverrides::LayerGroupsContainer>
  <LabsUiOverrides::LayerGroupsContainer
    @handleToggle={{action this.handleLayerGroupToggle}}
    @title="Administrative Boundaries" as |container|>
    <container.layer-group-toggle
      data-test-toggle-boroughs
      @layerGroup={{this.layerGroups.boroughs}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.boroughs this.zoomWarningLabel this.mainMap.zoom}}/>
    <container.layer-group-toggle
      data-test-toggle-community-districts
      @layerGroup={{this.layerGroups.community-districts}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.community-districts this.zoomWarningLabel this.mainMap.zoom}}/>
    <container.layer-group-toggle
      data-test-toggle-nyc-council-districts-combined
      @layerGroup={{this.layerGroups.nyc-council-districts-combined}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.nyc-council-districts-combined this.zoomWarningLabel this.mainMap.zoom}}>
      <ul class="layer-menu-item--group-checkboxes">
        {{#each this.cityCouncilDistrictsOptionSets as |optionSet|}}
          <li>
            <GroupedCheckboxes
              @group={{optionSet}}
              @selected={{this.selectedCouncilDistricts}}
              @cityCouncilToggled={{this.cityCouncilToggled}}
              @selectionChanged={{action this.setFilterForCouncilDistricts}}
            />
          </li>
        {{/each}}
      </ul>
     </container.layer-group-toggle>
    <container.layer-group-toggle
      data-test-toggle-ny-senate-districts
      @layerGroup={{this.layerGroups.ny-senate-districts}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.ny-senate-districts this.zoomWarningLabel this.mainMap.zoom}}/>
    <container.layer-group-toggle
      data-test-toggle-assembly-districts
      @layerGroup={{this.layerGroups.assembly-districts}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.assembly-districts this.zoomWarningLabel this.mainMap.zoom}}/>
    <container.layer-group-toggle
      data-test-toggle-neighborhood-tabulation-areas
      @layerGroup={{this.layerGroups.neighborhood-tabulation-areas}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.neighborhood-tabulation-areas this.zoomWarningLabel this.mainMap.zoom}}/>
  </LabsUiOverrides::LayerGroupsContainer>
  <LabsUiOverrides::LayerGroupsContainer
    @handleToggle={{action this.handleLayerGroupToggle}}
    @title="Basemaps" as |container|
>
    <container.layer-group-toggle
      data-test-toggle-subway
      @layerGroup={{this.layerGroups.subway}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.subway this.zoomWarningLabel this.mainMap.zoom}}/>
    <container.layer-group-toggle
      data-test-toggle-building-footprints
      @layerGroup={{this.layerGroups.building-footprints}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.building-footprints this.zoomWarningLabel this.mainMap.zoom}}/>
    <container.layer-group-toggle
      data-test-toggle-three-d-buildings
      @layerGroup={{this.layerGroups.three-d-buildings}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.three-d-buildings this.zoomWarningLabel this.mainMap.zoom}}>
      <ul class="layer-key">
        <li>
          Drag the compass arrow (
          <span
            style="padding: 0; margin-right: -5px; margin-left: -5px;"
            class="mapboxgl-ctrl-icon mapboxgl-ctrl-compass">
            <span
              style="transform: rotate(0deg) scale(0.7); margin: 0; transform-origin: 50% 100%; position: relative; top: 0.25rem; margin-top: -8px;"
              class="mapboxgl-ctrl-compass-arrow">
            </span>
          </span>
          ) to adjust the bearing of the map. Click to reset north.
        </li>
        <li>
          CTRL + drag the map (or CTRL + arrow keys) to adjust both pitch and bearing.
        </li>
      </ul>
    </container.layer-group-toggle>
    <container.layer-group-toggle
      data-test-toggle-aerials
      @layerGroup={{this.layerGroups.aerials}}
      @activeTooltip={{zoom-dependent-label this.layerGroups.aerials this.zoomWarningLabel this.mainMap.zoom}}>
      <ul class="layer-menu-item--group-checkboxes no-bullet list-float-3">
        {{#each this.layerGroups.aerials.layers as |layer|}}
          <li
            {{action this.setSelectionForAerials layer.id}}
            role="button">
            <label>
              <span
                class="layer-group-radio-{{layer.id}}"
                data-test-radio={{layer.id}}>
                <span class="fa-layers">
                  {{#if layer.visibility}}
                    <FaIcon
                      @icon="dot-circle"
                      @prefix="far"
                      class={{if layer.visibility "" "silver"}}/>
                  {{else}}
                    <FaIcon
                      @icon="circle"
                      @prefix="far"
                      class={{if layer.visibility "" "silver"}}/>
                  {{/if}}
                </span>
              </span>
              {{layer.displayName}}
            </label>
          </li>
        {{/each}}
      </ul>
    </container.layer-group-toggle>
  </LabsUiOverrides::LayerGroupsContainer>
</div>
{{yield}}