CureTech/Interactive Map.html at master · SteveAndCow/CureTech · 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
66
67
68
69
70
71
72
73
74
75
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="interactive-map.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

   <div class="container" >
   <div class="row ct-u-padding-bottom-40" >
      <div class="col-lg-6 col-lg-push-6 col-md-7 col-md-push-5" >
         <div class="ct-map" >
            <img alt="Map" class="ct-map__image" src="https://earthengine.googleapis.com/api/thumb?thumbid=71062f91c2d03717e28ff443debe433c&token=731a76043c8dff18f035abb64b4007cb" >
            <div class="ct-city a" >
               <button class="ct-city__button" type="button" tabindex="0" ><img alt="Map Open Icon" class="ct-plus" src="https://www.solodev.com/assets/map/map-plus.png"  data-pin-nopin="true"><img alt="Map Close Icon" class="ct-close" src="https://www.solodev.com/assets/map/map-close.png" data-pin-nopin="true" ><span class="ct-city__name" >Kayunga</span></button>
               <div class="ct-popup" >
                  <div class="inner" >
                     <span class="ct-popup__name" >Kayunga</span>
                     <p class="ct-popup__content" >
                        Population Density:<br /> 225.9/km^2<br />Latitude: 0.702743<br /> Longitude: 32.903731
                     </p>
                  </div>
               </div>
            </div>
            <div class="ct-city b">
               <button class="ct-city__button" type="button" tabindex="0" ><img alt="Map Open Icon" class="ct-plus" src="https://www.solodev.com/assets/map/map-plus.png"  data-pin-nopin="true"><img alt="Map Close Icon" class="ct-close" src="https://www.solodev.com/assets/map/map-close.png"  data-pin-nopin="true"><span class="ct-city__name" >Mukono</span></button>
               <div class="ct-popup" >
                  <div class="inner" >
                     <span class="ct-popup__name" >Mukono</span>
                     <p class="ct-popup__content" >
                        Population Density:<br /> 5,159/km^2<br />Latitude: 0.358217<br /> Longitude: 32.754294
                     </p>
                  </div>
               </div>
            </div>
            <div class="ct-city c" >
               <button class="ct-city__button" type="button" tabindex="0" ><img alt="Map Open Icon" class="ct-plus" src="https://www.solodev.com/assets/map/map-plus.png"  data-pin-nopin="true"><img alt="Map Close Icon" class="ct-close" src="https://www.solodev.com/assets/map/map-close.png" ><span class="ct-city__name" >Kampala</span></button>
               <div class="ct-popup" >
                  <div class="inner" >
                     <span class="ct-popup__name" >Kampala</span>
                     <p class="ct-popup__content" >
                       *CAPITAL*<br />Population Density:<br /> 3,200/km^2<br />Latitude: 0.340990<br /> Longitude: 32.5785
                     </p>
                  </div>
               </div>
            </div>
            <div class="ct-city d" >
               <button class="ct-city__button" type="button" tabindex="0" ><img alt="Map Open Icon" class="ct-plus" src="https://www.solodev.com/assets/map/map-plus.png"  data-pin-nopin="true"><img alt="Map Close Icon" class="ct-close" src="https://www.solodev.com/assets/map/map-close.png" ><span class="ct-city__name" >Jinja</span></button>
               <div class="ct-popup" >
                  <div class="inner" >
                     <span class="ct-popup__name" >Jinja</span>
                     <p class="ct-popup__content" >
                       Population Density:<br /> 744.9/km^2<br />Latitude: 0.448300<br /> Longitude: 33.205140
                     </p>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="col-lg-6 col-lg-pull-6 col-md-5 col-md-pull-7" >
         <div class="ct-content" >
            <h2 class="ct-section-header text-left" >
               Region ? <small>Danger: ?, Risk-Factor: ? %</small>
            </h2>
            <br >
            <br >
            <ul class="list-unstyled" >
              <li id = "weather"> </li>
              <li id = "temperature"> </li>
              <li id = "pressure"> </li>
              <li id = "humidity"> </li>
            </ul>
            <a class="btn btn-motive" href="https://api.nasa.gov/planetary/earth/imagery/?lon=32.882&lat=0.322098&date=2014-06-01&cloud_score=True&dim=0.5&api_key=Htj3JGFJqmB7PUcXTTddAik0V8tF49hgshLf9fNC" tabindex="0" >Raw Data found here</a>
         </div>
      </div>
   </div>
</div>