[🦸🏼‍♀️#1] HELP! My Map Doesn’t Work!

Hero #1 — Maps (Thumbnail)Over at Photics.TV, a new series of videos has begun. In short, it’s a heroic tech support. Now that might sound like two entirely different things, but look at the world we live in today. It’s very informational and very technological. One of the biggest troubles of the modern age is managing all that data. In particular, we’re told “learn to code” but the specifics on accomplishing that objective is a bit fuzzy.

That’s one of the goals of Photics.TV, to help you learn to code. The first video is a perfect example of how vanilla HTML, CSS, and JavaScript can be very powerful. Over on the Tumult forums, someone was having trouble with map layers. The appeal of Hype is that it’s a no-coding solution to web animation. But in situations like this, it can be much easier to manually write the code.

I suppose that’s debatable, but once you understand HTML, CSS, and JavaScript, it’s really not that bad. Actually, it feels great to be able to imagine something, and then make it real. If that sounds interesting to you, then this video is something to watch…


Hero #1
[🦸🏼‍♀️#1] HELP! My Map Doesn’t Work! (Managing Map Layers With HTML, CSS, and JavaScript)

In less than 15 minutes, and 115 lines of code, the video explains how to manage map layers. Since it’s the first episode, it had to be extra special. That’s why the world maps from the Central Intelligence Agency’s “World Fact Book” were used. They’re beautiful and they work perfectly for this video. It has a heroic theme.

Hopefully you enjoy watching it as much as I did making it. 😊

And as mentioned in the video, the HTML code is available here…

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

<!DOCTYPE html>
<html lang="en">
 
<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Layered Maps Example</title>
 
     <style>
          body {
               margin: 0;
               overflow: hidden;
               font-family: sans-serif;
          }
 
          .🗺,
          .🇺🇸 {
               position: absolute;
               width: 100%;
               height: auto;
               transition: opacity ease-in-out 1s;
          }
 
          [data-visible="nope"] {
               opacity: 0;
          }
 
          #world-type {
               position: absolute;
               padding: 15px;
               background-color: rgba(128, 128, 128, 0.125);
               border-bottom-left-radius: 30px;
               right: 0;
               z-index: 1;
          }
 
          #world-type>div {
               display: flex;
               align-items: center;
          }
 
          input[type=radio],
          input[type=checkbox] {
               width: 3em;
               height: 3em;
          }
     </style>
 
     <script>
 
          function update() {
               var maps = document.querySelectorAll(".🗺"); // Don't forget the dot, very important 😊
 
               // for (var i = 0; i < maps.length; i++) {
               //      maps[i].style.opacity = 0;
               // }
 
               maps.forEach((e) => { e.style.opacity = 0; });
 
               var selectedMap = document.querySelector("input[name='🌎']:checked").value;
               document.getElementById(selectedMap).style.opacity = 1;
 
               document.getElementById("Flags").setAttribute("data-visible", "nope");
               document.getElementById("Flags-Oceans").setAttribute("data-visible", "nope");
 
               if (document.getElementById("button-flags").checked) {
                    if (selectedMap == "Oceans") {
                         document.getElementById("Flags-Oceans").setAttribute("data-visible", "yup");
                    } else {
                         document.getElementById("Flags").setAttribute("data-visible", "yup");
                    }
               }
 
          }
 
          document.addEventListener("input", update);
     </script>
 
</head>
 
<body>
     <form id="world-type">
          <div>
               <input type="radio" id="button-physical" name="🌎" value="Physical" checked>
               <label for="button-physical">Physical</label>
          </div>
 
          <div>
               <input type="radio" id="button-political" name="🌎" value="Political">
               <label for="button-political">Political</label>
          </div>
 
          <div>
               <input type="radio" id="button-oceans" name="🌎" value="Oceans">
               <label for="button-oceans">Oceans</label>
          </div>
 
          <div>
               <input type="checkbox" id="button-flags" name="🇺🇸" value="flags">
               <label for="button-flags">Flags</label>
          </div>
     </form>
 
     <img alt="Political World Map" id="Political" class="🗺" src="world-political.png" />
     <img alt="Oceans World Map" id="Oceans" class="🗺" src="world-oceans.png" />
     <img alt="Physical World Map" id="Physical" class="🗺" src="world-physical.png" />
     <img alt="World Map Flags" id="Flags" class="🇺🇸" src="flags.png" data-visible="nope" />
     <img alt="World Map Flags Oceans" id="Flags-Oceans" class="🇺🇸" src="flags-oceans.png" data-visible="nope" />
 
</body>
 
</html>