muqriz
/
SIBS2024
Слідкувати 1
В обрані 0
Форк 0
Код Проблеми 0 Запити на злиття 0 Релізи 0 Вікі Активність
Переглянути джерело

add other lands

master
Muqriz 3 місяці тому
джерело
b653969a47
коміт
5fc91c5e06
64 змінених файлів з 10520 додано та 13 видалено
Розділений перегляд Показати статистику Diff
  1. BIN
      HSD 1863.pdf
  2. BIN
      HSD 4638.pdf
  3. BIN
      HSD 5621.pdf
  4. BIN
      HSD 5625.pdf
  5. BIN
      HSD 5627.pdf
  6. BIN
      HSD 5714.pdf
  7. BIN
      HSD 5715.pdf
  8. BIN
      HSD 5734.pdf
  9. BIN
      HSD 5738.pdf
  10. BIN
      HSD 5745.pdf
  11. BIN
      HSD 5749.pdf
  12. BIN
      HSD 5761.pdf
  13. BIN
      HSD 5762.pdf
  14. BIN
      HSD 5763.pdf
  15. BIN
      HSD 5764.pdf
  16. BIN
      HSD2384.pdf
  17. BIN
      PN 16507.pdf
  18. BIN
      PN 28612.pdf
  19. 2
    3
      css/app.css
  20. 267
    0
      details/detail_hsd11863.html
  21. 267
    0
      details/detail_hsd11991.html
  22. 267
    0
      details/detail_hsd2384.html
  23. 267
    0
      details/detail_hsd4638.html
  24. 261
    0
      details/detail_hsd5621.html
  25. 267
    0
      details/detail_hsd5625.html
  26. 267
    0
      details/detail_hsd5627.html
  27. 267
    0
      details/detail_hsd5714.html
  28. 267
    0
      details/detail_hsd5715.html
  29. 267
    0
      details/detail_hsd5734.html
  30. 267
    0
      details/detail_hsd5738.html
  31. 267
    0
      details/detail_hsd5745.html
  32. 267
    0
      details/detail_hsd5749.html
  33. 267
    0
      details/detail_hsd5761.html
  34. 267
    0
      details/detail_hsd5762.html
  35. 267
    0
      details/detail_hsd5763.html
  36. 267
    0
      details/detail_hsd5764.html
  37. 267
    0
      details/detail_pn16507.html
  38. 267
    0
      details/detail_pn28612.html
  39. 8
    8
      index.html
  40. 1
    2
      lists/bentong.html
  41. 111
    0
      lists/maran.html
  42. 113
    0
      lists/pekan.html
  43. 122
    0
      lists/raub.html
  44. 141
    0
      lists/rompin.html
  45. 110
    0
      lists/temerloh.html
  46. 255
    0
      pdf_pages/view_pdf_hsd11863.html
  47. 255
    0
      pdf_pages/view_pdf_hsd11991.html
  48. 255
    0
      pdf_pages/view_pdf_hsd2384.html
  49. 255
    0
      pdf_pages/view_pdf_hsd4628.html
  50. 255
    0
      pdf_pages/view_pdf_hsd5621.html
  51. 255
    0
      pdf_pages/view_pdf_hsd5625.html
  52. 255
    0
      pdf_pages/view_pdf_hsd5627.html
  53. 255
    0
      pdf_pages/view_pdf_hsd5714.html
  54. 255
    0
      pdf_pages/view_pdf_hsd5715.html
  55. 255
    0
      pdf_pages/view_pdf_hsd5734.html
  56. 255
    0
      pdf_pages/view_pdf_hsd5738.html
  57. 255
    0
      pdf_pages/view_pdf_hsd5745.html
  58. 255
    0
      pdf_pages/view_pdf_hsd5749.html
  59. 255
    0
      pdf_pages/view_pdf_hsd5761.html
  60. 255
    0
      pdf_pages/view_pdf_hsd5762.html
  61. 255
    0
      pdf_pages/view_pdf_hsd5763.html
  62. 255
    0
      pdf_pages/view_pdf_hsd5764.html
  63. 255
    0
      pdf_pages/view_pdf_pn16507.html
  64. 255
    0
      pdf_pages/view_pdf_pn28612.html

BIN
HSD 1863.pdf Переглянути файл


BIN
HSD 4638.pdf Переглянути файл


BIN
HSD 5621.pdf Переглянути файл


BIN
HSD 5625.pdf Переглянути файл


BIN
HSD 5627.pdf Переглянути файл


BIN
HSD 5714.pdf Переглянути файл


BIN
HSD 5715.pdf Переглянути файл


BIN
HSD 5734.pdf Переглянути файл


BIN
HSD 5738.pdf Переглянути файл


BIN
HSD 5745.pdf Переглянути файл


BIN
HSD 5749.pdf Переглянути файл


BIN
HSD 5761.pdf Переглянути файл


BIN
HSD 5762.pdf Переглянути файл


BIN
HSD 5763.pdf Переглянути файл


BIN
HSD 5764.pdf Переглянути файл


BIN
HSD2384.pdf Переглянути файл


BIN
PN 16507.pdf Переглянути файл


BIN
PN 28612.pdf Переглянути файл


+ 2
- 3
css/app.css Переглянути файл 

@@ -1,10 +1,9 @@
1 1 
 /* CSS */
2 2 
 .button-23 {
3 
-    background-color: #FFFFFF;
4 
-    border: 1px solid #222222;
3 
+    background-color: #1F9027;
5 4 
     border-radius: 8px;
6 5 
     box-sizing: border-box;
7 
-    color: #222222;
6 
+    color: white;
8 7 
     cursor: pointer;
9 8 
     display: inline-block;
10 9 
     font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;

+ 267
- 0
details/detail_hsd11863.html Переглянути файл 

@@ -0,0 +1,267 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
11 
+
12 
+
13 
+
14 
+    <style>
15 
+        html,
16 
+        body {
17 
+            height: 370px;
18 
+            padding: 0;
19 
+            margin: 0;
20 
+        }
21 
+
22 
+        #map {
23 
+            height: 360px;
24 
+            width: 300px;
25 
+            overflow: hidden;
26 
+            float: left;
27 
+            border: thin solid #333;
28 
+        }
29 
+
30 
+        #capture {
31 
+            height: 360px;
32 
+            width: 480px;
33 
+            overflow: hidden;
34 
+            float: left;
35 
+            background-color: #ECECFB;
36 
+            border: thin solid #333;
37 
+            border-left: none;
38 
+        }
39 
+
40 
+        #pdfViewer {
41 
+            width: 100%;
42 
+            height: 600px;
43 
+        }
44 
+    </style>
45 
+
46 
+    <style>
47 
+        /* CSS */
48 
+        .button-23 {
49 
+            background-color: #FFFFFF;
50 
+            border: 1px solid #222222;
51 
+            border-radius: 8px;
52 
+            box-sizing: border-box;
53 
+            color: #222222;
54 
+            cursor: pointer;
55 
+            display: inline-block;
56 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
57 
+            font-size: 16px;
58 
+            font-weight: 600;
59 
+            line-height: 20px;
60 
+            margin: 0;
61 
+            outline: none;
62 
+            padding: 13px 23px;
63 
+            position: relative;
64 
+            text-align: center;
65 
+            text-decoration: none;
66 
+            touch-action: manipulation;
67 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
68 
+            user-select: none;
69 
+            -webkit-user-select: none;
70 
+            width: auto;
71 
+        }
72 
+
73 
+        .button-23:focus-visible {
74 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
75 
+            transition: box-shadow .2s;
76 
+        }
77 
+
78 
+        .button-23:active {
79 
+            background-color: #F7F7F7;
80 
+            border-color: #000000;
81 
+            transform: scale(.96);
82 
+        }
83 
+
84 
+        .button-23:disabled {
85 
+            border-color: #DDDDDD;
86 
+            color: #DDDDDD;
87 
+            cursor: not-allowed;
88 
+            opacity: 1;
89 
+        }
90 
+
91 
+        .map-svg {
92 
+            display: block;
93 
+            margin: 0 auto;
94 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
95 
+
96 
+            a {
97 
+                transition: all 1s;
98 
+                transform-origin: 50% 50%;
99 
+                text-decoration: none;
100 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
101 
+
102 
+                @media only screen and (min-width: 992px) {
103 
+
104 
+                    polygon,
105 
+                    &:hover {
106 
+                        cursor: pointer;
107 
+                        transform: scale(1.05);
108 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
109 
+
110 
+                        .st0 {
111 
+                            fill: $dark-default;
112 
+                        }
113 
+                    }
114 
+                }
115 
+            }
116 
+
117 
+            .pahang-barat {
118 
+                fill: #427bba;
119 
+            }
120 
+
121 
+            .pahang-tengah {
122 
+                fill: #144172;
123 
+            }
124 
+
125 
+            .pahang-timur {
126 
+                fill: #0c6088;
127 
+            }
128 
+
129 
+            .label-text {
130 
+                font-size: 35px;
131 
+                fill: white;
132 
+                transform: translate(0,
133 
+                        3px);
134 
+                /* adjust vertical position to centre text */
135 
+            }
136 
+
137 
+            .label-text-cameron {
138 
+                font-size: 20px;
139 
+                fill: white;
140 
+                transform: translate(0,
141 
+                        3px);
142 
+                /* adjust vertical position to centre text */
143 
+            }
144 
+
145 
+
146 
+        }
147 
+    </style>
148 
+
149 
+</head>
150 
+
151 
+<body>
152 
+
153 
+    <section class="section" style="max-height: 100vh;">
154 
+
155 
+        <div class=""
156 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
157 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../lists/raub.html"><i
158 
+                        class="fas fa-chevron-left"></i></a></h6>
159 
+            <h6 style="color: white;">Raub HSD 1863</h6>
160 
+        </div>
161 
+
162 
+        <div class="text-center pt-5"
163 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
164 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
165 
+
166 
+        </div>
167 
+
168 
+        <div class="text-center pt-1 pb-5"
169 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
170 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
171 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
172 
+
173 
+                <div id="map" style="width: 800px;"></div>
174 
+                <!-- <div id="capture"></div> -->
175 
+
176 
+
177 
+
178 
+            </div>
179 
+        </div>
180 
+
181 
+
182 
+
183 
+
184 
+        <div class="text-center pt-5"
185 
+            style="background-color: white; display: flex; justify-content: center; align-items: left; padding-left: 100px; margin-top: 250px;">
186 
+            <div style="display: flex; flex-direction: row;">
187 
+                <div>
188 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Lokasi :</span> <span
189 
+                            style="color: #ACACAC;">Bandar Raub</span></h6>
190 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Mukim :</span> <span
191 
+                            style="color: #ACACAC;">Bandar Raub</span></h6>
192 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Daerah :</span> <span
193 
+                            style="color: #ACACAC;">Raub</span></h6>
194 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Negeri :</span> <span
195 
+                            style="color: #ACACAC;">Pahang Darul Makmur</span></h6>
196 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Skala :</span> <span
197 
+                            style="color: #ACACAC;">Tanpa Skala</span></h6>
198 
+                </div>
199 
+                <div style="margin-left: 100px;">
200 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">No. Hak Milik :</span>
201 
+                        <span style="color: #ACACAC;">HSD 11863</span>
202 
+                    </h6>
203 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Keluasan (MP) :</span>
204 
+                        <span style="color: #ACACAC;">1.40</span>
205 
+                    </h6>
206 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Kehunaan :</span> <span
207 
+                            style="color: #ACACAC;">Bangunan</span></h6>
208 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Start Neat :</span>
209 
+                        <span style="color: #ACACAC;">Bangunan Perniagaan</span>
210 
+                    </h6>
211 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;"></span> <span
212 
+                            style="color: #ACACAC;"></span></h6>
213 
+                </div>
214 
+            </div>
215 
+        </div>
216 
+
217 
+        <div class="text-center pt-5 pb-5"
218 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
219 
+            <a href="../pdf_pages/view_pdf_hsd11863.html" class="button-23 mb-2 mr-2"
220 
+                style="background-color: #1F9027; color: white; border: none;width: 200px;" role="button"
221 
+                data-toggle="modal" data-target="#exampleModal">View
222 
+                PDF</a>
223 
+
224 
+        </div>
225 
+
226 
+        <script src="../js/jquery-3.7.1.js" defer></script>
227 
+
228 
+        <script src="../js/pdfjs-viewer.js" defer></script>
229 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
230 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
231 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
232 
+
233 
+    </section>
234 
+
235 
+
236 
+    <!-- <div id="map"></div> -->
237 
+
238 
+    <script>
239 
+        var map;
240 
+        var src = 'https://dev.suite.psk.gov.my/kml/HSD%201863.kml';
241 
+
242 
+        function initMap() {
243 
+            map = new google.maps.Map(document.getElementById('map'), {
244 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
245 
+                zoom: 2,
246 
+                mapTypeId: 'satellite'
247 
+            });
248 
+
249 
+            var kmlLayer = new google.maps.KmlLayer(src, {
250 
+                suppressInfoWindows: true,
251 
+                preserveViewport: false,
252 
+                map: map
253 
+            });
254 
+        }
255 
+
256 
+
257 
+
258 
+
259 
+
260 
+    </script>
261 
+    <script async
262 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
263 
+        </script>
264 
+
265 
+</body>
266 
+
267 
+</html>

+ 267
- 0
details/detail_hsd11991.html Переглянути файл 

@@ -0,0 +1,267 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
11 
+
12 
+
13 
+
14 
+    <style>
15 
+        html,
16 
+        body {
17 
+            height: 370px;
18 
+            padding: 0;
19 
+            margin: 0;
20 
+        }
21 
+
22 
+        #map {
23 
+            height: 360px;
24 
+            width: 300px;
25 
+            overflow: hidden;
26 
+            float: left;
27 
+            border: thin solid #333;
28 
+        }
29 
+
30 
+        #capture {
31 
+            height: 360px;
32 
+            width: 480px;
33 
+            overflow: hidden;
34 
+            float: left;
35 
+            background-color: #ECECFB;
36 
+            border: thin solid #333;
37 
+            border-left: none;
38 
+        }
39 
+
40 
+        #pdfViewer {
41 
+            width: 100%;
42 
+            height: 600px;
43 
+        }
44 
+    </style>
45 
+
46 
+    <style>
47 
+        /* CSS */
48 
+        .button-23 {
49 
+            background-color: #FFFFFF;
50 
+            border: 1px solid #222222;
51 
+            border-radius: 8px;
52 
+            box-sizing: border-box;
53 
+            color: #222222;
54 
+            cursor: pointer;
55 
+            display: inline-block;
56 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
57 
+            font-size: 16px;
58 
+            font-weight: 600;
59 
+            line-height: 20px;
60 
+            margin: 0;
61 
+            outline: none;
62 
+            padding: 13px 23px;
63 
+            position: relative;
64 
+            text-align: center;
65 
+            text-decoration: none;
66 
+            touch-action: manipulation;
67 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
68 
+            user-select: none;
69 
+            -webkit-user-select: none;
70 
+            width: auto;
71 
+        }
72 
+
73 
+        .button-23:focus-visible {
74 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
75 
+            transition: box-shadow .2s;
76 
+        }
77 
+
78 
+        .button-23:active {
79 
+            background-color: #F7F7F7;
80 
+            border-color: #000000;
81 
+            transform: scale(.96);
82 
+        }
83 
+
84 
+        .button-23:disabled {
85 
+            border-color: #DDDDDD;
86 
+            color: #DDDDDD;
87 
+            cursor: not-allowed;
88 
+            opacity: 1;
89 
+        }
90 
+
91 
+        .map-svg {
92 
+            display: block;
93 
+            margin: 0 auto;
94 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
95 
+
96 
+            a {
97 
+                transition: all 1s;
98 
+                transform-origin: 50% 50%;
99 
+                text-decoration: none;
100 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
101 
+
102 
+                @media only screen and (min-width: 992px) {
103 
+
104 
+                    polygon,
105 
+                    &:hover {
106 
+                        cursor: pointer;
107 
+                        transform: scale(1.05);
108 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
109 
+
110 
+                        .st0 {
111 
+                            fill: $dark-default;
112 
+                        }
113 
+                    }
114 
+                }
115 
+            }
116 
+
117 
+            .pahang-barat {
118 
+                fill: #427bba;
119 
+            }
120 
+
121 
+            .pahang-tengah {
122 
+                fill: #144172;
123 
+            }
124 
+
125 
+            .pahang-timur {
126 
+                fill: #0c6088;
127 
+            }
128 
+
129 
+            .label-text {
130 
+                font-size: 35px;
131 
+                fill: white;
132 
+                transform: translate(0,
133 
+                        3px);
134 
+                /* adjust vertical position to centre text */
135 
+            }
136 
+
137 
+            .label-text-cameron {
138 
+                font-size: 20px;
139 
+                fill: white;
140 
+                transform: translate(0,
141 
+                        3px);
142 
+                /* adjust vertical position to centre text */
143 
+            }
144 
+
145 
+
146 
+        }
147 
+    </style>
148 
+
149 
+</head>
150 
+
151 
+<body>
152 
+
153 
+    <section class="section" style="max-height: 100vh;">
154 
+
155 
+        <div class=""
156 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
157 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../lists/raub.html"><i
158 
+                        class="fas fa-chevron-left"></i></a></h6>
159 
+            <h6 style="color: white;">Raub HSD 11991</h6>
160 
+        </div>
161 
+
162 
+        <div class="text-center pt-5"
163 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
164 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
165 
+
166 
+        </div>
167 
+
168 
+        <div class="text-center pt-1 pb-5"
169 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
170 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
171 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
172 
+
173 
+                <div id="map" style="width: 800px;"></div>
174 
+                <!-- <div id="capture"></div> -->
175 
+
176 
+
177 
+
178 
+            </div>
179 
+        </div>
180 
+
181 
+
182 
+
183 
+
184 
+        <div class="text-center pt-5"
185 
+            style="background-color: white; display: flex; justify-content: center; align-items: left; padding-left: 100px; margin-top: 250px;">
186 
+            <div style="display: flex; flex-direction: row;">
187 
+                <div>
188 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Lokasi :</span> <span
189 
+                            style="color: #ACACAC;">Taman Raub Jaya</span></h6>
190 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Mukim :</span> <span
191 
+                            style="color: #ACACAC;">Gali</span></h6>
192 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Daerah :</span> <span
193 
+                            style="color: #ACACAC;">Raub</span></h6>
194 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Negeri :</span> <span
195 
+                            style="color: #ACACAC;">Pahang Darul Makmur</span></h6>
196 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Skala :</span> <span
197 
+                            style="color: #ACACAC;">Tanpa Skala</span></h6>
198 
+                </div>
199 
+                <div style="margin-left: 100px;">
200 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">No. Hak Milik :</span>
201 
+                        <span style="color: #ACACAC;">HSD 11991</span>
202 
+                    </h6>
203 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Keluasan (MP) :</span>
204 
+                        <span style="color: #ACACAC;">40.47</span>
205 
+                    </h6>
206 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Kehunaan :</span> <span
207 
+                            style="color: #ACACAC;">Pertanian</span></h6>
208 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Start Neat :</span>
209 
+                        <span style="color: #ACACAC;">Pertanian Bersepadu Bersekali Agrotourism</span>
210 
+                    </h6>
211 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;"></span> <span
212 
+                            style="color: #ACACAC;"></span></h6>
213 
+                </div>
214 
+            </div>
215 
+        </div>
216 
+
217 
+        <div class="text-center pt-5 pb-5"
218 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
219 
+            <a href="../pdf_pages/view_pdf_hsd11991.html" class="button-23 mb-2 mr-2"
220 
+                style="background-color: #1F9027; color: white; border: none;width: 200px;" role="button"
221 
+                data-toggle="modal" data-target="#exampleModal">View
222 
+                PDF</a>
223 
+
224 
+        </div>
225 
+
226 
+        <script src="../js/jquery-3.7.1.js" defer></script>
227 
+
228 
+        <script src="../js/pdfjs-viewer.js" defer></script>
229 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
230 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
231 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
232 
+
233 
+    </section>
234 
+
235 
+
236 
+    <!-- <div id="map"></div> -->
237 
+
238 
+    <script>
239 
+        var map;
240 
+        var src = 'https://dev.suite.psk.gov.my/kml/HSD%2011991.kml';
241 
+
242 
+        function initMap() {
243 
+            map = new google.maps.Map(document.getElementById('map'), {
244 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
245 
+                zoom: 2,
246 
+                mapTypeId: 'satellite'
247 
+            });
248 
+
249 
+            var kmlLayer = new google.maps.KmlLayer(src, {
250 
+                suppressInfoWindows: true,
251 
+                preserveViewport: false,
252 
+                map: map
253 
+            });
254 
+        }
255 
+
256 
+
257 
+
258 
+
259 
+
260 
+    </script>
261 
+    <script async
262 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
263 
+        </script>
264 
+
265 
+</body>
266 
+
267 
+</html>

+ 267
- 0
details/detail_hsd2384.html Переглянути файл 

@@ -0,0 +1,267 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
11 
+
12 
+
13 
+
14 
+    <style>
15 
+        html,
16 
+        body {
17 
+            height: 370px;
18 
+            padding: 0;
19 
+            margin: 0;
20 
+        }
21 
+
22 
+        #map {
23 
+            height: 360px;
24 
+            width: 300px;
25 
+            overflow: hidden;
26 
+            float: left;
27 
+            border: thin solid #333;
28 
+        }
29 
+
30 
+        #capture {
31 
+            height: 360px;
32 
+            width: 480px;
33 
+            overflow: hidden;
34 
+            float: left;
35 
+            background-color: #ECECFB;
36 
+            border: thin solid #333;
37 
+            border-left: none;
38 
+        }
39 
+
40 
+        #pdfViewer {
41 
+            width: 100%;
42 
+            height: 600px;
43 
+        }
44 
+    </style>
45 
+
46 
+    <style>
47 
+        /* CSS */
48 
+        .button-23 {
49 
+            background-color: #FFFFFF;
50 
+            border: 1px solid #222222;
51 
+            border-radius: 8px;
52 
+            box-sizing: border-box;
53 
+            color: #222222;
54 
+            cursor: pointer;
55 
+            display: inline-block;
56 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
57 
+            font-size: 16px;
58 
+            font-weight: 600;
59 
+            line-height: 20px;
60 
+            margin: 0;
61 
+            outline: none;
62 
+            padding: 13px 23px;
63 
+            position: relative;
64 
+            text-align: center;
65 
+            text-decoration: none;
66 
+            touch-action: manipulation;
67 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
68 
+            user-select: none;
69 
+            -webkit-user-select: none;
70 
+            width: auto;
71 
+        }
72 
+
73 
+        .button-23:focus-visible {
74 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
75 
+            transition: box-shadow .2s;
76 
+        }
77 
+
78 
+        .button-23:active {
79 
+            background-color: #F7F7F7;
80 
+            border-color: #000000;
81 
+            transform: scale(.96);
82 
+        }
83 
+
84 
+        .button-23:disabled {
85 
+            border-color: #DDDDDD;
86 
+            color: #DDDDDD;
87 
+            cursor: not-allowed;
88 
+            opacity: 1;
89 
+        }
90 
+
91 
+        .map-svg {
92 
+            display: block;
93 
+            margin: 0 auto;
94 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
95 
+
96 
+            a {
97 
+                transition: all 1s;
98 
+                transform-origin: 50% 50%;
99 
+                text-decoration: none;
100 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
101 
+
102 
+                @media only screen and (min-width: 992px) {
103 
+
104 
+                    polygon,
105 
+                    &:hover {
106 
+                        cursor: pointer;
107 
+                        transform: scale(1.05);
108 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
109 
+
110 
+                        .st0 {
111 
+                            fill: $dark-default;
112 
+                        }
113 
+                    }
114 
+                }
115 
+            }
116 
+
117 
+            .pahang-barat {
118 
+                fill: #427bba;
119 
+            }
120 
+
121 
+            .pahang-tengah {
122 
+                fill: #144172;
123 
+            }
124 
+
125 
+            .pahang-timur {
126 
+                fill: #0c6088;
127 
+            }
128 
+
129 
+            .label-text {
130 
+                font-size: 35px;
131 
+                fill: white;
132 
+                transform: translate(0,
133 
+                        3px);
134 
+                /* adjust vertical position to centre text */
135 
+            }
136 
+
137 
+            .label-text-cameron {
138 
+                font-size: 20px;
139 
+                fill: white;
140 
+                transform: translate(0,
141 
+                        3px);
142 
+                /* adjust vertical position to centre text */
143 
+            }
144 
+
145 
+
146 
+        }
147 
+    </style>
148 
+
149 
+</head>
150 
+
151 
+<body>
152 
+
153 
+    <section class="section" style="max-height: 100vh;">
154 
+
155 
+        <div class=""
156 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
157 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../lists/maran.html"><i
158 
+                        class="fas fa-chevron-left"></i></a></h6>
159 
+            <h6 style="color: white;">Maran HSD 2384</h6>
160 
+        </div>
161 
+
162 
+        <div class="text-center pt-5"
163 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
164 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
165 
+
166 
+        </div>
167 
+
168 
+        <div class="text-center pt-1 pb-5"
169 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
170 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
171 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
172 
+
173 
+                <div id="map" style="width: 800px;"></div>
174 
+                <!-- <div id="capture"></div> -->
175 
+
176 
+
177 
+
178 
+            </div>
179 
+        </div>
180 
+
181 
+
182 
+
183 
+
184 
+        <div class="text-center pt-5"
185 
+            style="background-color: white; display: flex; justify-content: center; align-items: left; padding-left: 100px; margin-top: 250px;">
186 
+            <div style="display: flex; flex-direction: row;">
187 
+                <div>
188 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Lokasi :</span> <span
189 
+                            style="color: #ACACAC;">Ulu Luit</span></h6>
190 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Mukim :</span> <span
191 
+                            style="color: #ACACAC;">Luit</span></h6>
192 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Daerah :</span> <span
193 
+                            style="color: #ACACAC;">Maran</span></h6>
194 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Negeri :</span> <span
195 
+                            style="color: #ACACAC;">Pahang Darul Makmur</span></h6>
196 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Skala :</span> <span
197 
+                            style="color: #ACACAC;">Tanpa Skala</span></h6>
198 
+                </div>
199 
+                <div style="margin-left: 100px;">
200 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">No. Hak Milik :</span>
201 
+                        <span style="color: #ACACAC;">HSD 2384</span>
202 
+                    </h6>
203 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Keluasan (MP) :</span>
204 
+                        <span style="color: #ACACAC;">16.728</span>
205 
+                    </h6>
206 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Kehunaan :</span> <span
207 
+                            style="color: #ACACAC;">Pertanian</span></h6>
208 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Start Neat :</span>
209 
+                        <span style="color: #ACACAC;">Ternakan Air Sahaja (belut/ikan/ketam/kerang/udang)</span>
210 
+                    </h6>
211 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;"></span> <span
212 
+                            style="color: #ACACAC;"></span></h6>
213 
+                </div>
214 
+            </div>
215 
+        </div>
216 
+
217 
+        <div class="text-center pt-5 pb-5"
218 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
219 
+            <a href="../pdf_pages/view_pdf_hsd2384.html" class="button-23 mb-2 mr-2"
220 
+                style="background-color: #1F9027; color: white; border: none;width: 200px;" role="button"
221 
+                data-toggle="modal" data-target="#exampleModal">View
222 
+                PDF</a>
223 
+
224 
+        </div>
225 
+
226 
+        <script src="../js/jquery-3.7.1.js" defer></script>
227 
+
228 
+        <script src="../js/pdfjs-viewer.js" defer></script>
229 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
230 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
231 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
232 
+
233 
+    </section>
234 
+
235 
+
236 
+    <!-- <div id="map"></div> -->
237 
+
238 
+    <script>
239 
+        var map;
240 
+        var src = 'https://dev.suite.psk.gov.my/kml/HSM%202384.kml';
241 
+
242 
+        function initMap() {
243 
+            map = new google.maps.Map(document.getElementById('map'), {
244 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
245 
+                zoom: 2,
246 
+                mapTypeId: 'satellite'
247 
+            });
248 
+
249 
+            var kmlLayer = new google.maps.KmlLayer(src, {
250 
+                suppressInfoWindows: true,
251 
+                preserveViewport: false,
252 
+                map: map
253 
+            });
254 
+        }
255 
+
256 
+
257 
+
258 
+
259 
+
260 
+    </script>
261 
+    <script async
262 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
263 
+        </script>
264 
+
265 
+</body>
266 
+
267 
+</html>

+ 267
- 0
details/detail_hsd4638.html Переглянути файл 

@@ -0,0 +1,267 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
11 
+
12 
+
13 
+
14 
+    <style>
15 
+        html,
16 
+        body {
17 
+            height: 370px;
18 
+            padding: 0;
19 
+            margin: 0;
20 
+        }
21 
+
22 
+        #map {
23 
+            height: 360px;
24 
+            width: 300px;
25 
+            overflow: hidden;
26 
+            float: left;
27 
+            border: thin solid #333;
28 
+        }
29 
+
30 
+        #capture {
31 
+            height: 360px;
32 
+            width: 480px;
33 
+            overflow: hidden;
34 
+            float: left;
35 
+            background-color: #ECECFB;
36 
+            border: thin solid #333;
37 
+            border-left: none;
38 
+        }
39 
+
40 
+        #pdfViewer {
41 
+            width: 100%;
42 
+            height: 600px;
43 
+        }
44 
+    </style>
45 
+
46 
+    <style>
47 
+        /* CSS */
48 
+        .button-23 {
49 
+            background-color: #FFFFFF;
50 
+            border: 1px solid #222222;
51 
+            border-radius: 8px;
52 
+            box-sizing: border-box;
53 
+            color: #222222;
54 
+            cursor: pointer;
55 
+            display: inline-block;
56 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
57 
+            font-size: 16px;
58 
+            font-weight: 600;
59 
+            line-height: 20px;
60 
+            margin: 0;
61 
+            outline: none;
62 
+            padding: 13px 23px;
63 
+            position: relative;
64 
+            text-align: center;
65 
+            text-decoration: none;
66 
+            touch-action: manipulation;
67 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
68 
+            user-select: none;
69 
+            -webkit-user-select: none;
70 
+            width: auto;
71 
+        }
72 
+
73 
+        .button-23:focus-visible {
74 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
75 
+            transition: box-shadow .2s;
76 
+        }
77 
+
78 
+        .button-23:active {
79 
+            background-color: #F7F7F7;
80 
+            border-color: #000000;
81 
+            transform: scale(.96);
82 
+        }
83 
+
84 
+        .button-23:disabled {
85 
+            border-color: #DDDDDD;
86 
+            color: #DDDDDD;
87 
+            cursor: not-allowed;
88 
+            opacity: 1;
89 
+        }
90 
+
91 
+        .map-svg {
92 
+            display: block;
93 
+            margin: 0 auto;
94 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
95 
+
96 
+            a {
97 
+                transition: all 1s;
98 
+                transform-origin: 50% 50%;
99 
+                text-decoration: none;
100 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
101 
+
102 
+                @media only screen and (min-width: 992px) {
103 
+
104 
+                    polygon,
105 
+                    &:hover {
106 
+                        cursor: pointer;
107 
+                        transform: scale(1.05);
108 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
109 
+
110 
+                        .st0 {
111 
+                            fill: $dark-default;
112 
+                        }
113 
+                    }
114 
+                }
115 
+            }
116 
+
117 
+            .pahang-barat {
118 
+                fill: #427bba;
119 
+            }
120 
+
121 
+            .pahang-tengah {
122 
+                fill: #144172;
123 
+            }
124 
+
125 
+            .pahang-timur {
126 
+                fill: #0c6088;
127 
+            }
128 
+
129 
+            .label-text {
130 
+                font-size: 35px;
131 
+                fill: white;
132 
+                transform: translate(0,
133 
+                        3px);
134 
+                /* adjust vertical position to centre text */
135 
+            }
136 
+
137 
+            .label-text-cameron {
138 
+                font-size: 20px;
139 
+                fill: white;
140 
+                transform: translate(0,
141 
+                        3px);
142 
+                /* adjust vertical position to centre text */
143 
+            }
144 
+
145 
+
146 
+        }
147 
+    </style>
148 
+
149 
+</head>
150 
+
151 
+<body>
152 
+
153 
+    <section class="section" style="max-height: 100vh;">
154 
+
155 
+        <div class=""
156 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
157 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../lists/rompin.html"><i
158 
+                        class="fas fa-chevron-left"></i></a></h6>
159 
+            <h6 style="color: white;">Rompin HSD 4638</h6>
160 
+        </div>
161 
+
162 
+        <div class="text-center pt-5"
163 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
164 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
165 
+
166 
+        </div>
167 
+
168 
+        <div class="text-center pt-1 pb-5"
169 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
170 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
171 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
172 
+
173 
+                <div id="map" style="width: 800px;"></div>
174 
+                <!-- <div id="capture"></div> -->
175 
+
176 
+
177 
+
178 
+            </div>
179 
+        </div>
180 
+
181 
+
182 
+
183 
+
184 
+        <div class="text-center pt-5"
185 
+            style="background-color: white; display: flex; justify-content: center; align-items: left; padding-left: 100px; margin-top: 250px;">
186 
+            <div style="display: flex; flex-direction: row;">
187 
+                <div>
188 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Lokasi :</span> <span
189 
+                            style="color: #ACACAC;">Kampung Tanam</span></h6>
190 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Mukim :</span> <span
191 
+                            style="color: #ACACAC;">Rompin</span></h6>
192 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Daerah :</span> <span
193 
+                            style="color: #ACACAC;">Rompin</span></h6>
194 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Negeri :</span> <span
195 
+                            style="color: #ACACAC;">Pahang Darul Makmur</span></h6>
196 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Skala :</span> <span
197 
+                            style="color: #ACACAC;">Tanpa Skala</span></h6>
198 
+                </div>
199 
+                <div style="margin-left: 100px;">
200 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">No. Hak Milik :</span>
201 
+                        <span style="color: #ACACAC;">HSD 4638</span>
202 
+                    </h6>
203 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Keluasan (MP) :</span>
204 
+                        <span style="color: #ACACAC;">181.9</span>
205 
+                    </h6>
206 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Kehunaan :</span> <span
207 
+                            style="color: #ACACAC;">Pertanian</span></h6>
208 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Start Neat :</span>
209 
+                        <span style="color: #ACACAC;">Tanaman Kontan Sahaja (tebu/jagung/tembikai/lada hitem <br> pisang/kacang tanah/betik/ubi kayu)</span>
210 
+                    </h6>
211 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;"></span> <span
212 
+                            style="color: #ACACAC;"></span></h6>
213 
+                </div>
214 
+            </div>
215 
+        </div>
216 
+
217 
+        <div class="text-center pt-5 pb-5"
218 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 0px;">
219 
+            <a href="../pdf_pages/view_pdf_hsd4628.html" class="button-23 mb-2 mr-2"
220 
+                style="background-color: #1F9027; color: white; border: none;width: 200px;" role="button"
221 
+                data-toggle="modal" data-target="#exampleModal">View
222 
+                PDF</a>
223 
+
224 
+        </div>
225 
+
226 
+        <script src="../js/jquery-3.7.1.js" defer></script>
227 
+
228 
+        <script src="../js/pdfjs-viewer.js" defer></script>
229 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
230 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
231 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
232 
+
233 
+    </section>
234 
+
235 
+
236 
+    <!-- <div id="map"></div> -->
237 
+
238 
+    <script>
239 
+        var map;
240 
+        var src = 'https://dev.suite.psk.gov.my/kml/HSD%204638.kml';
241 
+
242 
+        function initMap() {
243 
+            map = new google.maps.Map(document.getElementById('map'), {
244 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
245 
+                zoom: 2,
246 
+                mapTypeId: 'satellite'
247 
+            });
248 
+
249 
+            var kmlLayer = new google.maps.KmlLayer(src, {
250 
+                suppressInfoWindows: true,
251 
+                preserveViewport: false,
252 
+                map: map
253 
+            });
254 
+        }
255 
+
256 
+
257 
+
258 
+
259 
+
260 
+    </script>
261 
+    <script async
262 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
263 
+        </script>
264 
+
265 
+</body>
266 
+
267 
+</html>

+ 261
- 0
details/detail_hsd5621.html Переглянути файл 

@@ -0,0 +1,261 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
11 
+
12 
+
13 
+
14 
+    <style>
15 
+        html,
16 
+        body {
17 
+            height: 370px;
18 
+            padding: 0;
19 
+            margin: 0;
20 
+        }
21 
+
22 
+        #map {
23 
+            height: 360px;
24 
+            width: 300px;
25 
+            overflow: hidden;
26 
+            float: left;
27 
+            border: thin solid #333;
28 
+        }
29 
+
30 
+        #capture {
31 
+            height: 360px;
32 
+            width: 480px;
33 
+            overflow: hidden;
34 
+            float: left;
35 
+            background-color: #ECECFB;
36 
+            border: thin solid #333;
37 
+            border-left: none;
38 
+        }
39 
+
40 
+        #pdfViewer {
41 
+            width: 100%;
42 
+            height: 600px;
43 
+        }
44 
+    </style>
45 
+
46 
+    <style>
47 
+        /* CSS */
48 
+        .button-23 {
49 
+            background-color: #FFFFFF;
50 
+            border: 1px solid #222222;
51 
+            border-radius: 8px;
52 
+            box-sizing: border-box;
53 
+            color: #222222;
54 
+            cursor: pointer;
55 
+            display: inline-block;
56 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
57 
+            font-size: 16px;
58 
+            font-weight: 600;
59 
+            line-height: 20px;
60 
+            margin: 0;
61 
+            outline: none;
62 
+            padding: 13px 23px;
63 
+            position: relative;
64 
+            text-align: center;
65 
+            text-decoration: none;
66 
+            touch-action: manipulation;
67 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
68 
+            user-select: none;
69 
+            -webkit-user-select: none;
70 
+            width: auto;
71 
+        }
72 
+
73 
+        .button-23:focus-visible {
74 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
75 
+            transition: box-shadow .2s;
76 
+        }
77 
+
78 
+        .button-23:active {
79 
+            background-color: #F7F7F7;
80 
+            border-color: #000000;
81 
+            transform: scale(.96);
82 
+        }
83 
+
84 
+        .button-23:disabled {
85 
+            border-color: #DDDDDD;
86 
+            color: #DDDDDD;
87 
+            cursor: not-allowed;
88 
+            opacity: 1;
89 
+        }
90 
+
91 
+        .map-svg {
92 
+            display: block;
93 
+            margin: 0 auto;
94 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
95 
+
96 
+            a {
97 
+                transition: all 1s;
98 
+                transform-origin: 50% 50%;
99 
+                text-decoration: none;
100 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
101 
+
102 
+                @media only screen and (min-width: 992px) {
103 
+
104 
+                    polygon,
105 
+                    &:hover {
106 
+                        cursor: pointer;
107 
+                        transform: scale(1.05);
108 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
109 
+
110 
+                        .st0 {
111 
+                            fill: $dark-default;
112 
+                        }
113 
+                    }
114 
+                }
115 
+            }
116 
+
117 
+            .pahang-barat {
118 
+                fill: #427bba;
119 
+            }
120 
+
121 
+            .pahang-tengah {
122 
+                fill: #144172;
123 
+            }
124 
+
125 
+            .pahang-timur {
126 
+                fill: #0c6088;
127 
+            }
128 
+
129 
+            .label-text {
130 
+                font-size: 35px;
131 
+                fill: white;
132 
+                transform: translate(0,
133 
+                        3px);
134 
+                /* adjust vertical position to centre text */
135 
+            }
136 
+
137 
+            .label-text-cameron {
138 
+                font-size: 20px;
139 
+                fill: white;
140 
+                transform: translate(0,
141 
+                        3px);
142 
+                /* adjust vertical position to centre text */
143 
+            }
144 
+
145 
+
146 
+        }
147 
+    </style>
148 
+
149 
+</head>
150 
+
151 
+<body>
152 
+
153 
+    <section class="section" style="max-height: 100vh;">
154 
+
155 
+        <div class=""
156 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
157 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../lists/pekan.html"><i
158 
+                        class="fas fa-chevron-left"></i></a></h6>
159 
+            <h6 style="color: white;">Pekan HSD 5621</h6>
160 
+        </div>
161 
+
162 
+        <div class="text-center pt-5"
163 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
164 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
165 
+
166 
+        </div>
167 
+
168 
+        <div class="text-center pt-1 pb-5"
169 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
170 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
171 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
172 
+
173 
+                <div id="map" style="width: 800px;"></div>
174 
+                <!-- <div id="capture"></div> -->
175 
+            </div>
176 
+        </div>
177 
+
178 
+        <div class="text-center pt-5"
179 
+            style="background-color: white; display: flex; justify-content: center; align-items: left; padding-left: 100px; margin-top: 250px;">
180 
+            <div style="display: flex; flex-direction: row;">
181 
+                <div>
182 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Lokasi :</span> <span
183 
+                            style="color: #ACACAC;">Permatang Gading</span></h6>
184 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Mukim :</span> <span
185 
+                            style="color: #ACACAC;">Ganchong</span></h6>
186 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Daerah :</span> <span
187 
+                            style="color: #ACACAC;">Pekan</span></h6>
188 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Negeri :</span> <span
189 
+                            style="color: #ACACAC;">Pahang Darul Makmur</span></h6>
190 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Skala :</span> <span
191 
+                            style="color: #ACACAC;">Tanpa Skala</span></h6>
192 
+                </div>
193 
+                <div style="margin-left: 100px;">
194 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">No. Hak Milik :</span>
195 
+                        <span style="color: #ACACAC;">HSD 5621</span>
196 
+                    </h6>
197 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Keluasan (MP) :</span>
198 
+                        <span style="color: #ACACAC;">40.47</span>
199 
+                    </h6>
200 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Kehunaan :</span> <span
201 
+                            style="color: #ACACAC;">Pertanian</span></h6>
202 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Start Neat :</span>
203 
+                        <span style="color: #ACACAC;">Ternakan Domestik (Kambing/Lembu/Kerbau/Arnab/Kijang dan Rusa)</span>
204 
+                    </h6>
205 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;"></span> <span
206 
+                            style="color: #ACACAC;"></span></h6>
207 
+                </div>
208 
+            </div>
209 
+        </div>
210 
+
211 
+        <div class="text-center pt-5 pb-5"
212 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
213 
+            <a href="../pdf_pages/view_pdf_hsd2384.html" class="button-23 mb-2 mr-2"
214 
+                style="background-color: #1F9027; color: white; border: none;width: 200px;" role="button"
215 
+                data-toggle="modal" data-target="#exampleModal">View
216 
+                PDF</a>
217 
+
218 
+        </div>
219 
+
220 
+        <script src="../js/jquery-3.7.1.js" defer></script>
221 
+
222 
+        <script src="../js/pdfjs-viewer.js" defer></script>
223 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
224 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
225 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
226 
+
227 
+    </section>
228 
+
229 
+
230 
+    <!-- <div id="map"></div> -->
231 
+
232 
+    <script>
233 
+        var map;
234 
+        var src = 'https://dev.suite.psk.gov.my/kml/HSD%205621.kml';
235 
+
236 
+        function initMap() {
237 
+            map = new google.maps.Map(document.getElementById('map'), {
238 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
239 
+                zoom: 2,
240 
+                mapTypeId: 'satellite'
241 
+            });
242 
+
243 
+            var kmlLayer = new google.maps.KmlLayer(src, {
244 
+                suppressInfoWindows: true,
245 
+                preserveViewport: false,
246 
+                map: map
247 
+            });
248 
+        }
249 
+
250 
+
251 
+
252 
+
253 
+
254 
+    </script>
255 
+    <script async
256 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
257 
+        </script>
258 
+
259 
+</body>
260 
+
261 
+</html>

+ 267
- 0
details/detail_hsd5625.html Переглянути файл 

@@ -0,0 +1,267 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
11 
+
12 
+
13 
+
14 
+    <style>
15 
+        html,
16 
+        body {
17 
+            height: 370px;
18 
+            padding: 0;
19 
+            margin: 0;
20 
+        }
21 
+
22 
+        #map {
23 
+            height: 360px;
24 
+            width: 300px;
25 
+            overflow: hidden;
26 
+            float: left;
27 
+            border: thin solid #333;
28 
+        }
29 
+
30 
+        #capture {
31 
+            height: 360px;
32 
+            width: 480px;
33 
+            overflow: hidden;
34 
+            float: left;
35 
+            background-color: #ECECFB;
36 
+            border: thin solid #333;
37 
+            border-left: none;
38 
+        }
39 
+
40 
+        #pdfViewer {
41 
+            width: 100%;
42 
+            height: 600px;
43 
+        }
44 
+    </style>
45 
+
46 
+    <style>
47 
+        /* CSS */
48 
+        .button-23 {
49 
+            background-color: #FFFFFF;
50 
+            border: 1px solid #222222;
51 
+            border-radius: 8px;
52 
+            box-sizing: border-box;
53 
+            color: #222222;
54 
+            cursor: pointer;
55 
+            display: inline-block;
56 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
57 
+            font-size: 16px;
58 
+            font-weight: 600;
59 
+            line-height: 20px;
60 
+            margin: 0;
61 
+            outline: none;
62 
+            padding: 13px 23px;
63 
+            position: relative;
64 
+            text-align: center;
65 
+            text-decoration: none;
66 
+            touch-action: manipulation;
67 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
68 
+            user-select: none;
69 
+            -webkit-user-select: none;
70 
+            width: auto;
71 
+        }
72 
+
73 
+        .button-23:focus-visible {
74 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
75 
+            transition: box-shadow .2s;
76 
+        }
77 
+
78 
+        .button-23:active {
79 
+            background-color: #F7F7F7;
80 
+            border-color: #000000;
81 
+            transform: scale(.96);
82 
+        }
83 
+
84 
+        .button-23:disabled {
85 
+            border-color: #DDDDDD;
86 
+            color: #DDDDDD;
87 
+            cursor: not-allowed;
88 
+            opacity: 1;
89 
+        }
90 
+
91 
+        .map-svg {
92 
+            display: block;
93 
+            margin: 0 auto;
94 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
95 
+
96 
+            a {
97 
+                transition: all 1s;
98 
+                transform-origin: 50% 50%;
99 
+                text-decoration: none;
100 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
101 
+
102 
+                @media only screen and (min-width: 992px) {
103 
+
104 
+                    polygon,
105 
+                    &:hover {
106 
+                        cursor: pointer;
107 
+                        transform: scale(1.05);
108 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
109 
+
110 
+                        .st0 {
111 
+                            fill: $dark-default;
112 
+                        }
113 
+                    }
114 
+                }
115 
+            }
116 
+
117 
+            .pahang-barat {
118 
+                fill: #427bba;
119 
+            }
120 
+
121 
+            .pahang-tengah {
122 
+                fill: #144172;
123 
+            }
124 
+
125 
+            .pahang-timur {
126 
+                fill: #0c6088;
127 
+            }
128 
+
129 
+            .label-text {
130 
+                font-size: 35px;
131 
+                fill: white;
132 
+                transform: translate(0,
133 
+                        3px);
134 
+                /* adjust vertical position to centre text */
135 
+            }
136 
+
137 
+            .label-text-cameron {
138 
+                font-size: 20px;
139 
+                fill: white;
140 
+                transform: translate(0,
141 
+                        3px);
142 
+                /* adjust vertical position to centre text */
143 
+            }
144 
+
145 
+
146 
+        }
147 
+    </style>
148 
+
149 
+</head>
150 
+
151 
+<body>
152 
+
153 
+    <section class="section" style="max-height: 100vh;">
154 
+
155 
+        <div class=""
156 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
157 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../lists/pekan.html"><i
158 
+                        class="fas fa-chevron-left"></i></a></h6>
159 
+            <h6 style="color: white;">Pekan HSD 5625</h6>
160 
+        </div>
161 
+
162 
+        <div class="text-center pt-5"
163 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
164 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
165 
+
166 
+        </div>
167 
+
168 
+        <div class="text-center pt-1 pb-5"
169 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
170 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
171 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
172 
+
173 
+                <div id="map" style="width: 800px;"></div>
174 
+                <!-- <div id="capture"></div> -->
175 
+
176 
+
177 
+
178 
+            </div>
179 
+        </div>
180 
+
181 
+
182 
+
183 
+
184 
+        <div class="text-center pt-5"
185 
+            style="background-color: white; display: flex; justify-content: center; align-items: left; padding-left: 100px; margin-top: 250px;">
186 
+            <div style="display: flex; flex-direction: row;">
187 
+                <div>
188 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Lokasi :</span> <span
189 
+                            style="color: #ACACAC;">Paya Sementap</span></h6>
190 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Mukim :</span> <span
191 
+                            style="color: #ACACAC;">Bebar</span></h6>
192 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Daerah :</span> <span
193 
+                            style="color: #ACACAC;">Pekan</span></h6>
194 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Negeri :</span> <span
195 
+                            style="color: #ACACAC;">Pahang Darul Makmur</span></h6>
196 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Skala :</span> <span
197 
+                            style="color: #ACACAC;">Tanpa Skala</span></h6>
198 
+                </div>
199 
+                <div style="margin-left: 100px;">
200 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">No. Hak Milik :</span>
201 
+                        <span style="color: #ACACAC;">HSD 5625</span>
202 
+                    </h6>
203 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Keluasan (MP) :</span>
204 
+                        <span style="color: #ACACAC;">80.94</span>
205 
+                    </h6>
206 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Kehunaan :</span> <span
207 
+                            style="color: #ACACAC;">Pertanian</span></h6>
208 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Start Neat :</span>
209 
+                        <span style="color: #ACACAC;">Ternakan reptilia sahaja</span>
210 
+                    </h6>
211 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;"></span> <span
212 
+                            style="color: #ACACAC;"></span></h6>
213 
+                </div>
214 
+            </div>
215 
+        </div>
216 
+
217 
+        <div class="text-center pt-5 pb-5"
218 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
219 
+            <a href="../pdf_pages/view_pdf_hsd2384.html" class="button-23 mb-2 mr-2"
220 
+                style="background-color: #1F9027; color: white; border: none;width: 200px;" role="button"
221 
+                data-toggle="modal" data-target="#exampleModal">View
222 
+                PDF</a>
223 
+
224 
+        </div>
225 
+
226 
+        <script src="../js/jquery-3.7.1.js" defer></script>
227 
+
228 
+        <script src="../js/pdfjs-viewer.js" defer></script>
229 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
230 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
231 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
232 
+
233 
+    </section>
234 
+
235 
+
236 
+    <!-- <div id="map"></div> -->
237 
+
238 
+    <script>
239 
+        var map;
240 
+        var src = 'https://dev.suite.psk.gov.my/kml/HSD%205625.kml';
241 
+
242 
+        function initMap() {
243 
+            map = new google.maps.Map(document.getElementById('map'), {
244 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
245 
+                zoom: 2,
246 
+                mapTypeId: 'satellite'
247 
+            });
248 
+
249 
+            var kmlLayer = new google.maps.KmlLayer(src, {
250 
+                suppressInfoWindows: true,
251 
+                preserveViewport: false,
252 
+                map: map
253 
+            });
254 
+        }
255 
+
256 
+
257 
+
258 
+
259 
+
260 
+    </script>
261 
+    <script async
262 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
263 
+        </script>
264 
+
265 
+</body>
266 
+
267 
+</html>

+ 267
- 0
details/detail_hsd5627.html Переглянути файл 

@@ -0,0 +1,267 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
11 
+
12 
+
13 
+
14 
+    <style>
15 
+        html,
16 
+        body {
17 
+            height: 370px;
18 
+            padding: 0;
19 
+            margin: 0;
20 
+        }
21 
+
22 
+        #map {
23 
+            height: 360px;
24 
+            width: 300px;
25 
+            overflow: hidden;
26 
+            float: left;
27 
+            border: thin solid #333;
28 
+        }
29 
+
30 
+        #capture {
31 
+            height: 360px;
32 
+            width: 480px;
33 
+            overflow: hidden;
34 
+            float: left;
35 
+            background-color: #ECECFB;
36 
+            border: thin solid #333;
37 
+            border-left: none;
38 
+        }
39 
+
40 
+        #pdfViewer {
41 
+            width: 100%;
42 
+            height: 600px;
43 
+        }
44 
+    </style>
45 
+
46 
+    <style>
47 
+        /* CSS */
48 
+        .button-23 {
49 
+            background-color: #FFFFFF;
50 
+            border: 1px solid #222222;
51 
+            border-radius: 8px;
52 
+            box-sizing: border-box;
53 
+            color: #222222;
54 
+            cursor: pointer;
55 
+            display: inline-block;
56 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
57 
+            font-size: 16px;
58 
+            font-weight: 600;
59 
+            line-height: 20px;
60 
+            margin: 0;
61 
+            outline: none;
62 
+            padding: 13px 23px;
63 
+            position: relative;
64 
+            text-align: center;
65 
+            text-decoration: none;
66 
+            touch-action: manipulation;
67 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
68 
+            user-select: none;
69 
+            -webkit-user-select: none;
70 
+            width: auto;
71 
+        }
72 
+
73 
+        .button-23:focus-visible {
74 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
75 
+            transition: box-shadow .2s;
76 
+        }
77 
+
78 
+        .button-23:active {
79 
+            background-color: #F7F7F7;
80 
+            border-color: #000000;
81 
+            transform: scale(.96);
82 
+        }
83 
+
84 
+        .button-23:disabled {
85 
+            border-color: #DDDDDD;
86 
+            color: #DDDDDD;
87 
+            cursor: not-allowed;
88 
+            opacity: 1;
89 
+        }
90 
+
91 
+        .map-svg {
92 
+            display: block;
93 
+            margin: 0 auto;
94 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
95 
+
96 
+            a {
97 
+                transition: all 1s;
98 
+                transform-origin: 50% 50%;
99 
+                text-decoration: none;
100 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
101 
+
102 
+                @media only screen and (min-width: 992px) {
103 
+
104 
+                    polygon,
105 
+                    &:hover {
106 
+                        cursor: pointer;
107 
+                        transform: scale(1.05);
108 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
109 
+
110 
+                        .st0 {
111 
+                            fill: $dark-default;
112 
+                        }
113 
+                    }
114 
+                }
115 
+            }
116 
+
117 
+            .pahang-barat {
118 
+                fill: #427bba;
119 
+            }
120 
+
121 
+            .pahang-tengah {
122 
+                fill: #144172;
123 
+            }
124 
+
125 
+            .pahang-timur {
126 
+                fill: #0c6088;
127 
+            }
128 
+
129 
+            .label-text {
130 
+                font-size: 35px;
131 
+                fill: white;
132 
+                transform: translate(0,
133 
+                        3px);
134 
+                /* adjust vertical position to centre text */
135 
+            }
136 
+
137 
+            .label-text-cameron {
138 
+                font-size: 20px;
139 
+                fill: white;
140 
+                transform: translate(0,
141 
+                        3px);
142 
+                /* adjust vertical position to centre text */
143 
+            }
144 
+
145 
+
146 
+        }
147 
+    </style>
148 
+
149 
+</head>
150 
+
151 
+<body>
152 
+
153 
+    <section class="section" style="max-height: 100vh;">
154 
+
155 
+        <div class=""
156 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
157 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../lists/pekan.html"><i
158 
+                        class="fas fa-chevron-left"></i></a></h6>
159 
+            <h6 style="color: white;">Maran HSD 5627</h6>
160 
+        </div>
161 
+
162 
+        <div class="text-center pt-5"
163 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
164 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
165 
+
166 
+        </div>
167 
+
168 
+        <div class="text-center pt-1 pb-5"
169 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
170 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
171 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
172 
+
173 
+                <div id="map" style="width: 800px;"></div>
174 
+                <!-- <div id="capture"></div> -->
175 
+
176 
+
177 
+
178 
+            </div>
179 
+        </div>
180 
+
181 
+
182 
+
183 
+
184 
+        <div class="text-center pt-5"
185 
+            style="background-color: white; display: flex; justify-content: center; align-items: left; padding-left: 100px; margin-top: 250px;">
186 
+            <div style="display: flex; flex-direction: row;">
187 
+                <div>
188 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Lokasi :</span> <span
189 
+                            style="color: #ACACAC;">Sungai Miang</span></h6>
190 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Mukim :</span> <span
191 
+                            style="color: #ACACAC;">Pekan</span></h6>
192 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Daerah :</span> <span
193 
+                            style="color: #ACACAC;">Pekan</span></h6>
194 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Negeri :</span> <span
195 
+                            style="color: #ACACAC;">Pahang Darul Makmur</span></h6>
196 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Skala :</span> <span
197 
+                            style="color: #ACACAC;">Tanpa Skala</span></h6>
198 
+                </div>
199 
+                <div style="margin-left: 100px;">
200 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">No. Hak Milik :</span>
201 
+                        <span style="color: #ACACAC;">HSD 5627</span>
202 
+                    </h6>
203 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Keluasan (MP) :</span>
204 
+                        <span style="color: #ACACAC;">24.657</span>
205 
+                    </h6>
206 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Kehunaan :</span> <span
207 
+                            style="color: #ACACAC;">Pertanian</span></h6>
208 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Start Neat :</span>
209 
+                        <span style="color: #ACACAC;">Ternakan Air Sahaja (belut/ikan/ketam/kerang/udang)</span>
210 
+                    </h6>
211 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;"></span> <span
212 
+                            style="color: #ACACAC;"></span></h6>
213 
+                </div>
214 
+            </div>
215 
+        </div>
216 
+
217 
+        <div class="text-center pt-5 pb-5"
218 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
219 
+            <a href="../pdf_pages/view_pdf_hsd2384.html" class="button-23 mb-2 mr-2"
220 
+                style="background-color: #1F9027; color: white; border: none;width: 200px;" role="button"
221 
+                data-toggle="modal" data-target="#exampleModal">View
222 
+                PDF</a>
223 
+
224 
+        </div>
225 
+
226 
+        <script src="../js/jquery-3.7.1.js" defer></script>
227 
+
228 
+        <script src="../js/pdfjs-viewer.js" defer></script>
229 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
230 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
231 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
232 
+
233 
+    </section>
234 
+
235 
+
236 
+    <!-- <div id="map"></div> -->
237 
+
238 
+    <script>
239 
+        var map;
240 
+        var src = 'https://dev.suite.psk.gov.my/kml/HSD%205627.kml';
241 
+
242 
+        function initMap() {
243 
+            map = new google.maps.Map(document.getElementById('map'), {
244 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
245 
+                zoom: 2,
246 
+                mapTypeId: 'satellite'
247 
+            });
248 
+
249 
+            var kmlLayer = new google.maps.KmlLayer(src, {
250 
+                suppressInfoWindows: true,
251 
+                preserveViewport: false,
252 
+                map: map
253 
+            });
254 
+        }
255 
+
256 
+
257 
+
258 
+
259 
+
260 
+    </script>
261 
+    <script async
262 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
263 
+        </script>
264 
+
265 
+</body>
266 
+
267 
+</html>

+ 267
- 0
details/detail_hsd5714.html Переглянути файл 

@@ -0,0 +1,267 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
11 
+
12 
+
13 
+
14 
+    <style>
15 
+        html,
16 
+        body {
17 
+            height: 370px;
18 
+            padding: 0;
19 
+            margin: 0;
20 
+        }
21 
+
22 
+        #map {
23 
+            height: 360px;
24 
+            width: 300px;
25 
+            overflow: hidden;
26 
+            float: left;
27 
+            border: thin solid #333;
28 
+        }
29 
+
30 
+        #capture {
31 
+            height: 360px;
32 
+            width: 480px;
33 
+            overflow: hidden;
34 
+            float: left;
35 
+            background-color: #ECECFB;
36 
+            border: thin solid #333;
37 
+            border-left: none;
38 
+        }
39 
+
40 
+        #pdfViewer {
41 
+            width: 100%;
42 
+            height: 600px;
43 
+        }
44 
+    </style>
45 
+
46 
+    <style>
47 
+        /* CSS */
48 
+        .button-23 {
49 
+            background-color: #FFFFFF;
50 
+            border: 1px solid #222222;
51 
+            border-radius: 8px;
52 
+            box-sizing: border-box;
53 
+            color: #222222;
54 
+            cursor: pointer;
55 
+            display: inline-block;
56 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
57 
+            font-size: 16px;
58 
+            font-weight: 600;
59 
+            line-height: 20px;
60 
+            margin: 0;
61 
+            outline: none;
62 
+            padding: 13px 23px;
63 
+            position: relative;
64 
+            text-align: center;
65 
+            text-decoration: none;
66 
+            touch-action: manipulation;
67 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
68 
+            user-select: none;
69 
+            -webkit-user-select: none;
70 
+            width: auto;
71 
+        }
72 
+
73 
+        .button-23:focus-visible {
74 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
75 
+            transition: box-shadow .2s;
76 
+        }
77 
+
78 
+        .button-23:active {
79 
+            background-color: #F7F7F7;
80 
+            border-color: #000000;
81 
+            transform: scale(.96);
82 
+        }
83 
+
84 
+        .button-23:disabled {
85 
+            border-color: #DDDDDD;
86 
+            color: #DDDDDD;
87 
+            cursor: not-allowed;
88 
+            opacity: 1;
89 
+        }
90 
+
91 
+        .map-svg {
92 
+            display: block;
93 
+            margin: 0 auto;
94 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
95 
+
96 
+            a {
97 
+                transition: all 1s;
98 
+                transform-origin: 50% 50%;
99 
+                text-decoration: none;
100 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
101 
+
102 
+                @media only screen and (min-width: 992px) {
103 
+
104 
+                    polygon,
105 
+                    &:hover {
106 
+                        cursor: pointer;
107 
+                        transform: scale(1.05);
108 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
109 
+
110 
+                        .st0 {
111 
+                            fill: $dark-default;
112 
+                        }
113 
+                    }
114 
+                }
115 
+            }
116 
+
117 
+            .pahang-barat {
118 
+                fill: #427bba;
119 
+            }
120 
+
121 
+            .pahang-tengah {
122 
+                fill: #144172;
123 
+            }
124 
+
125 
+            .pahang-timur {
126 
+                fill: #0c6088;
127 
+            }
128 
+
129 
+            .label-text {
130 
+                font-size: 35px;
131 
+                fill: white;
132 
+                transform: translate(0,
133 
+                        3px);
134 
+                /* adjust vertical position to centre text */
135 
+            }
136 
+
137 
+            .label-text-cameron {
138 
+                font-size: 20px;
139 
+                fill: white;
140 
+                transform: translate(0,
141 
+                        3px);
142 
+                /* adjust vertical position to centre text */
143 
+            }
144 
+
145 
+
146 
+        }
147 
+    </style>
148 
+
149 
+</head>
150 
+
151 
+<body>
152 
+
153 
+    <section class="section" style="max-height: 100vh;">
154 
+
155 
+        <div class=""
156 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
157 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../lists/rompin.html"><i
158 
+                        class="fas fa-chevron-left"></i></a></h6>
159 
+            <h6 style="color: white;">Rompin HSD 5714</h6>
160 
+        </div>
161 
+
162 
+        <div class="text-center pt-5"
163 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
164 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
165 
+
166 
+        </div>
167 
+
168 
+        <div class="text-center pt-1 pb-5"
169 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
170 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
171 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
172 
+
173 
+                <div id="map" style="width: 800px;"></div>
174 
+                <!-- <div id="capture"></div> -->
175 
+
176 
+
177 
+
178 
+            </div>
179 
+        </div>
180 
+
181 
+
182 
+
183 
+
184 
+        <div class="text-center pt-5"
185 
+            style="background-color: white; display: flex; justify-content: center; align-items: left; padding-left: 100px; margin-top: 250px;">
186 
+            <div style="display: flex; flex-direction: row;">
187 
+                <div>
188 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Lokasi :</span> <span
189 
+                            style="color: #ACACAC;">Bukit Gayong</span></h6>
190 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Mukim :</span> <span
191 
+                            style="color: #ACACAC;">Rompin</span></h6>
192 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Daerah :</span> <span
193 
+                            style="color: #ACACAC;">Rompin</span></h6>
194 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Negeri :</span> <span
195 
+                            style="color: #ACACAC;">Pahang Darul Makmur</span></h6>
196 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Skala :</span> <span
197 
+                            style="color: #ACACAC;">Tanpa Skala</span></h6>
198 
+                </div>
199 
+                <div style="margin-left: 100px;">
200 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">No. Hak Milik :</span>
201 
+                        <span style="color: #ACACAC;">HSD 5714</span>
202 
+                    </h6>
203 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Keluasan (MP) :</span>
204 
+                        <span style="color: #ACACAC;">13.44</span>
205 
+                    </h6>
206 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Kehunaan :</span> <span
207 
+                            style="color: #ACACAC;">Pertanian</span></h6>
208 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Start Neat :</span>
209 
+                        <span style="color: #ACACAC;">Ternakan domistik Sahaja <br>(seperti kambing/lembu/kerbau<br>/arnab/kijang/dan rusa)</span>
210 
+                    </h6>
211 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;"></span> <span
212 
+                            style="color: #ACACAC;"></span></h6>
213 
+                </div>
214 
+            </div>
215 
+        </div>
216 
+
217 
+        <div class="text-center pt-5 pb-5"
218 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
219 
+            <a href="../pdf_pages/view_pdf_hsd5714.html" class="button-23 mb-2 mr-2"
220 
+                style="background-color: #1F9027; color: white; border: none;width: 200px;" role="button"
221 
+                data-toggle="modal" data-target="#exampleModal">View
222 
+                PDF</a>
223 
+
224 
+        </div>
225 
+
226 
+        <script src="../js/jquery-3.7.1.js" defer></script>
227 
+
228 
+        <script src="../js/pdfjs-viewer.js" defer></script>
229 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
230 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
231 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
232 
+
233 
+    </section>
234 
+
235 
+
236 
+    <!-- <div id="map"></div> -->
237 
+
238 
+    <script>
239 
+        var map;
240 
+        var src = 'https://dev.suite.psk.gov.my/kml/HSD%205714.kml';
241 
+
242 
+        function initMap() {
243 
+            map = new google.maps.Map(document.getElementById('map'), {
244 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
245 
+                zoom: 2,
246 
+                mapTypeId: 'satellite'
247 
+            });
248 
+
249 
+            var kmlLayer = new google.maps.KmlLayer(src, {
250 
+                suppressInfoWindows: true,
251 
+                preserveViewport: false,
252 
+                map: map
253 
+            });
254 
+        }
255 
+
256 
+
257 
+
258 
+
259 
+
260 
+    </script>
261 
+    <script async
262 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
263 
+        </script>
264 
+
265 
+</body>
266 
+
267 
+</html>

+ 267
- 0
details/detail_hsd5715.html Переглянути файл 

@@ -0,0 +1,267 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
11 
+
12 
+
13 
+
14 
+    <style>
15 
+        html,
16 
+        body {
17 
+            height: 370px;
18 
+            padding: 0;
19 
+            margin: 0;
20 
+        }
21 
+
22 
+        #map {
23 
+            height: 360px;
24 
+            width: 300px;
25 
+            overflow: hidden;
26 
+            float: left;
27 
+            border: thin solid #333;
28 
+        }
29 
+
30 
+        #capture {
31 
+            height: 360px;
32 
+            width: 480px;
33 
+            overflow: hidden;
34 
+            float: left;
35 
+            background-color: #ECECFB;
36 
+            border: thin solid #333;
37 
+            border-left: none;
38 
+        }
39 
+
40 
+        #pdfViewer {
41 
+            width: 100%;
42 
+            height: 600px;
43 
+        }
44 
+    </style>
45 
+
46 
+    <style>
47 
+        /* CSS */
48 
+        .button-23 {
49 
+            background-color: #FFFFFF;
50 
+            border: 1px solid #222222;
51 
+            border-radius: 8px;
52 
+            box-sizing: border-box;
53 
+            color: #222222;
54 
+            cursor: pointer;
55 
+            display: inline-block;
56 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
57 
+            font-size: 16px;
58 
+            font-weight: 600;
59 
+            line-height: 20px;
60 
+            margin: 0;
61 
+            outline: none;
62 
+            padding: 13px 23px;
63 
+            position: relative;
64 
+            text-align: center;
65 
+            text-decoration: none;
66 
+            touch-action: manipulation;
67 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
68 
+            user-select: none;
69 
+            -webkit-user-select: none;
70 
+            width: auto;
71 
+        }
72 
+
73 
+        .button-23:focus-visible {
74 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
75 
+            transition: box-shadow .2s;
76 
+        }
77 
+
78 
+        .button-23:active {
79 
+            background-color: #F7F7F7;
80 
+            border-color: #000000;
81 
+            transform: scale(.96);
82 
+        }
83 
+
84 
+        .button-23:disabled {
85 
+            border-color: #DDDDDD;
86 
+            color: #DDDDDD;
87 
+            cursor: not-allowed;
88 
+            opacity: 1;
89 
+        }
90 
+
91 
+        .map-svg {
92 
+            display: block;
93 
+            margin: 0 auto;
94 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
95 
+
96 
+            a {
97 
+                transition: all 1s;
98 
+                transform-origin: 50% 50%;
99 
+                text-decoration: none;
100 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
101 
+
102 
+                @media only screen and (min-width: 992px) {
103 
+
104 
+                    polygon,
105 
+                    &:hover {
106 
+                        cursor: pointer;
107 
+                        transform: scale(1.05);
108 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
109 
+
110 
+                        .st0 {
111 
+                            fill: $dark-default;
112 
+                        }
113 
+                    }
114 
+                }
115 
+            }
116 
+
117 
+            .pahang-barat {
118 
+                fill: #427bba;
119 
+            }
120 
+
121 
+            .pahang-tengah {
122 
+                fill: #144172;
123 
+            }
124 
+
125 
+            .pahang-timur {
126 
+                fill: #0c6088;
127 
+            }
128 
+
129 
+            .label-text {
130 
+                font-size: 35px;
131 
+                fill: white;
132 
+                transform: translate(0,
133 
+                        3px);
134 
+                /* adjust vertical position to centre text */
135 
+            }
136 
+
137 
+            .label-text-cameron {
138 
+                font-size: 20px;
139 
+                fill: white;
140 
+                transform: translate(0,
141 
+                        3px);
142 
+                /* adjust vertical position to centre text */
143 
+            }
144 
+
145 
+
146 
+        }
147 
+    </style>
148 
+
149 
+</head>
150 
+
151 
+<body>
152 
+
153 
+    <section class="section" style="max-height: 100vh;">
154 
+
155 
+        <div class=""
156 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
157 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../lists/rompin.html"><i
158 
+                        class="fas fa-chevron-left"></i></a></h6>
159 
+            <h6 style="color: white;">Rompin HSD 5715</h6>
160 
+        </div>
161 
+
162 
+        <div class="text-center pt-5"
163 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
164 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
165 
+
166 
+        </div>
167 
+
168 
+        <div class="text-center pt-1 pb-5"
169 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
170 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
171 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
172 
+
173 
+                <div id="map" style="width: 800px;"></div>
174 
+                <!-- <div id="capture"></div> -->
175 
+
176 
+
177 
+
178 
+            </div>
179 
+        </div>
180 
+
181 
+
182 
+
183 
+
184 
+        <div class="text-center pt-5"
185 
+            style="background-color: white; display: flex; justify-content: center; align-items: left; padding-left: 100px; margin-top: 250px;">
186 
+            <div style="display: flex; flex-direction: row;">
187 
+                <div>
188 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Lokasi :</span> <span
189 
+                            style="color: #ACACAC;">Kampung Mempisang</span></h6>
190 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Mukim :</span> <span
191 
+                            style="color: #ACACAC;">Endau</span></h6>
192 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Daerah :</span> <span
193 
+                            style="color: #ACACAC;">Rompin</span></h6>
194 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Negeri :</span> <span
195 
+                            style="color: #ACACAC;">Pahang Darul Makmur</span></h6>
196 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Skala :</span> <span
197 
+                            style="color: #ACACAC;">Tanpa Skala</span></h6>
198 
+                </div>
199 
+                <div style="margin-left: 100px;">
200 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">No. Hak Milik :</span>
201 
+                        <span style="color: #ACACAC;">HSD 5715</span>
202 
+                    </h6>
203 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Keluasan (MP) :</span>
204 
+                        <span style="color: #ACACAC;">13.83</span>
205 
+                    </h6>
206 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Kehunaan :</span> <span
207 
+                            style="color: #ACACAC;">Bangunan</span></h6>
208 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Start Neat :</span>
209 
+                        <span style="color: #ACACAC;">(Bangunan Kediaman /<br>Bangunan Perniagaan/Industri)</span>
210 
+                    </h6>
211 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;"></span> <span
212 
+                            style="color: #ACACAC;"></span></h6>
213 
+                </div>
214 
+            </div>
215 
+        </div>
216 
+
217 
+        <div class="text-center pt-5 pb-5"
218 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
219 
+            <a href="../pdf_pages/view_pdf_hsd5715.html" class="button-23 mb-2 mr-2"
220 
+                style="background-color: #1F9027; color: white; border: none;width: 200px;" role="button"
221 
+                data-toggle="modal" data-target="#exampleModal">View
222 
+                PDF</a>
223 
+
224 
+        </div>
225 
+
226 
+        <script src="../js/jquery-3.7.1.js" defer></script>
227 
+
228 
+        <script src="../js/pdfjs-viewer.js" defer></script>
229 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
230 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
231 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
232 
+
233 
+    </section>
234 
+
235 
+
236 
+    <!-- <div id="map"></div> -->
237 
+
238 
+    <script>
239 
+        var map;
240 
+        var src = 'https://dev.suite.psk.gov.my/kml/HSD%205715.kml';
241 
+
242 
+        function initMap() {
243 
+            map = new google.maps.Map(document.getElementById('map'), {
244 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
245 
+                zoom: 2,
246 
+                mapTypeId: 'satellite'
247 
+            });
248 
+
249 
+            var kmlLayer = new google.maps.KmlLayer(src, {
250 
+                suppressInfoWindows: true,
251 
+                preserveViewport: false,
252 
+                map: map
253 
+            });
254 
+        }
255 
+
256 
+
257 
+
258 
+
259 
+
260 
+    </script>
261 
+    <script async
262 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
263 
+        </script>
264 
+
265 
+</body>
266 
+
267 
+</html>

+ 267
- 0
details/detail_hsd5734.html Переглянути файл 

@@ -0,0 +1,267 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
11 
+
12 
+
13 
+
14 
+    <style>
15 
+        html,
16 
+        body {
17 
+            height: 370px;
18 
+            padding: 0;
19 
+            margin: 0;
20 
+        }
21 
+
22 
+        #map {
23 
+            height: 360px;
24 
+            width: 300px;
25 
+            overflow: hidden;
26 
+            float: left;
27 
+            border: thin solid #333;
28 
+        }
29 
+
30 
+        #capture {
31 
+            height: 360px;
32 
+            width: 480px;
33 
+            overflow: hidden;
34 
+            float: left;
35 
+            background-color: #ECECFB;
36 
+            border: thin solid #333;
37 
+            border-left: none;
38 
+        }
39 
+
40 
+        #pdfViewer {
41 
+            width: 100%;
42 
+            height: 600px;
43 
+        }
44 
+    </style>
45 
+
46 
+    <style>
47 
+        /* CSS */
48 
+        .button-23 {
49 
+            background-color: #FFFFFF;
50 
+            border: 1px solid #222222;
51 
+            border-radius: 8px;
52 
+            box-sizing: border-box;
53 
+            color: #222222;
54 
+            cursor: pointer;
55 
+            display: inline-block;
56 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
57 
+            font-size: 16px;
58 
+            font-weight: 600;
59 
+            line-height: 20px;
60 
+            margin: 0;
61 
+            outline: none;
62 
+            padding: 13px 23px;
63 
+            position: relative;
64 
+            text-align: center;
65 
+            text-decoration: none;
66 
+            touch-action: manipulation;
67 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
68 
+            user-select: none;
69 
+            -webkit-user-select: none;
70 
+            width: auto;
71 
+        }
72 
+
73 
+        .button-23:focus-visible {
74 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
75 
+            transition: box-shadow .2s;
76 
+        }
77 
+
78 
+        .button-23:active {
79 
+            background-color: #F7F7F7;
80 
+            border-color: #000000;
81 
+            transform: scale(.96);
82 
+        }
83 
+
84 
+        .button-23:disabled {
85 
+            border-color: #DDDDDD;
86 
+            color: #DDDDDD;
87 
+            cursor: not-allowed;
88 
+            opacity: 1;
89 
+        }
90 
+
91 
+        .map-svg {
92 
+            display: block;
93 
+            margin: 0 auto;
94 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
95 
+
96 
+            a {
97 
+                transition: all 1s;
98 
+                transform-origin: 50% 50%;
99 
+                text-decoration: none;
100 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
101 
+
102 
+                @media only screen and (min-width: 992px) {
103 
+
104 
+                    polygon,
105 
+                    &:hover {
106 
+                        cursor: pointer;
107 
+                        transform: scale(1.05);
108 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
109 
+
110 
+                        .st0 {
111 
+                            fill: $dark-default;
112 
+                        }
113 
+                    }
114 
+                }
115 
+            }
116 
+
117 
+            .pahang-barat {
118 
+                fill: #427bba;
119 
+            }
120 
+
121 
+            .pahang-tengah {
122 
+                fill: #144172;
123 
+            }
124 
+
125 
+            .pahang-timur {
126 
+                fill: #0c6088;
127 
+            }
128 
+
129 
+            .label-text {
130 
+                font-size: 35px;
131 
+                fill: white;
132 
+                transform: translate(0,
133 
+                        3px);
134 
+                /* adjust vertical position to centre text */
135 
+            }
136 
+
137 
+            .label-text-cameron {
138 
+                font-size: 20px;
139 
+                fill: white;
140 
+                transform: translate(0,
141 
+                        3px);
142 
+                /* adjust vertical position to centre text */
143 
+            }
144 
+
145 
+
146 
+        }
147 
+    </style>
148 
+
149 
+</head>
150 
+
151 
+<body>
152 
+
153 
+    <section class="section" style="max-height: 100vh;">
154 
+
155 
+        <div class=""
156 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
157 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../lists/rompin.html"><i
158 
+                        class="fas fa-chevron-left"></i></a></h6>
159 
+            <h6 style="color: white;">Rompin HSD 5734</h6>
160 
+        </div>
161 
+
162 
+        <div class="text-center pt-5"
163 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
164 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
165 
+
166 
+        </div>
167 
+
168 
+        <div class="text-center pt-1 pb-5"
169 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
170 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
171 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
172 
+
173 
+                <div id="map" style="width: 800px;"></div>
174 
+                <!-- <div id="capture"></div> -->
175 
+
176 
+
177 
+
178 
+            </div>
179 
+        </div>
180 
+
181 
+
182 
+
183 
+
184 
+        <div class="text-center pt-5"
185 
+            style="background-color: white; display: flex; justify-content: center; align-items: left; padding-left: 100px; margin-top: 250px;">
186 
+            <div style="display: flex; flex-direction: row;">
187 
+                <div>
188 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Lokasi :</span> <span
189 
+                            style="color: #ACACAC;">Lanjut</span></h6>
190 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Mukim :</span> <span
191 
+                            style="color: #ACACAC;">Rompin</span></h6>
192 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Daerah :</span> <span
193 
+                            style="color: #ACACAC;">Rompin</span></h6>
194 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Negeri :</span> <span
195 
+                            style="color: #ACACAC;">Pahang Darul Makmur</span></h6>
196 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Skala :</span> <span
197 
+                            style="color: #ACACAC;">Tanpa Skala</span></h6>
198 
+                </div>
199 
+                <div style="margin-left: 100px;">
200 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">No. Hak Milik :</span>
201 
+                        <span style="color: #ACACAC;">HSD 5734</span>
202 
+                    </h6>
203 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Keluasan (MP) :</span>
204 
+                        <span style="color: #ACACAC;">10.33</span>
205 
+                    </h6>
206 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Kehunaan :</span> <span
207 
+                            style="color: #ACACAC;">Bangunan</span></h6>
208 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Start Neat :</span>
209 
+                        <span style="color: #ACACAC;">Lapangan Terbang</span>
210 
+                    </h6>
211 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;"></span> <span
212 
+                            style="color: #ACACAC;"></span></h6>
213 
+                </div>
214 
+            </div>
215 
+        </div>
216 
+
217 
+        <div class="text-center pt-5 pb-5"
218 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
219 
+            <a href="../pdf_pages/view_pdf_hsd5734.html" class="button-23 mb-2 mr-2"
220 
+                style="background-color: #1F9027; color: white; border: none;width: 200px;" role="button"
221 
+                data-toggle="modal" data-target="#exampleModal">View
222 
+                PDF</a>
223 
+
224 
+        </div>
225 
+
226 
+        <script src="../js/jquery-3.7.1.js" defer></script>
227 
+
228 
+        <script src="../js/pdfjs-viewer.js" defer></script>
229 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
230 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
231 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
232 
+
233 
+    </section>
234 
+
235 
+
236 
+    <!-- <div id="map"></div> -->
237 
+
238 
+    <script>
239 
+        var map;
240 
+        var src = 'https://dev.suite.psk.gov.my/kml/HSD%205734.kml';
241 
+
242 
+        function initMap() {
243 
+            map = new google.maps.Map(document.getElementById('map'), {
244 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
245 
+                zoom: 2,
246 
+                mapTypeId: 'satellite'
247 
+            });
248 
+
249 
+            var kmlLayer = new google.maps.KmlLayer(src, {
250 
+                suppressInfoWindows: true,
251 
+                preserveViewport: false,
252 
+                map: map
253 
+            });
254 
+        }
255 
+
256 
+
257 
+
258 
+
259 
+
260 
+    </script>
261 
+    <script async
262 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
263 
+        </script>
264 
+
265 
+</body>
266 
+
267 
+</html>

+ 267
- 0
details/detail_hsd5738.html Переглянути файл 

@@ -0,0 +1,267 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
11 
+
12 
+
13 
+
14 
+    <style>
15 
+        html,
16 
+        body {
17 
+            height: 370px;
18 
+            padding: 0;
19 
+            margin: 0;
20 
+        }
21 
+
22 
+        #map {
23 
+            height: 360px;
24 
+            width: 300px;
25 
+            overflow: hidden;
26 
+            float: left;
27 
+            border: thin solid #333;
28 
+        }
29 
+
30 
+        #capture {
31 
+            height: 360px;
32 
+            width: 480px;
33 
+            overflow: hidden;
34 
+            float: left;
35 
+            background-color: #ECECFB;
36 
+            border: thin solid #333;
37 
+            border-left: none;
38 
+        }
39 
+
40 
+        #pdfViewer {
41 
+            width: 100%;
42 
+            height: 600px;
43 
+        }
44 
+    </style>
45 
+
46 
+    <style>
47 
+        /* CSS */
48 
+        .button-23 {
49 
+            background-color: #FFFFFF;
50 
+            border: 1px solid #222222;
51 
+            border-radius: 8px;
52 
+            box-sizing: border-box;
53 
+            color: #222222;
54 
+            cursor: pointer;
55 
+            display: inline-block;
56 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
57 
+            font-size: 16px;
58 
+            font-weight: 600;
59 
+            line-height: 20px;
60 
+            margin: 0;
61 
+            outline: none;
62 
+            padding: 13px 23px;
63 
+            position: relative;
64 
+            text-align: center;
65 
+            text-decoration: none;
66 
+            touch-action: manipulation;
67 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
68 
+            user-select: none;
69 
+            -webkit-user-select: none;
70 
+            width: auto;
71 
+        }
72 
+
73 
+        .button-23:focus-visible {
74 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
75 
+            transition: box-shadow .2s;
76 
+        }
77 
+
78 
+        .button-23:active {
79 
+            background-color: #F7F7F7;
80 
+            border-color: #000000;
81 
+            transform: scale(.96);
82 
+        }
83 
+
84 
+        .button-23:disabled {
85 
+            border-color: #DDDDDD;
86 
+            color: #DDDDDD;
87 
+            cursor: not-allowed;
88 
+            opacity: 1;
89 
+        }
90 
+
91 
+        .map-svg {
92 
+            display: block;
93 
+            margin: 0 auto;
94 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
95 
+
96 
+            a {
97 
+                transition: all 1s;
98 
+                transform-origin: 50% 50%;
99 
+                text-decoration: none;
100 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
101 
+
102 
+                @media only screen and (min-width: 992px) {
103 
+
104 
+                    polygon,
105 
+                    &:hover {
106 
+                        cursor: pointer;
107 
+                        transform: scale(1.05);
108 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
109 
+
110 
+                        .st0 {
111 
+                            fill: $dark-default;
112 
+                        }
113 
+                    }
114 
+                }
115 
+            }
116 
+
117 
+            .pahang-barat {
118 
+                fill: #427bba;
119 
+            }
120 
+
121 
+            .pahang-tengah {
122 
+                fill: #144172;
123 
+            }
124 
+
125 
+            .pahang-timur {
126 
+                fill: #0c6088;
127 
+            }
128 
+
129 
+            .label-text {
130 
+                font-size: 35px;
131 
+                fill: white;
132 
+                transform: translate(0,
133 
+                        3px);
134 
+                /* adjust vertical position to centre text */
135 
+            }
136 
+
137 
+            .label-text-cameron {
138 
+                font-size: 20px;
139 
+                fill: white;
140 
+                transform: translate(0,
141 
+                        3px);
142 
+                /* adjust vertical position to centre text */
143 
+            }
144 
+
145 
+
146 
+        }
147 
+    </style>
148 
+
149 
+</head>
150 
+
151 
+<body>
152 
+
153 
+    <section class="section" style="max-height: 100vh;">
154 
+
155 
+        <div class=""
156 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
157 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../lists/rompin.html"><i
158 
+                        class="fas fa-chevron-left"></i></a></h6>
159 
+            <h6 style="color: white;">Rompin HSD 5738</h6>
160 
+        </div>
161 
+
162 
+        <div class="text-center pt-5"
163 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
164 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
165 
+
166 
+        </div>
167 
+
168 
+        <div class="text-center pt-1 pb-5"
169 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
170 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
171 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
172 
+
173 
+                <div id="map" style="width: 800px;"></div>
174 
+                <!-- <div id="capture"></div> -->
175 
+
176 
+
177 
+
178 
+            </div>
179 
+        </div>
180 
+
181 
+
182 
+
183 
+
184 
+        <div class="text-center pt-5"
185 
+            style="background-color: white; display: flex; justify-content: center; align-items: left; padding-left: 100px; margin-top: 250px;">
186 
+            <div style="display: flex; flex-direction: row;">
187 
+                <div>
188 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Lokasi :</span> <span
189 
+                            style="color: #ACACAC;">Lanjut</span></h6>
190 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Mukim :</span> <span
191 
+                            style="color: #ACACAC;">Rompin</span></h6>
192 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Daerah :</span> <span
193 
+                            style="color: #ACACAC;">Rompin</span></h6>
194 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Negeri :</span> <span
195 
+                            style="color: #ACACAC;">Pahang Darul Makmur</span></h6>
196 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Skala :</span> <span
197 
+                            style="color: #ACACAC;">Tanpa Skala</span></h6>
198 
+                </div>
199 
+                <div style="margin-left: 100px;">
200 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">No. Hak Milik :</span>
201 
+                        <span style="color: #ACACAC;">HSD 5738</span>
202 
+                    </h6>
203 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Keluasan (MP) :</span>
204 
+                        <span style="color: #ACACAC;">6.77</span>
205 
+                    </h6>
206 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Kehunaan :</span> <span
207 
+                            style="color: #ACACAC;">Bangunan</span></h6>
208 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Start Neat :</span>
209 
+                        <span style="color: #ACACAC;">Lapangan Terbang</span>
210 
+                    </h6>
211 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;"></span> <span
212 
+                            style="color: #ACACAC;"></span></h6>
213 
+                </div>
214 
+            </div>
215 
+        </div>
216 
+
217 
+        <div class="text-center pt-5 pb-5"
218 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
219 
+            <a href="../pdf_pages/view_pdf_hsd5738.html" class="button-23 mb-2 mr-2"
220 
+                style="background-color: #1F9027; color: white; border: none;width: 200px;" role="button"
221 
+                data-toggle="modal" data-target="#exampleModal">View
222 
+                PDF</a>
223 
+
224 
+        </div>
225 
+
226 
+        <script src="../js/jquery-3.7.1.js" defer></script>
227 
+
228 
+        <script src="../js/pdfjs-viewer.js" defer></script>
229 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
230 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
231 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
232 
+
233 
+    </section>
234 
+
235 
+
236 
+    <!-- <div id="map"></div> -->
237 
+
238 
+    <script>
239 
+        var map;
240 
+        var src = 'https://dev.suite.psk.gov.my/kml/HSD%205738.kml';
241 
+
242 
+        function initMap() {
243 
+            map = new google.maps.Map(document.getElementById('map'), {
244 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
245 
+                zoom: 2,
246 
+                mapTypeId: 'satellite'
247 
+            });
248 
+
249 
+            var kmlLayer = new google.maps.KmlLayer(src, {
250 
+                suppressInfoWindows: true,
251 
+                preserveViewport: false,
252 
+                map: map
253 
+            });
254 
+        }
255 
+
256 
+
257 
+
258 
+
259 
+
260 
+    </script>
261 
+    <script async
262 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
263 
+        </script>
264 
+
265 
+</body>
266 
+
267 
+</html>

+ 267
- 0
details/detail_hsd5745.html Переглянути файл 

@@ -0,0 +1,267 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
11 
+
12 
+
13 
+
14 
+    <style>
15 
+        html,
16 
+        body {
17 
+            height: 370px;
18 
+            padding: 0;
19 
+            margin: 0;
20 
+        }
21 
+
22 
+        #map {
23 
+            height: 360px;
24 
+            width: 300px;
25 
+            overflow: hidden;
26 
+            float: left;
27 
+            border: thin solid #333;
28 
+        }
29 
+
30 
+        #capture {
31 
+            height: 360px;
32 
+            width: 480px;
33 
+            overflow: hidden;
34 
+            float: left;
35 
+            background-color: #ECECFB;
36 
+            border: thin solid #333;
37 
+            border-left: none;
38 
+        }
39 
+
40 
+        #pdfViewer {
41 
+            width: 100%;
42 
+            height: 600px;
43 
+        }
44 
+    </style>
45 
+
46 
+    <style>
47 
+        /* CSS */
48 
+        .button-23 {
49 
+            background-color: #FFFFFF;
50 
+            border: 1px solid #222222;
51 
+            border-radius: 8px;
52 
+            box-sizing: border-box;
53 
+            color: #222222;
54 
+            cursor: pointer;
55 
+            display: inline-block;
56 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
57 
+            font-size: 16px;
58 
+            font-weight: 600;
59 
+            line-height: 20px;
60 
+            margin: 0;
61 
+            outline: none;
62 
+            padding: 13px 23px;
63 
+            position: relative;
64 
+            text-align: center;
65 
+            text-decoration: none;
66 
+            touch-action: manipulation;
67 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
68 
+            user-select: none;
69 
+            -webkit-user-select: none;
70 
+            width: auto;
71 
+        }
72 
+
73 
+        .button-23:focus-visible {
74 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
75 
+            transition: box-shadow .2s;
76 
+        }
77 
+
78 
+        .button-23:active {
79 
+            background-color: #F7F7F7;
80 
+            border-color: #000000;
81 
+            transform: scale(.96);
82 
+        }
83 
+
84 
+        .button-23:disabled {
85 
+            border-color: #DDDDDD;
86 
+            color: #DDDDDD;
87 
+            cursor: not-allowed;
88 
+            opacity: 1;
89 
+        }
90 
+
91 
+        .map-svg {
92 
+            display: block;
93 
+            margin: 0 auto;
94 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
95 
+
96 
+            a {
97 
+                transition: all 1s;
98 
+                transform-origin: 50% 50%;
99 
+                text-decoration: none;
100 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
101 
+
102 
+                @media only screen and (min-width: 992px) {
103 
+
104 
+                    polygon,
105 
+                    &:hover {
106 
+                        cursor: pointer;
107 
+                        transform: scale(1.05);
108 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
109 
+
110 
+                        .st0 {
111 
+                            fill: $dark-default;
112 
+                        }
113 
+                    }
114 
+                }
115 
+            }
116 
+
117 
+            .pahang-barat {
118 
+                fill: #427bba;
119 
+            }
120 
+
121 
+            .pahang-tengah {
122 
+                fill: #144172;
123 
+            }
124 
+
125 
+            .pahang-timur {
126 
+                fill: #0c6088;
127 
+            }
128 
+
129 
+            .label-text {
130 
+                font-size: 35px;
131 
+                fill: white;
132 
+                transform: translate(0,
133 
+                        3px);
134 
+                /* adjust vertical position to centre text */
135 
+            }
136 
+
137 
+            .label-text-cameron {
138 
+                font-size: 20px;
139 
+                fill: white;
140 
+                transform: translate(0,
141 
+                        3px);
142 
+                /* adjust vertical position to centre text */
143 
+            }
144 
+
145 
+
146 
+        }
147 
+    </style>
148 
+
149 
+</head>
150 
+
151 
+<body>
152 
+
153 
+    <section class="section" style="max-height: 100vh;">
154 
+
155 
+        <div class=""
156 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
157 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../lists/rompin.html"><i
158 
+                        class="fas fa-chevron-left"></i></a></h6>
159 
+            <h6 style="color: white;">Rompin HSD 5745</h6>
160 
+        </div>
161 
+
162 
+        <div class="text-center pt-5"
163 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
164 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
165 
+
166 
+        </div>
167 
+
168 
+        <div class="text-center pt-1 pb-5"
169 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
170 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
171 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
172 
+
173 
+                <div id="map" style="width: 800px;"></div>
174 
+                <!-- <div id="capture"></div> -->
175 
+
176 
+
177 
+
178 
+            </div>
179 
+        </div>
180 
+
181 
+
182 
+
183 
+
184 
+        <div class="text-center pt-5"
185 
+            style="background-color: white; display: flex; justify-content: center; align-items: left; padding-left: 100px; margin-top: 250px;">
186 
+            <div style="display: flex; flex-direction: row;">
187 
+                <div>
188 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Lokasi :</span> <span
189 
+                            style="color: #ACACAC;">Bukit Gayong</span></h6>
190 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Mukim :</span> <span
191 
+                            style="color: #ACACAC;">Rompin</span></h6>
192 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Daerah :</span> <span
193 
+                            style="color: #ACACAC;">Rompin</span></h6>
194 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Negeri :</span> <span
195 
+                            style="color: #ACACAC;">Pahang Darul Makmur</span></h6>
196 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Skala :</span> <span
197 
+                            style="color: #ACACAC;">Tanpa Skala</span></h6>
198 
+                </div>
199 
+                <div style="margin-left: 100px;">
200 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">No. Hak Milik :</span>
201 
+                        <span style="color: #ACACAC;">HSD 5745</span>
202 
+                    </h6>
203 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Keluasan (MP) :</span>
204 
+                        <span style="color: #ACACAC;">23.66</span>
205 
+                    </h6>
206 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Kehunaan :</span> <span
207 
+                            style="color: #ACACAC;">Pertanian</span></h6>
208 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Start Neat :</span>
209 
+                        <span style="color: #ACACAC;">Ternakan domistik sahaja <br> (seperti kambing/lembu/kerbau/<br>/arnab/kijang/ dan rusa)</span>
210 
+                    </h6>
211 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;"></span> <span
212 
+                            style="color: #ACACAC;"></span></h6>
213 
+                </div>
214 
+            </div>
215 
+        </div>
216 
+
217 
+        <div class="text-center pt-5 pb-5"
218 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
219 
+            <a href="../pdf_pages/view_pdf_hsd5745.html" class="button-23 mb-2 mr-2"
220 
+                style="background-color: #1F9027; color: white; border: none;width: 200px;" role="button"
221 
+                data-toggle="modal" data-target="#exampleModal">View
222 
+                PDF</a>
223 
+
224 
+        </div>
225 
+
226 
+        <script src="../js/jquery-3.7.1.js" defer></script>
227 
+
228 
+        <script src="../js/pdfjs-viewer.js" defer></script>
229 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
230 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
231 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
232 
+
233 
+    </section>
234 
+
235 
+
236 
+    <!-- <div id="map"></div> -->
237 
+
238 
+    <script>
239 
+        var map;
240 
+        var src = 'https://dev.suite.psk.gov.my/kml/HSD%205745.kml';
241 
+
242 
+        function initMap() {
243 
+            map = new google.maps.Map(document.getElementById('map'), {
244 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
245 
+                zoom: 2,
246 
+                mapTypeId: 'satellite'
247 
+            });
248 
+
249 
+            var kmlLayer = new google.maps.KmlLayer(src, {
250 
+                suppressInfoWindows: true,
251 
+                preserveViewport: false,
252 
+                map: map
253 
+            });
254 
+        }
255 
+
256 
+
257 
+
258 
+
259 
+
260 
+    </script>
261 
+    <script async
262 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
263 
+        </script>
264 
+
265 
+</body>
266 
+
267 
+</html>

+ 267
- 0
details/detail_hsd5749.html Переглянути файл 

@@ -0,0 +1,267 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
11 
+
12 
+
13 
+
14 
+    <style>
15 
+        html,
16 
+        body {
17 
+            height: 370px;
18 
+            padding: 0;
19 
+            margin: 0;
20 
+        }
21 
+
22 
+        #map {
23 
+            height: 360px;
24 
+            width: 300px;
25 
+            overflow: hidden;
26 
+            float: left;
27 
+            border: thin solid #333;
28 
+        }
29 
+
30 
+        #capture {
31 
+            height: 360px;
32 
+            width: 480px;
33 
+            overflow: hidden;
34 
+            float: left;
35 
+            background-color: #ECECFB;
36 
+            border: thin solid #333;
37 
+            border-left: none;
38 
+        }
39 
+
40 
+        #pdfViewer {
41 
+            width: 100%;
42 
+            height: 600px;
43 
+        }
44 
+    </style>
45 
+
46 
+    <style>
47 
+        /* CSS */
48 
+        .button-23 {
49 
+            background-color: #FFFFFF;
50 
+            border: 1px solid #222222;
51 
+            border-radius: 8px;
52 
+            box-sizing: border-box;
53 
+            color: #222222;
54 
+            cursor: pointer;
55 
+            display: inline-block;
56 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
57 
+            font-size: 16px;
58 
+            font-weight: 600;
59 
+            line-height: 20px;
60 
+            margin: 0;
61 
+            outline: none;
62 
+            padding: 13px 23px;
63 
+            position: relative;
64 
+            text-align: center;
65 
+            text-decoration: none;
66 
+            touch-action: manipulation;
67 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
68 
+            user-select: none;
69 
+            -webkit-user-select: none;
70 
+            width: auto;
71 
+        }
72 
+
73 
+        .button-23:focus-visible {
74 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
75 
+            transition: box-shadow .2s;
76 
+        }
77 
+
78 
+        .button-23:active {
79 
+            background-color: #F7F7F7;
80 
+            border-color: #000000;
81 
+            transform: scale(.96);
82 
+        }
83 
+
84 
+        .button-23:disabled {
85 
+            border-color: #DDDDDD;
86 
+            color: #DDDDDD;
87 
+            cursor: not-allowed;
88 
+            opacity: 1;
89 
+        }
90 
+
91 
+        .map-svg {
92 
+            display: block;
93 
+            margin: 0 auto;
94 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
95 
+
96 
+            a {
97 
+                transition: all 1s;
98 
+                transform-origin: 50% 50%;
99 
+                text-decoration: none;
100 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
101 
+
102 
+                @media only screen and (min-width: 992px) {
103 
+
104 
+                    polygon,
105 
+                    &:hover {
106 
+                        cursor: pointer;
107 
+                        transform: scale(1.05);
108 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
109 
+
110 
+                        .st0 {
111 
+                            fill: $dark-default;
112 
+                        }
113 
+                    }
114 
+                }
115 
+            }
116 
+
117 
+            .pahang-barat {
118 
+                fill: #427bba;
119 
+            }
120 
+
121 
+            .pahang-tengah {
122 
+                fill: #144172;
123 
+            }
124 
+
125 
+            .pahang-timur {
126 
+                fill: #0c6088;
127 
+            }
128 
+
129 
+            .label-text {
130 
+                font-size: 35px;
131 
+                fill: white;
132 
+                transform: translate(0,
133 
+                        3px);
134 
+                /* adjust vertical position to centre text */
135 
+            }
136 
+
137 
+            .label-text-cameron {
138 
+                font-size: 20px;
139 
+                fill: white;
140 
+                transform: translate(0,
141 
+                        3px);
142 
+                /* adjust vertical position to centre text */
143 
+            }
144 
+
145 
+
146 
+        }
147 
+    </style>
148 
+
149 
+</head>
150 
+
151 
+<body>
152 
+
153 
+    <section class="section" style="max-height: 100vh;">
154 
+
155 
+        <div class=""
156 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
157 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../lists/rompin.html"><i
158 
+                        class="fas fa-chevron-left"></i></a></h6>
159 
+            <h6 style="color: white;">Rompin HSD 5749</h6>
160 
+        </div>
161 
+
162 
+        <div class="text-center pt-5"
163 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
164 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
165 
+
166 
+        </div>
167 
+
168 
+        <div class="text-center pt-1 pb-5"
169 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
170 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
171 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
172 
+
173 
+                <div id="map" style="width: 800px;"></div>
174 
+                <!-- <div id="capture"></div> -->
175 
+
176 
+
177 
+
178 
+            </div>
179 
+        </div>
180 
+
181 
+
182 
+
183 
+
184 
+        <div class="text-center pt-5"
185 
+            style="background-color: white; display: flex; justify-content: center; align-items: left; padding-left: 100px; margin-top: 250px;">
186 
+            <div style="display: flex; flex-direction: row;">
187 
+                <div>
188 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Lokasi :</span> <span
189 
+                            style="color: #ACACAC;">Bukit Gayong</span></h6>
190 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Mukim :</span> <span
191 
+                            style="color: #ACACAC;">Rompin</span></h6>
192 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Daerah :</span> <span
193 
+                            style="color: #ACACAC;">Rompin</span></h6>
194 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Negeri :</span> <span
195 
+                            style="color: #ACACAC;">Pahang Darul Makmur</span></h6>
196 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Skala :</span> <span
197 
+                            style="color: #ACACAC;">Tanpa Skala</span></h6>
198 
+                </div>
199 
+                <div style="margin-left: 100px;">
200 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">No. Hak Milik :</span>
201 
+                        <span style="color: #ACACAC;">HSD 5749</span>
202 
+                    </h6>
203 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Keluasan (MP) :</span>
204 
+                        <span style="color: #ACACAC;">16.50</span>
205 
+                    </h6>
206 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Kehunaan :</span> <span
207 
+                            style="color: #ACACAC;">Pertanian</span></h6>
208 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Start Neat :</span>
209 
+                        <span style="color: #ACACAC;">Ternakan domistik sahaja <br> (seperti kambing/lembu/kerbau/<br>/arnab/kijang/ dan rusa)</span>
210 
+                    </h6>
211 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;"></span> <span
212 
+                            style="color: #ACACAC;"></span></h6>
213 
+                </div>
214 
+            </div>
215 
+        </div>
216 
+
217 
+        <div class="text-center pt-5 pb-5"
218 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
219 
+            <a href="../pdf_pages/view_pdf_hsd5749.html" class="button-23 mb-2 mr-2"
220 
+                style="background-color: #1F9027; color: white; border: none;width: 200px;" role="button"
221 
+                data-toggle="modal" data-target="#exampleModal">View
222 
+                PDF</a>
223 
+
224 
+        </div>
225 
+
226 
+        <script src="../js/jquery-3.7.1.js" defer></script>
227 
+
228 
+        <script src="../js/pdfjs-viewer.js" defer></script>
229 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
230 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
231 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
232 
+
233 
+    </section>
234 
+
235 
+
236 
+    <!-- <div id="map"></div> -->
237 
+
238 
+    <script>
239 
+        var map;
240 
+        var src = 'https://dev.suite.psk.gov.my/kml/HSD%205749.kml';
241 
+
242 
+        function initMap() {
243 
+            map = new google.maps.Map(document.getElementById('map'), {
244 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
245 
+                zoom: 2,
246 
+                mapTypeId: 'satellite'
247 
+            });
248 
+
249 
+            var kmlLayer = new google.maps.KmlLayer(src, {
250 
+                suppressInfoWindows: true,
251 
+                preserveViewport: false,
252 
+                map: map
253 
+            });
254 
+        }
255 
+
256 
+
257 
+
258 
+
259 
+
260 
+    </script>
261 
+    <script async
262 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
263 
+        </script>
264 
+
265 
+</body>
266 
+
267 
+</html>

+ 267
- 0
details/detail_hsd5761.html Переглянути файл 

@@ -0,0 +1,267 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
11 
+
12 
+
13 
+
14 
+    <style>
15 
+        html,
16 
+        body {
17 
+            height: 370px;
18 
+            padding: 0;
19 
+            margin: 0;
20 
+        }
21 
+
22 
+        #map {
23 
+            height: 360px;
24 
+            width: 300px;
25 
+            overflow: hidden;
26 
+            float: left;
27 
+            border: thin solid #333;
28 
+        }
29 
+
30 
+        #capture {
31 
+            height: 360px;
32 
+            width: 480px;
33 
+            overflow: hidden;
34 
+            float: left;
35 
+            background-color: #ECECFB;
36 
+            border: thin solid #333;
37 
+            border-left: none;
38 
+        }
39 
+
40 
+        #pdfViewer {
41 
+            width: 100%;
42 
+            height: 600px;
43 
+        }
44 
+    </style>
45 
+
46 
+    <style>
47 
+        /* CSS */
48 
+        .button-23 {
49 
+            background-color: #FFFFFF;
50 
+            border: 1px solid #222222;
51 
+            border-radius: 8px;
52 
+            box-sizing: border-box;
53 
+            color: #222222;
54 
+            cursor: pointer;
55 
+            display: inline-block;
56 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
57 
+            font-size: 16px;
58 
+            font-weight: 600;
59 
+            line-height: 20px;
60 
+            margin: 0;
61 
+            outline: none;
62 
+            padding: 13px 23px;
63 
+            position: relative;
64 
+            text-align: center;
65 
+            text-decoration: none;
66 
+            touch-action: manipulation;
67 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
68 
+            user-select: none;
69 
+            -webkit-user-select: none;
70 
+            width: auto;
71 
+        }
72 
+
73 
+        .button-23:focus-visible {
74 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
75 
+            transition: box-shadow .2s;
76 
+        }
77 
+
78 
+        .button-23:active {
79 
+            background-color: #F7F7F7;
80 
+            border-color: #000000;
81 
+            transform: scale(.96);
82 
+        }
83 
+
84 
+        .button-23:disabled {
85 
+            border-color: #DDDDDD;
86 
+            color: #DDDDDD;
87 
+            cursor: not-allowed;
88 
+            opacity: 1;
89 
+        }
90 
+
91 
+        .map-svg {
92 
+            display: block;
93 
+            margin: 0 auto;
94 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
95 
+
96 
+            a {
97 
+                transition: all 1s;
98 
+                transform-origin: 50% 50%;
99 
+                text-decoration: none;
100 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
101 
+
102 
+                @media only screen and (min-width: 992px) {
103 
+
104 
+                    polygon,
105 
+                    &:hover {
106 
+                        cursor: pointer;
107 
+                        transform: scale(1.05);
108 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
109 
+
110 
+                        .st0 {
111 
+                            fill: $dark-default;
112 
+                        }
113 
+                    }
114 
+                }
115 
+            }
116 
+
117 
+            .pahang-barat {
118 
+                fill: #427bba;
119 
+            }
120 
+
121 
+            .pahang-tengah {
122 
+                fill: #144172;
123 
+            }
124 
+
125 
+            .pahang-timur {
126 
+                fill: #0c6088;
127 
+            }
128 
+
129 
+            .label-text {
130 
+                font-size: 35px;
131 
+                fill: white;
132 
+                transform: translate(0,
133 
+                        3px);
134 
+                /* adjust vertical position to centre text */
135 
+            }
136 
+
137 
+            .label-text-cameron {
138 
+                font-size: 20px;
139 
+                fill: white;
140 
+                transform: translate(0,
141 
+                        3px);
142 
+                /* adjust vertical position to centre text */
143 
+            }
144 
+
145 
+
146 
+        }
147 
+    </style>
148 
+
149 
+</head>
150 
+
151 
+<body>
152 
+
153 
+    <section class="section" style="max-height: 100vh;">
154 
+
155 
+        <div class=""
156 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
157 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../lists/rompin.html"><i
158 
+                        class="fas fa-chevron-left"></i></a></h6>
159 
+            <h6 style="color: white;">Rompin HSD 5761</h6>
160 
+        </div>
161 
+
162 
+        <div class="text-center pt-5"
163 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
164 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
165 
+
166 
+        </div>
167 
+
168 
+        <div class="text-center pt-1 pb-5"
169 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
170 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
171 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
172 
+
173 
+                <div id="map" style="width: 800px;"></div>
174 
+                <!-- <div id="capture"></div> -->
175 
+
176 
+
177 
+
178 
+            </div>
179 
+        </div>
180 
+
181 
+
182 
+
183 
+
184 
+        <div class="text-center pt-5"
185 
+            style="background-color: white; display: flex; justify-content: center; align-items: left; padding-left: 100px; margin-top: 250px;">
186 
+            <div style="display: flex; flex-direction: row;">
187 
+                <div>
188 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Lokasi :</span> <span
189 
+                            style="color: #ACACAC;">Bukit Gayong</span></h6>
190 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Mukim :</span> <span
191 
+                            style="color: #ACACAC;">Rompin</span></h6>
192 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Daerah :</span> <span
193 
+                            style="color: #ACACAC;">Rompin</span></h6>
194 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Negeri :</span> <span
195 
+                            style="color: #ACACAC;">Pahang Darul Makmur</span></h6>
196 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Skala :</span> <span
197 
+                            style="color: #ACACAC;">Tanpa Skala</span></h6>
198 
+                </div>
199 
+                <div style="margin-left: 100px;">
200 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">No. Hak Milik :</span>
201 
+                        <span style="color: #ACACAC;">HSD 5761</span>
202 
+                    </h6>
203 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Keluasan (MP) :</span>
204 
+                        <span style="color: #ACACAC;">32.67</span>
205 
+                    </h6>
206 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Kehunaan :</span> <span
207 
+                            style="color: #ACACAC;">Pertanian</span></h6>
208 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Start Neat :</span>
209 
+                        <span style="color: #ACACAC;">Ternakan domistik sahaja <br> (seperti kambing/lembu/kerbau/<br>/arnab/kijang/ dan rusa)</span>
210 
+                    </h6>
211 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;"></span> <span
212 
+                            style="color: #ACACAC;"></span></h6>
213 
+                </div>
214 
+            </div>
215 
+        </div>
216 
+
217 
+        <div class="text-center pt-5 pb-5"
218 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
219 
+            <a href="../pdf_pages/view_pdf_hsd5761.html" class="button-23 mb-2 mr-2"
220 
+                style="background-color: #1F9027; color: white; border: none;width: 200px;" role="button"
221 
+                data-toggle="modal" data-target="#exampleModal">View
222 
+                PDF</a>
223 
+
224 
+        </div>
225 
+
226 
+        <script src="../js/jquery-3.7.1.js" defer></script>
227 
+
228 
+        <script src="../js/pdfjs-viewer.js" defer></script>
229 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
230 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
231 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
232 
+
233 
+    </section>
234 
+
235 
+
236 
+    <!-- <div id="map"></div> -->
237 
+
238 
+    <script>
239 
+        var map;
240 
+        var src = 'https://dev.suite.psk.gov.my/kml/HSD%205761.kml';
241 
+
242 
+        function initMap() {
243 
+            map = new google.maps.Map(document.getElementById('map'), {
244 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
245 
+                zoom: 2,
246 
+                mapTypeId: 'satellite'
247 
+            });
248 
+
249 
+            var kmlLayer = new google.maps.KmlLayer(src, {
250 
+                suppressInfoWindows: true,
251 
+                preserveViewport: false,
252 
+                map: map
253 
+            });
254 
+        }
255 
+
256 
+
257 
+
258 
+
259 
+
260 
+    </script>
261 
+    <script async
262 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
263 
+        </script>
264 
+
265 
+</body>
266 
+
267 
+</html>

+ 267
- 0
details/detail_hsd5762.html Переглянути файл 

@@ -0,0 +1,267 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
11 
+
12 
+
13 
+
14 
+    <style>
15 
+        html,
16 
+        body {
17 
+            height: 370px;
18 
+            padding: 0;
19 
+            margin: 0;
20 
+        }
21 
+
22 
+        #map {
23 
+            height: 360px;
24 
+            width: 300px;
25 
+            overflow: hidden;
26 
+            float: left;
27 
+            border: thin solid #333;
28 
+        }
29 
+
30 
+        #capture {
31 
+            height: 360px;
32 
+            width: 480px;
33 
+            overflow: hidden;
34 
+            float: left;
35 
+            background-color: #ECECFB;
36 
+            border: thin solid #333;
37 
+            border-left: none;
38 
+        }
39 
+
40 
+        #pdfViewer {
41 
+            width: 100%;
42 
+            height: 600px;
43 
+        }
44 
+    </style>
45 
+
46 
+    <style>
47 
+        /* CSS */
48 
+        .button-23 {
49 
+            background-color: #FFFFFF;
50 
+            border: 1px solid #222222;
51 
+            border-radius: 8px;
52 
+            box-sizing: border-box;
53 
+            color: #222222;
54 
+            cursor: pointer;
55 
+            display: inline-block;
56 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
57 
+            font-size: 16px;
58 
+            font-weight: 600;
59 
+            line-height: 20px;
60 
+            margin: 0;
61 
+            outline: none;
62 
+            padding: 13px 23px;
63 
+            position: relative;
64 
+            text-align: center;
65 
+            text-decoration: none;
66 
+            touch-action: manipulation;
67 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
68 
+            user-select: none;
69 
+            -webkit-user-select: none;
70 
+            width: auto;
71 
+        }
72 
+
73 
+        .button-23:focus-visible {
74 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
75 
+            transition: box-shadow .2s;
76 
+        }
77 
+
78 
+        .button-23:active {
79 
+            background-color: #F7F7F7;
80 
+            border-color: #000000;
81 
+            transform: scale(.96);
82 
+        }
83 
+
84 
+        .button-23:disabled {
85 
+            border-color: #DDDDDD;
86 
+            color: #DDDDDD;
87 
+            cursor: not-allowed;
88 
+            opacity: 1;
89 
+        }
90 
+
91 
+        .map-svg {
92 
+            display: block;
93 
+            margin: 0 auto;
94 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
95 
+
96 
+            a {
97 
+                transition: all 1s;
98 
+                transform-origin: 50% 50%;
99 
+                text-decoration: none;
100 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
101 
+
102 
+                @media only screen and (min-width: 992px) {
103 
+
104 
+                    polygon,
105 
+                    &:hover {
106 
+                        cursor: pointer;
107 
+                        transform: scale(1.05);
108 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
109 
+
110 
+                        .st0 {
111 
+                            fill: $dark-default;
112 
+                        }
113 
+                    }
114 
+                }
115 
+            }
116 
+
117 
+            .pahang-barat {
118 
+                fill: #427bba;
119 
+            }
120 
+
121 
+            .pahang-tengah {
122 
+                fill: #144172;
123 
+            }
124 
+
125 
+            .pahang-timur {
126 
+                fill: #0c6088;
127 
+            }
128 
+
129 
+            .label-text {
130 
+                font-size: 35px;
131 
+                fill: white;
132 
+                transform: translate(0,
133 
+                        3px);
134 
+                /* adjust vertical position to centre text */
135 
+            }
136 
+
137 
+            .label-text-cameron {
138 
+                font-size: 20px;
139 
+                fill: white;
140 
+                transform: translate(0,
141 
+                        3px);
142 
+                /* adjust vertical position to centre text */
143 
+            }
144 
+
145 
+
146 
+        }
147 
+    </style>
148 
+
149 
+</head>
150 
+
151 
+<body>
152 
+
153 
+    <section class="section" style="max-height: 100vh;">
154 
+
155 
+        <div class=""
156 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
157 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../lists/rompin.html"><i
158 
+                        class="fas fa-chevron-left"></i></a></h6>
159 
+            <h6 style="color: white;">Rompin HSD 5762</h6>
160 
+        </div>
161 
+
162 
+        <div class="text-center pt-5"
163 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
164 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
165 
+
166 
+        </div>
167 
+
168 
+        <div class="text-center pt-1 pb-5"
169 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
170 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
171 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
172 
+
173 
+                <div id="map" style="width: 800px;"></div>
174 
+                <!-- <div id="capture"></div> -->
175 
+
176 
+
177 
+
178 
+            </div>
179 
+        </div>
180 
+
181 
+
182 
+
183 
+
184 
+        <div class="text-center pt-5"
185 
+            style="background-color: white; display: flex; justify-content: center; align-items: left; padding-left: 100px; margin-top: 250px;">
186 
+            <div style="display: flex; flex-direction: row;">
187 
+                <div>
188 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Lokasi :</span> <span
189 
+                            style="color: #ACACAC;">Bukit Gayong</span></h6>
190 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Mukim :</span> <span
191 
+                            style="color: #ACACAC;">Rompin</span></h6>
192 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Daerah :</span> <span
193 
+                            style="color: #ACACAC;">Rompin</span></h6>
194 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Negeri :</span> <span
195 
+                            style="color: #ACACAC;">Pahang Darul Makmur</span></h6>
196 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Skala :</span> <span
197 
+                            style="color: #ACACAC;">Tanpa Skala</span></h6>
198 
+                </div>
199 
+                <div style="margin-left: 100px;">
200 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">No. Hak Milik :</span>
201 
+                        <span style="color: #ACACAC;">HSD 5762</span>
202 
+                    </h6>
203 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Keluasan (MP) :</span>
204 
+                        <span style="color: #ACACAC;">9.05</span>
205 
+                    </h6>
206 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Kehunaan :</span> <span
207 
+                            style="color: #ACACAC;">Pertanian</span></h6>
208 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Start Neat :</span>
209 
+                        <span style="color: #ACACAC;">Ternakan domistik sahaja <br> (seperti kambing/lembu/kerbau/<br>/arnab/kijang/ dan rusa)</span>
210 
+                    </h6>
211 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;"></span> <span
212 
+                            style="color: #ACACAC;"></span></h6>
213 
+                </div>
214 
+            </div>
215 
+        </div>
216 
+
217 
+        <div class="text-center pt-5 pb-5"
218 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
219 
+            <a href="../pdf_pages/view_pdf_hsd5762.html" class="button-23 mb-2 mr-2"
220 
+                style="background-color: #1F9027; color: white; border: none;width: 200px;" role="button"
221 
+                data-toggle="modal" data-target="#exampleModal">View
222 
+                PDF</a>
223 
+
224 
+        </div>
225 
+
226 
+        <script src="../js/jquery-3.7.1.js" defer></script>
227 
+
228 
+        <script src="../js/pdfjs-viewer.js" defer></script>
229 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
230 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
231 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
232 
+
233 
+    </section>
234 
+
235 
+
236 
+    <!-- <div id="map"></div> -->
237 
+
238 
+    <script>
239 
+        var map;
240 
+        var src = 'https://dev.suite.psk.gov.my/kml/HSD%205762.kml';
241 
+
242 
+        function initMap() {
243 
+            map = new google.maps.Map(document.getElementById('map'), {
244 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
245 
+                zoom: 2,
246 
+                mapTypeId: 'satellite'
247 
+            });
248 
+
249 
+            var kmlLayer = new google.maps.KmlLayer(src, {
250 
+                suppressInfoWindows: true,
251 
+                preserveViewport: false,
252 
+                map: map
253 
+            });
254 
+        }
255 
+
256 
+
257 
+
258 
+
259 
+
260 
+    </script>
261 
+    <script async
262 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
263 
+        </script>
264 
+
265 
+</body>
266 
+
267 
+</html>

+ 267
- 0
details/detail_hsd5763.html Переглянути файл 

@@ -0,0 +1,267 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
11 
+
12 
+
13 
+
14 
+    <style>
15 
+        html,
16 
+        body {
17 
+            height: 370px;
18 
+            padding: 0;
19 
+            margin: 0;
20 
+        }
21 
+
22 
+        #map {
23 
+            height: 360px;
24 
+            width: 300px;
25 
+            overflow: hidden;
26 
+            float: left;
27 
+            border: thin solid #333;
28 
+        }
29 
+
30 
+        #capture {
31 
+            height: 360px;
32 
+            width: 480px;
33 
+            overflow: hidden;
34 
+            float: left;
35 
+            background-color: #ECECFB;
36 
+            border: thin solid #333;
37 
+            border-left: none;
38 
+        }
39 
+
40 
+        #pdfViewer {
41 
+            width: 100%;
42 
+            height: 600px;
43 
+        }
44 
+    </style>
45 
+
46 
+    <style>
47 
+        /* CSS */
48 
+        .button-23 {
49 
+            background-color: #FFFFFF;
50 
+            border: 1px solid #222222;
51 
+            border-radius: 8px;
52 
+            box-sizing: border-box;
53 
+            color: #222222;
54 
+            cursor: pointer;
55 
+            display: inline-block;
56 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
57 
+            font-size: 16px;
58 
+            font-weight: 600;
59 
+            line-height: 20px;
60 
+            margin: 0;
61 
+            outline: none;
62 
+            padding: 13px 23px;
63 
+            position: relative;
64 
+            text-align: center;
65 
+            text-decoration: none;
66 
+            touch-action: manipulation;
67 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
68 
+            user-select: none;
69 
+            -webkit-user-select: none;
70 
+            width: auto;
71 
+        }
72 
+
73 
+        .button-23:focus-visible {
74 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
75 
+            transition: box-shadow .2s;
76 
+        }
77 
+
78 
+        .button-23:active {
79 
+            background-color: #F7F7F7;
80 
+            border-color: #000000;
81 
+            transform: scale(.96);
82 
+        }
83 
+
84 
+        .button-23:disabled {
85 
+            border-color: #DDDDDD;
86 
+            color: #DDDDDD;
87 
+            cursor: not-allowed;
88 
+            opacity: 1;
89 
+        }
90 
+
91 
+        .map-svg {
92 
+            display: block;
93 
+            margin: 0 auto;
94 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
95 
+
96 
+            a {
97 
+                transition: all 1s;
98 
+                transform-origin: 50% 50%;
99 
+                text-decoration: none;
100 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
101 
+
102 
+                @media only screen and (min-width: 992px) {
103 
+
104 
+                    polygon,
105 
+                    &:hover {
106 
+                        cursor: pointer;
107 
+                        transform: scale(1.05);
108 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
109 
+
110 
+                        .st0 {
111 
+                            fill: $dark-default;
112 
+                        }
113 
+                    }
114 
+                }
115 
+            }
116 
+
117 
+            .pahang-barat {
118 
+                fill: #427bba;
119 
+            }
120 
+
121 
+            .pahang-tengah {
122 
+                fill: #144172;
123 
+            }
124 
+
125 
+            .pahang-timur {
126 
+                fill: #0c6088;
127 
+            }
128 
+
129 
+            .label-text {
130 
+                font-size: 35px;
131 
+                fill: white;
132 
+                transform: translate(0,
133 
+                        3px);
134 
+                /* adjust vertical position to centre text */
135 
+            }
136 
+
137 
+            .label-text-cameron {
138 
+                font-size: 20px;
139 
+                fill: white;
140 
+                transform: translate(0,
141 
+                        3px);
142 
+                /* adjust vertical position to centre text */
143 
+            }
144 
+
145 
+
146 
+        }
147 
+    </style>
148 
+
149 
+</head>
150 
+
151 
+<body>
152 
+
153 
+    <section class="section" style="max-height: 100vh;">
154 
+
155 
+        <div class=""
156 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
157 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../lists/rompin.html"><i
158 
+                        class="fas fa-chevron-left"></i></a></h6>
159 
+            <h6 style="color: white;">Rompin HSD 5763</h6>
160 
+        </div>
161 
+
162 
+        <div class="text-center pt-5"
163 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
164 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
165 
+
166 
+        </div>
167 
+
168 
+        <div class="text-center pt-1 pb-5"
169 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
170 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
171 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
172 
+
173 
+                <div id="map" style="width: 800px;"></div>
174 
+                <!-- <div id="capture"></div> -->
175 
+
176 
+
177 
+
178 
+            </div>
179 
+        </div>
180 
+
181 
+
182 
+
183 
+
184 
+        <div class="text-center pt-5"
185 
+            style="background-color: white; display: flex; justify-content: center; align-items: left; padding-left: 100px; margin-top: 250px;">
186 
+            <div style="display: flex; flex-direction: row;">
187 
+                <div>
188 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Lokasi :</span> <span
189 
+                            style="color: #ACACAC;">Bukit Gayong</span></h6>
190 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Mukim :</span> <span
191 
+                            style="color: #ACACAC;">Rompin</span></h6>
192 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Daerah :</span> <span
193 
+                            style="color: #ACACAC;">Rompin</span></h6>
194 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Negeri :</span> <span
195 
+                            style="color: #ACACAC;">Pahang Darul Makmur</span></h6>
196 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Skala :</span> <span
197 
+                            style="color: #ACACAC;">Tanpa Skala</span></h6>
198 
+                </div>
199 
+                <div style="margin-left: 100px;">
200 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">No. Hak Milik :</span>
201 
+                        <span style="color: #ACACAC;">HSD 5763</span>
202 
+                    </h6>
203 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Keluasan (MP) :</span>
204 
+                        <span style="color: #ACACAC;">21.73</span>
205 
+                    </h6>
206 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Kehunaan :</span> <span
207 
+                            style="color: #ACACAC;">Pertanian</span></h6>
208 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Start Neat :</span>
209 
+                        <span style="color: #ACACAC;">Ternakan domistik sahaja <br> (seperti kambing/lembu/kerbau/<br>/arnab/kijang/ dan rusa)</span>
210 
+                    </h6>
211 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;"></span> <span
212 
+                            style="color: #ACACAC;"></span></h6>
213 
+                </div>
214 
+            </div>
215 
+        </div>
216 
+
217 
+        <div class="text-center pt-5 pb-5"
218 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
219 
+            <a href="../pdf_pages/view_pdf_hsd5763.html" class="button-23 mb-2 mr-2"
220 
+                style="background-color: #1F9027; color: white; border: none;width: 200px;" role="button"
221 
+                data-toggle="modal" data-target="#exampleModal">View
222 
+                PDF</a>
223 
+
224 
+        </div>
225 
+
226 
+        <script src="../js/jquery-3.7.1.js" defer></script>
227 
+
228 
+        <script src="../js/pdfjs-viewer.js" defer></script>
229 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
230 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
231 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
232 
+
233 
+    </section>
234 
+
235 
+
236 
+    <!-- <div id="map"></div> -->
237 
+
238 
+    <script>
239 
+        var map;
240 
+        var src = 'https://dev.suite.psk.gov.my/kml/HSD%205763.kml';
241 
+
242 
+        function initMap() {
243 
+            map = new google.maps.Map(document.getElementById('map'), {
244 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
245 
+                zoom: 2,
246 
+                mapTypeId: 'satellite'
247 
+            });
248 
+
249 
+            var kmlLayer = new google.maps.KmlLayer(src, {
250 
+                suppressInfoWindows: true,
251 
+                preserveViewport: false,
252 
+                map: map
253 
+            });
254 
+        }
255 
+
256 
+
257 
+
258 
+
259 
+
260 
+    </script>
261 
+    <script async
262 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
263 
+        </script>
264 
+
265 
+</body>
266 
+
267 
+</html>

+ 267
- 0
details/detail_hsd5764.html Переглянути файл 

@@ -0,0 +1,267 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
11 
+
12 
+
13 
+
14 
+    <style>
15 
+        html,
16 
+        body {
17 
+            height: 370px;
18 
+            padding: 0;
19 
+            margin: 0;
20 
+        }
21 
+
22 
+        #map {
23 
+            height: 360px;
24 
+            width: 300px;
25 
+            overflow: hidden;
26 
+            float: left;
27 
+            border: thin solid #333;
28 
+        }
29 
+
30 
+        #capture {
31 
+            height: 360px;
32 
+            width: 480px;
33 
+            overflow: hidden;
34 
+            float: left;
35 
+            background-color: #ECECFB;
36 
+            border: thin solid #333;
37 
+            border-left: none;
38 
+        }
39 
+
40 
+        #pdfViewer {
41 
+            width: 100%;
42 
+            height: 600px;
43 
+        }
44 
+    </style>
45 
+
46 
+    <style>
47 
+        /* CSS */
48 
+        .button-23 {
49 
+            background-color: #FFFFFF;
50 
+            border: 1px solid #222222;
51 
+            border-radius: 8px;
52 
+            box-sizing: border-box;
53 
+            color: #222222;
54 
+            cursor: pointer;
55 
+            display: inline-block;
56 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
57 
+            font-size: 16px;
58 
+            font-weight: 600;
59 
+            line-height: 20px;
60 
+            margin: 0;
61 
+            outline: none;
62 
+            padding: 13px 23px;
63 
+            position: relative;
64 
+            text-align: center;
65 
+            text-decoration: none;
66 
+            touch-action: manipulation;
67 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
68 
+            user-select: none;
69 
+            -webkit-user-select: none;
70 
+            width: auto;
71 
+        }
72 
+
73 
+        .button-23:focus-visible {
74 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
75 
+            transition: box-shadow .2s;
76 
+        }
77 
+
78 
+        .button-23:active {
79 
+            background-color: #F7F7F7;
80 
+            border-color: #000000;
81 
+            transform: scale(.96);
82 
+        }
83 
+
84 
+        .button-23:disabled {
85 
+            border-color: #DDDDDD;
86 
+            color: #DDDDDD;
87 
+            cursor: not-allowed;
88 
+            opacity: 1;
89 
+        }
90 
+
91 
+        .map-svg {
92 
+            display: block;
93 
+            margin: 0 auto;
94 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
95 
+
96 
+            a {
97 
+                transition: all 1s;
98 
+                transform-origin: 50% 50%;
99 
+                text-decoration: none;
100 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
101 
+
102 
+                @media only screen and (min-width: 992px) {
103 
+
104 
+                    polygon,
105 
+                    &:hover {
106 
+                        cursor: pointer;
107 
+                        transform: scale(1.05);
108 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
109 
+
110 
+                        .st0 {
111 
+                            fill: $dark-default;
112 
+                        }
113 
+                    }
114 
+                }
115 
+            }
116 
+
117 
+            .pahang-barat {
118 
+                fill: #427bba;
119 
+            }
120 
+
121 
+            .pahang-tengah {
122 
+                fill: #144172;
123 
+            }
124 
+
125 
+            .pahang-timur {
126 
+                fill: #0c6088;
127 
+            }
128 
+
129 
+            .label-text {
130 
+                font-size: 35px;
131 
+                fill: white;
132 
+                transform: translate(0,
133 
+                        3px);
134 
+                /* adjust vertical position to centre text */
135 
+            }
136 
+
137 
+            .label-text-cameron {
138 
+                font-size: 20px;
139 
+                fill: white;
140 
+                transform: translate(0,
141 
+                        3px);
142 
+                /* adjust vertical position to centre text */
143 
+            }
144 
+
145 
+
146 
+        }
147 
+    </style>
148 
+
149 
+</head>
150 
+
151 
+<body>
152 
+
153 
+    <section class="section" style="max-height: 100vh;">
154 
+
155 
+        <div class=""
156 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
157 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../lists/rompin.html"><i
158 
+                        class="fas fa-chevron-left"></i></a></h6>
159 
+            <h6 style="color: white;">Rompin HSD 5764</h6>
160 
+        </div>
161 
+
162 
+        <div class="text-center pt-5"
163 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
164 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
165 
+
166 
+        </div>
167 
+
168 
+        <div class="text-center pt-1 pb-5"
169 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
170 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
171 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
172 
+
173 
+                <div id="map" style="width: 800px;"></div>
174 
+                <!-- <div id="capture"></div> -->
175 
+
176 
+
177 
+
178 
+            </div>
179 
+        </div>
180 
+
181 
+
182 
+
183 
+
184 
+        <div class="text-center pt-5"
185 
+            style="background-color: white; display: flex; justify-content: center; align-items: left; padding-left: 100px; margin-top: 250px;">
186 
+            <div style="display: flex; flex-direction: row;">
187 
+                <div>
188 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Lokasi :</span> <span
189 
+                            style="color: #ACACAC;">Bukit Gayong</span></h6>
190 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Mukim :</span> <span
191 
+                            style="color: #ACACAC;">Rompin</span></h6>
192 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Daerah :</span> <span
193 
+                            style="color: #ACACAC;">Rompin</span></h6>
194 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Negeri :</span> <span
195 
+                            style="color: #ACACAC;">Pahang Darul Makmur</span></h6>
196 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Skala :</span> <span
197 
+                            style="color: #ACACAC;">Tanpa Skala</span></h6>
198 
+                </div>
199 
+                <div style="margin-left: 100px;">
200 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">No. Hak Milik :</span>
201 
+                        <span style="color: #ACACAC;">HSD 5764</span>
202 
+                    </h6>
203 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Keluasan (MP) :</span>
204 
+                        <span style="color: #ACACAC;">21.63</span>
205 
+                    </h6>
206 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Kehunaan :</span> <span
207 
+                            style="color: #ACACAC;">Pertanian</span></h6>
208 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Start Neat :</span>
209 
+                        <span style="color: #ACACAC;">Ternakan domistik sahaja <br> (seperti kambing/lembu/kerbau/<br>/arnab/kijang/ dan rusa)</span>
210 
+                    </h6>
211 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;"></span> <span
212 
+                            style="color: #ACACAC;"></span></h6>
213 
+                </div>
214 
+            </div>
215 
+        </div>
216 
+
217 
+        <div class="text-center pt-5 pb-5"
218 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
219 
+            <a href="../pdf_pages/view_pdf_hsd5764.html" class="button-23 mb-2 mr-2"
220 
+                style="background-color: #1F9027; color: white; border: none;width: 200px;" role="button"
221 
+                data-toggle="modal" data-target="#exampleModal">View
222 
+                PDF</a>
223 
+
224 
+        </div>
225 
+
226 
+        <script src="../js/jquery-3.7.1.js" defer></script>
227 
+
228 
+        <script src="../js/pdfjs-viewer.js" defer></script>
229 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
230 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
231 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
232 
+
233 
+    </section>
234 
+
235 
+
236 
+    <!-- <div id="map"></div> -->
237 
+
238 
+    <script>
239 
+        var map;
240 
+        var src = 'https://dev.suite.psk.gov.my/kml/HSD%205764.kml';
241 
+
242 
+        function initMap() {
243 
+            map = new google.maps.Map(document.getElementById('map'), {
244 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
245 
+                zoom: 2,
246 
+                mapTypeId: 'satellite'
247 
+            });
248 
+
249 
+            var kmlLayer = new google.maps.KmlLayer(src, {
250 
+                suppressInfoWindows: true,
251 
+                preserveViewport: false,
252 
+                map: map
253 
+            });
254 
+        }
255 
+
256 
+
257 
+
258 
+
259 
+
260 
+    </script>
261 
+    <script async
262 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
263 
+        </script>
264 
+
265 
+</body>
266 
+
267 
+</html>

+ 267
- 0
details/detail_pn16507.html Переглянути файл 

@@ -0,0 +1,267 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
11 
+
12 
+
13 
+
14 
+    <style>
15 
+        html,
16 
+        body {
17 
+            height: 370px;
18 
+            padding: 0;
19 
+            margin: 0;
20 
+        }
21 
+
22 
+        #map {
23 
+            height: 360px;
24 
+            width: 300px;
25 
+            overflow: hidden;
26 
+            float: left;
27 
+            border: thin solid #333;
28 
+        }
29 
+
30 
+        #capture {
31 
+            height: 360px;
32 
+            width: 480px;
33 
+            overflow: hidden;
34 
+            float: left;
35 
+            background-color: #ECECFB;
36 
+            border: thin solid #333;
37 
+            border-left: none;
38 
+        }
39 
+
40 
+        #pdfViewer {
41 
+            width: 100%;
42 
+            height: 600px;
43 
+        }
44 
+    </style>
45 
+
46 
+    <style>
47 
+        /* CSS */
48 
+        .button-23 {
49 
+            background-color: #FFFFFF;
50 
+            border: 1px solid #222222;
51 
+            border-radius: 8px;
52 
+            box-sizing: border-box;
53 
+            color: #222222;
54 
+            cursor: pointer;
55 
+            display: inline-block;
56 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
57 
+            font-size: 16px;
58 
+            font-weight: 600;
59 
+            line-height: 20px;
60 
+            margin: 0;
61 
+            outline: none;
62 
+            padding: 13px 23px;
63 
+            position: relative;
64 
+            text-align: center;
65 
+            text-decoration: none;
66 
+            touch-action: manipulation;
67 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
68 
+            user-select: none;
69 
+            -webkit-user-select: none;
70 
+            width: auto;
71 
+        }
72 
+
73 
+        .button-23:focus-visible {
74 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
75 
+            transition: box-shadow .2s;
76 
+        }
77 
+
78 
+        .button-23:active {
79 
+            background-color: #F7F7F7;
80 
+            border-color: #000000;
81 
+            transform: scale(.96);
82 
+        }
83 
+
84 
+        .button-23:disabled {
85 
+            border-color: #DDDDDD;
86 
+            color: #DDDDDD;
87 
+            cursor: not-allowed;
88 
+            opacity: 1;
89 
+        }
90 
+
91 
+        .map-svg {
92 
+            display: block;
93 
+            margin: 0 auto;
94 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
95 
+
96 
+            a {
97 
+                transition: all 1s;
98 
+                transform-origin: 50% 50%;
99 
+                text-decoration: none;
100 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
101 
+
102 
+                @media only screen and (min-width: 992px) {
103 
+
104 
+                    polygon,
105 
+                    &:hover {
106 
+                        cursor: pointer;
107 
+                        transform: scale(1.05);
108 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
109 
+
110 
+                        .st0 {
111 
+                            fill: $dark-default;
112 
+                        }
113 
+                    }
114 
+                }
115 
+            }
116 
+
117 
+            .pahang-barat {
118 
+                fill: #427bba;
119 
+            }
120 
+
121 
+            .pahang-tengah {
122 
+                fill: #144172;
123 
+            }
124 
+
125 
+            .pahang-timur {
126 
+                fill: #0c6088;
127 
+            }
128 
+
129 
+            .label-text {
130 
+                font-size: 35px;
131 
+                fill: white;
132 
+                transform: translate(0,
133 
+                        3px);
134 
+                /* adjust vertical position to centre text */
135 
+            }
136 
+
137 
+            .label-text-cameron {
138 
+                font-size: 20px;
139 
+                fill: white;
140 
+                transform: translate(0,
141 
+                        3px);
142 
+                /* adjust vertical position to centre text */
143 
+            }
144 
+
145 
+
146 
+        }
147 
+    </style>
148 
+
149 
+</head>
150 
+
151 
+<body>
152 
+
153 
+    <section class="section" style="max-height: 100vh;">
154 
+
155 
+        <div class=""
156 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
157 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../lists/temerloh.html"><i
158 
+                        class="fas fa-chevron-left"></i></a></h6>
159 
+            <h6 style="color: white;">Temerloh PN 16507</h6>
160 
+        </div>
161 
+
162 
+        <div class="text-center pt-5"
163 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
164 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
165 
+
166 
+        </div>
167 
+
168 
+        <div class="text-center pt-1 pb-5"
169 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
170 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
171 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
172 
+
173 
+                <div id="map" style="width: 800px;"></div>
174 
+                <!-- <div id="capture"></div> -->
175 
+
176 
+
177 
+
178 
+            </div>
179 
+        </div>
180 
+
181 
+
182 
+
183 
+
184 
+        <div class="text-center pt-5"
185 
+            style="background-color: white; display: flex; justify-content: center; align-items: left; padding-left: 100px; margin-top: 250px;">
186 
+            <div style="display: flex; flex-direction: row;">
187 
+                <div>
188 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Lokasi :</span> <span
189 
+                            style="color: #ACACAC;">Kg. Sempadan</span></h6>
190 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Mukim :</span> <span
191 
+                            style="color: #ACACAC;">Semantan</span></h6>
192 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Daerah :</span> <span
193 
+                            style="color: #ACACAC;">Temerloh</span></h6>
194 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Negeri :</span> <span
195 
+                            style="color: #ACACAC;">Pahang Darul Makmur</span></h6>
196 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Skala :</span> <span
197 
+                            style="color: #ACACAC;">Tanpa Skala</span></h6>
198 
+                </div>
199 
+                <div style="margin-left: 100px;">
200 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">No. Hak Milik :</span>
201 
+                        <span style="color: #ACACAC;">PN 16507</span>
202 
+                    </h6>
203 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Keluasan (MP) :</span>
204 
+                        <span style="color: #ACACAC;">1.13</span>
205 
+                    </h6>
206 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Kehunaan :</span> <span
207 
+                            style="color: #ACACAC;">Perindustian</span></h6>
208 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Start Neat :</span>
209 
+                        <span style="color: #ACACAC;">Tapak Kilang Perabut Sahaja</span>
210 
+                    </h6>
211 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;"></span> <span
212 
+                            style="color: #ACACAC;"></span></h6>
213 
+                </div>
214 
+            </div>
215 
+        </div>
216 
+
217 
+        <div class="text-center pt-5 pb-5"
218 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
219 
+            <a href="../pdf_pages/view_pdf_pn16507.html" class="button-23 mb-2 mr-2"
220 
+                style="background-color: #1F9027; color: white; border: none;width: 200px;" role="button"
221 
+                data-toggle="modal" data-target="#exampleModal">View
222 
+                PDF</a>
223 
+
224 
+        </div>
225 
+
226 
+        <script src="../js/jquery-3.7.1.js" defer></script>
227 
+
228 
+        <script src="../js/pdfjs-viewer.js" defer></script>
229 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
230 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
231 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
232 
+
233 
+    </section>
234 
+
235 
+
236 
+    <!-- <div id="map"></div> -->
237 
+
238 
+    <script>
239 
+        var map;
240 
+        var src = 'https://dev.suite.psk.gov.my/kml/PN%2016507.kml';
241 
+
242 
+        function initMap() {
243 
+            map = new google.maps.Map(document.getElementById('map'), {
244 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
245 
+                zoom: 2,
246 
+                mapTypeId: 'satellite'
247 
+            });
248 
+
249 
+            var kmlLayer = new google.maps.KmlLayer(src, {
250 
+                suppressInfoWindows: true,
251 
+                preserveViewport: false,
252 
+                map: map
253 
+            });
254 
+        }
255 
+
256 
+
257 
+
258 
+
259 
+
260 
+    </script>
261 
+    <script async
262 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
263 
+        </script>
264 
+
265 
+</body>
266 
+
267 
+</html>

+ 267
- 0
details/detail_pn28612.html Переглянути файл 

@@ -0,0 +1,267 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
11 
+
12 
+
13 
+
14 
+    <style>
15 
+        html,
16 
+        body {
17 
+            height: 370px;
18 
+            padding: 0;
19 
+            margin: 0;
20 
+        }
21 
+
22 
+        #map {
23 
+            height: 360px;
24 
+            width: 300px;
25 
+            overflow: hidden;
26 
+            float: left;
27 
+            border: thin solid #333;
28 
+        }
29 
+
30 
+        #capture {
31 
+            height: 360px;
32 
+            width: 480px;
33 
+            overflow: hidden;
34 
+            float: left;
35 
+            background-color: #ECECFB;
36 
+            border: thin solid #333;
37 
+            border-left: none;
38 
+        }
39 
+
40 
+        #pdfViewer {
41 
+            width: 100%;
42 
+            height: 600px;
43 
+        }
44 
+    </style>
45 
+
46 
+    <style>
47 
+        /* CSS */
48 
+        .button-23 {
49 
+            background-color: #FFFFFF;
50 
+            border: 1px solid #222222;
51 
+            border-radius: 8px;
52 
+            box-sizing: border-box;
53 
+            color: #222222;
54 
+            cursor: pointer;
55 
+            display: inline-block;
56 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
57 
+            font-size: 16px;
58 
+            font-weight: 600;
59 
+            line-height: 20px;
60 
+            margin: 0;
61 
+            outline: none;
62 
+            padding: 13px 23px;
63 
+            position: relative;
64 
+            text-align: center;
65 
+            text-decoration: none;
66 
+            touch-action: manipulation;
67 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
68 
+            user-select: none;
69 
+            -webkit-user-select: none;
70 
+            width: auto;
71 
+        }
72 
+
73 
+        .button-23:focus-visible {
74 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
75 
+            transition: box-shadow .2s;
76 
+        }
77 
+
78 
+        .button-23:active {
79 
+            background-color: #F7F7F7;
80 
+            border-color: #000000;
81 
+            transform: scale(.96);
82 
+        }
83 
+
84 
+        .button-23:disabled {
85 
+            border-color: #DDDDDD;
86 
+            color: #DDDDDD;
87 
+            cursor: not-allowed;
88 
+            opacity: 1;
89 
+        }
90 
+
91 
+        .map-svg {
92 
+            display: block;
93 
+            margin: 0 auto;
94 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
95 
+
96 
+            a {
97 
+                transition: all 1s;
98 
+                transform-origin: 50% 50%;
99 
+                text-decoration: none;
100 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
101 
+
102 
+                @media only screen and (min-width: 992px) {
103 
+
104 
+                    polygon,
105 
+                    &:hover {
106 
+                        cursor: pointer;
107 
+                        transform: scale(1.05);
108 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
109 
+
110 
+                        .st0 {
111 
+                            fill: $dark-default;
112 
+                        }
113 
+                    }
114 
+                }
115 
+            }
116 
+
117 
+            .pahang-barat {
118 
+                fill: #427bba;
119 
+            }
120 
+
121 
+            .pahang-tengah {
122 
+                fill: #144172;
123 
+            }
124 
+
125 
+            .pahang-timur {
126 
+                fill: #0c6088;
127 
+            }
128 
+
129 
+            .label-text {
130 
+                font-size: 35px;
131 
+                fill: white;
132 
+                transform: translate(0,
133 
+                        3px);
134 
+                /* adjust vertical position to centre text */
135 
+            }
136 
+
137 
+            .label-text-cameron {
138 
+                font-size: 20px;
139 
+                fill: white;
140 
+                transform: translate(0,
141 
+                        3px);
142 
+                /* adjust vertical position to centre text */
143 
+            }
144 
+
145 
+
146 
+        }
147 
+    </style>
148 
+
149 
+</head>
150 
+
151 
+<body>
152 
+
153 
+    <section class="section" style="max-height: 100vh;">
154 
+
155 
+        <div class=""
156 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
157 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../lists/rompin.html"><i
158 
+                        class="fas fa-chevron-left"></i></a></h6>
159 
+            <h6 style="color: white;">Rompin PN 28612</h6>
160 
+        </div>
161 
+
162 
+        <div class="text-center pt-5"
163 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
164 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
165 
+
166 
+        </div>
167 
+
168 
+        <div class="text-center pt-1 pb-5"
169 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
170 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
171 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
172 
+
173 
+                <div id="map" style="width: 800px;"></div>
174 
+                <!-- <div id="capture"></div> -->
175 
+
176 
+
177 
+
178 
+            </div>
179 
+        </div>
180 
+
181 
+
182 
+
183 
+
184 
+        <div class="text-center pt-5"
185 
+            style="background-color: white; display: flex; justify-content: center; align-items: left; padding-left: 100px; margin-top: 250px;">
186 
+            <div style="display: flex; flex-direction: row;">
187 
+                <div>
188 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Lokasi :</span> <span
189 
+                            style="color: #ACACAC;"></span></h6>
190 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Mukim :</span> <span
191 
+                            style="color: #ACACAC;">Rompin</span></h6>
192 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Daerah :</span> <span
193 
+                            style="color: #ACACAC;">Rompin</span></h6>
194 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Negeri :</span> <span
195 
+                            style="color: #ACACAC;">Pahang Darul Makmur</span></h6>
196 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Skala :</span> <span
197 
+                            style="color: #ACACAC;">Tanpa Skala</span></h6>
198 
+                </div>
199 
+                <div style="margin-left: 100px;">
200 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">No. Hak Milik :</span>
201 
+                        <span style="color: #ACACAC;">PN 28612</span>
202 
+                    </h6>
203 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Keluasan (MP) :</span>
204 
+                        <span style="color: #ACACAC;">16.26</span>
205 
+                    </h6>
206 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Kehunaan :</span> <span
207 
+                            style="color: #ACACAC;">Pertanian</span></h6>
208 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Start Neat :</span>
209 
+                        <span style="color: #ACACAC;">Ternakan domistik sahaja <br> (seperti kambing/lembu/kerbau/<br>/arnab/kijang/ dan rusa)</span>
210 
+                    </h6>
211 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;"></span> <span
212 
+                            style="color: #ACACAC;"></span></h6>
213 
+                </div>
214 
+            </div>
215 
+        </div>
216 
+
217 
+        <div class="text-center pt-5 pb-5"
218 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
219 
+            <a href="../pdf_pages/view_pdf_pn28612.html" class="button-23 mb-2 mr-2"
220 
+                style="background-color: #1F9027; color: white; border: none;width: 200px;" role="button"
221 
+                data-toggle="modal" data-target="#exampleModal">View
222 
+                PDF</a>
223 
+
224 
+        </div>
225 
+
226 
+        <script src="../js/jquery-3.7.1.js" defer></script>
227 
+
228 
+        <script src="../js/pdfjs-viewer.js" defer></script>
229 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
230 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
231 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
232 
+
233 
+    </section>
234 
+
235 
+
236 
+    <!-- <div id="map"></div> -->
237 
+
238 
+    <script>
239 
+        var map;
240 
+        var src = 'https://dev.suite.psk.gov.my/kml/PN%2028612.kml';
241 
+
242 
+        function initMap() {
243 
+            map = new google.maps.Map(document.getElementById('map'), {
244 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
245 
+                zoom: 2,
246 
+                mapTypeId: 'satellite'
247 
+            });
248 
+
249 
+            var kmlLayer = new google.maps.KmlLayer(src, {
250 
+                suppressInfoWindows: true,
251 
+                preserveViewport: false,
252 
+                map: map
253 
+            });
254 
+        }
255 
+
256 
+
257 
+
258 
+
259 
+
260 
+    </script>
261 
+    <script async
262 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
263 
+        </script>
264 
+
265 
+</body>
266 
+
267 
+</html>

+ 8
- 8
index.html Переглянути файл 

@@ -9,9 +9,9 @@
9 9 
     <!-- include bulma css -->
10 10 
     <link rel="stylesheet" href="bulma/css/bulma.min.css">
11 11 
     <title>My Test App</title>
12 
-    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
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">
14 
-    <link rel="stylesheet" href="css/app.css">
14 
+    <link rel="stylesheet" href="./css/app.css">
15 15
16 16
17 17 
     <script>
 
@@ -39,7 +39,7 @@
39 39 
                     style="enable-background: new 0 0 1080 1080" xml:space="preserve">
40 40 
                     <g>
41 41 
                         <!-- Cameron Highland -->
42 
-                        <a href="testing.html" data-area="cameron-highland"
42 
+                        <a href="./lists/bentong.html" data-area="cameron-highland"
43 43 
                             data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
44 44 
                             <path id="cameron-highland" class="pahang-barat" d="M77.6,205.5c11.6-0.8,19.5-9.2,28.7-12c13-4,14.2-13.4,19.1-21.7c0,0,0,0,0,0c0,0,0,0,0,0
45 45 
                                 c-0.1-5-0.2-10.1-0.3-15.1c-2.4-4.8-11.7-7.4-4.9-15.2h0c-0.1-1.5-0.3-3.1-0.4-4.6c0,0,0,0,0,0c-3.5-5.5-3.3-11-0.1-16.5
 
@@ -77,7 +77,7 @@
77 77 
                                                 c0,3.2,0.9,6.5,3.6,9.3c4,3.8,9.5,3.2,14.2,4.8C458.6,315.3,460.3,321.5,450.8,329.1z" />
78 78 
                         </a>
79 79 
                         <!-- Raub -->
80 
-                        <a href="testing.html" data-area="raub">
80 
+                        <a href="./lists/raub.html" data-area="raub">
81 81 
                             <path id="raub" class="pahang-barat"
82 82 
                                 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
83 83 
                                 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
 
@@ -157,7 +157,7 @@
157 157 
                                 C660.3,451.3,661.7,448.5,661.7,445.8z" />
158 158 
                         </a>
159 159 
                         <!-- Temerloh -->
160 
-                        <a href="testing.html" data-area="temerloh">
160 
+                        <a href="./lists/temerloh.html" data-area="temerloh">
161 161 
                             <path id="temerloh" class="pahang-tengah"
162 162 
                                 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
163 163 
                                 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
 
@@ -170,7 +170,7 @@
170 170 
                                 c-5.9-11.6-11.3-22.3-10.3-37.3c1.4-22.8,1.8-46.6-6.1-69.1C528.5,502.3,528.9,498,528.7,494z" />
171 171 
                         </a>
172 172 
                         <!-- Pekan -->
173 
-                        <a href="testing.html" data-area="pekan">
173 
+                        <a href="./lists/pekan.html" data-area="pekan">
174 174 
                             <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
175 175 
                                 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
176 176 
                                 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
 
@@ -185,7 +185,7 @@
185 185 
                                 C1004,588.3,1004.5,595.5,999.1,601.2z" />
186 186 
                         </a>
187 187 
                         <!-- Maran -->
188 
-                        <a href="testing.html" data-area="maran">
188 
+                        <a href="./lists/maran.html" data-area="maran">
189 189 
                             <path id="maran" class="pahang-tengah"
190 190 
                                 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
191 191 
                                             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
 
@@ -212,7 +212,7 @@
212 212 
                                 c9.9,0.1,13.8,6.2,14.9,14.1c1.7,12.4,8.8,18,20.5,19.7c5,0.7,9.8,2.4,14.7,3.7C672.9,914.3,672.4,912.5,671.1,911.5z" />
213 213 
                         </a>
214 214 
                         <!-- Rompin -->
215 
-                        <a href="testing.html" data-area="rompin">
215 
+                        <a href="./lists/rompin.html" data-area="rompin">
216 216 
                             <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
217 217 
                                 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
218 218 
                                 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

+ 1
- 2
lists/bentong.html Переглянути файл 

@@ -9,10 +9,9 @@
9 9 
     <!-- include bulma css -->
10 10 
     <link rel="stylesheet" href="bulma/css/bulma.min.css">
11 11 
     <title>My Test App</title>
12 
-    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
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 
-
16 15 
 </head>
17 16
18 17 
 <body>

+ 111
- 0
lists/maran.html Переглянути файл 

@@ -0,0 +1,111 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta charset="UTF-8">
6 
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
7 
+    <!-- CSP is a PITA ;). Disabled, don't try this at home!-->
8 
+    <meta http-equiv="Content-Security-Policy" content="">
9 
+    <!-- include bulma css -->
10 
+    <link rel="stylesheet" href="bulma/css/bulma.min.css">
11 
+    <title>My Test App</title>
12 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
13 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
14 
+        integrity="sha512-abc123..." crossorigin="anonymous" />
15 
+    <link rel="stylesheet" href="../css/app.css">
16 
+</head>
17 
+
18 
+<body>
19 
+    <section class="section" style="max-height: 100vh;">
20 
+
21 
+        <div class=""
22 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
23 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../index.html"><i
24 
+                        class="fas fa-chevron-left"></i></a></h6>
25 
+            <h6 style="color: white;">Maran</h6>
26 
+        </div>
27 
+
28 
+        <div class="text-center pt-5"
29 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px; z-index: 2; position: relative;">
30 
+
31 
+            <button id="penternakan_btn" type="button" class="p-1"
32 
+                style="font-weight: 500; border-top: 4px solid #3B47E0; border-right: none; border-bottom: none; border-left: none; margin: 0; background-color: transparent;">&emsp;&emsp;Penternakan&emsp;&emsp;</button>
33 
+
34 
+        </div>
35 
+
36 
+        <div class="text-center pt-1"
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;">
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"
41 
+                    style="enable-background: new 0 0 1080 1080" xml:space="preserve">
42 
+                    <g>
43 
+                        <a href="testing.html" data-area="jerantut">
44 
+                            <path id="maran" class="pahang-tengah"
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 
+                                            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
47 
+                                            c-1-0.2-2.1-3.6-2.1-5.4v-0.2c0-9.2-5.8-14.2-13-18.4c-5.1-3.8-10.7-6.3-16.9-7.5c-4-0.8-8.2,0-12.3,0c-3.2,0-6.4-0.5-9.4-2.7
48 
+                                            c0.5-10.4-10.9-17.3-8.5-28c5.2-23-2.2-45.5-2.2-68.2c0-8-3.6-16-6-24c0.2-0.5,0.4-1,0.5-1.6c-0.6-5.2-5.2-6.1-8.9-7.8
49 
+                                            c-4.8-2.1-4.9-4.7-2.1-8.7c9.7-13.6,21.4-26.5,17-45.7c8.1,12.1,8.7,12.4,18.8,8.2c8.8,2.4,17.6,7.2,25.9-1.3c0-0.1,0-0.2,0-0.3
50 
+                                            c7.3,1.3,14.6,3.1,21.7-0.7c1.5,3.7,4.9,5.3,8.3,5.8c14.1,2,24.6,9.1,33.2,20.3c3.3,4.3,6.9,8.4,8.9,13.5c1.7,4.5,4.8,9.3,9.7,8.7
51 
+                                            c10.7-1.3,19.7,3.4,29.2,6.1c0.6,5.6-1.6,11.6,2.7,16.6c0.8,1.1,1.7,1.5,2.5,1.5c0.9,0,1.8-0.4,2.7-1.2c4.7-1.7,5.1-6.8,7.9-10
52 
+                                            c1.4,0.1,2.7,0.1,4.1,0.2c5,5.1,9.6,10.9,15.2,15.2c10,7.7,13.3,17.7,10,29.1c-4.6,15.7-5.6,33.5-22.1,43.5
53 
+                                            c-2.4,1.5-3.6,5.6-4.6,8.8c-1.4,4.7-3.5,8.8-6.7,12.1l0,0c-0.8,0.9-1.7,1.7-2.7,2.5l-2.1,1.6h0c-6.7,0.6-12,6.4-18.9,6.4
54 
+                                            c-1,0-2-0.1-3-0.4c-8,2.6-9.1,8.4-5.4,14.7C678.7,636.1,682.7,644,690,649.3z" />
55 
+                        </a>
56 
+                    </g>
57 
+                </svg>
58 
+
59 
+
60 
+            </div>
61 
+        </div>
62 
+
63 
+
64 
+        <div id="penternakan_plot" class="content-div">
65 
+            <div class="text-center pt-5"
66 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px;margin-top: 250px;">
67 
+                <h6>Penternakan</h6><br>
68 
+
69 
+            </div>
70 
+            <div class="text-center pt-2 text-nowrap flex-wrap"
71 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px; margin-top: 0;gap: 10px;padding-right: 100px;">
72 
+                <a href="../details/detail_hsd2384.html" style="" class="button-23 mb-2"
73 
+                    role="button">HSD 2384</a>
74 
+            </div>
75 
+        </div>
76 
+
77 
+
78 
+
79 
+    </section>
80 
+
81 
+    <script>
82 
+
83 
+        document.getElementById('pembangun_btn').addEventListener('click', function () {
84 
+            showDiv('pembangun_plot');
85 
+        });
86 
+
87 
+        document.getElementById('penternakan_btn').addEventListener('click', function () {
88 
+            showDiv('penternakan_plot');
89 
+        });
90 
+
91 
+        document.getElementById('pertanian_btn').addEventListener('click', function () {
92 
+            showDiv('pertanian_plot');
93 
+        });
94 
+
95 
+        document.getElementById('industri_btn').addEventListener('click', function () {
96 
+            showDiv('industri_plot');
97 
+        });
98 
+
99 
+        function showDiv(divId) {
100 
+            var divs = document.getElementsByClassName('content-div');
101 
+            for (var i = 0; i < divs.length; i++) {
102 
+                divs[i].classList.add('hidden');
103 
+            }
104 
+            document.getElementById(divId).classList.remove('hidden');
105 
+        }
106 
+    </script>
107 
+    <script defer src="/ruta relativa a mi archivo .js"></script>
108 
+
109 
+</body>
110 
+
111 
+</html>

+ 113
- 0
lists/pekan.html Переглянути файл 

@@ -0,0 +1,113 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta charset="UTF-8">
6 
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
7 
+    <!-- CSP is a PITA ;). Disabled, don't try this at home!-->
8 
+    <meta http-equiv="Content-Security-Policy" content="">
9 
+    <!-- include bulma css -->
10 
+    <link rel="stylesheet" href="bulma/css/bulma.min.css">
11 
+    <title>My Test App</title>
12 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
13 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
14 
+        integrity="sha512-abc123..." crossorigin="anonymous" />
15 
+    <link rel="stylesheet" href="../css/app.css">
16 
+</head>
17 
+
18 
+<body>
19 
+    <section class="section" style="max-height: 100vh;">
20 
+
21 
+        <div class=""
22 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
23 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="index.html"><i
24 
+                        class="fas fa-chevron-left"></i></a></h6>
25 
+            <h6 style="color: white;">Pekan</h6>
26 
+        </div>
27 
+
28 
+        <div class="text-center pt-5"
29 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px; z-index: 2; position: relative;">
30 
+            <button id="penternakan_btn" type="button" class="p-1"
31 
+                style="font-weight: 500; border-top: 4px solid #3B47E0; border-right: none; border-bottom: none; border-left: none; margin: 0; background-color: transparent;">&emsp;&emsp;Penternakan&emsp;&emsp;</button>
32 
+        </div>
33 
+
34 
+        <div class="text-center pt-1"
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;">
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"
39 
+                    style="enable-background: new 0 0 1080 1080" xml:space="preserve">
40 
+                    <g>
41 
+                        <a href="testing.html" data-area="jerantut">
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 
+                                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 
+                                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
45 
+                                c4.3-1.6,11.3-1.8,11.5-6.5c0.3-10.4,8.1-17.9,9-27.9c0.3-3.9,1-7.6-1.2-11c-9.5-15-20.5-29.3-24-47.3c-4-4.6-8.2-5.2-12.9-0.8
46 
+                                c-3.4,3.2-7.1,6-10.7,9c-7.5,6.1-23.6,6.9-26.2,0.7c-2.6-6.4-5.6-10.4-12.9-8.8c-8.1,1.8-8.7,8.2-8.5,14.9
47 
+                                c-6.8,5.4-11.3-1-14.7-4.3c-5-4.9-10.3-9.6-15.3-14.7c-4.9-5.1-9.5-10.4-13.1-16.6c-0.1-3.3-0.2-6.7-0.3-10
48 
+                                c-0.5-1.9-1.5-3.3-2.8-4.5c-1.3-1.2-2.8-2.2-4.1-3.5c-1.5-2-3.2-3.9-4.5-6c-3.7-6-11.2-11.4-9.7-18.4c1.6-7.7,11.8-0.3,16.2-5.6
49 
+                                c2.1-2.3,4.2-4.6,6.3-6.9l8.1-1.6l0,0c4.3-0.5,5.1-6.6,7.3-9.9c2.8-4.4,2.4-10.6,8.2-13.5c6.8-3.5,9-10.5,12.3-16.9
50 
+                                c7-13.6,6.7-28.9,11.4-43c5.7,1.1,11.4,2.1,17.1,3.2c6.3,1.5,12.4,5,18.8,4.5l15.8,3.8l0,0c1.3,0.4,2.5,0.7,3.7,0.7h0l12.1,2.1
51 
+                                c0.9,1.6,4,1.2,6.1,1.1c2.3,0.2,4.6,0.4,6.8,0.6v0c11.7,3.4,23.7,2,35.5,2.4c5.9,2.8,12.2,1.9,18.4,1.8c0,0,0,0,0,0h0
52 
+                                c6.6,0.3,13.2,0.5,19.8,0.8c5,2.8,10.5,1.9,15.8,1.8v0c12.7,0.2,25.5,0.4,38.2,0.6c22.2,3.3,28.7,25.1,43.4,37.3
53 
+                                C1004,588.3,1004.5,595.5,999.1,601.2z" />
54 
+                        </a>
55 
+                    </g>
56 
+                </svg>
57 
+
58 
+
59 
+            </div>
60 
+        </div>
61 
+
62 
+        <div id="pertanian_plot" class="content-div">
63 
+            <div class="text-center pt-5"
64 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px;margin-top: 250px;">
65 
+                <h6>Pertanian</h6><br>
66 
+
67 
+            </div>
68 
+
69 
+            <div class="text-center pt-2 text-nowrap flex-wrap"
70 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px; margin-top: 0;gap: 10px;padding-right: 100px;z-index: 2; position: relative;">
71 
+                <a href="../details/detail_hsd5621.html" class="button-23 mb-2 mr-2"
72 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 5621</a>
73 
+                <a href="../details/detail_hsd5627.html" class="button-23 mb-2 mr-2"
74 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 5627</a>
75 
+                <a href="../details/detail_hsd5625.html" class="button-23 mb-2 mr-2"
76 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 5625</a>
77 
+
78 
+            </div>
79 
+        </div>
80 
+
81 
+    </section>
82 
+
83 
+    <script>
84 
+
85 
+        document.getElementById('pembangun_btn').addEventListener('click', function () {
86 
+            showDiv('pembangun_plot');
87 
+        });
88 
+
89 
+        document.getElementById('penternakan_btn').addEventListener('click', function () {
90 
+            showDiv('penternakan_plot');
91 
+        });
92 
+
93 
+        document.getElementById('pertanian_btn').addEventListener('click', function () {
94 
+            showDiv('pertanian_plot');
95 
+        });
96 
+
97 
+        document.getElementById('industri_btn').addEventListener('click', function () {
98 
+            showDiv('industri_plot');
99 
+        });
100 
+
101 
+        function showDiv(divId) {
102 
+            var divs = document.getElementsByClassName('content-div');
103 
+            for (var i = 0; i < divs.length; i++) {
104 
+                divs[i].classList.add('hidden');
105 
+            }
106 
+            document.getElementById(divId).classList.remove('hidden');
107 
+        }
108 
+    </script>
109 
+    <script defer src="/ruta relativa a mi archivo .js"></script>
110 
+
111 
+</body>
112 
+
113 
+</html>

+ 122
- 0
lists/raub.html Переглянути файл 

@@ -0,0 +1,122 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta charset="UTF-8">
6 
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
7 
+    <!-- CSP is a PITA ;). Disabled, don't try this at home!-->
8 
+    <meta http-equiv="Content-Security-Policy" content="">
9 
+    <!-- include bulma css -->
10 
+    <link rel="stylesheet" href="bulma/css/bulma.min.css">
11 
+    <title>My Test App</title>
12 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
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 
+    <link rel="stylesheet" href="../css/app.css">
15 
+</head>
16 
+
17 
+<body>
18 
+    <section class="section" style="max-height: 100vh;">
19 
+
20 
+        <div class=""
21 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
22 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../index.html"><i
23 
+                        class="fas fa-chevron-left"></i></a></h6>
24 
+            <h6 style="color: white;">Raub</h6>
25 
+        </div>
26 
+
27 
+        <div class="text-center pt-5"
28 
+            style=" z-index: 2; position: relative;background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
29 
+            <button id="pembangun_btn" type="button" class="p-1"
30 
+                style="font-weight: 500; border-top: 4px solid #BF3030; border-right: none; border-bottom: none; border-left: none; margin: 0; background-color: transparent;">&emsp;&emsp;Pembangunan&emsp;&emsp;</button>
31 
+            <button id="pertanian_btn" type="button" class="p-1"
32 
+                style="font-weight: 500; border-top: 4px solid #E2E236; border-right: none; border-bottom: none; border-left: none; margin: 0; background-color: transparent;">&emsp;&emsp;Pertanian&emsp;&emsp;</button>
33 
+            </div>
34 
+
35 
+        <div class="text-center pt-1"
36 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 400px;">
37 
+            <div class="pt-5" style="width: 600px;height: 100px;margin-top: -200px;">
38 
+                <svg class="map-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
39 
+                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-30 -30 1150 1150"
40 
+                    style="enable-background: new 0 0 1080 1080" xml:space="preserve">
41 
+                    <g>
42 
+                        <a href="testing.html" data-area="jerantut">
43 
+                            <path id="raub" class="pahang-barat"
44 
+                                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
45 
+                                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
46 
+                                c-15,3.1-27.4-6.8-28.5-22.9c-0.4-5.5,0.3-11-4.9-14.7c0,0,0,0,0,0c-0.9-4.7-4.1-7.8-8.6-7.9c-7.1-0.1-11.7-3.5-15.5-9
47 
+                                c-2.1-3.1-4.8-6.8-9.2-4.6c-5.5,2.8-2.9,7.4-0.7,10.8c5.1,8.1,0.3,11.2-6.4,11.4c-9.4,0.3-14.3,6-18.9,12.7
48 
+                                c-4.9-1.5-8.4-4.5-9.1-9.6c-1.9-13.1-10.6-21.7-19.5-30.2c-3.1-3-6.7-5.9-11.1-5.2c-19.1,2.7-31.5-6.8-40.7-21.8
49 
+                                c-8.2-13.6-29.8-22.3-16.1-44.4c2-3.3,0.3-10.9-4.2-13.8c-9.1-5.9-8.5-14.5-8.8-23.4c-0.3-13,4.4-27-7.6-38
50 
+                                c-3.1-2.9,0-7.3,2.2-10.4c3.4-4.8,7.1-9.4,10.6-14.1c13.4-4,26.3-3.6,40.2-0.6c12.2,2.6,27,4,35.2-11.1c0.5,0,0.9-0.1,1.4,0
51 
+                                c4.3,6.5,9.4,11.3,17.5,11.4c4.9,0.1,6.7,3,5.9,7.6c-2,12.2,3.8,16.3,14.2,15.6h5.9c0.1,0,0.3,0,0.4,0c3.3,0,5.6-1.3,6.2-4.9
52 
+                                c2.3-13.1,18.5-13.1,23.6-24.1c0.7-1.5,10.7-0.1,15.4,2.1c5,2.4,0.3,6.8-0.8,9.8c-3.6,9.1,0,16.8,4.8,23.8
53 
+                                c5.5,7.9,3.1,12.4-4.8,15.4c-4.9,1.8-9.2,4.8-7.3,10c2.8,7.5,9.6,13.1,16.5,15.9c5.8,2.3,12.1-2.1,16-7.7c1.7-2.4,3-5.1,4.7-7.5
54 
+                                c3.4-4.6,5.9-11.9,12.6-11c6.3,0.9,13,3.9,12.1,13.2c-0.2,2,4.9,4.2,5.1,6.6C345.4,400.8,358.4,400.9,353.9,410.6z" />
55 
+                        </a>
56 
+                    </g>
57 
+                </svg>
58 
+
59 
+
60 
+            </div>
61 
+        </div>
62 
+
63 
+
64 
+        <div id="pembangun_plot" class="content-div">
65 
+            <div class="text-center pt-5"
66 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px;margin-top: 250px;">
67 
+                <h6>Pembangunan</h6><br>
68 
+
69 
+            </div>
70 
+            <div class="text-center pt-2 text-nowrap flex-wrap"
71 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px; margin-top: 0;gap: 10px;padding-right: 100px;">
72 
+
73 
+                <a href="../details/detail_hsd11863.html" class="button-23 mb-2 mr-2"
74 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 11863</a>
75 
+
76 
+            </div>
77 
+        </div>
78 
+
79 
+        <div id="pertanian_plot" class="hidden content-div">
80 
+            <div class="text-center pt-5"
81 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px;margin-top: 250px;">
82 
+                <h6>Pertanian</h6><br>
83 
+
84 
+            </div>
85 
+            <div class="text-center pt-2 text-nowrap flex-wrap"
86 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px; margin-top: 0;gap: 10px;padding-right: 100px;">
87 
+
88 
+                <a href="../details/detail_hsd11991.html" class="button-23 mb-2 mr-2"
89 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 11991</a>
90 
+
91 
+            </div>
92 
+        </div>
93 
+
94 
+    </section>
95 
+
96 
+    <script>
97 
+
98 
+        document.getElementById('pembangun_btn').addEventListener('click', function () {
99 
+            showDiv('pembangun_plot');
100 
+        });
101 
+
102 
+
103 
+
104 
+        document.getElementById('pertanian_btn').addEventListener('click', function () {
105 
+            showDiv('pertanian_plot');
106 
+        });
107 
+
108 
+
109 
+
110 
+        function showDiv(divId) {
111 
+            var divs = document.getElementsByClassName('content-div');
112 
+            for (var i = 0; i < divs.length; i++) {
113 
+                divs[i].classList.add('hidden');
114 
+            }
115 
+            document.getElementById(divId).classList.remove('hidden');
116 
+        }
117 
+    </script>
118 
+    <script defer src="/ruta relativa a mi archivo .js"></script>
119 
+
120 
+</body>
121 
+
122 
+</html>

+ 141
- 0
lists/rompin.html Переглянути файл 

@@ -0,0 +1,141 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta charset="UTF-8">
6 
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
7 
+    <!-- CSP is a PITA ;). Disabled, don't try this at home!-->
8 
+    <meta http-equiv="Content-Security-Policy" content="">
9 
+    <!-- include bulma css -->
10 
+    <link rel="stylesheet" href="bulma/css/bulma.min.css">
11 
+    <title>My Test App</title>
12 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
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 
+    <link rel="stylesheet" href="../css/app.css">
15 
+</head>
16 
+
17 
+<body>
18 
+    <section class="section" style="max-height: 100vh;">
19 
+
20 
+        <div class=""
21 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
22 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../index.html"><i
23 
+                        class="fas fa-chevron-left"></i></a></h6>
24 
+            <h6 style="color: white;">Rompin</h6>
25 
+        </div>
26 
+
27 
+        <div class="text-center pt-5"
28 
+            style="z-index: 2; position: relative;background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 0px;">
29 
+            <button id="pembangun_btn" type="button" class="p-1"
30 
+                style="font-weight: 500; border-top: 4px solid #BF3030; border-right: none; border-bottom: none; border-left: none; margin: 0; background-color: transparent;">&emsp;&emsp;Pembangunan&emsp;&emsp;</button>
31 
+            <button id="penternakan_btn" type="button" class="p-1"
32 
+                style="font-weight: 500; border-top: 4px solid #3B47E0; border-right: none; border-bottom: none; border-left: none; margin: 0; background-color: transparent;">&emsp;&emsp;Penternakan&emsp;&emsp;</button>
33 
+            </div>
34 
+
35 
+        <div class="text-center pt-1"
36 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: -0px;">
37 
+            <div class="pt-5" style="width: 650px;height: 100px;margin-top: -700px;margin-left: -300px;">
38 
+                <svg class="map-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
39 
+                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-30 -30 1150 1150"
40 
+                    style="enable-background: new 0 0 1080 1080" xml:space="preserve">
41 
+                    <g>
42 
+                        <a href="testing.html" data-area="jerantut">
43 
+                            <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
44 
+                                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
45 
+                                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
46 
+                                c-2.8-6.1-5.7-11.3-13.2-13.8c-10.4-3.4-12.1-15.5-18.9-22.9c-6-6.6-9.4-16.1-14.8-24c-5.1-7.3,0.6-13.1,8.4-16.3
47 
+                                c13.6-5.5,20.7-31.1,13.3-44c-7.5-13.2-20.4-24.2-18.2-41.6c0,0,0,0,0,0c-5.4-1.7-9.9,1.8-12,5.1c-6.3,9.8-17.1,8.4-25.8,11.6
48 
+                                c-5.5,2-10.3-1.8-13.7-6.5c-2-2.8-1.5-8.3-7-7.2c-4.9,1-4,5.6-4.9,9.1c-0.5,1.9-1.6,3.7-2.4,5.6c0,0,0,0,0,0
49 
+                                c-6.7,6.5-13.1,1-16.7-2.7c-11.2-11.2-25.1-20.1-32-35.2c0,0,0,0,0,0c-2.3-2.2-2.5-5.1-2.3-8c-9.6-4.8-21.3,2.6-30.4-5.3
50 
+                                c0,0,0,0,0,0c-5.9-0.1-5.7,5.2-7.5,8.6c-3.6,6.9-5,15.3-12.6,19.6c0,0,0,0,0,0c-1,5.1-2.1,10.1-3.1,15.2c0,0,0,0,0,0
51 
+                                c15.3,14.5,27.9,32,46,43.6c7.3,4.7,6.3,9.8-1.1,12.9c-7.1,3-11.7,10.4-21.4,9.5c-3.9-0.4,1.8,6.6-0.3,10.1l0,0c0,0,0,0,0,0
52 
+                                c-1.6,12,0.3,22.3,11.9,29.1c5.1,3,5.5,7.6,2.8,12.9c-4.2,8.1-7.9,16.4-11.8,24.7c0,0,0,0,0,0c5.2,13,1.9,26.5-1.6,38.5
53 
+                                c-3.6,12.5,2.1,19.3,8.3,27.4c2.3,3,4,6.3,6,9.5c0,0,0,0,0,0c25.9,25.7,47.6,55.1,71.6,82.3c7,7.9,12.8,16.9,23.2,21.2
54 
+                                c22.2,9.4,44.4,19,66.5,28.8c6.7,3,12.6,2.7,19.4-0.1c24.3-9.9,48.1-21.1,74.1-26.5c8.9-1.8,16.4-1.4,24.4,3
55 
+                                c8.8,4.8,17,11.6,27.6,12.4c6.1,0.4,9.7,3.8,13.7,7.9c15.9,16.7,37.8,23.5,57.8,33.3c4.1,2,12.7,3,16.9-3.3
56 
+                                C1077.3,1071.6,1068.9,1052.1,1065.4,1052.3z" />
57 
+                        </a>
58 
+                    </g>
59 
+                </svg>
60 
+
61 
+
62 
+            </div>
63 
+        </div>
64 
+
65 
+
66 
+        <div id="pembangun_plot" class="content-div">
67 
+            <div class="text-center pt-5"
68 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px;margin-top: 250px;">
69 
+                <h6>Pembangunan</h6><br>
70 
+
71 
+            </div>
72 
+            <div class="text-center pt-2 text-nowrap flex-wrap"
73 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px; margin-top: 0;gap: 10px;padding-right: 100px;">
74 
+
75 
+                <a href="../details/detail_hsd5715.html" class="button-23 mb-2 mr-2"
76 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 5715</a>
77 
+                <a href="../details/detail_hsd5734.html" class="button-23 mb-2 mr-2"
78 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 5734</a>
79 
+                <a href="../details/detail_hsd5738.html" class="button-23 mb-2 mr-2"
80 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 5738</a>
81 
+
82 
+            </div>
83 
+        </div>
84 
+
85 
+        <div id="penternakan_plot" class="hidden content-div">
86 
+            <div class="text-center pt-5"
87 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px;margin-top: 250px;">
88 
+                <h6>Penternakan</h6><br>
89 
+
90 
+            </div>
91 
+            <div class="text-center pt-2 text-nowrap flex-wrap"
92 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px; margin-top: 0;gap: 10px;padding-right: 100px;">
93 
+
94 
+                <a href="../details/detail_hsd4638.html" class="button-23 mb-2 mr-2"
95 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 4638</a>
96 
+                <a href="../details/detail_hsd5714.html" class="button-23 mb-2 mr-2"
97 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 5714</a>
98 
+                <a href="../details/detail_hsd5745.html" class="button-23 mb-2 mr-2"
99 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 5745</a>
100 
+                <a href="../details/detail_hsd5749.html" class="button-23 mb-2 mr-2"
101 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 5749</a>
102 
+                <a href="../details/detail_hsd5761.html" class="button-23 mb-2 mr-2"
103 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 5761</a>
104 
+                <a href="../details/detail_hsd5762.html" class="button-23 mb-2 mr-2"
105 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 5762</a>
106 
+                <a href="../details/detail_hsd5763.html" class="button-23 mb-2 mr-2"
107 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 5763</a>
108 
+                <a href="../details/detail_hsd5764.html" class="button-23 mb-2 mr-2"
109 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 5764</a>
110 
+                <a href="../details/detail_pn28612.html" class="button-23 mb-2"
111 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">PN 28612</a>
112 
+            </div>
113 
+        </div>
114 
+
115 
+
116 
+
117 
+    </section>
118 
+
119 
+    <script>
120 
+
121 
+        document.getElementById('pembangun_btn').addEventListener('click', function () {
122 
+            showDiv('pembangun_plot');
123 
+        });
124 
+
125 
+        document.getElementById('penternakan_btn').addEventListener('click', function () {
126 
+            showDiv('penternakan_plot');
127 
+        });
128 
+
129 
+        function showDiv(divId) {
130 
+            var divs = document.getElementsByClassName('content-div');
131 
+            for (var i = 0; i < divs.length; i++) {
132 
+                divs[i].classList.add('hidden');
133 
+            }
134 
+            document.getElementById(divId).classList.remove('hidden');
135 
+        }
136 
+    </script>
137 
+    <script defer src="/ruta relativa a mi archivo .js"></script>
138 
+
139 
+</body>
140 
+
141 
+</html>

+ 110
- 0
lists/temerloh.html Переглянути файл 

@@ -0,0 +1,110 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta charset="UTF-8">
6 
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
7 
+    <!-- CSP is a PITA ;). Disabled, don't try this at home!-->
8 
+    <meta http-equiv="Content-Security-Policy" content="">
9 
+    <!-- include bulma css -->
10 
+    <link rel="stylesheet" href="bulma/css/bulma.min.css">
11 
+    <title>My Test App</title>
12 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
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 
+    <link rel="stylesheet" href="../css/app.css">
15 
+</head>
16 
+
17 
+<body>
18 
+    <section class="section" style="max-height: 100vh;">
19 
+
20 
+        <div class=""
21 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
22 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../index.html"><i
23 
+                        class="fas fa-chevron-left"></i></a></h6>
24 
+            <h6 style="color: white;">Temerloh</h6>
25 
+        </div>
26 
+
27 
+        <div class="text-center pt-5"
28 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 0px;">
29 
+           <button id="industri_btn" type="button" class="p-1"
30 
+                style="font-weight: 500; border-top: 4px solid #32A740; border-right: none; border-bottom: none; border-left: none; margin: 0; background-color: transparent;">&emsp;&emsp;Industri&emsp;&emsp;</button>
31 
+        </div>
32 
+
33 
+        <div class="text-center pt-1"
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;">
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"
38 
+                    style="enable-background: new 0 0 1080 1080" xml:space="preserve">
39 
+                    <g>
40 
+                        <a href="testing.html" data-area="jerantut">
41 
+                            <path id="temerloh" class="pahang-tengah"
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 
+                                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
44 
+                                c-0.3-0.2-0.6-0.3-0.9-0.5c0,0,0,0,0,0c-7.8-3.1-2.4-13.1-8.1-17.3c-1.9,7.5-8,9.4-14.8,10.2c-7.2,0.8-14.3,2-20.9,5.2
45 
+                                c-9.9,4.9-17.9,11.3-17.9,23.9c0.1,12.8-8.2,22.3-15.3,31.4c-5.9,7.6-8.7,14.9-8.7,24c-0.3,0.7-0.6,1.4-1,2.1
46 
+                                c7.5,6,7.5,9.6,0.6,14.5c-8.6,6-11.2,20.1-4.5,28.7c5.6,7.1,10.3,14.4,12.4,23.2c1.1,4.6,4,6.8,8,9c15.2,8.4,17.6,14.5,13.1,30.8
47 
+                                c-2.7,6.3-2.2,12.6-0.5,19c0.2,1.2,0.2,2.4,0.1,3.6c5,2.2,6.1,8.4,10,11.8c6.6-6.2,42-21.8,46.2-19.1c8.5,5.3,16.2,11.3,26.3,14
48 
+                                c4.9,1.3,8.8,1.2,13.2-0.4c0.4,0.1,0.8,0.2,1.1,0.3c1.5-10.3,9.7-11.3,17.6-11.6c8.1-0.3,15.8,2.2,23.5,4.8
49 
+                                c7.7,2.6,15.5,4.2,23.6,1.6c4.8-1.6,10.2-5.1,8.1-9.5c-5.9-12.6,4-19.2,8.7-27.9c0.4-0.6,0.9-1.2,1.4-1.6
50 
+                                c-5.9-11.6-11.3-22.3-10.3-37.3c1.4-22.8,1.8-46.6-6.1-69.1C528.5,502.3,528.9,498,528.7,494z" />
51 
+                        </a>
52 
+                    </g>
53 
+                </svg>
54 
+
55 
+
56 
+            </div>
57 
+        </div>
58 
+
59 
+
60 
+
61 
+
62 
+        <div id="industri_plot" class="content-div">
63 
+            <div class="text-center pt-5"
64 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px;margin-top: 250px;">
65 
+                <h6>Industri</h6><br>
66 
+
67 
+            </div>
68 
+            <div class="text-center pt-2 flex-wrap"
69 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px; margin-top: 0;gap: 10px;padding-right: 100px;">
70 
+
71 
+                <a href="../details/detail_pn16507.html" class="button-23 mb-2"
72 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">PN 16507</a>
73 
+            </div>
74 
+        </div>
75 
+
76 
+
77 
+
78 
+    </section>
79 
+
80 
+    <script>
81 
+
82 
+        document.getElementById('pembangun_btn').addEventListener('click', function () {
83 
+            showDiv('pembangun_plot');
84 
+        });
85 
+
86 
+        document.getElementById('penternakan_btn').addEventListener('click', function () {
87 
+            showDiv('penternakan_plot');
88 
+        });
89 
+
90 
+        document.getElementById('pertanian_btn').addEventListener('click', function () {
91 
+            showDiv('pertanian_plot');
92 
+        });
93 
+
94 
+        document.getElementById('industri_btn').addEventListener('click', function () {
95 
+            showDiv('industri_plot');
96 
+        });
97 
+
98 
+        function showDiv(divId) {
99 
+            var divs = document.getElementsByClassName('content-div');
100 
+            for (var i = 0; i < divs.length; i++) {
101 
+                divs[i].classList.add('hidden');
102 
+            }
103 
+            document.getElementById(divId).classList.remove('hidden');
104 
+        }
105 
+    </script>
106 
+    <script defer src="/ruta relativa a mi archivo .js"></script>
107 
+
108 
+</body>
109 
+
110 
+</html>

+ 255
- 0
pdf_pages/view_pdf_hsd11863.html Переглянути файл 

@@ -0,0 +1,255 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
11 
+        integrity="sha512-abc123..." crossorigin="anonymous" />
12 
+
13 
+
14 
+
15 
+    <style>
16 
+        html,
17 
+        body {
18 
+            height: 370px;
19 
+            padding: 0;
20 
+            margin: 0;
21 
+        }
22 
+
23 
+        #map {
24 
+            height: 360px;
25 
+            width: 300px;
26 
+            overflow: hidden;
27 
+            float: left;
28 
+            border: thin solid #333;
29 
+        }
30 
+
31 
+        #capture {
32 
+            height: 360px;
33 
+            width: 480px;
34 
+            overflow: hidden;
35 
+            float: left;
36 
+            background-color: #ECECFB;
37 
+            border: thin solid #333;
38 
+            border-left: none;
39 
+        }
40 
+
41 
+        #pdfViewer {
42 
+            width: 100%;
43 
+            height: 600px;
44 
+        }
45 
+    </style>
46 
+
47 
+    <style>
48 
+        /* CSS */
49 
+        .button-23 {
50 
+            background-color: #FFFFFF;
51 
+            border: 1px solid #222222;
52 
+            border-radius: 8px;
53 
+            box-sizing: border-box;
54 
+            color: #222222;
55 
+            cursor: pointer;
56 
+            display: inline-block;
57 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
58 
+            font-size: 16px;
59 
+            font-weight: 600;
60 
+            line-height: 20px;
61 
+            margin: 0;
62 
+            outline: none;
63 
+            padding: 13px 23px;
64 
+            position: relative;
65 
+            text-align: center;
66 
+            text-decoration: none;
67 
+            touch-action: manipulation;
68 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
69 
+            user-select: none;
70 
+            -webkit-user-select: none;
71 
+            width: auto;
72 
+        }
73 
+
74 
+        .button-23:focus-visible {
75 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
76 
+            transition: box-shadow .2s;
77 
+        }
78 
+
79 
+        .button-23:active {
80 
+            background-color: #F7F7F7;
81 
+            border-color: #000000;
82 
+            transform: scale(.96);
83 
+        }
84 
+
85 
+        .button-23:disabled {
86 
+            border-color: #DDDDDD;
87 
+            color: #DDDDDD;
88 
+            cursor: not-allowed;
89 
+            opacity: 1;
90 
+        }
91 
+
92 
+        .map-svg {
93 
+            display: block;
94 
+            margin: 0 auto;
95 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
96 
+
97 
+            a {
98 
+                transition: all 1s;
99 
+                transform-origin: 50% 50%;
100 
+                text-decoration: none;
101 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
102 
+
103 
+                @media only screen and (min-width: 992px) {
104 
+
105 
+                    polygon,
106 
+                    &:hover {
107 
+                        cursor: pointer;
108 
+                        transform: scale(1.05);
109 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
110 
+
111 
+                        .st0 {
112 
+                            fill: $dark-default;
113 
+                        }
114 
+                    }
115 
+                }
116 
+            }
117 
+
118 
+            .pahang-barat {
119 
+                fill: #427bba;
120 
+            }
121 
+
122 
+            .pahang-tengah {
123 
+                fill: #144172;
124 
+            }
125 
+
126 
+            .pahang-timur {
127 
+                fill: #0c6088;
128 
+            }
129 
+
130 
+            .label-text {
131 
+                font-size: 35px;
132 
+                fill: white;
133 
+                transform: translate(0,
134 
+                        3px);
135 
+                /* adjust vertical position to centre text */
136 
+            }
137 
+
138 
+            .label-text-cameron {
139 
+                font-size: 20px;
140 
+                fill: white;
141 
+                transform: translate(0,
142 
+                        3px);
143 
+                /* adjust vertical position to centre text */
144 
+            }
145 
+
146 
+
147 
+        }
148 
+    </style>
149 
+
150 
+</head>
151 
+
152 
+<body>
153 
+
154 
+    <section class="section" style="max-height: 100vh;">
155 
+
156 
+        <div class=""
157 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
158 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../details/detail_hsd11863.html"><i
159 
+                        class="fas fa-chevron-left"></i></a></h6>
160 
+            <h6 style="color: white;">Raub</h6>
161 
+        </div>
162 
+
163 
+        <!-- <div class="text-center pt-5"
164 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
165 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
166 
+
167 
+        </div> -->
168 
+
169 
+        <div class="text-center pt-1 pb-5"
170 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
171 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
172 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
173 
+
174 
+                <!-- <div id="capture"></div> -->
175 
+                <div id="pdfViewer"></div>
176 
+
177 
+
178 
+
179 
+            </div>
180 
+        </div>
181 
+
182 
+
183 
+
184 
+
185 
+
186 
+
187 
+
188 
+
189 
+
190 
+        <script src="../js/jquery-3.7.1.js" defer></script>
191 
+
192 
+        <script src="../js/pdfjs-viewer.js" defer></script>
193 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
194 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
195 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
196 
+
197 
+    </section>
198 
+
199 
+
200 
+    <!-- <div id="map"></div> -->
201 
+
202 
+    <script>
203 
+        var map;
204 
+        var src = 'https://file.io/t3IwR1hlxwkZ';
205 
+
206 
+        function initMap() {
207 
+            map = new google.maps.Map(document.getElementById('map'), {
208 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
209 
+                zoom: 2,
210 
+                mapTypeId: 'satellite'
211 
+            });
212 
+
213 
+            var kmlLayer = new google.maps.KmlLayer(src, {
214 
+                suppressInfoWindows: true,
215 
+                preserveViewport: false,
216 
+                map: map
217 
+            });
218 
+        }
219 
+
220 
+        document.addEventListener('DOMContentLoaded', () => {
221 
+            // PDF.js script to render PDF
222 
+            const pdfUrl = '../HSD 1863.pdf'; // Replace with your PDF URL
223 
+            const pdfjsLib = window['pdfjs-dist/build/pdf'];
224 
+            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
225 
+
226 
+            pdfjsLib.getDocument(pdfUrl).promise.then(function (pdf) {
227 
+                pdf.getPage(1).then(function (page) {
228 
+                    const scale = 1.5;
229 
+                    const viewport = page.getViewport({ scale });
230 
+
231 
+                    const canvas = document.createElement('canvas');
232 
+                    const context = canvas.getContext('2d');
233 
+                    canvas.height = viewport.height;
234 
+                    canvas.width = viewport.width;
235 
+
236 
+                    const renderContext = {
237 
+                        canvasContext: context,
238 
+                        viewport: viewport
239 
+                    };
240 
+
241 
+                    page.render(renderContext);
242 
+                    document.getElementById('pdfViewer').appendChild(canvas);
243 
+                });
244 
+            });
245 
+
246 
+        })
247 
+
248 
+    </script>
249 
+    <script async
250 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
251 
+        </script>
252 
+
253 
+</body>
254 
+
255 
+</html>

+ 255
- 0
pdf_pages/view_pdf_hsd11991.html Переглянути файл 

@@ -0,0 +1,255 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
11 
+        integrity="sha512-abc123..." crossorigin="anonymous" />
12 
+
13 
+
14 
+
15 
+    <style>
16 
+        html,
17 
+        body {
18 
+            height: 370px;
19 
+            padding: 0;
20 
+            margin: 0;
21 
+        }
22 
+
23 
+        #map {
24 
+            height: 360px;
25 
+            width: 300px;
26 
+            overflow: hidden;
27 
+            float: left;
28 
+            border: thin solid #333;
29 
+        }
30 
+
31 
+        #capture {
32 
+            height: 360px;
33 
+            width: 480px;
34 
+            overflow: hidden;
35 
+            float: left;
36 
+            background-color: #ECECFB;
37 
+            border: thin solid #333;
38 
+            border-left: none;
39 
+        }
40 
+
41 
+        #pdfViewer {
42 
+            width: 100%;
43 
+            height: 600px;
44 
+        }
45 
+    </style>
46 
+
47 
+    <style>
48 
+        /* CSS */
49 
+        .button-23 {
50 
+            background-color: #FFFFFF;
51 
+            border: 1px solid #222222;
52 
+            border-radius: 8px;
53 
+            box-sizing: border-box;
54 
+            color: #222222;
55 
+            cursor: pointer;
56 
+            display: inline-block;
57 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
58 
+            font-size: 16px;
59 
+            font-weight: 600;
60 
+            line-height: 20px;
61 
+            margin: 0;
62 
+            outline: none;
63 
+            padding: 13px 23px;
64 
+            position: relative;
65 
+            text-align: center;
66 
+            text-decoration: none;
67 
+            touch-action: manipulation;
68 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
69 
+            user-select: none;
70 
+            -webkit-user-select: none;
71 
+            width: auto;
72 
+        }
73 
+
74 
+        .button-23:focus-visible {
75 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
76 
+            transition: box-shadow .2s;
77 
+        }
78 
+
79 
+        .button-23:active {
80 
+            background-color: #F7F7F7;
81 
+            border-color: #000000;
82 
+            transform: scale(.96);
83 
+        }
84 
+
85 
+        .button-23:disabled {
86 
+            border-color: #DDDDDD;
87 
+            color: #DDDDDD;
88 
+            cursor: not-allowed;
89 
+            opacity: 1;
90 
+        }
91 
+
92 
+        .map-svg {
93 
+            display: block;
94 
+            margin: 0 auto;
95 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
96 
+
97 
+            a {
98 
+                transition: all 1s;
99 
+                transform-origin: 50% 50%;
100 
+                text-decoration: none;
101 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
102 
+
103 
+                @media only screen and (min-width: 992px) {
104 
+
105 
+                    polygon,
106 
+                    &:hover {
107 
+                        cursor: pointer;
108 
+                        transform: scale(1.05);
109 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
110 
+
111 
+                        .st0 {
112 
+                            fill: $dark-default;
113 
+                        }
114 
+                    }
115 
+                }
116 
+            }
117 
+
118 
+            .pahang-barat {
119 
+                fill: #427bba;
120 
+            }
121 
+
122 
+            .pahang-tengah {
123 
+                fill: #144172;
124 
+            }
125 
+
126 
+            .pahang-timur {
127 
+                fill: #0c6088;
128 
+            }
129 
+
130 
+            .label-text {
131 
+                font-size: 35px;
132 
+                fill: white;
133 
+                transform: translate(0,
134 
+                        3px);
135 
+                /* adjust vertical position to centre text */
136 
+            }
137 
+
138 
+            .label-text-cameron {
139 
+                font-size: 20px;
140 
+                fill: white;
141 
+                transform: translate(0,
142 
+                        3px);
143 
+                /* adjust vertical position to centre text */
144 
+            }
145 
+
146 
+
147 
+        }
148 
+    </style>
149 
+
150 
+</head>
151 
+
152 
+<body>
153 
+
154 
+    <section class="section" style="max-height: 100vh;">
155 
+
156 
+        <div class=""
157 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
158 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../details/detail_hsd11991.html"><i
159 
+                        class="fas fa-chevron-left"></i></a></h6>
160 
+            <h6 style="color: white;">Jerantut</h6>
161 
+        </div>
162 
+
163 
+        <!-- <div class="text-center pt-5"
164 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
165 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
166 
+
167 
+        </div> -->
168 
+
169 
+        <div class="text-center pt-1 pb-5"
170 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
171 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
172 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
173 
+
174 
+                <!-- <div id="capture"></div> -->
175 
+                <div id="pdfViewer"></div>
176 
+
177 
+
178 
+
179 
+            </div>
180 
+        </div>
181 
+
182 
+
183 
+
184 
+
185 
+
186 
+
187 
+
188 
+
189 
+
190 
+        <script src="../js/jquery-3.7.1.js" defer></script>
191 
+
192 
+        <script src="../js/pdfjs-viewer.js" defer></script>
193 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
194 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
195 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
196 
+
197 
+    </section>
198 
+
199 
+
200 
+    <!-- <div id="map"></div> -->
201 
+
202 
+    <script>
203 
+        var map;
204 
+        var src = 'https://file.io/t3IwR1hlxwkZ';
205 
+
206 
+        function initMap() {
207 
+            map = new google.maps.Map(document.getElementById('map'), {
208 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
209 
+                zoom: 2,
210 
+                mapTypeId: 'satellite'
211 
+            });
212 
+
213 
+            var kmlLayer = new google.maps.KmlLayer(src, {
214 
+                suppressInfoWindows: true,
215 
+                preserveViewport: false,
216 
+                map: map
217 
+            });
218 
+        }
219 
+
220 
+        document.addEventListener('DOMContentLoaded', () => {
221 
+            // PDF.js script to render PDF
222 
+            const pdfUrl = '../HSD 11991.pdf'; // Replace with your PDF URL
223 
+            const pdfjsLib = window['pdfjs-dist/build/pdf'];
224 
+            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
225 
+
226 
+            pdfjsLib.getDocument(pdfUrl).promise.then(function (pdf) {
227 
+                pdf.getPage(1).then(function (page) {
228 
+                    const scale = 1.5;
229 
+                    const viewport = page.getViewport({ scale });
230 
+
231 
+                    const canvas = document.createElement('canvas');
232 
+                    const context = canvas.getContext('2d');
233 
+                    canvas.height = viewport.height;
234 
+                    canvas.width = viewport.width;
235 
+
236 
+                    const renderContext = {
237 
+                        canvasContext: context,
238 
+                        viewport: viewport
239 
+                    };
240 
+
241 
+                    page.render(renderContext);
242 
+                    document.getElementById('pdfViewer').appendChild(canvas);
243 
+                });
244 
+            });
245 
+
246 
+        })
247 
+
248 
+    </script>
249 
+    <script async
250 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
251 
+        </script>
252 
+
253 
+</body>
254 
+
255 
+</html>

+ 255
- 0
pdf_pages/view_pdf_hsd2384.html Переглянути файл 

@@ -0,0 +1,255 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
11 
+        integrity="sha512-abc123..." crossorigin="anonymous" />
12 
+
13 
+
14 
+
15 
+    <style>
16 
+        html,
17 
+        body {
18 
+            height: 370px;
19 
+            padding: 0;
20 
+            margin: 0;
21 
+        }
22 
+
23 
+        #map {
24 
+            height: 360px;
25 
+            width: 300px;
26 
+            overflow: hidden;
27 
+            float: left;
28 
+            border: thin solid #333;
29 
+        }
30 
+
31 
+        #capture {
32 
+            height: 360px;
33 
+            width: 480px;
34 
+            overflow: hidden;
35 
+            float: left;
36 
+            background-color: #ECECFB;
37 
+            border: thin solid #333;
38 
+            border-left: none;
39 
+        }
40 
+
41 
+        #pdfViewer {
42 
+            width: 100%;
43 
+            height: 600px;
44 
+        }
45 
+    </style>
46 
+
47 
+    <style>
48 
+        /* CSS */
49 
+        .button-23 {
50 
+            background-color: #FFFFFF;
51 
+            border: 1px solid #222222;
52 
+            border-radius: 8px;
53 
+            box-sizing: border-box;
54 
+            color: #222222;
55 
+            cursor: pointer;
56 
+            display: inline-block;
57 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
58 
+            font-size: 16px;
59 
+            font-weight: 600;
60 
+            line-height: 20px;
61 
+            margin: 0;
62 
+            outline: none;
63 
+            padding: 13px 23px;
64 
+            position: relative;
65 
+            text-align: center;
66 
+            text-decoration: none;
67 
+            touch-action: manipulation;
68 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
69 
+            user-select: none;
70 
+            -webkit-user-select: none;
71 
+            width: auto;
72 
+        }
73 
+
74 
+        .button-23:focus-visible {
75 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
76 
+            transition: box-shadow .2s;
77 
+        }
78 
+
79 
+        .button-23:active {
80 
+            background-color: #F7F7F7;
81 
+            border-color: #000000;
82 
+            transform: scale(.96);
83 
+        }
84 
+
85 
+        .button-23:disabled {
86 
+            border-color: #DDDDDD;
87 
+            color: #DDDDDD;
88 
+            cursor: not-allowed;
89 
+            opacity: 1;
90 
+        }
91 
+
92 
+        .map-svg {
93 
+            display: block;
94 
+            margin: 0 auto;
95 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
96 
+
97 
+            a {
98 
+                transition: all 1s;
99 
+                transform-origin: 50% 50%;
100 
+                text-decoration: none;
101 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
102 
+
103 
+                @media only screen and (min-width: 992px) {
104 
+
105 
+                    polygon,
106 
+                    &:hover {
107 
+                        cursor: pointer;
108 
+                        transform: scale(1.05);
109 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
110 
+
111 
+                        .st0 {
112 
+                            fill: $dark-default;
113 
+                        }
114 
+                    }
115 
+                }
116 
+            }
117 
+
118 
+            .pahang-barat {
119 
+                fill: #427bba;
120 
+            }
121 
+
122 
+            .pahang-tengah {
123 
+                fill: #144172;
124 
+            }
125 
+
126 
+            .pahang-timur {
127 
+                fill: #0c6088;
128 
+            }
129 
+
130 
+            .label-text {
131 
+                font-size: 35px;
132 
+                fill: white;
133 
+                transform: translate(0,
134 
+                        3px);
135 
+                /* adjust vertical position to centre text */
136 
+            }
137 
+
138 
+            .label-text-cameron {
139 
+                font-size: 20px;
140 
+                fill: white;
141 
+                transform: translate(0,
142 
+                        3px);
143 
+                /* adjust vertical position to centre text */
144 
+            }
145 
+
146 
+
147 
+        }
148 
+    </style>
149 
+
150 
+</head>
151 
+
152 
+<body>
153 
+
154 
+    <section class="section" style="max-height: 100vh;">
155 
+
156 
+        <div class=""
157 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
158 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../details/detail_hsd2384.html"><i
159 
+                        class="fas fa-chevron-left"></i></a></h6>
160 
+            <h6 style="color: white;">Jerantut</h6>
161 
+        </div>
162 
+
163 
+        <!-- <div class="text-center pt-5"
164 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
165 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
166 
+
167 
+        </div> -->
168 
+
169 
+        <div class="text-center pt-1 pb-5"
170 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
171 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
172 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
173 
+
174 
+                <!-- <div id="capture"></div> -->
175 
+                <div id="pdfViewer"></div>
176 
+
177 
+
178 
+
179 
+            </div>
180 
+        </div>
181 
+
182 
+
183 
+
184 
+
185 
+
186 
+
187 
+
188 
+
189 
+
190 
+        <script src="../js/jquery-3.7.1.js" defer></script>
191 
+
192 
+        <script src="../js/pdfjs-viewer.js" defer></script>
193 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
194 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
195 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
196 
+
197 
+    </section>
198 
+
199 
+
200 
+    <!-- <div id="map"></div> -->
201 
+
202 
+    <script>
203 
+        var map;
204 
+        var src = 'https://file.io/t3IwR1hlxwkZ';
205 
+
206 
+        function initMap() {
207 
+            map = new google.maps.Map(document.getElementById('map'), {
208 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
209 
+                zoom: 2,
210 
+                mapTypeId: 'satellite'
211 
+            });
212 
+
213 
+            var kmlLayer = new google.maps.KmlLayer(src, {
214 
+                suppressInfoWindows: true,
215 
+                preserveViewport: false,
216 
+                map: map
217 
+            });
218 
+        }
219 
+
220 
+        document.addEventListener('DOMContentLoaded', () => {
221 
+            // PDF.js script to render PDF
222 
+            const pdfUrl = '../HSD2384.pdf'; // Replace with your PDF URL
223 
+            const pdfjsLib = window['pdfjs-dist/build/pdf'];
224 
+            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
225 
+
226 
+            pdfjsLib.getDocument(pdfUrl).promise.then(function (pdf) {
227 
+                pdf.getPage(1).then(function (page) {
228 
+                    const scale = 1.5;
229 
+                    const viewport = page.getViewport({ scale });
230 
+
231 
+                    const canvas = document.createElement('canvas');
232 
+                    const context = canvas.getContext('2d');
233 
+                    canvas.height = viewport.height;
234 
+                    canvas.width = viewport.width;
235 
+
236 
+                    const renderContext = {
237 
+                        canvasContext: context,
238 
+                        viewport: viewport
239 
+                    };
240 
+
241 
+                    page.render(renderContext);
242 
+                    document.getElementById('pdfViewer').appendChild(canvas);
243 
+                });
244 
+            });
245 
+
246 
+        })
247 
+
248 
+    </script>
249 
+    <script async
250 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
251 
+        </script>
252 
+
253 
+</body>
254 
+
255 
+</html>

+ 255
- 0
pdf_pages/view_pdf_hsd4628.html Переглянути файл 

@@ -0,0 +1,255 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
11 
+        integrity="sha512-abc123..." crossorigin="anonymous" />
12 
+
13 
+
14 
+
15 
+    <style>
16 
+        html,
17 
+        body {
18 
+            height: 370px;
19 
+            padding: 0;
20 
+            margin: 0;
21 
+        }
22 
+
23 
+        #map {
24 
+            height: 360px;
25 
+            width: 300px;
26 
+            overflow: hidden;
27 
+            float: left;
28 
+            border: thin solid #333;
29 
+        }
30 
+
31 
+        #capture {
32 
+            height: 360px;
33 
+            width: 480px;
34 
+            overflow: hidden;
35 
+            float: left;
36 
+            background-color: #ECECFB;
37 
+            border: thin solid #333;
38 
+            border-left: none;
39 
+        }
40 
+
41 
+        #pdfViewer {
42 
+            width: 100%;
43 
+            height: 600px;
44 
+        }
45 
+    </style>
46 
+
47 
+    <style>
48 
+        /* CSS */
49 
+        .button-23 {
50 
+            background-color: #FFFFFF;
51 
+            border: 1px solid #222222;
52 
+            border-radius: 8px;
53 
+            box-sizing: border-box;
54 
+            color: #222222;
55 
+            cursor: pointer;
56 
+            display: inline-block;
57 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
58 
+            font-size: 16px;
59 
+            font-weight: 600;
60 
+            line-height: 20px;
61 
+            margin: 0;
62 
+            outline: none;
63 
+            padding: 13px 23px;
64 
+            position: relative;
65 
+            text-align: center;
66 
+            text-decoration: none;
67 
+            touch-action: manipulation;
68 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
69 
+            user-select: none;
70 
+            -webkit-user-select: none;
71 
+            width: auto;
72 
+        }
73 
+
74 
+        .button-23:focus-visible {
75 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
76 
+            transition: box-shadow .2s;
77 
+        }
78 
+
79 
+        .button-23:active {
80 
+            background-color: #F7F7F7;
81 
+            border-color: #000000;
82 
+            transform: scale(.96);
83 
+        }
84 
+
85 
+        .button-23:disabled {
86 
+            border-color: #DDDDDD;
87 
+            color: #DDDDDD;
88 
+            cursor: not-allowed;
89 
+            opacity: 1;
90 
+        }
91 
+
92 
+        .map-svg {
93 
+            display: block;
94 
+            margin: 0 auto;
95 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
96 
+
97 
+            a {
98 
+                transition: all 1s;
99 
+                transform-origin: 50% 50%;
100 
+                text-decoration: none;
101 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
102 
+
103 
+                @media only screen and (min-width: 992px) {
104 
+
105 
+                    polygon,
106 
+                    &:hover {
107 
+                        cursor: pointer;
108 
+                        transform: scale(1.05);
109 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
110 
+
111 
+                        .st0 {
112 
+                            fill: $dark-default;
113 
+                        }
114 
+                    }
115 
+                }
116 
+            }
117 
+
118 
+            .pahang-barat {
119 
+                fill: #427bba;
120 
+            }
121 
+
122 
+            .pahang-tengah {
123 
+                fill: #144172;
124 
+            }
125 
+
126 
+            .pahang-timur {
127 
+                fill: #0c6088;
128 
+            }
129 
+
130 
+            .label-text {
131 
+                font-size: 35px;
132 
+                fill: white;
133 
+                transform: translate(0,
134 
+                        3px);
135 
+                /* adjust vertical position to centre text */
136 
+            }
137 
+
138 
+            .label-text-cameron {
139 
+                font-size: 20px;
140 
+                fill: white;
141 
+                transform: translate(0,
142 
+                        3px);
143 
+                /* adjust vertical position to centre text */
144 
+            }
145 
+
146 
+
147 
+        }
148 
+    </style>
149 
+
150 
+</head>
151 
+
152 
+<body>
153 
+
154 
+    <section class="section" style="max-height: 100vh;">
155 
+
156 
+        <div class=""
157 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
158 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../details/detail_hsd4638.html"><i
159 
+                        class="fas fa-chevron-left"></i></a></h6>
160 
+            <h6 style="color: white;">Rompin</h6>
161 
+        </div>
162 
+
163 
+        <!-- <div class="text-center pt-5"
164 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
165 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
166 
+
167 
+        </div> -->
168 
+
169 
+        <div class="text-center pt-1 pb-5"
170 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
171 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
172 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
173 
+
174 
+                <!-- <div id="capture"></div> -->
175 
+                <div id="pdfViewer"></div>
176 
+
177 
+
178 
+
179 
+            </div>
180 
+        </div>
181 
+
182 
+
183 
+
184 
+
185 
+
186 
+
187 
+
188 
+
189 
+
190 
+        <script src="../js/jquery-3.7.1.js" defer></script>
191 
+
192 
+        <script src="../js/pdfjs-viewer.js" defer></script>
193 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
194 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
195 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
196 
+
197 
+    </section>
198 
+
199 
+
200 
+    <!-- <div id="map"></div> -->
201 
+
202 
+    <script>
203 
+        var map;
204 
+        var src = 'https://file.io/t3IwR1hlxwkZ';
205 
+
206 
+        function initMap() {
207 
+            map = new google.maps.Map(document.getElementById('map'), {
208 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
209 
+                zoom: 2,
210 
+                mapTypeId: 'satellite'
211 
+            });
212 
+
213 
+            var kmlLayer = new google.maps.KmlLayer(src, {
214 
+                suppressInfoWindows: true,
215 
+                preserveViewport: false,
216 
+                map: map
217 
+            });
218 
+        }
219 
+
220 
+        document.addEventListener('DOMContentLoaded', () => {
221 
+            // PDF.js script to render PDF
222 
+            const pdfUrl = '../HSD 4638.pdf'; // Replace with your PDF URL
223 
+            const pdfjsLib = window['pdfjs-dist/build/pdf'];
224 
+            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
225 
+
226 
+            pdfjsLib.getDocument(pdfUrl).promise.then(function (pdf) {
227 
+                pdf.getPage(1).then(function (page) {
228 
+                    const scale = 1.5;
229 
+                    const viewport = page.getViewport({ scale });
230 
+
231 
+                    const canvas = document.createElement('canvas');
232 
+                    const context = canvas.getContext('2d');
233 
+                    canvas.height = viewport.height;
234 
+                    canvas.width = viewport.width;
235 
+
236 
+                    const renderContext = {
237 
+                        canvasContext: context,
238 
+                        viewport: viewport
239 
+                    };
240 
+
241 
+                    page.render(renderContext);
242 
+                    document.getElementById('pdfViewer').appendChild(canvas);
243 
+                });
244 
+            });
245 
+
246 
+        })
247 
+
248 
+    </script>
249 
+    <script async
250 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
251 
+        </script>
252 
+
253 
+</body>
254 
+
255 
+</html>

+ 255
- 0
pdf_pages/view_pdf_hsd5621.html Переглянути файл 

@@ -0,0 +1,255 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
11 
+        integrity="sha512-abc123..." crossorigin="anonymous" />
12 
+
13 
+
14 
+
15 
+    <style>
16 
+        html,
17 
+        body {
18 
+            height: 370px;
19 
+            padding: 0;
20 
+            margin: 0;
21 
+        }
22 
+
23 
+        #map {
24 
+            height: 360px;
25 
+            width: 300px;
26 
+            overflow: hidden;
27 
+            float: left;
28 
+            border: thin solid #333;
29 
+        }
30 
+
31 
+        #capture {
32 
+            height: 360px;
33 
+            width: 480px;
34 
+            overflow: hidden;
35 
+            float: left;
36 
+            background-color: #ECECFB;
37 
+            border: thin solid #333;
38 
+            border-left: none;
39 
+        }
40 
+
41 
+        #pdfViewer {
42 
+            width: 100%;
43 
+            height: 600px;
44 
+        }
45 
+    </style>
46 
+
47 
+    <style>
48 
+        /* CSS */
49 
+        .button-23 {
50 
+            background-color: #FFFFFF;
51 
+            border: 1px solid #222222;
52 
+            border-radius: 8px;
53 
+            box-sizing: border-box;
54 
+            color: #222222;
55 
+            cursor: pointer;
56 
+            display: inline-block;
57 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
58 
+            font-size: 16px;
59 
+            font-weight: 600;
60 
+            line-height: 20px;
61 
+            margin: 0;
62 
+            outline: none;
63 
+            padding: 13px 23px;
64 
+            position: relative;
65 
+            text-align: center;
66 
+            text-decoration: none;
67 
+            touch-action: manipulation;
68 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
69 
+            user-select: none;
70 
+            -webkit-user-select: none;
71 
+            width: auto;
72 
+        }
73 
+
74 
+        .button-23:focus-visible {
75 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
76 
+            transition: box-shadow .2s;
77 
+        }
78 
+
79 
+        .button-23:active {
80 
+            background-color: #F7F7F7;
81 
+            border-color: #000000;
82 
+            transform: scale(.96);
83 
+        }
84 
+
85 
+        .button-23:disabled {
86 
+            border-color: #DDDDDD;
87 
+            color: #DDDDDD;
88 
+            cursor: not-allowed;
89 
+            opacity: 1;
90 
+        }
91 
+
92 
+        .map-svg {
93 
+            display: block;
94 
+            margin: 0 auto;
95 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
96 
+
97 
+            a {
98 
+                transition: all 1s;
99 
+                transform-origin: 50% 50%;
100 
+                text-decoration: none;
101 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
102 
+
103 
+                @media only screen and (min-width: 992px) {
104 
+
105 
+                    polygon,
106 
+                    &:hover {
107 
+                        cursor: pointer;
108 
+                        transform: scale(1.05);
109 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
110 
+
111 
+                        .st0 {
112 
+                            fill: $dark-default;
113 
+                        }
114 
+                    }
115 
+                }
116 
+            }
117 
+
118 
+            .pahang-barat {
119 
+                fill: #427bba;
120 
+            }
121 
+
122 
+            .pahang-tengah {
123 
+                fill: #144172;
124 
+            }
125 
+
126 
+            .pahang-timur {
127 
+                fill: #0c6088;
128 
+            }
129 
+
130 
+            .label-text {
131 
+                font-size: 35px;
132 
+                fill: white;
133 
+                transform: translate(0,
134 
+                        3px);
135 
+                /* adjust vertical position to centre text */
136 
+            }
137 
+
138 
+            .label-text-cameron {
139 
+                font-size: 20px;
140 
+                fill: white;
141 
+                transform: translate(0,
142 
+                        3px);
143 
+                /* adjust vertical position to centre text */
144 
+            }
145 
+
146 
+
147 
+        }
148 
+    </style>
149 
+
150 
+</head>
151 
+
152 
+<body>
153 
+
154 
+    <section class="section" style="max-height: 100vh;">
155 
+
156 
+        <div class=""
157 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
158 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../details/detail_hsd5621.html"><i
159 
+                        class="fas fa-chevron-left"></i></a></h6>
160 
+            <h6 style="color: white;">Pekan </h6>
161 
+        </div>
162 
+
163 
+        <!-- <div class="text-center pt-5"
164 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
165 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
166 
+
167 
+        </div> -->
168 
+
169 
+        <div class="text-center pt-1 pb-5"
170 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
171 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
172 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
173 
+
174 
+                <!-- <div id="capture"></div> -->
175 
+                <div id="pdfViewer"></div>
176 
+
177 
+
178 
+
179 
+            </div>
180 
+        </div>
181 
+
182 
+
183 
+
184 
+
185 
+
186 
+
187 
+
188 
+
189 
+
190 
+        <script src="../js/jquery-3.7.1.js" defer></script>
191 
+
192 
+        <script src="../js/pdfjs-viewer.js" defer></script>
193 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
194 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
195 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
196 
+
197 
+    </section>
198 
+
199 
+
200 
+    <!-- <div id="map"></div> -->
201 
+
202 
+    <script>
203 
+        var map;
204 
+        var src = 'https://file.io/t3IwR1hlxwkZ';
205 
+
206 
+        function initMap() {
207 
+            map = new google.maps.Map(document.getElementById('map'), {
208 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
209 
+                zoom: 2,
210 
+                mapTypeId: 'satellite'
211 
+            });
212 
+
213 
+            var kmlLayer = new google.maps.KmlLayer(src, {
214 
+                suppressInfoWindows: true,
215 
+                preserveViewport: false,
216 
+                map: map
217 
+            });
218 
+        }
219 
+
220 
+        document.addEventListener('DOMContentLoaded', () => {
221 
+            // PDF.js script to render PDF
222 
+            const pdfUrl = '../HSD 5621.pdf'; // Replace with your PDF URL
223 
+            const pdfjsLib = window['pdfjs-dist/build/pdf'];
224 
+            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
225 
+
226 
+            pdfjsLib.getDocument(pdfUrl).promise.then(function (pdf) {
227 
+                pdf.getPage(1).then(function (page) {
228 
+                    const scale = 1.5;
229 
+                    const viewport = page.getViewport({ scale });
230 
+
231 
+                    const canvas = document.createElement('canvas');
232 
+                    const context = canvas.getContext('2d');
233 
+                    canvas.height = viewport.height;
234 
+                    canvas.width = viewport.width;
235 
+
236 
+                    const renderContext = {
237 
+                        canvasContext: context,
238 
+                        viewport: viewport
239 
+                    };
240 
+
241 
+                    page.render(renderContext);
242 
+                    document.getElementById('pdfViewer').appendChild(canvas);
243 
+                });
244 
+            });
245 
+
246 
+        })
247 
+
248 
+    </script>
249 
+    <script async
250 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
251 
+        </script>
252 
+
253 
+</body>
254 
+
255 
+</html>

+ 255
- 0
pdf_pages/view_pdf_hsd5625.html Переглянути файл 

@@ -0,0 +1,255 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
11 
+        integrity="sha512-abc123..." crossorigin="anonymous" />
12 
+
13 
+
14 
+
15 
+    <style>
16 
+        html,
17 
+        body {
18 
+            height: 370px;
19 
+            padding: 0;
20 
+            margin: 0;
21 
+        }
22 
+
23 
+        #map {
24 
+            height: 360px;
25 
+            width: 300px;
26 
+            overflow: hidden;
27 
+            float: left;
28 
+            border: thin solid #333;
29 
+        }
30 
+
31 
+        #capture {
32 
+            height: 360px;
33 
+            width: 480px;
34 
+            overflow: hidden;
35 
+            float: left;
36 
+            background-color: #ECECFB;
37 
+            border: thin solid #333;
38 
+            border-left: none;
39 
+        }
40 
+
41 
+        #pdfViewer {
42 
+            width: 100%;
43 
+            height: 600px;
44 
+        }
45 
+    </style>
46 
+
47 
+    <style>
48 
+        /* CSS */
49 
+        .button-23 {
50 
+            background-color: #FFFFFF;
51 
+            border: 1px solid #222222;
52 
+            border-radius: 8px;
53 
+            box-sizing: border-box;
54 
+            color: #222222;
55 
+            cursor: pointer;
56 
+            display: inline-block;
57 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
58 
+            font-size: 16px;
59 
+            font-weight: 600;
60 
+            line-height: 20px;
61 
+            margin: 0;
62 
+            outline: none;
63 
+            padding: 13px 23px;
64 
+            position: relative;
65 
+            text-align: center;
66 
+            text-decoration: none;
67 
+            touch-action: manipulation;
68 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
69 
+            user-select: none;
70 
+            -webkit-user-select: none;
71 
+            width: auto;
72 
+        }
73 
+
74 
+        .button-23:focus-visible {
75 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
76 
+            transition: box-shadow .2s;
77 
+        }
78 
+
79 
+        .button-23:active {
80 
+            background-color: #F7F7F7;
81 
+            border-color: #000000;
82 
+            transform: scale(.96);
83 
+        }
84 
+
85 
+        .button-23:disabled {
86 
+            border-color: #DDDDDD;
87 
+            color: #DDDDDD;
88 
+            cursor: not-allowed;
89 
+            opacity: 1;
90 
+        }
91 
+
92 
+        .map-svg {
93 
+            display: block;
94 
+            margin: 0 auto;
95 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
96 
+
97 
+            a {
98 
+                transition: all 1s;
99 
+                transform-origin: 50% 50%;
100 
+                text-decoration: none;
101 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
102 
+
103 
+                @media only screen and (min-width: 992px) {
104 
+
105 
+                    polygon,
106 
+                    &:hover {
107 
+                        cursor: pointer;
108 
+                        transform: scale(1.05);
109 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
110 
+
111 
+                        .st0 {
112 
+                            fill: $dark-default;
113 
+                        }
114 
+                    }
115 
+                }
116 
+            }
117 
+
118 
+            .pahang-barat {
119 
+                fill: #427bba;
120 
+            }
121 
+
122 
+            .pahang-tengah {
123 
+                fill: #144172;
124 
+            }
125 
+
126 
+            .pahang-timur {
127 
+                fill: #0c6088;
128 
+            }
129 
+
130 
+            .label-text {
131 
+                font-size: 35px;
132 
+                fill: white;
133 
+                transform: translate(0,
134 
+                        3px);
135 
+                /* adjust vertical position to centre text */
136 
+            }
137 
+
138 
+            .label-text-cameron {
139 
+                font-size: 20px;
140 
+                fill: white;
141 
+                transform: translate(0,
142 
+                        3px);
143 
+                /* adjust vertical position to centre text */
144 
+            }
145 
+
146 
+
147 
+        }
148 
+    </style>
149 
+
150 
+</head>
151 
+
152 
+<body>
153 
+
154 
+    <section class="section" style="max-height: 100vh;">
155 
+
156 
+        <div class=""
157 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
158 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../details/detail_hsd5625.html"><i
159 
+                        class="fas fa-chevron-left"></i></a></h6>
160 
+            <h6 style="color: white;">Pekan</h6>
161 
+        </div>
162 
+
163 
+        <!-- <div class="text-center pt-5"
164 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
165 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
166 
+
167 
+        </div> -->
168 
+
169 
+        <div class="text-center pt-1 pb-5"
170 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
171 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
172 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
173 
+
174 
+                <!-- <div id="capture"></div> -->
175 
+                <div id="pdfViewer"></div>
176 
+
177 
+
178 
+
179 
+            </div>
180 
+        </div>
181 
+
182 
+
183 
+
184 
+
185 
+
186 
+
187 
+
188 
+
189 
+
190 
+        <script src="../js/jquery-3.7.1.js" defer></script>
191 
+
192 
+        <script src="../js/pdfjs-viewer.js" defer></script>
193 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
194 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
195 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
196 
+
197 
+    </section>
198 
+
199 
+
200 
+    <!-- <div id="map"></div> -->
201 
+
202 
+    <script>
203 
+        var map;
204 
+        var src = 'https://file.io/t3IwR1hlxwkZ';
205 
+
206 
+        function initMap() {
207 
+            map = new google.maps.Map(document.getElementById('map'), {
208 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
209 
+                zoom: 2,
210 
+                mapTypeId: 'satellite'
211 
+            });
212 
+
213 
+            var kmlLayer = new google.maps.KmlLayer(src, {
214 
+                suppressInfoWindows: true,
215 
+                preserveViewport: false,
216 
+                map: map
217 
+            });
218 
+        }
219 
+
220 
+        document.addEventListener('DOMContentLoaded', () => {
221 
+            // PDF.js script to render PDF
222 
+            const pdfUrl = '../HSD 5625.pdf'; // Replace with your PDF URL
223 
+            const pdfjsLib = window['pdfjs-dist/build/pdf'];
224 
+            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
225 
+
226 
+            pdfjsLib.getDocument(pdfUrl).promise.then(function (pdf) {
227 
+                pdf.getPage(1).then(function (page) {
228 
+                    const scale = 1.5;
229 
+                    const viewport = page.getViewport({ scale });
230 
+
231 
+                    const canvas = document.createElement('canvas');
232 
+                    const context = canvas.getContext('2d');
233 
+                    canvas.height = viewport.height;
234 
+                    canvas.width = viewport.width;
235 
+
236 
+                    const renderContext = {
237 
+                        canvasContext: context,
238 
+                        viewport: viewport
239 
+                    };
240 
+
241 
+                    page.render(renderContext);
242 
+                    document.getElementById('pdfViewer').appendChild(canvas);
243 
+                });
244 
+            });
245 
+
246 
+        })
247 
+
248 
+    </script>
249 
+    <script async
250 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
251 
+        </script>
252 
+
253 
+</body>
254 
+
255 
+</html>

+ 255
- 0
pdf_pages/view_pdf_hsd5627.html Переглянути файл 

@@ -0,0 +1,255 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
11 
+        integrity="sha512-abc123..." crossorigin="anonymous" />
12 
+
13 
+
14 
+
15 
+    <style>
16 
+        html,
17 
+        body {
18 
+            height: 370px;
19 
+            padding: 0;
20 
+            margin: 0;
21 
+        }
22 
+
23 
+        #map {
24 
+            height: 360px;
25 
+            width: 300px;
26 
+            overflow: hidden;
27 
+            float: left;
28 
+            border: thin solid #333;
29 
+        }
30 
+
31 
+        #capture {
32 
+            height: 360px;
33 
+            width: 480px;
34 
+            overflow: hidden;
35 
+            float: left;
36 
+            background-color: #ECECFB;
37 
+            border: thin solid #333;
38 
+            border-left: none;
39 
+        }
40 
+
41 
+        #pdfViewer {
42 
+            width: 100%;
43 
+            height: 600px;
44 
+        }
45 
+    </style>
46 
+
47 
+    <style>
48 
+        /* CSS */
49 
+        .button-23 {
50 
+            background-color: #FFFFFF;
51 
+            border: 1px solid #222222;
52 
+            border-radius: 8px;
53 
+            box-sizing: border-box;
54 
+            color: #222222;
55 
+            cursor: pointer;
56 
+            display: inline-block;
57 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
58 
+            font-size: 16px;
59 
+            font-weight: 600;
60 
+            line-height: 20px;
61 
+            margin: 0;
62 
+            outline: none;
63 
+            padding: 13px 23px;
64 
+            position: relative;
65 
+            text-align: center;
66 
+            text-decoration: none;
67 
+            touch-action: manipulation;
68 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
69 
+            user-select: none;
70 
+            -webkit-user-select: none;
71 
+            width: auto;
72 
+        }
73 
+
74 
+        .button-23:focus-visible {
75 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
76 
+            transition: box-shadow .2s;
77 
+        }
78 
+
79 
+        .button-23:active {
80 
+            background-color: #F7F7F7;
81 
+            border-color: #000000;
82 
+            transform: scale(.96);
83 
+        }
84 
+
85 
+        .button-23:disabled {
86 
+            border-color: #DDDDDD;
87 
+            color: #DDDDDD;
88 
+            cursor: not-allowed;
89 
+            opacity: 1;
90 
+        }
91 
+
92 
+        .map-svg {
93 
+            display: block;
94 
+            margin: 0 auto;
95 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
96 
+
97 
+            a {
98 
+                transition: all 1s;
99 
+                transform-origin: 50% 50%;
100 
+                text-decoration: none;
101 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
102 
+
103 
+                @media only screen and (min-width: 992px) {
104 
+
105 
+                    polygon,
106 
+                    &:hover {
107 
+                        cursor: pointer;
108 
+                        transform: scale(1.05);
109 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
110 
+
111 
+                        .st0 {
112 
+                            fill: $dark-default;
113 
+                        }
114 
+                    }
115 
+                }
116 
+            }
117 
+
118 
+            .pahang-barat {
119 
+                fill: #427bba;
120 
+            }
121 
+
122 
+            .pahang-tengah {
123 
+                fill: #144172;
124 
+            }
125 
+
126 
+            .pahang-timur {
127 
+                fill: #0c6088;
128 
+            }
129 
+
130 
+            .label-text {
131 
+                font-size: 35px;
132 
+                fill: white;
133 
+                transform: translate(0,
134 
+                        3px);
135 
+                /* adjust vertical position to centre text */
136 
+            }
137 
+
138 
+            .label-text-cameron {
139 
+                font-size: 20px;
140 
+                fill: white;
141 
+                transform: translate(0,
142 
+                        3px);
143 
+                /* adjust vertical position to centre text */
144 
+            }
145 
+
146 
+
147 
+        }
148 
+    </style>
149 
+
150 
+</head>
151 
+
152 
+<body>
153 
+
154 
+    <section class="section" style="max-height: 100vh;">
155 
+
156 
+        <div class=""
157 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
158 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../details/detail_hsd5627.html"><i
159 
+                        class="fas fa-chevron-left"></i></a></h6>
160 
+            <h6 style="color: white;">Pekan</h6>
161 
+        </div>
162 
+
163 
+        <!-- <div class="text-center pt-5"
164 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
165 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
166 
+
167 
+        </div> -->
168 
+
169 
+        <div class="text-center pt-1 pb-5"
170 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
171 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
172 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
173 
+
174 
+                <!-- <div id="capture"></div> -->
175 
+                <div id="pdfViewer"></div>
176 
+
177 
+
178 
+
179 
+            </div>
180 
+        </div>
181 
+
182 
+
183 
+
184 
+
185 
+
186 
+
187 
+
188 
+
189 
+
190 
+        <script src="../js/jquery-3.7.1.js" defer></script>
191 
+
192 
+        <script src="../js/pdfjs-viewer.js" defer></script>
193 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
194 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
195 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
196 
+
197 
+    </section>
198 
+
199 
+
200 
+    <!-- <div id="map"></div> -->
201 
+
202 
+    <script>
203 
+        var map;
204 
+        var src = 'https://file.io/t3IwR1hlxwkZ';
205 
+
206 
+        function initMap() {
207 
+            map = new google.maps.Map(document.getElementById('map'), {
208 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
209 
+                zoom: 2,
210 
+                mapTypeId: 'satellite'
211 
+            });
212 
+
213 
+            var kmlLayer = new google.maps.KmlLayer(src, {
214 
+                suppressInfoWindows: true,
215 
+                preserveViewport: false,
216 
+                map: map
217 
+            });
218 
+        }
219 
+
220 
+        document.addEventListener('DOMContentLoaded', () => {
221 
+            // PDF.js script to render PDF
222 
+            const pdfUrl = '../HSD 5627.pdf'; // Replace with your PDF URL
223 
+            const pdfjsLib = window['pdfjs-dist/build/pdf'];
224 
+            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
225 
+
226 
+            pdfjsLib.getDocument(pdfUrl).promise.then(function (pdf) {
227 
+                pdf.getPage(1).then(function (page) {
228 
+                    const scale = 1.5;
229 
+                    const viewport = page.getViewport({ scale });
230 
+
231 
+                    const canvas = document.createElement('canvas');
232 
+                    const context = canvas.getContext('2d');
233 
+                    canvas.height = viewport.height;
234 
+                    canvas.width = viewport.width;
235 
+
236 
+                    const renderContext = {
237 
+                        canvasContext: context,
238 
+                        viewport: viewport
239 
+                    };
240 
+
241 
+                    page.render(renderContext);
242 
+                    document.getElementById('pdfViewer').appendChild(canvas);
243 
+                });
244 
+            });
245 
+
246 
+        })
247 
+
248 
+    </script>
249 
+    <script async
250 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
251 
+        </script>
252 
+
253 
+</body>
254 
+
255 
+</html>

+ 255
- 0
pdf_pages/view_pdf_hsd5714.html Переглянути файл 

@@ -0,0 +1,255 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
11 
+        integrity="sha512-abc123..." crossorigin="anonymous" />
12 
+
13 
+
14 
+
15 
+    <style>
16 
+        html,
17 
+        body {
18 
+            height: 370px;
19 
+            padding: 0;
20 
+            margin: 0;
21 
+        }
22 
+
23 
+        #map {
24 
+            height: 360px;
25 
+            width: 300px;
26 
+            overflow: hidden;
27 
+            float: left;
28 
+            border: thin solid #333;
29 
+        }
30 
+
31 
+        #capture {
32 
+            height: 360px;
33 
+            width: 480px;
34 
+            overflow: hidden;
35 
+            float: left;
36 
+            background-color: #ECECFB;
37 
+            border: thin solid #333;
38 
+            border-left: none;
39 
+        }
40 
+
41 
+        #pdfViewer {
42 
+            width: 100%;
43 
+            height: 600px;
44 
+        }
45 
+    </style>
46 
+
47 
+    <style>
48 
+        /* CSS */
49 
+        .button-23 {
50 
+            background-color: #FFFFFF;
51 
+            border: 1px solid #222222;
52 
+            border-radius: 8px;
53 
+            box-sizing: border-box;
54 
+            color: #222222;
55 
+            cursor: pointer;
56 
+            display: inline-block;
57 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
58 
+            font-size: 16px;
59 
+            font-weight: 600;
60 
+            line-height: 20px;
61 
+            margin: 0;
62 
+            outline: none;
63 
+            padding: 13px 23px;
64 
+            position: relative;
65 
+            text-align: center;
66 
+            text-decoration: none;
67 
+            touch-action: manipulation;
68 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
69 
+            user-select: none;
70 
+            -webkit-user-select: none;
71 
+            width: auto;
72 
+        }
73 
+
74 
+        .button-23:focus-visible {
75 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
76 
+            transition: box-shadow .2s;
77 
+        }
78 
+
79 
+        .button-23:active {
80 
+            background-color: #F7F7F7;
81 
+            border-color: #000000;
82 
+            transform: scale(.96);
83 
+        }
84 
+
85 
+        .button-23:disabled {
86 
+            border-color: #DDDDDD;
87 
+            color: #DDDDDD;
88 
+            cursor: not-allowed;
89 
+            opacity: 1;
90 
+        }
91 
+
92 
+        .map-svg {
93 
+            display: block;
94 
+            margin: 0 auto;
95 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
96 
+
97 
+            a {
98 
+                transition: all 1s;
99 
+                transform-origin: 50% 50%;
100 
+                text-decoration: none;
101 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
102 
+
103 
+                @media only screen and (min-width: 992px) {
104 
+
105 
+                    polygon,
106 
+                    &:hover {
107 
+                        cursor: pointer;
108 
+                        transform: scale(1.05);
109 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
110 
+
111 
+                        .st0 {
112 
+                            fill: $dark-default;
113 
+                        }
114 
+                    }
115 
+                }
116 
+            }
117 
+
118 
+            .pahang-barat {
119 
+                fill: #427bba;
120 
+            }
121 
+
122 
+            .pahang-tengah {
123 
+                fill: #144172;
124 
+            }
125 
+
126 
+            .pahang-timur {
127 
+                fill: #0c6088;
128 
+            }
129 
+
130 
+            .label-text {
131 
+                font-size: 35px;
132 
+                fill: white;
133 
+                transform: translate(0,
134 
+                        3px);
135 
+                /* adjust vertical position to centre text */
136 
+            }
137 
+
138 
+            .label-text-cameron {
139 
+                font-size: 20px;
140 
+                fill: white;
141 
+                transform: translate(0,
142 
+                        3px);
143 
+                /* adjust vertical position to centre text */
144 
+            }
145 
+
146 
+
147 
+        }
148 
+    </style>
149 
+
150 
+</head>
151 
+
152 
+<body>
153 
+
154 
+    <section class="section" style="max-height: 100vh;">
155 
+
156 
+        <div class=""
157 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
158 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../details/detail_hsd5714.html"><i
159 
+                        class="fas fa-chevron-left"></i></a></h6>
160 
+            <h6 style="color: white;">Rompin</h6>
161 
+        </div>
162 
+
163 
+        <!-- <div class="text-center pt-5"
164 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
165 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
166 
+
167 
+        </div> -->
168 
+
169 
+        <div class="text-center pt-1 pb-5"
170 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
171 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
172 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
173 
+
174 
+                <!-- <div id="capture"></div> -->
175 
+                <div id="pdfViewer"></div>
176 
+
177 
+
178 
+
179 
+            </div>
180 
+        </div>
181 
+
182 
+
183 
+
184 
+
185 
+
186 
+
187 
+
188 
+
189 
+
190 
+        <script src="../js/jquery-3.7.1.js" defer></script>
191 
+
192 
+        <script src="../js/pdfjs-viewer.js" defer></script>
193 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
194 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
195 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
196 
+
197 
+    </section>
198 
+
199 
+
200 
+    <!-- <div id="map"></div> -->
201 
+
202 
+    <script>
203 
+        var map;
204 
+        var src = 'https://file.io/t3IwR1hlxwkZ';
205 
+
206 
+        function initMap() {
207 
+            map = new google.maps.Map(document.getElementById('map'), {
208 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
209 
+                zoom: 2,
210 
+                mapTypeId: 'satellite'
211 
+            });
212 
+
213 
+            var kmlLayer = new google.maps.KmlLayer(src, {
214 
+                suppressInfoWindows: true,
215 
+                preserveViewport: false,
216 
+                map: map
217 
+            });
218 
+        }
219 
+
220 
+        document.addEventListener('DOMContentLoaded', () => {
221 
+            // PDF.js script to render PDF
222 
+            const pdfUrl = '../HSD 5714.pdf'; // Replace with your PDF URL
223 
+            const pdfjsLib = window['pdfjs-dist/build/pdf'];
224 
+            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
225 
+
226 
+            pdfjsLib.getDocument(pdfUrl).promise.then(function (pdf) {
227 
+                pdf.getPage(1).then(function (page) {
228 
+                    const scale = 1.5;
229 
+                    const viewport = page.getViewport({ scale });
230 
+
231 
+                    const canvas = document.createElement('canvas');
232 
+                    const context = canvas.getContext('2d');
233 
+                    canvas.height = viewport.height;
234 
+                    canvas.width = viewport.width;
235 
+
236 
+                    const renderContext = {
237 
+                        canvasContext: context,
238 
+                        viewport: viewport
239 
+                    };
240 
+
241 
+                    page.render(renderContext);
242 
+                    document.getElementById('pdfViewer').appendChild(canvas);
243 
+                });
244 
+            });
245 
+
246 
+        })
247 
+
248 
+    </script>
249 
+    <script async
250 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
251 
+        </script>
252 
+
253 
+</body>
254 
+
255 
+</html>

+ 255
- 0
pdf_pages/view_pdf_hsd5715.html Переглянути файл 

@@ -0,0 +1,255 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
11 
+        integrity="sha512-abc123..." crossorigin="anonymous" />
12 
+
13 
+
14 
+
15 
+    <style>
16 
+        html,
17 
+        body {
18 
+            height: 370px;
19 
+            padding: 0;
20 
+            margin: 0;
21 
+        }
22 
+
23 
+        #map {
24 
+            height: 360px;
25 
+            width: 300px;
26 
+            overflow: hidden;
27 
+            float: left;
28 
+            border: thin solid #333;
29 
+        }
30 
+
31 
+        #capture {
32 
+            height: 360px;
33 
+            width: 480px;
34 
+            overflow: hidden;
35 
+            float: left;
36 
+            background-color: #ECECFB;
37 
+            border: thin solid #333;
38 
+            border-left: none;
39 
+        }
40 
+
41 
+        #pdfViewer {
42 
+            width: 100%;
43 
+            height: 600px;
44 
+        }
45 
+    </style>
46 
+
47 
+    <style>
48 
+        /* CSS */
49 
+        .button-23 {
50 
+            background-color: #FFFFFF;
51 
+            border: 1px solid #222222;
52 
+            border-radius: 8px;
53 
+            box-sizing: border-box;
54 
+            color: #222222;
55 
+            cursor: pointer;
56 
+            display: inline-block;
57 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
58 
+            font-size: 16px;
59 
+            font-weight: 600;
60 
+            line-height: 20px;
61 
+            margin: 0;
62 
+            outline: none;
63 
+            padding: 13px 23px;
64 
+            position: relative;
65 
+            text-align: center;
66 
+            text-decoration: none;
67 
+            touch-action: manipulation;
68 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
69 
+            user-select: none;
70 
+            -webkit-user-select: none;
71 
+            width: auto;
72 
+        }
73 
+
74 
+        .button-23:focus-visible {
75 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
76 
+            transition: box-shadow .2s;
77 
+        }
78 
+
79 
+        .button-23:active {
80 
+            background-color: #F7F7F7;
81 
+            border-color: #000000;
82 
+            transform: scale(.96);
83 
+        }
84 
+
85 
+        .button-23:disabled {
86 
+            border-color: #DDDDDD;
87 
+            color: #DDDDDD;
88 
+            cursor: not-allowed;
89 
+            opacity: 1;
90 
+        }
91 
+
92 
+        .map-svg {
93 
+            display: block;
94 
+            margin: 0 auto;
95 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
96 
+
97 
+            a {
98 
+                transition: all 1s;
99 
+                transform-origin: 50% 50%;
100 
+                text-decoration: none;
101 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
102 
+
103 
+                @media only screen and (min-width: 992px) {
104 
+
105 
+                    polygon,
106 
+                    &:hover {
107 
+                        cursor: pointer;
108 
+                        transform: scale(1.05);
109 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
110 
+
111 
+                        .st0 {
112 
+                            fill: $dark-default;
113 
+                        }
114 
+                    }
115 
+                }
116 
+            }
117 
+
118 
+            .pahang-barat {
119 
+                fill: #427bba;
120 
+            }
121 
+
122 
+            .pahang-tengah {
123 
+                fill: #144172;
124 
+            }
125 
+
126 
+            .pahang-timur {
127 
+                fill: #0c6088;
128 
+            }
129 
+
130 
+            .label-text {
131 
+                font-size: 35px;
132 
+                fill: white;
133 
+                transform: translate(0,
134 
+                        3px);
135 
+                /* adjust vertical position to centre text */
136 
+            }
137 
+
138 
+            .label-text-cameron {
139 
+                font-size: 20px;
140 
+                fill: white;
141 
+                transform: translate(0,
142 
+                        3px);
143 
+                /* adjust vertical position to centre text */
144 
+            }
145 
+
146 
+
147 
+        }
148 
+    </style>
149 
+
150 
+</head>
151 
+
152 
+<body>
153 
+
154 
+    <section class="section" style="max-height: 100vh;">
155 
+
156 
+        <div class=""
157 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
158 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../details/detail_hsd5715.html"><i
159 
+                        class="fas fa-chevron-left"></i></a></h6>
160 
+            <h6 style="color: white;">Rompin</h6>
161 
+        </div>
162 
+
163 
+        <!-- <div class="text-center pt-5"
164 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
165 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
166 
+
167 
+        </div> -->
168 
+
169 
+        <div class="text-center pt-1 pb-5"
170 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
171 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
172 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
173 
+
174 
+                <!-- <div id="capture"></div> -->
175 
+                <div id="pdfViewer"></div>
176 
+
177 
+
178 
+
179 
+            </div>
180 
+        </div>
181 
+
182 
+
183 
+
184 
+
185 
+
186 
+
187 
+
188 
+
189 
+
190 
+        <script src="../js/jquery-3.7.1.js" defer></script>
191 
+
192 
+        <script src="../js/pdfjs-viewer.js" defer></script>
193 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
194 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
195 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
196 
+
197 
+    </section>
198 
+
199 
+
200 
+    <!-- <div id="map"></div> -->
201 
+
202 
+    <script>
203 
+        var map;
204 
+        var src = 'https://file.io/t3IwR1hlxwkZ';
205 
+
206 
+        function initMap() {
207 
+            map = new google.maps.Map(document.getElementById('map'), {
208 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
209 
+                zoom: 2,
210 
+                mapTypeId: 'satellite'
211 
+            });
212 
+
213 
+            var kmlLayer = new google.maps.KmlLayer(src, {
214 
+                suppressInfoWindows: true,
215 
+                preserveViewport: false,
216 
+                map: map
217 
+            });
218 
+        }
219 
+
220 
+        document.addEventListener('DOMContentLoaded', () => {
221 
+            // PDF.js script to render PDF
222 
+            const pdfUrl = '../HSD 5715.pdf'; // Replace with your PDF URL
223 
+            const pdfjsLib = window['pdfjs-dist/build/pdf'];
224 
+            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
225 
+
226 
+            pdfjsLib.getDocument(pdfUrl).promise.then(function (pdf) {
227 
+                pdf.getPage(1).then(function (page) {
228 
+                    const scale = 1.5;
229 
+                    const viewport = page.getViewport({ scale });
230 
+
231 
+                    const canvas = document.createElement('canvas');
232 
+                    const context = canvas.getContext('2d');
233 
+                    canvas.height = viewport.height;
234 
+                    canvas.width = viewport.width;
235 
+
236 
+                    const renderContext = {
237 
+                        canvasContext: context,
238 
+                        viewport: viewport
239 
+                    };
240 
+
241 
+                    page.render(renderContext);
242 
+                    document.getElementById('pdfViewer').appendChild(canvas);
243 
+                });
244 
+            });
245 
+
246 
+        })
247 
+
248 
+    </script>
249 
+    <script async
250 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
251 
+        </script>
252 
+
253 
+</body>
254 
+
255 
+</html>

+ 255
- 0
pdf_pages/view_pdf_hsd5734.html Переглянути файл 

@@ -0,0 +1,255 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
11 
+        integrity="sha512-abc123..." crossorigin="anonymous" />
12 
+
13 
+
14 
+
15 
+    <style>
16 
+        html,
17 
+        body {
18 
+            height: 370px;
19 
+            padding: 0;
20 
+            margin: 0;
21 
+        }
22 
+
23 
+        #map {
24 
+            height: 360px;
25 
+            width: 300px;
26 
+            overflow: hidden;
27 
+            float: left;
28 
+            border: thin solid #333;
29 
+        }
30 
+
31 
+        #capture {
32 
+            height: 360px;
33 
+            width: 480px;
34 
+            overflow: hidden;
35 
+            float: left;
36 
+            background-color: #ECECFB;
37 
+            border: thin solid #333;
38 
+            border-left: none;
39 
+        }
40 
+
41 
+        #pdfViewer {
42 
+            width: 100%;
43 
+            height: 600px;
44 
+        }
45 
+    </style>
46 
+
47 
+    <style>
48 
+        /* CSS */
49 
+        .button-23 {
50 
+            background-color: #FFFFFF;
51 
+            border: 1px solid #222222;
52 
+            border-radius: 8px;
53 
+            box-sizing: border-box;
54 
+            color: #222222;
55 
+            cursor: pointer;
56 
+            display: inline-block;
57 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
58 
+            font-size: 16px;
59 
+            font-weight: 600;
60 
+            line-height: 20px;
61 
+            margin: 0;
62 
+            outline: none;
63 
+            padding: 13px 23px;
64 
+            position: relative;
65 
+            text-align: center;
66 
+            text-decoration: none;
67 
+            touch-action: manipulation;
68 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
69 
+            user-select: none;
70 
+            -webkit-user-select: none;
71 
+            width: auto;
72 
+        }
73 
+
74 
+        .button-23:focus-visible {
75 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
76 
+            transition: box-shadow .2s;
77 
+        }
78 
+
79 
+        .button-23:active {
80 
+            background-color: #F7F7F7;
81 
+            border-color: #000000;
82 
+            transform: scale(.96);
83 
+        }
84 
+
85 
+        .button-23:disabled {
86 
+            border-color: #DDDDDD;
87 
+            color: #DDDDDD;
88 
+            cursor: not-allowed;
89 
+            opacity: 1;
90 
+        }
91 
+
92 
+        .map-svg {
93 
+            display: block;
94 
+            margin: 0 auto;
95 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
96 
+
97 
+            a {
98 
+                transition: all 1s;
99 
+                transform-origin: 50% 50%;
100 
+                text-decoration: none;
101 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
102 
+
103 
+                @media only screen and (min-width: 992px) {
104 
+
105 
+                    polygon,
106 
+                    &:hover {
107 
+                        cursor: pointer;
108 
+                        transform: scale(1.05);
109 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
110 
+
111 
+                        .st0 {
112 
+                            fill: $dark-default;
113 
+                        }
114 
+                    }
115 
+                }
116 
+            }
117 
+
118 
+            .pahang-barat {
119 
+                fill: #427bba;
120 
+            }
121 
+
122 
+            .pahang-tengah {
123 
+                fill: #144172;
124 
+            }
125 
+
126 
+            .pahang-timur {
127 
+                fill: #0c6088;
128 
+            }
129 
+
130 
+            .label-text {
131 
+                font-size: 35px;
132 
+                fill: white;
133 
+                transform: translate(0,
134 
+                        3px);
135 
+                /* adjust vertical position to centre text */
136 
+            }
137 
+
138 
+            .label-text-cameron {
139 
+                font-size: 20px;
140 
+                fill: white;
141 
+                transform: translate(0,
142 
+                        3px);
143 
+                /* adjust vertical position to centre text */
144 
+            }
145 
+
146 
+
147 
+        }
148 
+    </style>
149 
+
150 
+</head>
151 
+
152 
+<body>
153 
+
154 
+    <section class="section" style="max-height: 100vh;">
155 
+
156 
+        <div class=""
157 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
158 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../details/detail_hsd5734.html"><i
159 
+                        class="fas fa-chevron-left"></i></a></h6>
160 
+            <h6 style="color: white;">Rompin</h6>
161 
+        </div>
162 
+
163 
+        <!-- <div class="text-center pt-5"
164 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
165 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
166 
+
167 
+        </div> -->
168 
+
169 
+        <div class="text-center pt-1 pb-5"
170 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
171 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
172 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
173 
+
174 
+                <!-- <div id="capture"></div> -->
175 
+                <div id="pdfViewer"></div>
176 
+
177 
+
178 
+
179 
+            </div>
180 
+        </div>
181 
+
182 
+
183 
+
184 
+
185 
+
186 
+
187 
+
188 
+
189 
+
190 
+        <script src="../js/jquery-3.7.1.js" defer></script>
191 
+
192 
+        <script src="../js/pdfjs-viewer.js" defer></script>
193 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
194 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
195 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
196 
+
197 
+    </section>
198 
+
199 
+
200 
+    <!-- <div id="map"></div> -->
201 
+
202 
+    <script>
203 
+        var map;
204 
+        var src = 'https://file.io/t3IwR1hlxwkZ';
205 
+
206 
+        function initMap() {
207 
+            map = new google.maps.Map(document.getElementById('map'), {
208 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
209 
+                zoom: 2,
210 
+                mapTypeId: 'satellite'
211 
+            });
212 
+
213 
+            var kmlLayer = new google.maps.KmlLayer(src, {
214 
+                suppressInfoWindows: true,
215 
+                preserveViewport: false,
216 
+                map: map
217 
+            });
218 
+        }
219 
+
220 
+        document.addEventListener('DOMContentLoaded', () => {
221 
+            // PDF.js script to render PDF
222 
+            const pdfUrl = '../HSD 5734.pdf'; // Replace with your PDF URL
223 
+            const pdfjsLib = window['pdfjs-dist/build/pdf'];
224 
+            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
225 
+
226 
+            pdfjsLib.getDocument(pdfUrl).promise.then(function (pdf) {
227 
+                pdf.getPage(1).then(function (page) {
228 
+                    const scale = 1.5;
229 
+                    const viewport = page.getViewport({ scale });
230 
+
231 
+                    const canvas = document.createElement('canvas');
232 
+                    const context = canvas.getContext('2d');
233 
+                    canvas.height = viewport.height;
234 
+                    canvas.width = viewport.width;
235 
+
236 
+                    const renderContext = {
237 
+                        canvasContext: context,
238 
+                        viewport: viewport
239 
+                    };
240 
+
241 
+                    page.render(renderContext);
242 
+                    document.getElementById('pdfViewer').appendChild(canvas);
243 
+                });
244 
+            });
245 
+
246 
+        })
247 
+
248 
+    </script>
249 
+    <script async
250 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
251 
+        </script>
252 
+
253 
+</body>
254 
+
255 
+</html>

+ 255
- 0
pdf_pages/view_pdf_hsd5738.html Переглянути файл 

@@ -0,0 +1,255 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
11 
+        integrity="sha512-abc123..." crossorigin="anonymous" />
12 
+
13 
+
14 
+
15 
+    <style>
16 
+        html,
17 
+        body {
18 
+            height: 370px;
19 
+            padding: 0;
20 
+            margin: 0;
21 
+        }
22 
+
23 
+        #map {
24 
+            height: 360px;
25 
+            width: 300px;
26 
+            overflow: hidden;
27 
+            float: left;
28 
+            border: thin solid #333;
29 
+        }
30 
+
31 
+        #capture {
32 
+            height: 360px;
33 
+            width: 480px;
34 
+            overflow: hidden;
35 
+            float: left;
36 
+            background-color: #ECECFB;
37 
+            border: thin solid #333;
38 
+            border-left: none;
39 
+        }
40 
+
41 
+        #pdfViewer {
42 
+            width: 100%;
43 
+            height: 600px;
44 
+        }
45 
+    </style>
46 
+
47 
+    <style>
48 
+        /* CSS */
49 
+        .button-23 {
50 
+            background-color: #FFFFFF;
51 
+            border: 1px solid #222222;
52 
+            border-radius: 8px;
53 
+            box-sizing: border-box;
54 
+            color: #222222;
55 
+            cursor: pointer;
56 
+            display: inline-block;
57 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
58 
+            font-size: 16px;
59 
+            font-weight: 600;
60 
+            line-height: 20px;
61 
+            margin: 0;
62 
+            outline: none;
63 
+            padding: 13px 23px;
64 
+            position: relative;
65 
+            text-align: center;
66 
+            text-decoration: none;
67 
+            touch-action: manipulation;
68 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
69 
+            user-select: none;
70 
+            -webkit-user-select: none;
71 
+            width: auto;
72 
+        }
73 
+
74 
+        .button-23:focus-visible {
75 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
76 
+            transition: box-shadow .2s;
77 
+        }
78 
+
79 
+        .button-23:active {
80 
+            background-color: #F7F7F7;
81 
+            border-color: #000000;
82 
+            transform: scale(.96);
83 
+        }
84 
+
85 
+        .button-23:disabled {
86 
+            border-color: #DDDDDD;
87 
+            color: #DDDDDD;
88 
+            cursor: not-allowed;
89 
+            opacity: 1;
90 
+        }
91 
+
92 
+        .map-svg {
93 
+            display: block;
94 
+            margin: 0 auto;
95 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
96 
+
97 
+            a {
98 
+                transition: all 1s;
99 
+                transform-origin: 50% 50%;
100 
+                text-decoration: none;
101 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
102 
+
103 
+                @media only screen and (min-width: 992px) {
104 
+
105 
+                    polygon,
106 
+                    &:hover {
107 
+                        cursor: pointer;
108 
+                        transform: scale(1.05);
109 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
110 
+
111 
+                        .st0 {
112 
+                            fill: $dark-default;
113 
+                        }
114 
+                    }
115 
+                }
116 
+            }
117 
+
118 
+            .pahang-barat {
119 
+                fill: #427bba;
120 
+            }
121 
+
122 
+            .pahang-tengah {
123 
+                fill: #144172;
124 
+            }
125 
+
126 
+            .pahang-timur {
127 
+                fill: #0c6088;
128 
+            }
129 
+
130 
+            .label-text {
131 
+                font-size: 35px;
132 
+                fill: white;
133 
+                transform: translate(0,
134 
+                        3px);
135 
+                /* adjust vertical position to centre text */
136 
+            }
137 
+
138 
+            .label-text-cameron {
139 
+                font-size: 20px;
140 
+                fill: white;
141 
+                transform: translate(0,
142 
+                        3px);
143 
+                /* adjust vertical position to centre text */
144 
+            }
145 
+
146 
+
147 
+        }
148 
+    </style>
149 
+
150 
+</head>
151 
+
152 
+<body>
153 
+
154 
+    <section class="section" style="max-height: 100vh;">
155 
+
156 
+        <div class=""
157 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
158 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../details/detail_hsd5738.html"><i
159 
+                        class="fas fa-chevron-left"></i></a></h6>
160 
+            <h6 style="color: white;">Rompin</h6>
161 
+        </div>
162 
+
163 
+        <!-- <div class="text-center pt-5"
164 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
165 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
166 
+
167 
+        </div> -->
168 
+
169 
+        <div class="text-center pt-1 pb-5"
170 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
171 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
172 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
173 
+
174 
+                <!-- <div id="capture"></div> -->
175 
+                <div id="pdfViewer"></div>
176 
+
177 
+
178 
+
179 
+            </div>
180 
+        </div>
181 
+
182 
+
183 
+
184 
+
185 
+
186 
+
187 
+
188 
+
189 
+
190 
+        <script src="../js/jquery-3.7.1.js" defer></script>
191 
+
192 
+        <script src="../js/pdfjs-viewer.js" defer></script>
193 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
194 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
195 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
196 
+
197 
+    </section>
198 
+
199 
+
200 
+    <!-- <div id="map"></div> -->
201 
+
202 
+    <script>
203 
+        var map;
204 
+        var src = 'https://file.io/t3IwR1hlxwkZ';
205 
+
206 
+        function initMap() {
207 
+            map = new google.maps.Map(document.getElementById('map'), {
208 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
209 
+                zoom: 2,
210 
+                mapTypeId: 'satellite'
211 
+            });
212 
+
213 
+            var kmlLayer = new google.maps.KmlLayer(src, {
214 
+                suppressInfoWindows: true,
215 
+                preserveViewport: false,
216 
+                map: map
217 
+            });
218 
+        }
219 
+
220 
+        document.addEventListener('DOMContentLoaded', () => {
221 
+            // PDF.js script to render PDF
222 
+            const pdfUrl = '../HSD2384.pdf'; // Replace with your PDF URL
223 
+            const pdfjsLib = window['pdfjs-dist/build/pdf'];
224 
+            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
225 
+
226 
+            pdfjsLib.getDocument(pdfUrl).promise.then(function (pdf) {
227 
+                pdf.getPage(1).then(function (page) {
228 
+                    const scale = 1.5;
229 
+                    const viewport = page.getViewport({ scale });
230 
+
231 
+                    const canvas = document.createElement('canvas');
232 
+                    const context = canvas.getContext('2d');
233 
+                    canvas.height = viewport.height;
234 
+                    canvas.width = viewport.width;
235 
+
236 
+                    const renderContext = {
237 
+                        canvasContext: context,
238 
+                        viewport: viewport
239 
+                    };
240 
+
241 
+                    page.render(renderContext);
242 
+                    document.getElementById('pdfViewer').appendChild(canvas);
243 
+                });
244 
+            });
245 
+
246 
+        })
247 
+
248 
+    </script>
249 
+    <script async
250 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
251 
+        </script>
252 
+
253 
+</body>
254 
+
255 
+</html>

+ 255
- 0
pdf_pages/view_pdf_hsd5745.html Переглянути файл 

@@ -0,0 +1,255 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
11 
+        integrity="sha512-abc123..." crossorigin="anonymous" />
12 
+
13 
+
14 
+
15 
+    <style>
16 
+        html,
17 
+        body {
18 
+            height: 370px;
19 
+            padding: 0;
20 
+            margin: 0;
21 
+        }
22 
+
23 
+        #map {
24 
+            height: 360px;
25 
+            width: 300px;
26 
+            overflow: hidden;
27 
+            float: left;
28 
+            border: thin solid #333;
29 
+        }
30 
+
31 
+        #capture {
32 
+            height: 360px;
33 
+            width: 480px;
34 
+            overflow: hidden;
35 
+            float: left;
36 
+            background-color: #ECECFB;
37 
+            border: thin solid #333;
38 
+            border-left: none;
39 
+        }
40 
+
41 
+        #pdfViewer {
42 
+            width: 100%;
43 
+            height: 600px;
44 
+        }
45 
+    </style>
46 
+
47 
+    <style>
48 
+        /* CSS */
49 
+        .button-23 {
50 
+            background-color: #FFFFFF;
51 
+            border: 1px solid #222222;
52 
+            border-radius: 8px;
53 
+            box-sizing: border-box;
54 
+            color: #222222;
55 
+            cursor: pointer;
56 
+            display: inline-block;
57 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
58 
+            font-size: 16px;
59 
+            font-weight: 600;
60 
+            line-height: 20px;
61 
+            margin: 0;
62 
+            outline: none;
63 
+            padding: 13px 23px;
64 
+            position: relative;
65 
+            text-align: center;
66 
+            text-decoration: none;
67 
+            touch-action: manipulation;
68 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
69 
+            user-select: none;
70 
+            -webkit-user-select: none;
71 
+            width: auto;
72 
+        }
73 
+
74 
+        .button-23:focus-visible {
75 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
76 
+            transition: box-shadow .2s;
77 
+        }
78 
+
79 
+        .button-23:active {
80 
+            background-color: #F7F7F7;
81 
+            border-color: #000000;
82 
+            transform: scale(.96);
83 
+        }
84 
+
85 
+        .button-23:disabled {
86 
+            border-color: #DDDDDD;
87 
+            color: #DDDDDD;
88 
+            cursor: not-allowed;
89 
+            opacity: 1;
90 
+        }
91 
+
92 
+        .map-svg {
93 
+            display: block;
94 
+            margin: 0 auto;
95 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
96 
+
97 
+            a {
98 
+                transition: all 1s;
99 
+                transform-origin: 50% 50%;
100 
+                text-decoration: none;
101 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
102 
+
103 
+                @media only screen and (min-width: 992px) {
104 
+
105 
+                    polygon,
106 
+                    &:hover {
107 
+                        cursor: pointer;
108 
+                        transform: scale(1.05);
109 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
110 
+
111 
+                        .st0 {
112 
+                            fill: $dark-default;
113 
+                        }
114 
+                    }
115 
+                }
116 
+            }
117 
+
118 
+            .pahang-barat {
119 
+                fill: #427bba;
120 
+            }
121 
+
122 
+            .pahang-tengah {
123 
+                fill: #144172;
124 
+            }
125 
+
126 
+            .pahang-timur {
127 
+                fill: #0c6088;
128 
+            }
129 
+
130 
+            .label-text {
131 
+                font-size: 35px;
132 
+                fill: white;
133 
+                transform: translate(0,
134 
+                        3px);
135 
+                /* adjust vertical position to centre text */
136 
+            }
137 
+
138 
+            .label-text-cameron {
139 
+                font-size: 20px;
140 
+                fill: white;
141 
+                transform: translate(0,
142 
+                        3px);
143 
+                /* adjust vertical position to centre text */
144 
+            }
145 
+
146 
+
147 
+        }
148 
+    </style>
149 
+
150 
+</head>
151 
+
152 
+<body>
153 
+
154 
+    <section class="section" style="max-height: 100vh;">
155 
+
156 
+        <div class=""
157 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
158 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../details/detail_hsd5745.html"><i
159 
+                        class="fas fa-chevron-left"></i></a></h6>
160 
+            <h6 style="color: white;">Rompin</h6>
161 
+        </div>
162 
+
163 
+        <!-- <div class="text-center pt-5"
164 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
165 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
166 
+
167 
+        </div> -->
168 
+
169 
+        <div class="text-center pt-1 pb-5"
170 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
171 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
172 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
173 
+
174 
+                <!-- <div id="capture"></div> -->
175 
+                <div id="pdfViewer"></div>
176 
+
177 
+
178 
+
179 
+            </div>
180 
+        </div>
181 
+
182 
+
183 
+
184 
+
185 
+
186 
+
187 
+
188 
+
189 
+
190 
+        <script src="../js/jquery-3.7.1.js" defer></script>
191 
+
192 
+        <script src="../js/pdfjs-viewer.js" defer></script>
193 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
194 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
195 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
196 
+
197 
+    </section>
198 
+
199 
+
200 
+    <!-- <div id="map"></div> -->
201 
+
202 
+    <script>
203 
+        var map;
204 
+        var src = 'https://file.io/t3IwR1hlxwkZ';
205 
+
206 
+        function initMap() {
207 
+            map = new google.maps.Map(document.getElementById('map'), {
208 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
209 
+                zoom: 2,
210 
+                mapTypeId: 'satellite'
211 
+            });
212 
+
213 
+            var kmlLayer = new google.maps.KmlLayer(src, {
214 
+                suppressInfoWindows: true,
215 
+                preserveViewport: false,
216 
+                map: map
217 
+            });
218 
+        }
219 
+
220 
+        document.addEventListener('DOMContentLoaded', () => {
221 
+            // PDF.js script to render PDF
222 
+            const pdfUrl = '../HSD 5745.pdf'; // Replace with your PDF URL
223 
+            const pdfjsLib = window['pdfjs-dist/build/pdf'];
224 
+            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
225 
+
226 
+            pdfjsLib.getDocument(pdfUrl).promise.then(function (pdf) {
227 
+                pdf.getPage(1).then(function (page) {
228 
+                    const scale = 1.5;
229 
+                    const viewport = page.getViewport({ scale });
230 
+
231 
+                    const canvas = document.createElement('canvas');
232 
+                    const context = canvas.getContext('2d');
233 
+                    canvas.height = viewport.height;
234 
+                    canvas.width = viewport.width;
235 
+
236 
+                    const renderContext = {
237 
+                        canvasContext: context,
238 
+                        viewport: viewport
239 
+                    };
240 
+
241 
+                    page.render(renderContext);
242 
+                    document.getElementById('pdfViewer').appendChild(canvas);
243 
+                });
244 
+            });
245 
+
246 
+        })
247 
+
248 
+    </script>
249 
+    <script async
250 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
251 
+        </script>
252 
+
253 
+</body>
254 
+
255 
+</html>

+ 255
- 0
pdf_pages/view_pdf_hsd5749.html Переглянути файл 

@@ -0,0 +1,255 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
11 
+        integrity="sha512-abc123..." crossorigin="anonymous" />
12 
+
13 
+
14 
+
15 
+    <style>
16 
+        html,
17 
+        body {
18 
+            height: 370px;
19 
+            padding: 0;
20 
+            margin: 0;
21 
+        }
22 
+
23 
+        #map {
24 
+            height: 360px;
25 
+            width: 300px;
26 
+            overflow: hidden;
27 
+            float: left;
28 
+            border: thin solid #333;
29 
+        }
30 
+
31 
+        #capture {
32 
+            height: 360px;
33 
+            width: 480px;
34 
+            overflow: hidden;
35 
+            float: left;
36 
+            background-color: #ECECFB;
37 
+            border: thin solid #333;
38 
+            border-left: none;
39 
+        }
40 
+
41 
+        #pdfViewer {
42 
+            width: 100%;
43 
+            height: 600px;
44 
+        }
45 
+    </style>
46 
+
47 
+    <style>
48 
+        /* CSS */
49 
+        .button-23 {
50 
+            background-color: #FFFFFF;
51 
+            border: 1px solid #222222;
52 
+            border-radius: 8px;
53 
+            box-sizing: border-box;
54 
+            color: #222222;
55 
+            cursor: pointer;
56 
+            display: inline-block;
57 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
58 
+            font-size: 16px;
59 
+            font-weight: 600;
60 
+            line-height: 20px;
61 
+            margin: 0;
62 
+            outline: none;
63 
+            padding: 13px 23px;
64 
+            position: relative;
65 
+            text-align: center;
66 
+            text-decoration: none;
67 
+            touch-action: manipulation;
68 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
69 
+            user-select: none;
70 
+            -webkit-user-select: none;
71 
+            width: auto;
72 
+        }
73 
+
74 
+        .button-23:focus-visible {
75 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
76 
+            transition: box-shadow .2s;
77 
+        }
78 
+
79 
+        .button-23:active {
80 
+            background-color: #F7F7F7;
81 
+            border-color: #000000;
82 
+            transform: scale(.96);
83 
+        }
84 
+
85 
+        .button-23:disabled {
86 
+            border-color: #DDDDDD;
87 
+            color: #DDDDDD;
88 
+            cursor: not-allowed;
89 
+            opacity: 1;
90 
+        }
91 
+
92 
+        .map-svg {
93 
+            display: block;
94 
+            margin: 0 auto;
95 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
96 
+
97 
+            a {
98 
+                transition: all 1s;
99 
+                transform-origin: 50% 50%;
100 
+                text-decoration: none;
101 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
102 
+
103 
+                @media only screen and (min-width: 992px) {
104 
+
105 
+                    polygon,
106 
+                    &:hover {
107 
+                        cursor: pointer;
108 
+                        transform: scale(1.05);
109 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
110 
+
111 
+                        .st0 {
112 
+                            fill: $dark-default;
113 
+                        }
114 
+                    }
115 
+                }
116 
+            }
117 
+
118 
+            .pahang-barat {
119 
+                fill: #427bba;
120 
+            }
121 
+
122 
+            .pahang-tengah {
123 
+                fill: #144172;
124 
+            }
125 
+
126 
+            .pahang-timur {
127 
+                fill: #0c6088;
128 
+            }
129 
+
130 
+            .label-text {
131 
+                font-size: 35px;
132 
+                fill: white;
133 
+                transform: translate(0,
134 
+                        3px);
135 
+                /* adjust vertical position to centre text */
136 
+            }
137 
+
138 
+            .label-text-cameron {
139 
+                font-size: 20px;
140 
+                fill: white;
141 
+                transform: translate(0,
142 
+                        3px);
143 
+                /* adjust vertical position to centre text */
144 
+            }
145 
+
146 
+
147 
+        }
148 
+    </style>
149 
+
150 
+</head>
151 
+
152 
+<body>
153 
+
154 
+    <section class="section" style="max-height: 100vh;">
155 
+
156 
+        <div class=""
157 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
158 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../details/detail_hsd5749.html"><i
159 
+                        class="fas fa-chevron-left"></i></a></h6>
160 
+            <h6 style="color: white;">Rompin</h6>
161 
+        </div>
162 
+
163 
+        <!-- <div class="text-center pt-5"
164 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
165 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
166 
+
167 
+        </div> -->
168 
+
169 
+        <div class="text-center pt-1 pb-5"
170 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
171 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
172 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
173 
+
174 
+                <!-- <div id="capture"></div> -->
175 
+                <div id="pdfViewer"></div>
176 
+
177 
+
178 
+
179 
+            </div>
180 
+        </div>
181 
+
182 
+
183 
+
184 
+
185 
+
186 
+
187 
+
188 
+
189 
+
190 
+        <script src="../js/jquery-3.7.1.js" defer></script>
191 
+
192 
+        <script src="../js/pdfjs-viewer.js" defer></script>
193 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
194 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
195 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
196 
+
197 
+    </section>
198 
+
199 
+
200 
+    <!-- <div id="map"></div> -->
201 
+
202 
+    <script>
203 
+        var map;
204 
+        var src = 'https://file.io/t3IwR1hlxwkZ';
205 
+
206 
+        function initMap() {
207 
+            map = new google.maps.Map(document.getElementById('map'), {
208 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
209 
+                zoom: 2,
210 
+                mapTypeId: 'satellite'
211 
+            });
212 
+
213 
+            var kmlLayer = new google.maps.KmlLayer(src, {
214 
+                suppressInfoWindows: true,
215 
+                preserveViewport: false,
216 
+                map: map
217 
+            });
218 
+        }
219 
+
220 
+        document.addEventListener('DOMContentLoaded', () => {
221 
+            // PDF.js script to render PDF
222 
+            const pdfUrl = '../HSD 5749.pdf'; // Replace with your PDF URL
223 
+            const pdfjsLib = window['pdfjs-dist/build/pdf'];
224 
+            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
225 
+
226 
+            pdfjsLib.getDocument(pdfUrl).promise.then(function (pdf) {
227 
+                pdf.getPage(1).then(function (page) {
228 
+                    const scale = 1.5;
229 
+                    const viewport = page.getViewport({ scale });
230 
+
231 
+                    const canvas = document.createElement('canvas');
232 
+                    const context = canvas.getContext('2d');
233 
+                    canvas.height = viewport.height;
234 
+                    canvas.width = viewport.width;
235 
+
236 
+                    const renderContext = {
237 
+                        canvasContext: context,
238 
+                        viewport: viewport
239 
+                    };
240 
+
241 
+                    page.render(renderContext);
242 
+                    document.getElementById('pdfViewer').appendChild(canvas);
243 
+                });
244 
+            });
245 
+
246 
+        })
247 
+
248 
+    </script>
249 
+    <script async
250 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
251 
+        </script>
252 
+
253 
+</body>
254 
+
255 
+</html>

+ 255
- 0
pdf_pages/view_pdf_hsd5761.html Переглянути файл 

@@ -0,0 +1,255 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
11 
+        integrity="sha512-abc123..." crossorigin="anonymous" />
12 
+
13 
+
14 
+
15 
+    <style>
16 
+        html,
17 
+        body {
18 
+            height: 370px;
19 
+            padding: 0;
20 
+            margin: 0;
21 
+        }
22 
+
23 
+        #map {
24 
+            height: 360px;
25 
+            width: 300px;
26 
+            overflow: hidden;
27 
+            float: left;
28 
+            border: thin solid #333;
29 
+        }
30 
+
31 
+        #capture {
32 
+            height: 360px;
33 
+            width: 480px;
34 
+            overflow: hidden;
35 
+            float: left;
36 
+            background-color: #ECECFB;
37 
+            border: thin solid #333;
38 
+            border-left: none;
39 
+        }
40 
+
41 
+        #pdfViewer {
42 
+            width: 100%;
43 
+            height: 600px;
44 
+        }
45 
+    </style>
46 
+
47 
+    <style>
48 
+        /* CSS */
49 
+        .button-23 {
50 
+            background-color: #FFFFFF;
51 
+            border: 1px solid #222222;
52 
+            border-radius: 8px;
53 
+            box-sizing: border-box;
54 
+            color: #222222;
55 
+            cursor: pointer;
56 
+            display: inline-block;
57 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
58 
+            font-size: 16px;
59 
+            font-weight: 600;
60 
+            line-height: 20px;
61 
+            margin: 0;
62 
+            outline: none;
63 
+            padding: 13px 23px;
64 
+            position: relative;
65 
+            text-align: center;
66 
+            text-decoration: none;
67 
+            touch-action: manipulation;
68 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
69 
+            user-select: none;
70 
+            -webkit-user-select: none;
71 
+            width: auto;
72 
+        }
73 
+
74 
+        .button-23:focus-visible {
75 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
76 
+            transition: box-shadow .2s;
77 
+        }
78 
+
79 
+        .button-23:active {
80 
+            background-color: #F7F7F7;
81 
+            border-color: #000000;
82 
+            transform: scale(.96);
83 
+        }
84 
+
85 
+        .button-23:disabled {
86 
+            border-color: #DDDDDD;
87 
+            color: #DDDDDD;
88 
+            cursor: not-allowed;
89 
+            opacity: 1;
90 
+        }
91 
+
92 
+        .map-svg {
93 
+            display: block;
94 
+            margin: 0 auto;
95 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
96 
+
97 
+            a {
98 
+                transition: all 1s;
99 
+                transform-origin: 50% 50%;
100 
+                text-decoration: none;
101 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
102 
+
103 
+                @media only screen and (min-width: 992px) {
104 
+
105 
+                    polygon,
106 
+                    &:hover {
107 
+                        cursor: pointer;
108 
+                        transform: scale(1.05);
109 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
110 
+
111 
+                        .st0 {
112 
+                            fill: $dark-default;
113 
+                        }
114 
+                    }
115 
+                }
116 
+            }
117 
+
118 
+            .pahang-barat {
119 
+                fill: #427bba;
120 
+            }
121 
+
122 
+            .pahang-tengah {
123 
+                fill: #144172;
124 
+            }
125 
+
126 
+            .pahang-timur {
127 
+                fill: #0c6088;
128 
+            }
129 
+
130 
+            .label-text {
131 
+                font-size: 35px;
132 
+                fill: white;
133 
+                transform: translate(0,
134 
+                        3px);
135 
+                /* adjust vertical position to centre text */
136 
+            }
137 
+
138 
+            .label-text-cameron {
139 
+                font-size: 20px;
140 
+                fill: white;
141 
+                transform: translate(0,
142 
+                        3px);
143 
+                /* adjust vertical position to centre text */
144 
+            }
145 
+
146 
+
147 
+        }
148 
+    </style>
149 
+
150 
+</head>
151 
+
152 
+<body>
153 
+
154 
+    <section class="section" style="max-height: 100vh;">
155 
+
156 
+        <div class=""
157 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
158 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../details/detail_hsd5761.html"><i
159 
+                        class="fas fa-chevron-left"></i></a></h6>
160 
+            <h6 style="color: white;">Rompin</h6>
161 
+        </div>
162 
+
163 
+        <!-- <div class="text-center pt-5"
164 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
165 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
166 
+
167 
+        </div> -->
168 
+
169 
+        <div class="text-center pt-1 pb-5"
170 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
171 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
172 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
173 
+
174 
+                <!-- <div id="capture"></div> -->
175 
+                <div id="pdfViewer"></div>
176 
+
177 
+
178 
+
179 
+            </div>
180 
+        </div>
181 
+
182 
+
183 
+
184 
+
185 
+
186 
+
187 
+
188 
+
189 
+
190 
+        <script src="../js/jquery-3.7.1.js" defer></script>
191 
+
192 
+        <script src="../js/pdfjs-viewer.js" defer></script>
193 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
194 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
195 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
196 
+
197 
+    </section>
198 
+
199 
+
200 
+    <!-- <div id="map"></div> -->
201 
+
202 
+    <script>
203 
+        var map;
204 
+        var src = 'https://file.io/t3IwR1hlxwkZ';
205 
+
206 
+        function initMap() {
207 
+            map = new google.maps.Map(document.getElementById('map'), {
208 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
209 
+                zoom: 2,
210 
+                mapTypeId: 'satellite'
211 
+            });
212 
+
213 
+            var kmlLayer = new google.maps.KmlLayer(src, {
214 
+                suppressInfoWindows: true,
215 
+                preserveViewport: false,
216 
+                map: map
217 
+            });
218 
+        }
219 
+
220 
+        document.addEventListener('DOMContentLoaded', () => {
221 
+            // PDF.js script to render PDF
222 
+            const pdfUrl = '../HSD 5761.pdf'; // Replace with your PDF URL
223 
+            const pdfjsLib = window['pdfjs-dist/build/pdf'];
224 
+            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
225 
+
226 
+            pdfjsLib.getDocument(pdfUrl).promise.then(function (pdf) {
227 
+                pdf.getPage(1).then(function (page) {
228 
+                    const scale = 1.5;
229 
+                    const viewport = page.getViewport({ scale });
230 
+
231 
+                    const canvas = document.createElement('canvas');
232 
+                    const context = canvas.getContext('2d');
233 
+                    canvas.height = viewport.height;
234 
+                    canvas.width = viewport.width;
235 
+
236 
+                    const renderContext = {
237 
+                        canvasContext: context,
238 
+                        viewport: viewport
239 
+                    };
240 
+
241 
+                    page.render(renderContext);
242 
+                    document.getElementById('pdfViewer').appendChild(canvas);
243 
+                });
244 
+            });
245 
+
246 
+        })
247 
+
248 
+    </script>
249 
+    <script async
250 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
251 
+        </script>
252 
+
253 
+</body>
254 
+
255 
+</html>

+ 255
- 0
pdf_pages/view_pdf_hsd5762.html Переглянути файл 

@@ -0,0 +1,255 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
11 
+        integrity="sha512-abc123..." crossorigin="anonymous" />
12 
+
13 
+
14 
+
15 
+    <style>
16 
+        html,
17 
+        body {
18 
+            height: 370px;
19 
+            padding: 0;
20 
+            margin: 0;
21 
+        }
22 
+
23 
+        #map {
24 
+            height: 360px;
25 
+            width: 300px;
26 
+            overflow: hidden;
27 
+            float: left;
28 
+            border: thin solid #333;
29 
+        }
30 
+
31 
+        #capture {
32 
+            height: 360px;
33 
+            width: 480px;
34 
+            overflow: hidden;
35 
+            float: left;
36 
+            background-color: #ECECFB;
37 
+            border: thin solid #333;
38 
+            border-left: none;
39 
+        }
40 
+
41 
+        #pdfViewer {
42 
+            width: 100%;
43 
+            height: 600px;
44 
+        }
45 
+    </style>
46 
+
47 
+    <style>
48 
+        /* CSS */
49 
+        .button-23 {
50 
+            background-color: #FFFFFF;
51 
+            border: 1px solid #222222;
52 
+            border-radius: 8px;
53 
+            box-sizing: border-box;
54 
+            color: #222222;
55 
+            cursor: pointer;
56 
+            display: inline-block;
57 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
58 
+            font-size: 16px;
59 
+            font-weight: 600;
60 
+            line-height: 20px;
61 
+            margin: 0;
62 
+            outline: none;
63 
+            padding: 13px 23px;
64 
+            position: relative;
65 
+            text-align: center;
66 
+            text-decoration: none;
67 
+            touch-action: manipulation;
68 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
69 
+            user-select: none;
70 
+            -webkit-user-select: none;
71 
+            width: auto;
72 
+        }
73 
+
74 
+        .button-23:focus-visible {
75 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
76 
+            transition: box-shadow .2s;
77 
+        }
78 
+
79 
+        .button-23:active {
80 
+            background-color: #F7F7F7;
81 
+            border-color: #000000;
82 
+            transform: scale(.96);
83 
+        }
84 
+
85 
+        .button-23:disabled {
86 
+            border-color: #DDDDDD;
87 
+            color: #DDDDDD;
88 
+            cursor: not-allowed;
89 
+            opacity: 1;
90 
+        }
91 
+
92 
+        .map-svg {
93 
+            display: block;
94 
+            margin: 0 auto;
95 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
96 
+
97 
+            a {
98 
+                transition: all 1s;
99 
+                transform-origin: 50% 50%;
100 
+                text-decoration: none;
101 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
102 
+
103 
+                @media only screen and (min-width: 992px) {
104 
+
105 
+                    polygon,
106 
+                    &:hover {
107 
+                        cursor: pointer;
108 
+                        transform: scale(1.05);
109 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
110 
+
111 
+                        .st0 {
112 
+                            fill: $dark-default;
113 
+                        }
114 
+                    }
115 
+                }
116 
+            }
117 
+
118 
+            .pahang-barat {
119 
+                fill: #427bba;
120 
+            }
121 
+
122 
+            .pahang-tengah {
123 
+                fill: #144172;
124 
+            }
125 
+
126 
+            .pahang-timur {
127 
+                fill: #0c6088;
128 
+            }
129 
+
130 
+            .label-text {
131 
+                font-size: 35px;
132 
+                fill: white;
133 
+                transform: translate(0,
134 
+                        3px);
135 
+                /* adjust vertical position to centre text */
136 
+            }
137 
+
138 
+            .label-text-cameron {
139 
+                font-size: 20px;
140 
+                fill: white;
141 
+                transform: translate(0,
142 
+                        3px);
143 
+                /* adjust vertical position to centre text */
144 
+            }
145 
+
146 
+
147 
+        }
148 
+    </style>
149 
+
150 
+</head>
151 
+
152 
+<body>
153 
+
154 
+    <section class="section" style="max-height: 100vh;">
155 
+
156 
+        <div class=""
157 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
158 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../details/detail_hsd5762.html"><i
159 
+                        class="fas fa-chevron-left"></i></a></h6>
160 
+            <h6 style="color: white;">Rompin</h6>
161 
+        </div>
162 
+
163 
+        <!-- <div class="text-center pt-5"
164 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
165 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
166 
+
167 
+        </div> -->
168 
+
169 
+        <div class="text-center pt-1 pb-5"
170 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
171 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
172 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
173 
+
174 
+                <!-- <div id="capture"></div> -->
175 
+                <div id="pdfViewer"></div>
176 
+
177 
+
178 
+
179 
+            </div>
180 
+        </div>
181 
+
182 
+
183 
+
184 
+
185 
+
186 
+
187 
+
188 
+
189 
+
190 
+        <script src="../js/jquery-3.7.1.js" defer></script>
191 
+
192 
+        <script src="../js/pdfjs-viewer.js" defer></script>
193 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
194 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
195 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
196 
+
197 
+    </section>
198 
+
199 
+
200 
+    <!-- <div id="map"></div> -->
201 
+
202 
+    <script>
203 
+        var map;
204 
+        var src = 'https://file.io/t3IwR1hlxwkZ';
205 
+
206 
+        function initMap() {
207 
+            map = new google.maps.Map(document.getElementById('map'), {
208 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
209 
+                zoom: 2,
210 
+                mapTypeId: 'satellite'
211 
+            });
212 
+
213 
+            var kmlLayer = new google.maps.KmlLayer(src, {
214 
+                suppressInfoWindows: true,
215 
+                preserveViewport: false,
216 
+                map: map
217 
+            });
218 
+        }
219 
+
220 
+        document.addEventListener('DOMContentLoaded', () => {
221 
+            // PDF.js script to render PDF
222 
+            const pdfUrl = '../HSD 5762.pdf'; // Replace with your PDF URL
223 
+            const pdfjsLib = window['pdfjs-dist/build/pdf'];
224 
+            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
225 
+
226 
+            pdfjsLib.getDocument(pdfUrl).promise.then(function (pdf) {
227 
+                pdf.getPage(1).then(function (page) {
228 
+                    const scale = 1.5;
229 
+                    const viewport = page.getViewport({ scale });
230 
+
231 
+                    const canvas = document.createElement('canvas');
232 
+                    const context = canvas.getContext('2d');
233 
+                    canvas.height = viewport.height;
234 
+                    canvas.width = viewport.width;
235 
+
236 
+                    const renderContext = {
237 
+                        canvasContext: context,
238 
+                        viewport: viewport
239 
+                    };
240 
+
241 
+                    page.render(renderContext);
242 
+                    document.getElementById('pdfViewer').appendChild(canvas);
243 
+                });
244 
+            });
245 
+
246 
+        })
247 
+
248 
+    </script>
249 
+    <script async
250 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
251 
+        </script>
252 
+
253 
+</body>
254 
+
255 
+</html>

+ 255
- 0
pdf_pages/view_pdf_hsd5763.html Переглянути файл 

@@ -0,0 +1,255 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
11 
+        integrity="sha512-abc123..." crossorigin="anonymous" />
12 
+
13 
+
14 
+
15 
+    <style>
16 
+        html,
17 
+        body {
18 
+            height: 370px;
19 
+            padding: 0;
20 
+            margin: 0;
21 
+        }
22 
+
23 
+        #map {
24 
+            height: 360px;
25 
+            width: 300px;
26 
+            overflow: hidden;
27 
+            float: left;
28 
+            border: thin solid #333;
29 
+        }
30 
+
31 
+        #capture {
32 
+            height: 360px;
33 
+            width: 480px;
34 
+            overflow: hidden;
35 
+            float: left;
36 
+            background-color: #ECECFB;
37 
+            border: thin solid #333;
38 
+            border-left: none;
39 
+        }
40 
+
41 
+        #pdfViewer {
42 
+            width: 100%;
43 
+            height: 600px;
44 
+        }
45 
+    </style>
46 
+
47 
+    <style>
48 
+        /* CSS */
49 
+        .button-23 {
50 
+            background-color: #FFFFFF;
51 
+            border: 1px solid #222222;
52 
+            border-radius: 8px;
53 
+            box-sizing: border-box;
54 
+            color: #222222;
55 
+            cursor: pointer;
56 
+            display: inline-block;
57 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
58 
+            font-size: 16px;
59 
+            font-weight: 600;
60 
+            line-height: 20px;
61 
+            margin: 0;
62 
+            outline: none;
63 
+            padding: 13px 23px;
64 
+            position: relative;
65 
+            text-align: center;
66 
+            text-decoration: none;
67 
+            touch-action: manipulation;
68 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
69 
+            user-select: none;
70 
+            -webkit-user-select: none;
71 
+            width: auto;
72 
+        }
73 
+
74 
+        .button-23:focus-visible {
75 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
76 
+            transition: box-shadow .2s;
77 
+        }
78 
+
79 
+        .button-23:active {
80 
+            background-color: #F7F7F7;
81 
+            border-color: #000000;
82 
+            transform: scale(.96);
83 
+        }
84 
+
85 
+        .button-23:disabled {
86 
+            border-color: #DDDDDD;
87 
+            color: #DDDDDD;
88 
+            cursor: not-allowed;
89 
+            opacity: 1;
90 
+        }
91 
+
92 
+        .map-svg {
93 
+            display: block;
94 
+            margin: 0 auto;
95 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
96 
+
97 
+            a {
98 
+                transition: all 1s;
99 
+                transform-origin: 50% 50%;
100 
+                text-decoration: none;
101 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
102 
+
103 
+                @media only screen and (min-width: 992px) {
104 
+
105 
+                    polygon,
106 
+                    &:hover {
107 
+                        cursor: pointer;
108 
+                        transform: scale(1.05);
109 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
110 
+
111 
+                        .st0 {
112 
+                            fill: $dark-default;
113 
+                        }
114 
+                    }
115 
+                }
116 
+            }
117 
+
118 
+            .pahang-barat {
119 
+                fill: #427bba;
120 
+            }
121 
+
122 
+            .pahang-tengah {
123 
+                fill: #144172;
124 
+            }
125 
+
126 
+            .pahang-timur {
127 
+                fill: #0c6088;
128 
+            }
129 
+
130 
+            .label-text {
131 
+                font-size: 35px;
132 
+                fill: white;
133 
+                transform: translate(0,
134 
+                        3px);
135 
+                /* adjust vertical position to centre text */
136 
+            }
137 
+
138 
+            .label-text-cameron {
139 
+                font-size: 20px;
140 
+                fill: white;
141 
+                transform: translate(0,
142 
+                        3px);
143 
+                /* adjust vertical position to centre text */
144 
+            }
145 
+
146 
+
147 
+        }
148 
+    </style>
149 
+
150 
+</head>
151 
+
152 
+<body>
153 
+
154 
+    <section class="section" style="max-height: 100vh;">
155 
+
156 
+        <div class=""
157 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
158 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../details/detail_hsd5763.html"><i
159 
+                        class="fas fa-chevron-left"></i></a></h6>
160 
+            <h6 style="color: white;">Rompin</h6>
161 
+        </div>
162 
+
163 
+        <!-- <div class="text-center pt-5"
164 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
165 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
166 
+
167 
+        </div> -->
168 
+
169 
+        <div class="text-center pt-1 pb-5"
170 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
171 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
172 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
173 
+
174 
+                <!-- <div id="capture"></div> -->
175 
+                <div id="pdfViewer"></div>
176 
+
177 
+
178 
+
179 
+            </div>
180 
+        </div>
181 
+
182 
+
183 
+
184 
+
185 
+
186 
+
187 
+
188 
+
189 
+
190 
+        <script src="../js/jquery-3.7.1.js" defer></script>
191 
+
192 
+        <script src="../js/pdfjs-viewer.js" defer></script>
193 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
194 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
195 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
196 
+
197 
+    </section>
198 
+
199 
+
200 
+    <!-- <div id="map"></div> -->
201 
+
202 
+    <script>
203 
+        var map;
204 
+        var src = 'https://file.io/t3IwR1hlxwkZ';
205 
+
206 
+        function initMap() {
207 
+            map = new google.maps.Map(document.getElementById('map'), {
208 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
209 
+                zoom: 2,
210 
+                mapTypeId: 'satellite'
211 
+            });
212 
+
213 
+            var kmlLayer = new google.maps.KmlLayer(src, {
214 
+                suppressInfoWindows: true,
215 
+                preserveViewport: false,
216 
+                map: map
217 
+            });
218 
+        }
219 
+
220 
+        document.addEventListener('DOMContentLoaded', () => {
221 
+            // PDF.js script to render PDF
222 
+            const pdfUrl = '../HSD 5763.pdf'; // Replace with your PDF URL
223 
+            const pdfjsLib = window['pdfjs-dist/build/pdf'];
224 
+            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
225 
+
226 
+            pdfjsLib.getDocument(pdfUrl).promise.then(function (pdf) {
227 
+                pdf.getPage(1).then(function (page) {
228 
+                    const scale = 1.5;
229 
+                    const viewport = page.getViewport({ scale });
230 
+
231 
+                    const canvas = document.createElement('canvas');
232 
+                    const context = canvas.getContext('2d');
233 
+                    canvas.height = viewport.height;
234 
+                    canvas.width = viewport.width;
235 
+
236 
+                    const renderContext = {
237 
+                        canvasContext: context,
238 
+                        viewport: viewport
239 
+                    };
240 
+
241 
+                    page.render(renderContext);
242 
+                    document.getElementById('pdfViewer').appendChild(canvas);
243 
+                });
244 
+            });
245 
+
246 
+        })
247 
+
248 
+    </script>
249 
+    <script async
250 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
251 
+        </script>
252 
+
253 
+</body>
254 
+
255 
+</html>

+ 255
- 0
pdf_pages/view_pdf_hsd5764.html Переглянути файл 

@@ -0,0 +1,255 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
11 
+        integrity="sha512-abc123..." crossorigin="anonymous" />
12 
+
13 
+
14 
+
15 
+    <style>
16 
+        html,
17 
+        body {
18 
+            height: 370px;
19 
+            padding: 0;
20 
+            margin: 0;
21 
+        }
22 
+
23 
+        #map {
24 
+            height: 360px;
25 
+            width: 300px;
26 
+            overflow: hidden;
27 
+            float: left;
28 
+            border: thin solid #333;
29 
+        }
30 
+
31 
+        #capture {
32 
+            height: 360px;
33 
+            width: 480px;
34 
+            overflow: hidden;
35 
+            float: left;
36 
+            background-color: #ECECFB;
37 
+            border: thin solid #333;
38 
+            border-left: none;
39 
+        }
40 
+
41 
+        #pdfViewer {
42 
+            width: 100%;
43 
+            height: 600px;
44 
+        }
45 
+    </style>
46 
+
47 
+    <style>
48 
+        /* CSS */
49 
+        .button-23 {
50 
+            background-color: #FFFFFF;
51 
+            border: 1px solid #222222;
52 
+            border-radius: 8px;
53 
+            box-sizing: border-box;
54 
+            color: #222222;
55 
+            cursor: pointer;
56 
+            display: inline-block;
57 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
58 
+            font-size: 16px;
59 
+            font-weight: 600;
60 
+            line-height: 20px;
61 
+            margin: 0;
62 
+            outline: none;
63 
+            padding: 13px 23px;
64 
+            position: relative;
65 
+            text-align: center;
66 
+            text-decoration: none;
67 
+            touch-action: manipulation;
68 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
69 
+            user-select: none;
70 
+            -webkit-user-select: none;
71 
+            width: auto;
72 
+        }
73 
+
74 
+        .button-23:focus-visible {
75 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
76 
+            transition: box-shadow .2s;
77 
+        }
78 
+
79 
+        .button-23:active {
80 
+            background-color: #F7F7F7;
81 
+            border-color: #000000;
82 
+            transform: scale(.96);
83 
+        }
84 
+
85 
+        .button-23:disabled {
86 
+            border-color: #DDDDDD;
87 
+            color: #DDDDDD;
88 
+            cursor: not-allowed;
89 
+            opacity: 1;
90 
+        }
91 
+
92 
+        .map-svg {
93 
+            display: block;
94 
+            margin: 0 auto;
95 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
96 
+
97 
+            a {
98 
+                transition: all 1s;
99 
+                transform-origin: 50% 50%;
100 
+                text-decoration: none;
101 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
102 
+
103 
+                @media only screen and (min-width: 992px) {
104 
+
105 
+                    polygon,
106 
+                    &:hover {
107 
+                        cursor: pointer;
108 
+                        transform: scale(1.05);
109 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
110 
+
111 
+                        .st0 {
112 
+                            fill: $dark-default;
113 
+                        }
114 
+                    }
115 
+                }
116 
+            }
117 
+
118 
+            .pahang-barat {
119 
+                fill: #427bba;
120 
+            }
121 
+
122 
+            .pahang-tengah {
123 
+                fill: #144172;
124 
+            }
125 
+
126 
+            .pahang-timur {
127 
+                fill: #0c6088;
128 
+            }
129 
+
130 
+            .label-text {
131 
+                font-size: 35px;
132 
+                fill: white;
133 
+                transform: translate(0,
134 
+                        3px);
135 
+                /* adjust vertical position to centre text */
136 
+            }
137 
+
138 
+            .label-text-cameron {
139 
+                font-size: 20px;
140 
+                fill: white;
141 
+                transform: translate(0,
142 
+                        3px);
143 
+                /* adjust vertical position to centre text */
144 
+            }
145 
+
146 
+
147 
+        }
148 
+    </style>
149 
+
150 
+</head>
151 
+
152 
+<body>
153 
+
154 
+    <section class="section" style="max-height: 100vh;">
155 
+
156 
+        <div class=""
157 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
158 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../details/detail_hsd5764.html"><i
159 
+                        class="fas fa-chevron-left"></i></a></h6>
160 
+            <h6 style="color: white;">Rompin</h6>
161 
+        </div>
162 
+
163 
+        <!-- <div class="text-center pt-5"
164 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
165 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
166 
+
167 
+        </div> -->
168 
+
169 
+        <div class="text-center pt-1 pb-5"
170 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
171 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
172 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
173 
+
174 
+                <!-- <div id="capture"></div> -->
175 
+                <div id="pdfViewer"></div>
176 
+
177 
+
178 
+
179 
+            </div>
180 
+        </div>
181 
+
182 
+
183 
+
184 
+
185 
+
186 
+
187 
+
188 
+
189 
+
190 
+        <script src="../js/jquery-3.7.1.js" defer></script>
191 
+
192 
+        <script src="../js/pdfjs-viewer.js" defer></script>
193 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
194 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
195 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
196 
+
197 
+    </section>
198 
+
199 
+
200 
+    <!-- <div id="map"></div> -->
201 
+
202 
+    <script>
203 
+        var map;
204 
+        var src = 'https://file.io/t3IwR1hlxwkZ';
205 
+
206 
+        function initMap() {
207 
+            map = new google.maps.Map(document.getElementById('map'), {
208 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
209 
+                zoom: 2,
210 
+                mapTypeId: 'satellite'
211 
+            });
212 
+
213 
+            var kmlLayer = new google.maps.KmlLayer(src, {
214 
+                suppressInfoWindows: true,
215 
+                preserveViewport: false,
216 
+                map: map
217 
+            });
218 
+        }
219 
+
220 
+        document.addEventListener('DOMContentLoaded', () => {
221 
+            // PDF.js script to render PDF
222 
+            const pdfUrl = '../HSD 5764.pdf'; // Replace with your PDF URL
223 
+            const pdfjsLib = window['pdfjs-dist/build/pdf'];
224 
+            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
225 
+
226 
+            pdfjsLib.getDocument(pdfUrl).promise.then(function (pdf) {
227 
+                pdf.getPage(1).then(function (page) {
228 
+                    const scale = 1.5;
229 
+                    const viewport = page.getViewport({ scale });
230 
+
231 
+                    const canvas = document.createElement('canvas');
232 
+                    const context = canvas.getContext('2d');
233 
+                    canvas.height = viewport.height;
234 
+                    canvas.width = viewport.width;
235 
+
236 
+                    const renderContext = {
237 
+                        canvasContext: context,
238 
+                        viewport: viewport
239 
+                    };
240 
+
241 
+                    page.render(renderContext);
242 
+                    document.getElementById('pdfViewer').appendChild(canvas);
243 
+                });
244 
+            });
245 
+
246 
+        })
247 
+
248 
+    </script>
249 
+    <script async
250 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
251 
+        </script>
252 
+
253 
+</body>
254 
+
255 
+</html>

+ 255
- 0
pdf_pages/view_pdf_pn16507.html Переглянути файл 

@@ -0,0 +1,255 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
11 
+        integrity="sha512-abc123..." crossorigin="anonymous" />
12 
+
13 
+
14 
+
15 
+    <style>
16 
+        html,
17 
+        body {
18 
+            height: 370px;
19 
+            padding: 0;
20 
+            margin: 0;
21 
+        }
22 
+
23 
+        #map {
24 
+            height: 360px;
25 
+            width: 300px;
26 
+            overflow: hidden;
27 
+            float: left;
28 
+            border: thin solid #333;
29 
+        }
30 
+
31 
+        #capture {
32 
+            height: 360px;
33 
+            width: 480px;
34 
+            overflow: hidden;
35 
+            float: left;
36 
+            background-color: #ECECFB;
37 
+            border: thin solid #333;
38 
+            border-left: none;
39 
+        }
40 
+
41 
+        #pdfViewer {
42 
+            width: 100%;
43 
+            height: 600px;
44 
+        }
45 
+    </style>
46 
+
47 
+    <style>
48 
+        /* CSS */
49 
+        .button-23 {
50 
+            background-color: #FFFFFF;
51 
+            border: 1px solid #222222;
52 
+            border-radius: 8px;
53 
+            box-sizing: border-box;
54 
+            color: #222222;
55 
+            cursor: pointer;
56 
+            display: inline-block;
57 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
58 
+            font-size: 16px;
59 
+            font-weight: 600;
60 
+            line-height: 20px;
61 
+            margin: 0;
62 
+            outline: none;
63 
+            padding: 13px 23px;
64 
+            position: relative;
65 
+            text-align: center;
66 
+            text-decoration: none;
67 
+            touch-action: manipulation;
68 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
69 
+            user-select: none;
70 
+            -webkit-user-select: none;
71 
+            width: auto;
72 
+        }
73 
+
74 
+        .button-23:focus-visible {
75 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
76 
+            transition: box-shadow .2s;
77 
+        }
78 
+
79 
+        .button-23:active {
80 
+            background-color: #F7F7F7;
81 
+            border-color: #000000;
82 
+            transform: scale(.96);
83 
+        }
84 
+
85 
+        .button-23:disabled {
86 
+            border-color: #DDDDDD;
87 
+            color: #DDDDDD;
88 
+            cursor: not-allowed;
89 
+            opacity: 1;
90 
+        }
91 
+
92 
+        .map-svg {
93 
+            display: block;
94 
+            margin: 0 auto;
95 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
96 
+
97 
+            a {
98 
+                transition: all 1s;
99 
+                transform-origin: 50% 50%;
100 
+                text-decoration: none;
101 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
102 
+
103 
+                @media only screen and (min-width: 992px) {
104 
+
105 
+                    polygon,
106 
+                    &:hover {
107 
+                        cursor: pointer;
108 
+                        transform: scale(1.05);
109 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
110 
+
111 
+                        .st0 {
112 
+                            fill: $dark-default;
113 
+                        }
114 
+                    }
115 
+                }
116 
+            }
117 
+
118 
+            .pahang-barat {
119 
+                fill: #427bba;
120 
+            }
121 
+
122 
+            .pahang-tengah {
123 
+                fill: #144172;
124 
+            }
125 
+
126 
+            .pahang-timur {
127 
+                fill: #0c6088;
128 
+            }
129 
+
130 
+            .label-text {
131 
+                font-size: 35px;
132 
+                fill: white;
133 
+                transform: translate(0,
134 
+                        3px);
135 
+                /* adjust vertical position to centre text */
136 
+            }
137 
+
138 
+            .label-text-cameron {
139 
+                font-size: 20px;
140 
+                fill: white;
141 
+                transform: translate(0,
142 
+                        3px);
143 
+                /* adjust vertical position to centre text */
144 
+            }
145 
+
146 
+
147 
+        }
148 
+    </style>
149 
+
150 
+</head>
151 
+
152 
+<body>
153 
+
154 
+    <section class="section" style="max-height: 100vh;">
155 
+
156 
+        <div class=""
157 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
158 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../details/detail_pn16507.html"><i
159 
+                        class="fas fa-chevron-left"></i></a></h6>
160 
+            <h6 style="color: white;">Temerloh</h6>
161 
+        </div>
162 
+
163 
+        <!-- <div class="text-center pt-5"
164 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
165 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
166 
+
167 
+        </div> -->
168 
+
169 
+        <div class="text-center pt-1 pb-5"
170 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
171 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
172 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
173 
+
174 
+                <!-- <div id="capture"></div> -->
175 
+                <div id="pdfViewer"></div>
176 
+
177 
+
178 
+
179 
+            </div>
180 
+        </div>
181 
+
182 
+
183 
+
184 
+
185 
+
186 
+
187 
+
188 
+
189 
+
190 
+        <script src="../js/jquery-3.7.1.js" defer></script>
191 
+
192 
+        <script src="../js/pdfjs-viewer.js" defer></script>
193 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
194 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
195 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
196 
+
197 
+    </section>
198 
+
199 
+
200 
+    <!-- <div id="map"></div> -->
201 
+
202 
+    <script>
203 
+        var map;
204 
+        var src = 'https://file.io/t3IwR1hlxwkZ';
205 
+
206 
+        function initMap() {
207 
+            map = new google.maps.Map(document.getElementById('map'), {
208 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
209 
+                zoom: 2,
210 
+                mapTypeId: 'satellite'
211 
+            });
212 
+
213 
+            var kmlLayer = new google.maps.KmlLayer(src, {
214 
+                suppressInfoWindows: true,
215 
+                preserveViewport: false,
216 
+                map: map
217 
+            });
218 
+        }
219 
+
220 
+        document.addEventListener('DOMContentLoaded', () => {
221 
+            // PDF.js script to render PDF
222 
+            const pdfUrl = '../PN 16507.pdf'; // Replace with your PDF URL
223 
+            const pdfjsLib = window['pdfjs-dist/build/pdf'];
224 
+            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
225 
+
226 
+            pdfjsLib.getDocument(pdfUrl).promise.then(function (pdf) {
227 
+                pdf.getPage(1).then(function (page) {
228 
+                    const scale = 1.5;
229 
+                    const viewport = page.getViewport({ scale });
230 
+
231 
+                    const canvas = document.createElement('canvas');
232 
+                    const context = canvas.getContext('2d');
233 
+                    canvas.height = viewport.height;
234 
+                    canvas.width = viewport.width;
235 
+
236 
+                    const renderContext = {
237 
+                        canvasContext: context,
238 
+                        viewport: viewport
239 
+                    };
240 
+
241 
+                    page.render(renderContext);
242 
+                    document.getElementById('pdfViewer').appendChild(canvas);
243 
+                });
244 
+            });
245 
+
246 
+        })
247 
+
248 
+    </script>
249 
+    <script async
250 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
251 
+        </script>
252 
+
253 
+</body>
254 
+
255 
+</html>

+ 255
- 0
pdf_pages/view_pdf_pn28612.html Переглянути файл 

@@ -0,0 +1,255 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 
+    <meta charset="utf-8">
7 
+    <title>KML Click Capture Sample</title>
8 
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
9 
+    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
10 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
11 
+        integrity="sha512-abc123..." crossorigin="anonymous" />
12 
+
13 
+
14 
+
15 
+    <style>
16 
+        html,
17 
+        body {
18 
+            height: 370px;
19 
+            padding: 0;
20 
+            margin: 0;
21 
+        }
22 
+
23 
+        #map {
24 
+            height: 360px;
25 
+            width: 300px;
26 
+            overflow: hidden;
27 
+            float: left;
28 
+            border: thin solid #333;
29 
+        }
30 
+
31 
+        #capture {
32 
+            height: 360px;
33 
+            width: 480px;
34 
+            overflow: hidden;
35 
+            float: left;
36 
+            background-color: #ECECFB;
37 
+            border: thin solid #333;
38 
+            border-left: none;
39 
+        }
40 
+
41 
+        #pdfViewer {
42 
+            width: 100%;
43 
+            height: 600px;
44 
+        }
45 
+    </style>
46 
+
47 
+    <style>
48 
+        /* CSS */
49 
+        .button-23 {
50 
+            background-color: #FFFFFF;
51 
+            border: 1px solid #222222;
52 
+            border-radius: 8px;
53 
+            box-sizing: border-box;
54 
+            color: #222222;
55 
+            cursor: pointer;
56 
+            display: inline-block;
57 
+            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
58 
+            font-size: 16px;
59 
+            font-weight: 600;
60 
+            line-height: 20px;
61 
+            margin: 0;
62 
+            outline: none;
63 
+            padding: 13px 23px;
64 
+            position: relative;
65 
+            text-align: center;
66 
+            text-decoration: none;
67 
+            touch-action: manipulation;
68 
+            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
69 
+            user-select: none;
70 
+            -webkit-user-select: none;
71 
+            width: auto;
72 
+        }
73 
+
74 
+        .button-23:focus-visible {
75 
+            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
76 
+            transition: box-shadow .2s;
77 
+        }
78 
+
79 
+        .button-23:active {
80 
+            background-color: #F7F7F7;
81 
+            border-color: #000000;
82 
+            transform: scale(.96);
83 
+        }
84 
+
85 
+        .button-23:disabled {
86 
+            border-color: #DDDDDD;
87 
+            color: #DDDDDD;
88 
+            cursor: not-allowed;
89 
+            opacity: 1;
90 
+        }
91 
+
92 
+        .map-svg {
93 
+            display: block;
94 
+            margin: 0 auto;
95 
+            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
96 
+
97 
+            a {
98 
+                transition: all 1s;
99 
+                transform-origin: 50% 50%;
100 
+                text-decoration: none;
101 
+                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
102 
+
103 
+                @media only screen and (min-width: 992px) {
104 
+
105 
+                    polygon,
106 
+                    &:hover {
107 
+                        cursor: pointer;
108 
+                        transform: scale(1.05);
109 
+                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
110 
+
111 
+                        .st0 {
112 
+                            fill: $dark-default;
113 
+                        }
114 
+                    }
115 
+                }
116 
+            }
117 
+
118 
+            .pahang-barat {
119 
+                fill: #427bba;
120 
+            }
121 
+
122 
+            .pahang-tengah {
123 
+                fill: #144172;
124 
+            }
125 
+
126 
+            .pahang-timur {
127 
+                fill: #0c6088;
128 
+            }
129 
+
130 
+            .label-text {
131 
+                font-size: 35px;
132 
+                fill: white;
133 
+                transform: translate(0,
134 
+                        3px);
135 
+                /* adjust vertical position to centre text */
136 
+            }
137 
+
138 
+            .label-text-cameron {
139 
+                font-size: 20px;
140 
+                fill: white;
141 
+                transform: translate(0,
142 
+                        3px);
143 
+                /* adjust vertical position to centre text */
144 
+            }
145 
+
146 
+
147 
+        }
148 
+    </style>
149 
+
150 
+</head>
151 
+
152 
+<body>
153 
+
154 
+    <section class="section" style="max-height: 100vh;">
155 
+
156 
+        <div class=""
157 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
158 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../details/detail_pn28612.html"><i
159 
+                        class="fas fa-chevron-left"></i></a></h6>
160 
+            <h6 style="color: white;">Rompin</h6>
161 
+        </div>
162 
+
163 
+        <!-- <div class="text-center pt-5"
164 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
165 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>
166 
+
167 
+        </div> -->
168 
+
169 
+        <div class="text-center pt-1 pb-5"
170 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
171 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
172 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
173 
+
174 
+                <!-- <div id="capture"></div> -->
175 
+                <div id="pdfViewer"></div>
176 
+
177 
+
178 
+
179 
+            </div>
180 
+        </div>
181 
+
182 
+
183 
+
184 
+
185 
+
186 
+
187 
+
188 
+
189 
+
190 
+        <script src="../js/jquery-3.7.1.js" defer></script>
191 
+
192 
+        <script src="../js/pdfjs-viewer.js" defer></script>
193 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
194 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
195 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
196 
+
197 
+    </section>
198 
+
199 
+
200 
+    <!-- <div id="map"></div> -->
201 
+
202 
+    <script>
203 
+        var map;
204 
+        var src = 'https://file.io/t3IwR1hlxwkZ';
205 
+
206 
+        function initMap() {
207 
+            map = new google.maps.Map(document.getElementById('map'), {
208 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
209 
+                zoom: 2,
210 
+                mapTypeId: 'satellite'
211 
+            });
212 
+
213 
+            var kmlLayer = new google.maps.KmlLayer(src, {
214 
+                suppressInfoWindows: true,
215 
+                preserveViewport: false,
216 
+                map: map
217 
+            });
218 
+        }
219 
+
220 
+        document.addEventListener('DOMContentLoaded', () => {
221 
+            // PDF.js script to render PDF
222 
+            const pdfUrl = '../PN 28612.pdf'; // Replace with your PDF URL
223 
+            const pdfjsLib = window['pdfjs-dist/build/pdf'];
224 
+            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
225 
+
226 
+            pdfjsLib.getDocument(pdfUrl).promise.then(function (pdf) {
227 
+                pdf.getPage(1).then(function (page) {
228 
+                    const scale = 1.5;
229 
+                    const viewport = page.getViewport({ scale });
230 
+
231 
+                    const canvas = document.createElement('canvas');
232 
+                    const context = canvas.getContext('2d');
233 
+                    canvas.height = viewport.height;
234 
+                    canvas.width = viewport.width;
235 
+
236 
+                    const renderContext = {
237 
+                        canvasContext: context,
238 
+                        viewport: viewport
239 
+                    };
240 
+
241 
+                    page.render(renderContext);
242 
+                    document.getElementById('pdfViewer').appendChild(canvas);
243 
+                });
244 
+            });
245 
+
246 
+        })
247 
+
248 
+    </script>
249 
+    <script async
250 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
251 
+        </script>
252 
+
253 
+</body>
254 
+
255 
+</html>

Писати Попередній перегляд
Завантаження…
Відмінити
Зберегти