practices_map/index.html at master · bonez0607/practices_map · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <!-- InstanceBeginEditable name="doctitle" -->
  <title>Map with modal box</title>

  <link rel="stylesheet" href="css/map.css"></link>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/raphael-min.js"></script>
  <script type="text/javascript" src="js/map.js"></script>

  <!-- End Map Scripts -->
</head>
<body>
  <h1>Map Demo</h1>

  <!--====||USA SVG MAP||===-->
  <div id="map">
    <h3>This map is a demonstration of an SVG map that visually adapts to data provided to it via xml</h3>
    <!--Radio Buttons-->
    <div class="practice-selection">
        <label class="alleycroppingLabel" for="AlleyCropping">
          <input checked="checked" id="AlleyCropping" name="practice" type="radio" />
        Alley Cropping (311)</label>
        <label class="multistoryLabel" for="MultistoryCropping">
          <input id="MultistoryCropping" name="practice" type="radio" />
        Multistory Cropping (379)</label>
        <label class="riparianLabel" for="RiparianForestBuffers">
          <input id="RiparianForestBuffers" name="practice" type="radio" />
        Riparian Forest Buffers (391)</label>
        <label class="silvopastureLabel" for="Silvopasture">
          <input id="Silvopasture" name="practice" type="radio" />
        Silvopasture Establishment (381)</label>
        <label class="windbreaksLabel" for="WindbreakEstablishment">
          <input id="WindbreakEstablishment" name="practice" type="radio" />
        Windbreak Establishment (380)</label>
        <label class="windbreakrenovationLabel" for="WindbreakRenovation">
          <input id="WindbreakRenovation" name="practice" type="radio" />
        Windbreak Renovation (650)</label>
    </div>
    <div id="united-states">
      <!--PRE-LOADER-->
      <div class="preloader">
        <div class="preloader-text">
          <h5>Loading...</h5>
        </div>
        <div class="preloader-spin"></div>
      </div>
    </div>
    <p><em>This map was updated in May 2017.</em></p>
    <!--MODAL POPUP-->
    <div class="infobox" tabindex="-1">
      <div class="infobox_title">
        <h1>Region name</h1>
      </div>
      <div class="infobox_body">
        <div class="offeredPractice"></div>
        <div class="notOfferedPractice"></div>
      </div>
      <button aria-label="Opens new window to NRCS Field Office Technical Guide locator" class="trigger" title="Opens new window to NRCS Field Office Technical Guide locator">Find your FOTG<span class="external"></span></button>
      <button aria-label="close" class="infobox_close" title="close"></button>
    </div>
  </div>
</body>
</html>