Model Mapping Application
  1. Components
  2. LegendComponent

File

components/legend/legend.component.ts

Metadata

selector app-legend
standalone true
templateUrl ./legend.component.html
styleUrl ./legend.component.scss 
import {Component} from '@angular/core';

@Component({
  selector: 'app-legend',
  standalone: true,
  styleUrl: './legend.component.scss',
  templateUrl: './legend.component.html',
})
export class LegendComponent {}

<div class="legend">
  <div class="legend-control-item grid-row">
    <h4>NSHM Border</h4>

    <div class="grid-col-12">
      <hr size="20" color="black" />
    </div>
  </div>

  <div class="legend-control-item grid-row">
    <h4>Test Sites</h4>

    <div>
      <span class="icon">
        <img
          src="assets/leaflet/icons/marker-icon-blue.png"
          alt="Site marker icon"
        />
      </span>
    </div>
  </div>

  <div class="legend-control-item grid-row">
    <h4>Décollement Sections</h4>

    <div class="grid-col-12">
      <hr size="20" color="purple" />
    </div>
  </div>

  <div class="legend-control-item grid-row">
    <h4>Fault Sections</h4>

    <div class="grid-col-12">
      <hr size="20" color="red" />
    </div>
  </div>

  <div class="legend-control-item grid-row">
    <h4>Interface Sections</h4>

    <div class="grid-col-12">
      <hr size="20" color="green" />
    </div>
  </div>

  <div class="legend-control-item grid-row">
    <h4>Zone Sources</h4>

    <div class="grid-col-12">
      <hr size="20" color="blue" />
    </div>
  </div>

  <div class="legend-control-item gird-row">
    <h4>U.S. Hazard</h4>
    <ul class="hazard-legend grid-col-12">
      <li style="background-color: rgba(247, 247, 247, 1)"></li>
      <li style="background-color: rgba(229, 229, 229, 1)"></li>
      <li style="background-color: rgba(204, 204, 204, 1)"></li>
      <li style="background-color: rgba(148, 255, 255, 1)"></li>
      <li style="background-color: rgba(145, 232, 125, 1)"></li>
      <li style="background-color: rgba(255, 255, 15, 1)"></li>
      <li style="background-color: rgba(255, 168, 0, 1)"></li>
      <li style="background-color: rgba(255, 0, 0, 1)"></li>
    </ul>
    <div class="hazard-scale grid-col-12">
      <span> Less </span>
      <span> &rarr; </span>
      <span> More </span>
    </div>
    <a
      href="https://www.usgs.gov/natural-hazards/earthquake-hazards/science/introduction-national-seismic-hazard-maps"
      target="_blank"
    >
      Hazard Map Details
    </a>
  </div>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""