muqriz
/
SIBS2024
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

done plot point

master
azri 4 months ago
parent
0cfd8f7df8
commit
f89688f257
8 changed files with 500 additions and 30 deletions
Split View Show Diff Stats
  1. 55
    5
      lists/bentong.html
  2. 56
    5
      lists/bera.html
  3. 91
    4
      lists/kuantan.html
  4. 56
    4
      lists/maran.html
  5. 109
    4
      lists/pekan.html
  6. 1
    1
      lists/raub.html
  7. 78
    3
      lists/rompin.html
  8. 54
    4
      lists/temerloh.html

+ 55
- 5
lists/bentong.html View File 

@@ -33,13 +33,13 @@
33 33
34 34 
         <div class="text-center pt-1"
35 35 
             style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 325px;">
36 
-            <div class="pt-5" style="width: 600px;height: 100px;margin-top: -450px;">
36 
+            <div class="pt-5 position-relative" style="width: 600px;height: 100px;margin-top: -450px;">
37 37 
                 <svg class="map-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
38 
-                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-30 -30 1150 1150"
38 
+                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="200 250 650 650"
39 39 
                     style="enable-background: new 0 0 1080 1080" xml:space="preserve">
40 40 
                     <g>
41 
-                        <a href="#" data-area="jerantut">
42 
-                            <path id="jerantut" class="pahang-barat" d="M442.5,743.9c-7.8-2.7-7.4-11.3-4.9-12.5c14.5-7.3,7-22,11.8-32.4c2.1-4.5,1.4-8.7,7.8-10.3
41 
+                        <a href="#" data-area="bentong">
42 
+                            <path id="bentong" class="pahang-barat" d="M442.5,743.9c-7.8-2.7-7.4-11.3-4.9-12.5c14.5-7.3,7-22,11.8-32.4c2.1-4.5,1.4-8.7,7.8-10.3
43 43 
                             c5.5-1.4,9.2-6.8,7.6-12.6c-1.3-4.6-5.4-5.9-10-2.5c-0.8,0.6-4-0.2-4.3-1.1c-5.3-13.5-22.2-9.5-29.6-19.6c-1.8-2.5-3.7-1.4-5.4-0.1
44 44 
                             c-10.7,7.6-23.6,8.6-35.6,12.2c0,0,0,0,0,0c-12.3,7.4-15.5-1-18-10.4c-9.7-10.7-3.6-22.8-1.8-33.8c1.8-10.7-1.8-15.4-11.1-17.1
45 45 
                             c-8.3-1.5-12.3-5.1-12.4-14.2c-0.1-12.6-7.7-18.9-20.4-19c0,0,0,0,0,0c-0.8-0.3-1.6-0.6-2.4-0.8c-5.7-1-10.3-2-14-3.3
 
@@ -54,6 +54,7 @@
54 54 
                     </g>
55 55 
                 </svg>
56 56
57 
+                <div class="plot animate__animated animate__bounceIn pembangunan-point position-absolute" style="background-color: #3B47E0; width: 0.8rem; height: 0.8rem;border: 2px solid white;border-radius: 600px;top:478px;left:165px"></div>
57 58
58 59 
             </div>
59 60 
         </div>
 
@@ -100,7 +101,56 @@
100 101 
             document.getElementById(divId).classList.remove('hidden');
101 102 
         }
102 103 
     </script>
103 
-    <script defer src="/ruta relativa a mi archivo .js"></script>
104 
+    <script>
105 
+        let bentong = document.querySelector("#bentong");
106 
+
107 
+        addLabelText(bentong, "Bentong");
108 
+
109 
+        function addLabelText(bgPath, labelText) {
110 
+            let bbox = bgPath.getBBox();
111 
+            let x = bbox.x + bbox.width / 2;
112 
+            let y = bbox.y + bbox.height / 2;
113 
+
114 
+            // Create a <text> element
115 
+            let textElem = document.createElementNS(bgPath.namespaceURI, "text");
116 
+            // X axis
117 
+            if (labelText == "Bentong") {
118 
+                textElem.setAttribute("x", 286);
119 
+            } else if (labelText == "Pekan") {
120 
+                textElem.setAttribute("x", 870);
121 
+            } else if (labelText == "Cameron") {
122 
+                textElem.setAttribute("x", 75);
123 
+            } else {
124 
+                textElem.setAttribute("x", x);
125 
+            }
126 
+            // Y axis
127 
+            if (labelText == "Rompin") {
128 
+                textElem.setAttribute("y", 935);
129 
+            } else if (labelText == "Pekan") {
130 
+                textElem.setAttribute("y", 650);
131 
+            } else if (labelText == "Kuantan") {
132 
+                textElem.setAttribute("y", 440);
133 
+            } else if (labelText == "Cameron") {
134 
+                textElem.setAttribute("y", 130);
135 
+            } else if (labelText == "Highland") {
136 
+                textElem.setAttribute("y", 155);
137 
+            } else {
138 
+                textElem.setAttribute("y", y);
139 
+            }
140 
+            // Centre text horizontally at x,y
141 
+            textElem.setAttribute("text-anchor", "middle");
142 
+            // Give it a class that will determine the text size, colour, etc
143 
+            if (labelText == "Cameron" || labelText == "Highland") {
144 
+                textElem.classList.add("label-text-cameron");
145 
+            } else {
146 
+                textElem.classList.add("label-text");
147 
+            }
148 
+            // Set the text
149 
+            textElem.textContent = labelText;
150 
+            // Add this text element directly after the label background path
151 
+            bgPath.after(textElem);
152 
+        }
153 
+    </script>
104 154
105 155 
 </body>
106 156

+ 56
- 5
lists/bera.html View File 

@@ -33,13 +33,13 @@
33 33
34 34 
         <div class="text-center pt-1"
35 35 
             style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
36 
-            <div class="pt-5" style="width: 600px;height: 100px;margin-top: -550px;">
36 
+            <div class="pt-5 position-relative" style="width: 600px;height: 100px;margin-top: -550px;">
37 37 
                 <svg class="map-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
38 
-                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-30 -30 1150 1150"
38 
+                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="200 201 750 750"
39 39 
                     style="enable-background: new 0 0 1080 1080" xml:space="preserve">
40 40 
                     <g>
41 
-                        <a href="#" data-area="jerantut">
42 
-                            <path id="jerantut" class="pahang-barat" d="M671.1,911.5c-13.5-10.7-16-25.6-11-39.9c3.5-9.9,3.3-18.5,2.3-28.1c-0.4-3.6,1.4-7.4,2.1-11.1c0,0,0,0,0,0
41 
+                        <a href="#" data-area="bera">
42 
+                            <path id="bera" class="pahang-barat" d="M671.1,911.5c-13.5-10.7-16-25.6-11-39.9c3.5-9.9,3.3-18.5,2.3-28.1c-0.4-3.6,1.4-7.4,2.1-11.1c0,0,0,0,0,0
43 43 
                             c0,0,0,0,0,0c0.4-1.2,0.6-2.4,1.2-3.5c6.1-10.4,13.1-20.5-1.6-30c-2.9-1.9-4.8-5.7-4.9-9.8c-5.1-8.2,2.4-18.2-3.8-26.6
44 44 
                             c-1.3-1.7,2.9-6.3,5.6-5.3c10.6,3.9,16.1-5.2,26.9-8.8c-19.9-13.4-34.9-29-49.3-45.4c0,0,0,0,0,0c-7.1-8.3,1.1-17-0.6-25.4
45 45 
                             c-9.3-4.9-17.2-11.7-24.6-19c-3.3-3.3-6-6.6-11.3-7c-4.1-0.2-7.5-2.6-6.7-7.3c1.6-9.6-5.2-14.4-10.6-20c0,0,0,0,0,0
 
@@ -52,6 +52,8 @@
52 52 
                     </g>
53 53 
                 </svg>
54 54
55 
+                <div class="plot animate__animated animate__bounceIn pembangunan-point position-absolute" style="background-color: #3B47E0; width: 0.8rem; height: 0.8rem;border: 2px solid white;border-radius: 600px;top: 469px;left: 208px;"></div>
56 
+
55 57
56 58 
             </div>
57 59 
         </div>
 
@@ -98,7 +100,56 @@
98 100 
             document.getElementById(divId).classList.remove('hidden');
99 101 
         }
100 102 
     </script>
101 
-    <script defer src="/ruta relativa a mi archivo .js"></script>
103 
+    <script>
104 
+        let bera = document.querySelector("#bera");
105 
+
106 
+        addLabelText(bera, "Bera");
107 
+
108 
+        function addLabelText(bgPath, labelText) {
109 
+            let bbox = bgPath.getBBox();
110 
+            let x = bbox.x + bbox.width / 2;
111 
+            let y = bbox.y + bbox.height / 2;
112 
+
113 
+            // Create a <text> element
114 
+            let textElem = document.createElementNS(bgPath.namespaceURI, "text");
115 
+            // X axis
116 
+            if (labelText == "Bentong") {
117 
+                textElem.setAttribute("x", 286);
118 
+            } else if (labelText == "Pekan") {
119 
+                textElem.setAttribute("x", 870);
120 
+            } else if (labelText == "Cameron") {
121 
+                textElem.setAttribute("x", 75);
122 
+            } else {
123 
+                textElem.setAttribute("x", x);
124 
+            }
125 
+            // Y axis
126 
+            if (labelText == "Rompin") {
127 
+                textElem.setAttribute("y", 935);
128 
+            } else if (labelText == "Pekan") {
129 
+                textElem.setAttribute("y", 650);
130 
+            } else if (labelText == "Kuantan") {
131 
+                textElem.setAttribute("y", 440);
132 
+            } else if (labelText == "Cameron") {
133 
+                textElem.setAttribute("y", 130);
134 
+            } else if (labelText == "Highland") {
135 
+                textElem.setAttribute("y", 155);
136 
+            } else {
137 
+                textElem.setAttribute("y", y);
138 
+            }
139 
+            // Centre text horizontally at x,y
140 
+            textElem.setAttribute("text-anchor", "middle");
141 
+            // Give it a class that will determine the text size, colour, etc
142 
+            if (labelText == "Cameron" || labelText == "Highland") {
143 
+                textElem.classList.add("label-text-cameron");
144 
+            } else {
145 
+                textElem.classList.add("label-text");
146 
+            }
147 
+            // Set the text
148 
+            textElem.textContent = labelText;
149 
+            // Add this text element directly after the label background path
150 
+            bgPath.after(textElem);
151 
+        }
152 
+    </script>
102 153
103 154 
 </body>
104 155

+ 91
- 4
lists/kuantan.html View File 

@@ -12,6 +12,7 @@
12 12 
     <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
13 13 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
14 14 
     <link rel="stylesheet" href="../css/app.css">
15 
+    <link rel="stylesheet" href="../css/animate.css">
15 16
16 17 
 </head>
17 18 
 
@@ -38,13 +39,13 @@
38 39
39 40 
         <div class="text-center pt-1"
40 41 
             style="position: relative;z-index: 1;background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 0px;">
41 
-            <div class="pt-5" style="width: 600px;height: 100px;margin-top: -200px;margin-left: -150px;">
42 
+            <div class="pt-5 position-relative" style="width: 600px;height: 100px;margin-top: -200px;margin-left: -150px;">
42 43 
                 <svg class="map-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
43 
-                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-30 -30 1150 1150"
44 
+                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="400 130 650 650"
44 45 
                     style="enable-background: new 0 0 1080 1080" xml:space="preserve">
45 46 
                     <g>
46 
-                        <a href="#" data-area="jerantut">
47 
-                            <path id="jerantut" class="pahang-barat" d="M661.7,445.8c0-5-4.4-10-5.4-15c1.2-3.7,2.3-7.4,5.6-10c8.7-2.7,5.4-7.7,2.5-12.6c3.6-8.3,10.1-13.8,17.7-18.2
47 
+                        <a href="#" data-area="kuantan">
48 
+                            <path id="kuantan" class="pahang-barat" d="M661.7,445.8c0-5-4.4-10-5.4-15c1.2-3.7,2.3-7.4,5.6-10c8.7-2.7,5.4-7.7,2.5-12.6c3.6-8.3,10.1-13.8,17.7-18.2
48 49 
                             c5.4,2.7,6-2.4,8-5c4.3,4.1,6.3,12.9,12.7,12.9c1.9,0,4.3-0.8,7.2-2.8c5.3,0.2,9.1-0.6,5.4-7.1c0.3-4.1,2.1-7.6,4.7-10.7
49 50 
                             c1.1,1.7,3.4,2.2,4.2,0.8c6-10.5,17.6-12.8,27-17.6c9.9-5.1,8-8.3,1.6-14.5c-2.6,3.1-1.2,7.5-4.9,9h0c0.1-4.2,0.3-8.4,0.4-12.6
50 51 
                             c9.8-5.6,8.6-10.7-0.6-15.6c0,0,0,0,0,0c1.3-2.3,2.5-4.5,3.8-6.8c0,0,0,0,0,0c1.5-0.9,3-1.8,4.6-2.7c0.4,4,2.9,3.3,5.2,2
 
@@ -72,6 +73,27 @@
72 73 
                     </g>
73 74 
                 </svg>
74 75
76 
+                <!--Pembangunan-->
77 
+                <div class="plot animate__animated animate__bounceIn pembangunan-point position-absolute" style="background-color: #BF3030; width: 0.8rem; height: 0.8rem;border: 2px solid white;border-radius: 600px;top:228px;left:505px"></div>
78 
+
79 
+                <div class="plot animate__animated animate__bounceIn pembangunan-point position-absolute" style="background-color: #BF3030; width: 0.8rem; height: 0.8rem;border: 2px solid white;border-radius: 600px;top:297px;left:503px"></div>
80 
+
81 
+                <div class="plot animate__animated animate__bounceIn pembangunan-point position-absolute" style="background-color: #BF3030; width: 0.8rem; height: 0.8rem;border: 2px solid white;border-radius: 600px;top:335px;left:500px"></div>
82 
+
83 
+                <div class="plot animate__animated animate__bounceIn pembangunan-point position-absolute" style="background-color: #BF3030; width: 0.8rem; height: 0.8rem;border: 2px solid white;border-radius: 600px;top:327px;left:484px"></div>
84 
+
85 
+                <div class="plot animate__animated animate__bounceIn pembangunan-point position-absolute" style="background-color: #BF3030; width: 0.8rem; height: 0.8rem;border: 2px solid white;border-radius: 600px;top:318px;left:468px"></div>
86 
+
87 
+                <div class="plot animate__animated animate__bounceIn pembangunan-point position-absolute" style="background-color: #BF3030; width: 0.8rem; height: 0.8rem;border: 2px solid white;border-radius: 600px;top:371px;left:381px"></div>
88 
+
89 
+                <div class="plot animate__animated animate__bounceIn pembangunan-point position-absolute" style="background-color: #BF3030; width: 0.8rem; height: 0.8rem;border: 2px solid white;border-radius: 600px;top:374px;left:355px"></div>
90 
+
91 
+                <!-- Penternakan -->
92 
+                <div class="plot animate__animated animate__bounceIn penternakan-point position-absolute hidden" style="background-color: #3B47E0; width: 0.8rem; height: 0.8rem;border: 2px solid white;border-radius: 600px;top:357px;left:394px"></div>
93 
+
94 
+                <!-- Industri -->
95 
+                <div class="plot animate__animated animate__bounceIn industri-point position-absolute hidden" style="background-color: #32A740; width: 0.8rem; height: 0.8rem;border: 2px solid white;border-radius: 600px;top:281px;left:448px"></div>
96 
+                <div class="plot animate__animated animate__bounceIn industri-point position-absolute hidden" style="background-color: #32A740; width: 0.8rem; height: 0.8rem;border: 2px solid white;border-radius: 600px;top:274px;left:501px"></div>
75 97
76 98 
             </div>
77 99 
         </div>
 
@@ -141,14 +163,17 @@
141 163
142 164 
         document.getElementById('pembangun_btn').addEventListener('click', function () {
143 165 
             showDiv('pembangun_plot');
166 
+            showPoint('pembangunan-point');
144 167 
         });
145 168
146 169 
         document.getElementById('penternakan_btn').addEventListener('click', function () {
147 170 
             showDiv('penternakan_plot');
171 
+            showPoint('penternakan-point');
148 172 
         });
149 173
150 174 
         document.getElementById('industri_btn').addEventListener('click', function () {
151 175 
             showDiv('industri_plot');
176 
+            showPoint('industri-point');
152 177 
         });
153 178
154 179 
         function showDiv(divId) {
 
@@ -158,6 +183,68 @@
158 183 
             }
159 184 
             document.getElementById(divId).classList.remove('hidden');
160 185 
         }
186 
+
187 
+        function showPoint(plotClass) {
188 
+            var divs = document.getElementsByClassName('plot');
189 
+            for (var i = 0; i < divs.length; i++) {
190 
+                divs[i].classList.add('hidden');
191 
+            }
192 
+            var plots = document.getElementsByClassName(plotClass);
193 
+            for (var i = 0; i < divs.length; i++) {
194 
+                plots[i].classList.remove('hidden');
195 
+            }
196 
+        }
197 
+
198 
+    </script>
199 
+    <script>
200 
+        let kuantan = document.querySelector("#kuantan");
201 
+
202 
+        addLabelText(kuantan, "Kuantan");
203 
+
204 
+        function addLabelText(bgPath, labelText) {
205 
+            let bbox = bgPath.getBBox();
206 
+            let x = bbox.x + bbox.width / 2;
207 
+            let y = bbox.y + bbox.height / 2;
208 
+
209 
+            // Create a <text> element
210 
+            let textElem = document.createElementNS(bgPath.namespaceURI, "text");
211 
+            // X axis
212 
+            if (labelText == "Bentong") {
213 
+                textElem.setAttribute("x", 286);
214 
+            } else if (labelText == "Pekan") {
215 
+                textElem.setAttribute("x", 870);
216 
+            } else if (labelText == "Cameron") {
217 
+                textElem.setAttribute("x", 75);
218 
+            } else {
219 
+                textElem.setAttribute("x", x);
220 
+            }
221 
+            // Y axis
222 
+            if (labelText == "Rompin") {
223 
+                textElem.setAttribute("y", 935);
224 
+            } else if (labelText == "Pekan") {
225 
+                textElem.setAttribute("y", 650);
226 
+            } else if (labelText == "Kuantan") {
227 
+                textElem.setAttribute("y", 440);
228 
+            } else if (labelText == "Cameron") {
229 
+                textElem.setAttribute("y", 130);
230 
+            } else if (labelText == "Highland") {
231 
+                textElem.setAttribute("y", 155);
232 
+            } else {
233 
+                textElem.setAttribute("y", y);
234 
+            }
235 
+            // Centre text horizontally at x,y
236 
+            textElem.setAttribute("text-anchor", "middle");
237 
+            // Give it a class that will determine the text size, colour, etc
238 
+            if (labelText == "Cameron" || labelText == "Highland") {
239 
+                textElem.classList.add("label-text-cameron");
240 
+            } else {
241 
+                textElem.classList.add("label-text");
242 
+            }
243 
+            // Set the text
244 
+            textElem.textContent = labelText;
245 
+            // Add this text element directly after the label background path
246 
+            bgPath.after(textElem);
247 
+        }
161 248 
     </script>
162 249 
     <script defer src="/ruta relativa a mi archivo .js"></script>
163 250

+ 56
- 4
lists/maran.html View File 

@@ -35,12 +35,12 @@
35 35
36 36 
         <div class="text-center pt-1"
37 37 
         style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 0px; z-index: 1; position: relative;">
38 
-            <div class="pt-5" style="width: 600px;height: 100px;margin-top: -300px;">
38 
+            <div class="pt-5 position-relative" style="width: 600px;height: 100px;margin-top: -300px;">
39 39 
                 <svg class="map-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
40 
-                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-30 -30 1150 1150"
40 
+                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="300 200 650 650"
41 41 
                     style="enable-background: new 0 0 1080 1080" xml:space="preserve">
42 42 
                     <g>
43 
-                        <a href="testing.html" data-area="jerantut">
43 
+                        <a href="#" data-area="jerantut">
44 44 
                             <path id="maran" class="pahang-tengah"
45 45 
                                 d="M690,649.3l0.1,0.1c-0.8,3.2-4.3,2.9-6.1,4.7c0,0,0,0,0,0c-5.5-0.8-10.9-1.6-16.4-2.5
46 46 
                                             c-7.2-4.7-11.8-3-13.8,5.5c-0.5,2-1.6,3.9-2.4,5.8c-6.2,13.7-6.2,12.9-18.7,5.4c-10.8-6.4-15.7-20.3-29.5-22.6
 
@@ -60,6 +60,9 @@
60 60 
                     </g>
61 61 
                 </svg>
62 62
63 
+                <div class="plot animate__animated animate__bounceIn pembangunan-point position-absolute" style="background-color: #3B47E0; width: 0.8rem; height: 0.8rem;border: 2px solid white;border-radius: 600px;top:335px;left:355px"></div>
64 
+
65 
+
63 66
64 67 
             </div>
65 68 
         </div>
 
@@ -108,7 +111,56 @@
108 111 
             document.getElementById(divId).classList.remove('hidden');
109 112 
         }
110 113 
     </script>
111 
-    <script defer src="/ruta relativa a mi archivo .js"></script>
114 
+    <script>
115 
+        let maran = document.querySelector("#maran");
116 
+
117 
+        addLabelText(maran, "Maran");
118 
+
119 
+        function addLabelText(bgPath, labelText) {
120 
+            let bbox = bgPath.getBBox();
121 
+            let x = bbox.x + bbox.width / 2;
122 
+            let y = bbox.y + bbox.height / 2;
123 
+
124 
+            // Create a <text> element
125 
+            let textElem = document.createElementNS(bgPath.namespaceURI, "text");
126 
+            // X axis
127 
+            if (labelText == "Bentong") {
128 
+                textElem.setAttribute("x", 286);
129 
+            } else if (labelText == "Pekan") {
130 
+                textElem.setAttribute("x", 870);
131 
+            } else if (labelText == "Cameron") {
132 
+                textElem.setAttribute("x", 75);
133 
+            } else {
134 
+                textElem.setAttribute("x", x);
135 
+            }
136 
+            // Y axis
137 
+            if (labelText == "Rompin") {
138 
+                textElem.setAttribute("y", 935);
139 
+            } else if (labelText == "Pekan") {
140 
+                textElem.setAttribute("y", 650);
141 
+            } else if (labelText == "Kuantan") {
142 
+                textElem.setAttribute("y", 440);
143 
+            } else if (labelText == "Cameron") {
144 
+                textElem.setAttribute("y", 130);
145 
+            } else if (labelText == "Highland") {
146 
+                textElem.setAttribute("y", 155);
147 
+            } else {
148 
+                textElem.setAttribute("y", y);
149 
+            }
150 
+            // Centre text horizontally at x,y
151 
+            textElem.setAttribute("text-anchor", "middle");
152 
+            // Give it a class that will determine the text size, colour, etc
153 
+            if (labelText == "Cameron" || labelText == "Highland") {
154 
+                textElem.classList.add("label-text-cameron");
155 
+            } else {
156 
+                textElem.classList.add("label-text");
157 
+            }
158 
+            // Set the text
159 
+            textElem.textContent = labelText;
160 
+            // Add this text element directly after the label background path
161 
+            bgPath.after(textElem);
162 
+        }
163 
+    </script>
112 164
113 165 
 </body>
114 166

+ 109
- 4
lists/pekan.html View File 

@@ -19,7 +19,7 @@
19 19 
     <section class="section" style="max-height: 100vh;">
20 20
21 21 
         <div class=""
22 
-            style="z-index: 3;background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
22 
+            style="z-index: 9999;background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
23 23 
             <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../index.html"><i
24 24 
                         class="fas fa-chevron-left"></i></a></h6>
25 25 
             <h6 style="color: white;">Pekan</h6>
 
@@ -33,12 +33,12 @@
33 33
34 34 
         <div class="text-center pt-1"
35 35 
             style="margin-left: -150px;background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 0px; z-index: 1; position: relative;">
36 
-            <div class="pt-5" style="width: 600px;height: 100px;margin-top: -400px;margin-left: -70px;">
36 
+            <div class="pt-5 position-relative" style="width: 600px;height: 100px;margin-top: -400px;margin-left: -70px;">
37 37 
                 <svg class="map-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
38 38 
                     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-30 -30 1150 1150"
39 39 
                     style="enable-background: new 0 0 1080 1080" xml:space="preserve">
40 40 
                     <g>
41 
-                        <a href="testing.html" data-area="jerantut">
41 
+                        <a href="#" data-area="jerantut">
42 42 
                             <path id="pekan" class="pahang-timur" d="M999.1,601.2c-19.6,20.7-24.3,47.5-19.7,73.2c5.8,32.6,7.8,65.2,10.7,97.9c0.7,7.9-4.5,13.3-5.4,20.4
43 43 
                                 c-1.9,14.3-1.8,28.6-2,43c-0.1,5.6,1,12.3-7.1,14.2h0c-3.9-1.5-7.8-4.4-11.7-4.3c-31,0.9-62-5.8-92.9,0.3
44 44 
                                 c-4.4,0.9-8.9,3.4-13.1-0.6c0.8-5.1-2-8.1-6.3-9.7c-8.1-2.9-11.6-10.4-17.2-15.6c-9.7-8.8-9-23.1-20.1-31c-5.7-4-0.1-8.8,5.1-10.9
 
@@ -55,6 +55,11 @@
55 55 
                     </g>
56 56 
                 </svg>
57 57
58 
+                <div class="plot animate__animated animate__bounceIn pembangunan-point position-absolute" style="background-color: #3B47E0; width: 0.8rem; height: 0.8rem;border: 2px solid white;border-radius: 600px;top:351px;left:497px"></div>
59 
+
60 
+                <div class="plot animate__animated animate__bounceIn pembangunan-point position-absolute" style="background-color: #3B47E0; width: 0.8rem; height: 0.8rem;border: 2px solid white;border-radius: 600px;top:374px;left:516px"></div>
61 
+
62 
+                <div class="plot animate__animated animate__bounceIn pembangunan-point position-absolute" style="background-color: #3B47E0; width: 0.8rem; height: 0.8rem;border: 2px solid white;border-radius: 760px;;top:488px;left:511px"></div>
58 63
59 64 
             </div>
60 65 
         </div>
 
@@ -106,7 +111,107 @@
106 111 
             document.getElementById(divId).classList.remove('hidden');
107 112 
         }
108 113 
     </script>
109 
-    <script defer src="/ruta relativa a mi archivo .js"></script>
114 
+    <script>
115 
+        let bentong = document.querySelector("#bentong");
116 
+
117 
+        addLabelText(bentong, "Bentong");
118 
+
119 
+        function addLabelText(bgPath, labelText) {
120 
+            let bbox = bgPath.getBBox();
121 
+            let x = bbox.x + bbox.width / 2;
122 
+            let y = bbox.y + bbox.height / 2;
123 
+
124 
+            // Create a <text> element
125 
+            let textElem = document.createElementNS(bgPath.namespaceURI, "text");
126 
+            // X axis
127 
+            if (labelText == "Bentong") {
128 
+                textElem.setAttribute("x", 286);
129 
+            } else if (labelText == "Pekan") {
130 
+                textElem.setAttribute("x", 870);
131 
+            } else if (labelText == "Cameron") {
132 
+                textElem.setAttribute("x", 75);
133 
+            } else {
134 
+                textElem.setAttribute("x", x);
135 
+            }
136 
+            // Y axis
137 
+            if (labelText == "Rompin") {
138 
+                textElem.setAttribute("y", 935);
139 
+            } else if (labelText == "Pekan") {
140 
+                textElem.setAttribute("y", 650);
141 
+            } else if (labelText == "Kuantan") {
142 
+                textElem.setAttribute("y", 440);
143 
+            } else if (labelText == "Cameron") {
144 
+                textElem.setAttribute("y", 130);
145 
+            } else if (labelText == "Highland") {
146 
+                textElem.setAttribute("y", 155);
147 
+            } else {
148 
+                textElem.setAttribute("y", y);
149 
+            }
150 
+            // Centre text horizontally at x,y
151 
+            textElem.setAttribute("text-anchor", "middle");
152 
+            // Give it a class that will determine the text size, colour, etc
153 
+            if (labelText == "Cameron" || labelText == "Highland") {
154 
+                textElem.classList.add("label-text-cameron");
155 
+            } else {
156 
+                textElem.classList.add("label-text");
157 
+            }
158 
+            // Set the text
159 
+            textElem.textContent = labelText;
160 
+            // Add this text element directly after the label background path
161 
+            bgPath.after(textElem);
162 
+        }
163 
+    </script>
164 
+
165 
+<script>
166 
+    let pekan = document.querySelector("#pekan");
167 
+
168 
+    addLabelText(pekan, "Pekan");
169 
+
170 
+    function addLabelText(bgPath, labelText) {
171 
+        let bbox = bgPath.getBBox();
172 
+        let x = bbox.x + bbox.width / 2;
173 
+        let y = bbox.y + bbox.height / 2;
174 
+
175 
+        // Create a <text> element
176 
+        let textElem = document.createElementNS(bgPath.namespaceURI, "text");
177 
+        // X axis
178 
+        if (labelText == "Bentong") {
179 
+            textElem.setAttribute("x", 286);
180 
+        } else if (labelText == "Pekan") {
181 
+            textElem.setAttribute("x", 870);
182 
+        } else if (labelText == "Cameron") {
183 
+            textElem.setAttribute("x", 75);
184 
+        } else {
185 
+            textElem.setAttribute("x", x);
186 
+        }
187 
+        // Y axis
188 
+        if (labelText == "Rompin") {
189 
+            textElem.setAttribute("y", 935);
190 
+        } else if (labelText == "Pekan") {
191 
+            textElem.setAttribute("y", 650);
192 
+        } else if (labelText == "Kuantan") {
193 
+            textElem.setAttribute("y", 440);
194 
+        } else if (labelText == "Cameron") {
195 
+            textElem.setAttribute("y", 130);
196 
+        } else if (labelText == "Highland") {
197 
+            textElem.setAttribute("y", 155);
198 
+        } else {
199 
+            textElem.setAttribute("y", y);
200 
+        }
201 
+        // Centre text horizontally at x,y
202 
+        textElem.setAttribute("text-anchor", "middle");
203 
+        // Give it a class that will determine the text size, colour, etc
204 
+        if (labelText == "Cameron" || labelText == "Highland") {
205 
+            textElem.classList.add("label-text-cameron");
206 
+        } else {
207 
+            textElem.classList.add("label-text");
208 
+        }
209 
+        // Set the text
210 
+        textElem.textContent = labelText;
211 
+        // Add this text element directly after the label background path
212 
+        bgPath.after(textElem);
213 
+    }
214 
+</script>
110 215
111 216 
 </body>
112 217

+ 1
- 1
lists/raub.html View File 

@@ -40,7 +40,7 @@
40 40 
                     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="100 170 600 600"
41 41 
                     style="enable-background: new 0 0 1080 1080" xml:space="preserve">
42 42 
                     <g>
43 
-                        <a href="testing.html" data-area="jerantut">
43 
+                        <a href="#" data-area="jerantut">
44 44 
                             <path id="raub" class="pahang-barat"
45 45 
                                 d="M353.9,410.6c-3.2,7.6-9.2,19.1-4.7,22.8c8.4,7,4,13.7,5,20.6c2.6,16.3-7.4,32.1-16.7,37.8
46 46 
                                 c-13.2,8.1-9.9,13.7-6.7,23.2c1,3,0.4,6.6,0.5,9.9c-9.6,6.5-16.9,13.6-9.6,26.4c1.1,1.9-0.8,5.5-1.2,8.3c-1.3,1.6-2.3,4.3-3.8,4.6

+ 78
- 3
lists/rompin.html View File 

@@ -35,12 +35,12 @@
35 35
36 36 
         <div class="text-center pt-1"
37 37 
             style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: -0px;">
38 
-            <div class="pt-5" style="width: 650px;height: 100px;margin-top: -700px;margin-left: -300px;">
38 
+            <div class="pt-5 position-relative" style="width: 650px;height: 100px;margin-top: -700px;margin-left: -300px;">
39 39 
                 <svg class="map-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
40 
-                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-30 -30 1150 1150"
40 
+                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="150 150 950 950"
41 41 
                     style="enable-background: new 0 0 1080 1080" xml:space="preserve">
42 42 
                     <g>
43 
-                        <a href="testing.html" data-area="jerantut">
43 
+                        <a href="#" data-area="jerantut">
44 44 
                             <path id="rompin" class="pahang-timur" d="M1065.4,1052.3c-13.9,1-8.9-8.3-7.4-14.1c1.6-6.6,3.2-13.2,7.8-19.2c3.4-4.5,5.4-12-4.6-14.6
45 45 
                                 c-6-1.6-6.5-7.6-5.6-12.6c0.9-5.4,5.4-7.1,10.6-7c2.4,0,4.7,2.4,7.2,0c0.4-2.4-1.3-3.8-2.9-5.1c-22.7-19.1-43.4-39.9-61.8-63.3
46 46 
                                 c-12.4-15.7-22.8-31.6-26-51.3c-1.3-8.2-4.8-12.1-12.7-12.8c-33.5-2.8-66.9-6.7-100.5-1.2c-4.8,0.8-9.8,3.6-14.4-0.6c0,0,0,0,0,0
 
@@ -59,6 +59,18 @@
59 59 
                     </g>
60 60 
                 </svg>
61 61
62 
+                <!--Pembangunan-->
63 
+                <div class="plot animate__animated animate__bounceIn pembangunan-point position-absolute" style="background-color: #BF3030; width: 0.8rem; height: 0.8rem;border: 2px solid white;border-radius: 600px;top:545px;left:559px"></div>
64 
+
65 
+                <div class="plot animate__animated animate__bounceIn pembangunan-point position-absolute" style="background-color: #BF3030; width: 0.8rem; height: 0.8rem;border: 2px solid white;border-radius: 600px;top:601px;left:607px"></div>
66 
+
67 
+
68 
+                <!-- Penternakan -->
69 
+                <div class="plot animate__animated animate__bounceIn penternakan-point position-absolute hidden" style="background-color: #3B47E0; width: 0.8rem; height: 0.8rem;border: 2px solid white;border-radius: 600px;top:527px;left:501px"></div>
70 
+                <div class="plot animate__animated animate__bounceIn penternakan-point position-absolute hidden" style="background-color: #3B47E0; width: 0.8rem; height: 0.8rem;border: 2px solid white;border-radius: 600px;top:538px;left:504px"></div>
71 
+                <div class="plot animate__animated animate__bounceIn penternakan-point position-absolute hidden" style="background-color: #3B47E0; width: 0.8rem; height: 0.8rem;border: 2px solid white;border-radius: 541px;top:538px;left:542px"></div>
72 
+                <div class="plot animate__animated animate__bounceIn penternakan-point position-absolute hidden" style="background-color: #3B47E0; width: 0.8rem; height: 0.8rem;border: 2px solid white;border-radius: 541px;top:563px;left:507px"></div>
73 
+                <div class="plot animate__animated animate__bounceIn penternakan-point position-absolute hidden" style="background-color: #3B47E0; width: 0.8rem; height: 0.8rem;border: 2px solid white;border-radius: 541px;top:634px;left:476px"></div>
62 74
63 75 
             </div>
64 76 
         </div>
 
@@ -121,10 +133,12 @@
121 133
122 134 
         document.getElementById('pembangun_btn').addEventListener('click', function () {
123 135 
             showDiv('pembangun_plot');
136 
+            showPoint('pembangunan-point');
124 137 
         });
125 138
126 139 
         document.getElementById('penternakan_btn').addEventListener('click', function () {
127 140 
             showDiv('penternakan_plot');
141 
+            showPoint('penternakan-point');
128 142 
         });
129 143
130 144 
         function showDiv(divId) {
 
@@ -134,6 +148,67 @@
134 148 
             }
135 149 
             document.getElementById(divId).classList.remove('hidden');
136 150 
         }
151 
+
152 
+        function showPoint(plotClass) {
153 
+            var divs = document.getElementsByClassName('plot');
154 
+            for (var i = 0; i < divs.length; i++) {
155 
+                divs[i].classList.add('hidden');
156 
+            }
157 
+            var plots = document.getElementsByClassName(plotClass);
158 
+            for (var i = 0; i < divs.length; i++) {
159 
+                plots[i].classList.remove('hidden');
160 
+            }
161 
+        }
162 
+    </script>
163 
+    <script>
164 
+        let rompin = document.querySelector("#rompin");
165 
+
166 
+        addLabelText(rompin, "Rompin");
167 
+
168 
+        function addLabelText(bgPath, labelText) {
169 
+            let bbox = bgPath.getBBox();
170 
+            let x = bbox.x + bbox.width / 2;
171 
+            let y = bbox.y + bbox.height / 2;
172 
+
173 
+            // Create a <text> element
174 
+            let textElem = document.createElementNS(bgPath.namespaceURI, "text");
175 
+            // X axis
176 
+            if (labelText == "Bentong") {
177 
+                textElem.setAttribute("x", 286);
178 
+            } else if (labelText == "Pekan") {
179 
+                textElem.setAttribute("x", 870);
180 
+            } else if (labelText == "Cameron") {
181 
+                textElem.setAttribute("x", 75);
182 
+            } else {
183 
+                textElem.setAttribute("x", x);
184 
+            }
185 
+            // Y axis
186 
+            if (labelText == "Rompin") {
187 
+                textElem.setAttribute("y", 935);
188 
+            } else if (labelText == "Pekan") {
189 
+                textElem.setAttribute("y", 650);
190 
+            } else if (labelText == "Kuantan") {
191 
+                textElem.setAttribute("y", 440);
192 
+            } else if (labelText == "Cameron") {
193 
+                textElem.setAttribute("y", 130);
194 
+            } else if (labelText == "Highland") {
195 
+                textElem.setAttribute("y", 155);
196 
+            } else {
197 
+                textElem.setAttribute("y", y);
198 
+            }
199 
+            // Centre text horizontally at x,y
200 
+            textElem.setAttribute("text-anchor", "middle");
201 
+            // Give it a class that will determine the text size, colour, etc
202 
+            if (labelText == "Cameron" || labelText == "Highland") {
203 
+                textElem.classList.add("label-text-cameron");
204 
+            } else {
205 
+                textElem.classList.add("label-text");
206 
+            }
207 
+            // Set the text
208 
+            textElem.textContent = labelText;
209 
+            // Add this text element directly after the label background path
210 
+            bgPath.after(textElem);
211 
+        }
137 212 
     </script>
138 213 
     <script defer src="/ruta relativa a mi archivo .js"></script>
139 214

+ 54
- 4
lists/temerloh.html View File 

@@ -32,12 +32,12 @@
32 32
33 33 
         <div class="text-center pt-1"
34 34 
             style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 170px;">
35 
-            <div class="pt-5" style="width: 1000px;height: 100px;margin-top: -700px;">
35 
+            <div class="pt-5 position-relative" style="width: 1000px;height: 100px;margin-top: -700px;">
36 36 
                 <svg class="map-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
37 
-                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-30 -30 1150 1150"
37 
+                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="100 50 850 850"
38 38 
                     style="enable-background: new 0 0 1080 1080" xml:space="preserve">
39 39 
                     <g>
40 
-                        <a href="testing.html" data-area="jerantut">
40 
+                        <a href="#" data-area="jerantut">
41 41 
                             <path id="temerloh" class="pahang-tengah"
42 42 
                                 d="M528.7,494c-16.5-1-31.1-5.4-39.8-21.4c-9.5-17.6-9.5-17.6-29-15c-0.8,0.1-0.8,0.3-0.8,0.4c0.1,0.1,0,0.1,0,0
43 43 
                                 c-0.1-0.1-0.2-0.1-0.4-0.3c-1.5-1-3.1-2-4.7-2.8c-0.9,0-1.6-0.3-2.1-1.1c-7.2-3.5-14.9-5.7-22.2-9c-1.9,0.3-3.6-0.6-4.8-2.4
 
@@ -52,6 +52,7 @@
52 52 
                     </g>
53 53 
                 </svg>
54 54
55 
+                <div class="plot animate__animated animate__bounceIn industri-point position-absolute" style="background-color: #32A740; width: 0.8rem; height: 0.8rem;border: 2px solid white;border-radius: 600px;top:574px;left:262px"></div>
55 56
56 57 
             </div>
57 58 
         </div>
 
@@ -103,7 +104,56 @@
103 104 
             document.getElementById(divId).classList.remove('hidden');
104 105 
         }
105 106 
     </script>
106 
-    <script defer src="/ruta relativa a mi archivo .js"></script>
107 
+    <script>
108 
+        let temerloh = document.querySelector("#temerloh");
109 
+
110 
+        addLabelText(temerloh, "Temerloh");
111 
+
112 
+        function addLabelText(bgPath, labelText) {
113 
+            let bbox = bgPath.getBBox();
114 
+            let x = bbox.x + bbox.width / 2;
115 
+            let y = bbox.y + bbox.height / 2;
116 
+
117 
+            // Create a <text> element
118 
+            let textElem = document.createElementNS(bgPath.namespaceURI, "text");
119 
+            // X axis
120 
+            if (labelText == "Bentong") {
121 
+                textElem.setAttribute("x", 286);
122 
+            } else if (labelText == "Pekan") {
123 
+                textElem.setAttribute("x", 870);
124 
+            } else if (labelText == "Cameron") {
125 
+                textElem.setAttribute("x", 75);
126 
+            } else {
127 
+                textElem.setAttribute("x", x);
128 
+            }
129 
+            // Y axis
130 
+            if (labelText == "Rompin") {
131 
+                textElem.setAttribute("y", 935);
132 
+            } else if (labelText == "Pekan") {
133 
+                textElem.setAttribute("y", 650);
134 
+            } else if (labelText == "Kuantan") {
135 
+                textElem.setAttribute("y", 440);
136 
+            } else if (labelText == "Cameron") {
137 
+                textElem.setAttribute("y", 130);
138 
+            } else if (labelText == "Highland") {
139 
+                textElem.setAttribute("y", 155);
140 
+            } else {
141 
+                textElem.setAttribute("y", y);
142 
+            }
143 
+            // Centre text horizontally at x,y
144 
+            textElem.setAttribute("text-anchor", "middle");
145 
+            // Give it a class that will determine the text size, colour, etc
146 
+            if (labelText == "Cameron" || labelText == "Highland") {
147 
+                textElem.classList.add("label-text-cameron");
148 
+            } else {
149 
+                textElem.classList.add("label-text");
150 
+            }
151 
+            // Set the text
152 
+            textElem.textContent = labelText;
153 
+            // Add this text element directly after the label background path
154 
+            bgPath.after(textElem);
155 
+        }
156 
+    </script>
107 157
108 158 
 </body>
109 159

Write Preview
Loading…
Cancel
Save