muqriz
/
SIBS2024
Watch 1
Star 0
Fork 0

2 Commits
60bb97eecc ... b45afc03f6

Author SHA1 Message Date
  azri b45afc03f6 Merge branch 'master' of https://git.mirfalah.my/muqriz/SIBS2024 4 months ago
  azri 58f35a956f kuantan indsutry 4 months ago
6 changed files with 756 additions and 0 deletions
Split View Show Diff Stats
  1. BIN
      HSD_62437.pdf
  2. BIN
      HSD_62510.pdf
  3. 267
    0
      details/detail_hsd62437.html
  4. 267
    0
      details/detail_hsd62510.html
  5. 111
    0
      pdf_pages/view_pdf_hsd62437.html
  6. 111
    0
      pdf_pages/view_pdf_hsd62510.html

BIN
HSD_62437.pdf View File


BIN
HSD_62510.pdf View File


+ 267
- 0
details/detail_hsd62437.html View File 

@@ -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/kuantan.html"><i
158 
+                        class="fas fa-chevron-left"></i></a></h6>
159 
+            <h6 style="color: white;">HSD 62437</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 Kerajaan 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;">Jalan Pintasan Kuantan</span></h6>
190 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Mukim :</span> <span
191 
+                            style="color: #ACACAC;">Sungai Karang</span></h6>
192 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Daerah :</span> <span
193 
+                            style="color: #ACACAC;">Kuantan</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 62437</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;">59671</span>
205 
+                    </h6>
206 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Kegunaan :</span> <span
207 
+                            style="color: #ACACAC;">Perusahaan/Perindustrian</span></h6>
208 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Syarat Nyata :</span>
209 
+                        <span style="color: #ACACAC;">Tapak Industri 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_hsd62437.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_hsd62510.html View File 

@@ -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/kuantan.html"><i
158 
+                        class="fas fa-chevron-left"></i></a></h6>
159 
+            <h6 style="color: white;">HSD 62510</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 Kerajaan 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 Sagu</span></h6>
190 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Mukim :</span> <span
191 
+                            style="color: #ACACAC;">Kuala Kuantan</span></h6>
192 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Daerah :</span> <span
193 
+                            style="color: #ACACAC;">Kuantan</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 62510</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;">327017</span>
205 
+                    </h6>
206 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Kegunaan :</span> <span
207 
+                            style="color: #ACACAC;">Perusahaan/Perindustrian</span></h6>
208 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Syarat Nyata :</span>
209 
+                        <span style="color: #ACACAC;">Tapak Industri 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_hsd62510.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>

+ 111
- 0
pdf_pages/view_pdf_hsd62437.html View File 

@@ -0,0 +1,111 @@
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 
+    <link rel="stylesheet" href="../css/app.css">
12 
+
13 
+</head>
14 
+
15 
+<body>
16 
+
17 
+    <section class="section" style="max-height: 100vh;">
18 
+
19 
+        <div class=""
20 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
21 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../details/detail_hsd62437.html"><i
22 
+                        class="fas fa-chevron-left"></i></a></h6>
23 
+            <h6 style="color: white;">HSD 62437</h6>
24 
+        </div>
25 
+
26 
+        <!-- <div class="text-center pt-5"
27 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
28 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kerajaan Pahang</h5>
29 
+
30 
+        </div> -->
31 
+
32 
+        <div class="text-center pt-1 pb-5"
33 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
34 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
35 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
36 
+
37 
+                <!-- <div id="capture"></div> -->
38 
+                <div id="pdfViewer"></div>
39 
+
40 
+
41 
+
42 
+            </div>
43 
+        </div>
44 
+
45 
+
46 
+        <script src="../js/jquery-3.7.1.js" defer></script>
47 
+
48 
+        <script src="../js/pdfjs-viewer.js" defer></script>
49 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
50 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
51 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
52 
+
53 
+    </section>
54 
+
55 
+
56 
+    <!-- <div id="map"></div> -->
57 
+
58 
+    <script>
59 
+        var map;
60 
+        var src = 'https://file.io/t3IwR1hlxwkZ';
61 
+
62 
+        function initMap() {
63 
+            map = new google.maps.Map(document.getElementById('map'), {
64 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
65 
+                zoom: 2,
66 
+                mapTypeId: 'satellite'
67 
+            });
68 
+
69 
+            var kmlLayer = new google.maps.KmlLayer(src, {
70 
+                suppressInfoWindows: true,
71 
+                preserveViewport: false,
72 
+                map: map
73 
+            });
74 
+        }
75 
+
76 
+        document.addEventListener('DOMContentLoaded', () => {
77 
+            // PDF.js script to render PDF
78 
+            const pdfUrl = '../HSD_62437.pdf'; // Replace with your PDF URL
79 
+            const pdfjsLib = window['pdfjs-dist/build/pdf'];
80 
+            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
81 
+
82 
+            pdfjsLib.getDocument(pdfUrl).promise.then(function (pdf) {
83 
+                pdf.getPage(1).then(function (page) {
84 
+                    const scale = 1.5;
85 
+                    const viewport = page.getViewport({ scale });
86 
+
87 
+                    const canvas = document.createElement('canvas');
88 
+                    const context = canvas.getContext('2d');
89 
+                    canvas.height = viewport.height;
90 
+                    canvas.width = viewport.width;
91 
+
92 
+                    const renderContext = {
93 
+                        canvasContext: context,
94 
+                        viewport: viewport
95 
+                    };
96 
+
97 
+                    page.render(renderContext);
98 
+                    document.getElementById('pdfViewer').appendChild(canvas);
99 
+                });
100 
+            });
101 
+
102 
+        })
103 
+
104 
+    </script>
105 
+    <script async
106 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
107 
+        </script>
108 
+
109 
+</body>
110 
+
111 
+</html>

+ 111
- 0
pdf_pages/view_pdf_hsd62510.html View File 

@@ -0,0 +1,111 @@
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 
+    <link rel="stylesheet" href="../css/app.css">
12 
+
13 
+</head>
14 
+
15 
+<body>
16 
+
17 
+    <section class="section" style="max-height: 100vh;">
18 
+
19 
+        <div class=""
20 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
21 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../details/detail_hsd62510.html"><i
22 
+                        class="fas fa-chevron-left"></i></a></h6>
23 
+            <h6 style="color: white;">HSD 62510</h6>
24 
+        </div>
25 
+
26 
+        <!-- <div class="text-center pt-5"
27 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
28 
+            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kerajaan Pahang</h5>
29 
+
30 
+        </div> -->
31 
+
32 
+        <div class="text-center pt-1 pb-5"
33 
+            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
34 
+            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
35 
+                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
36 
+
37 
+                <!-- <div id="capture"></div> -->
38 
+                <div id="pdfViewer"></div>
39 
+
40 
+
41 
+
42 
+            </div>
43 
+        </div>
44 
+
45 
+
46 
+        <script src="../js/jquery-3.7.1.js" defer></script>
47 
+
48 
+        <script src="../js/pdfjs-viewer.js" defer></script>
49 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
50 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
51 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
52 
+
53 
+    </section>
54 
+
55 
+
56 
+    <!-- <div id="map"></div> -->
57 
+
58 
+    <script>
59 
+        var map;
60 
+        var src = 'https://file.io/t3IwR1hlxwkZ';
61 
+
62 
+        function initMap() {
63 
+            map = new google.maps.Map(document.getElementById('map'), {
64 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
65 
+                zoom: 2,
66 
+                mapTypeId: 'satellite'
67 
+            });
68 
+
69 
+            var kmlLayer = new google.maps.KmlLayer(src, {
70 
+                suppressInfoWindows: true,
71 
+                preserveViewport: false,
72 
+                map: map
73 
+            });
74 
+        }
75 
+
76 
+        document.addEventListener('DOMContentLoaded', () => {
77 
+            // PDF.js script to render PDF
78 
+            const pdfUrl = '../HSD_62510.pdf'; // Replace with your PDF URL
79 
+            const pdfjsLib = window['pdfjs-dist/build/pdf'];
80 
+            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
81 
+
82 
+            pdfjsLib.getDocument(pdfUrl).promise.then(function (pdf) {
83 
+                pdf.getPage(1).then(function (page) {
84 
+                    const scale = 1.5;
85 
+                    const viewport = page.getViewport({ scale });
86 
+
87 
+                    const canvas = document.createElement('canvas');
88 
+                    const context = canvas.getContext('2d');
89 
+                    canvas.height = viewport.height;
90 
+                    canvas.width = viewport.width;
91 
+
92 
+                    const renderContext = {
93 
+                        canvasContext: context,
94 
+                        viewport: viewport
95 
+                    };
96 
+
97 
+                    page.render(renderContext);
98 
+                    document.getElementById('pdfViewer').appendChild(canvas);
99 
+                });
100 
+            });
101 
+
102 
+        })
103 
+
104 
+    </script>
105 
+    <script async
106 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
107 
+        </script>
108 
+
109 
+</body>
110 
+
111 
+</html>

Write Preview
Loading…
Cancel
Save