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

done lipis mad bera

master
azri 4 months ago
parent
2319b78e49
commit
aede81c9fa
11 changed files with 834 additions and 2 deletions
Split View Show Diff Stats
  1. BIN
      HSD_10006.pdf
  2. BIN
      PN_17421_HSD_1950.pdf
  3. BIN
      PN_17427_HSD_1949.pdf
  4. 129
    0
      details/penternakan_hsd_10006.html
  5. 129
    0
      details/penternakan_pn_17421_hsd_1950.html
  6. 129
    0
      details/penternakan_pn_17427_hsd_1949.html
  7. 2
    2
      index.html
  8. 105
    0
      lists/bera.html
  9. 118
    0
      lists/lipis.html
  10. 111
    0
      pdf_pages/hsd_10006.html
  11. 111
    0
      pdf_pages/pn_17427_hsd_1950.html

BIN
HSD_10006.pdf View File


BIN
PN_17421_HSD_1950.pdf View File


BIN
PN_17427_HSD_1949.pdf View File


+ 129
- 0
details/penternakan_hsd_10006.html View File 

@@ -0,0 +1,129 @@
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="../lists/bera.html"><i
22 
+                        class="fas fa-chevron-left"></i></a></h6>
23 
+            <h6 style="color: white;">HSD 10006</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 Kejaraan 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="map" style="width: 800px;"></div>
38 
+                <!-- <div id="capture"></div> -->
39 
+
40 
+            </div>
41 
+        </div>
42 
+
43 
+
44 
+
45 
+
46 
+        <div class="text-center pt-5"
47 
+            style="background-color: white; display: flex; justify-content: center; align-items: left; padding-left: 100px; margin-top: 250px;">
48 
+            <div style="display: flex; flex-direction: row;">
49 
+                <div>
50 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Lokasi :</span> <span
51 
+                            style="color: #ACACAC;">Bukit Mendi</span></h6>
52 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Mukim :</span> <span
53 
+                            style="color: #ACACAC;">Triang</span></h6>
54 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Daerah :</span> <span
55 
+                            style="color: #ACACAC;">Bera</span></h6>
56 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Negeri :</span> <span
57 
+                            style="color: #ACACAC;">Pahang Darul Makmum</span></h6>
58 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Skala :</span> <span
59 
+                            style="color: #ACACAC;">Tanpa Skala</span></h6>
60 
+                </div>
61 
+                <div style="margin-left: 100px;">
62 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">No. Hak Milik :</span>
63 
+                        <span style="color: #ACACAC;">HSD 10006</span>
64 
+                    </h6>
65 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Keluasan (Ha) :</span>
66 
+                        <span style="color: #ACACAC;">30.36</span>
67 
+                    </h6>
68 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Kegunaan :</span> <span
69 
+                            style="color: #ACACAC;">Pertanian</span></h6>
70 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Syarat Nyata :</span>
71 
+                        <span style="color: #ACACAC;">Ternakan Domestik (Kambing/Lembu/Kerbau/Arnab/Kijang dan Rusa)</span>
72 
+                    </h6>
73 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;"></span> <span
74 
+                            style="color: #ACACAC;"></span></h6>
75 
+                </div>
76 
+            </div>
77 
+        </div>
78 
+
79 
+        <div class="text-center pt-5 pb-5"
80 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
81 
+            <a href="../pdf_pages/hsd_10006.html" class="button-23 mb-2 mr-2"
82 
+                style="background-color: #1F9027; color: white; border: none;width: 200px;" role="button"
83 
+                data-toggle="modal" data-target="#exampleModal">View
84 
+                PDF</a>
85 
+
86 
+        </div>
87 
+
88 
+        <script src="js/jquery-3.7.1.js" defer></script>
89 
+
90 
+        <script src="js/pdfjs-viewer.js" defer></script>
91 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
92 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
93 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
94 
+
95 
+    </section>
96 
+
97 
+
98 
+    <!-- <div id="map"></div> -->
99 
+
100 
+    <script>
101 
+        var map;
102 
+        var src = 'https://file.io/t3IwR1hlxwkZ';
103 
+
104 
+        function initMap() {
105 
+            map = new google.maps.Map(document.getElementById('map'), {
106 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
107 
+                zoom: 2,
108 
+                mapTypeId: 'satellite'
109 
+            });
110 
+
111 
+            var kmlLayer = new google.maps.KmlLayer(src, {
112 
+                suppressInfoWindows: true,
113 
+                preserveViewport: false,
114 
+                map: map
115 
+            });
116 
+        }
117 
+
118 
+
119 
+
120 
+
121 
+
122 
+    </script>
123 
+    <script async
124 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
125 
+        </script>
126 
+
127 
+</body>
128 
+
129 
+</html>

+ 129
- 0
details/penternakan_pn_17421_hsd_1950.html View File 

@@ -0,0 +1,129 @@
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="../lists/bera.html"><i
22 
+                        class="fas fa-chevron-left"></i></a></h6>
23 
+            <h6 style="color: white;">PN 17421 HSD 1950</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 Kejaraan 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="map" style="width: 800px;"></div>
38 
+                <!-- <div id="capture"></div> -->
39 
+
40 
+            </div>
41 
+        </div>
42 
+
43 
+
44 
+
45 
+
46 
+        <div class="text-center pt-5"
47 
+            style="background-color: white; display: flex; justify-content: center; align-items: left; padding-left: 100px; margin-top: 250px;">
48 
+            <div style="display: flex; flex-direction: row;">
49 
+                <div>
50 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Lokasi :</span> <span
51 
+                            style="color: #ACACAC;">Penjom</span></h6>
52 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Mukim :</span> <span
53 
+                            style="color: #ACACAC;">Penjom</span></h6>
54 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Daerah :</span> <span
55 
+                            style="color: #ACACAC;">Lipis</span></h6>
56 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Negeri :</span> <span
57 
+                            style="color: #ACACAC;">Pahang Darul Makmum</span></h6>
58 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Skala :</span> <span
59 
+                            style="color: #ACACAC;">Tanpa Skala</span></h6>
60 
+                </div>
61 
+                <div style="margin-left: 100px;">
62 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">No. Hak Milik :</span>
63 
+                        <span style="color: #ACACAC;">PN 17421 (HSD 1950)</span>
64 
+                    </h6>
65 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Keluasan (Ha) :</span>
66 
+                        <span style="color: #ACACAC;">21.107</span>
67 
+                    </h6>
68 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Kegunaan :</span> <span
69 
+                            style="color: #ACACAC;">Pertanian</span></h6>
70 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Syarat Nyata :</span>
71 
+                        <span style="color: #ACACAC;">Tanaman Dusun Sahaja (Kampung & Tanaman Am)</span>
72 
+                    </h6>
73 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;"></span> <span
74 
+                            style="color: #ACACAC;"></span></h6>
75 
+                </div>
76 
+            </div>
77 
+        </div>
78 
+
79 
+        <div class="text-center pt-5 pb-5"
80 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
81 
+            <a href="../pdf_pages/pn_17427_hsd_1950.html" class="button-23 mb-2 mr-2"
82 
+                style="background-color: #1F9027; color: white; border: none;width: 200px;" role="button"
83 
+                data-toggle="modal" data-target="#exampleModal">View
84 
+                PDF</a>
85 
+
86 
+        </div>
87 
+
88 
+        <script src="js/jquery-3.7.1.js" defer></script>
89 
+
90 
+        <script src="js/pdfjs-viewer.js" defer></script>
91 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
92 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
93 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
94 
+
95 
+    </section>
96 
+
97 
+
98 
+    <!-- <div id="map"></div> -->
99 
+
100 
+    <script>
101 
+        var map;
102 
+        var src = 'https://file.io/t3IwR1hlxwkZ';
103 
+
104 
+        function initMap() {
105 
+            map = new google.maps.Map(document.getElementById('map'), {
106 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
107 
+                zoom: 2,
108 
+                mapTypeId: 'satellite'
109 
+            });
110 
+
111 
+            var kmlLayer = new google.maps.KmlLayer(src, {
112 
+                suppressInfoWindows: true,
113 
+                preserveViewport: false,
114 
+                map: map
115 
+            });
116 
+        }
117 
+
118 
+
119 
+
120 
+
121 
+
122 
+    </script>
123 
+    <script async
124 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
125 
+        </script>
126 
+
127 
+</body>
128 
+
129 
+</html>

+ 129
- 0
details/penternakan_pn_17427_hsd_1949.html View File 

@@ -0,0 +1,129 @@
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="../lists/bera.html"><i
22 
+                        class="fas fa-chevron-left"></i></a></h6>
23 
+            <h6 style="color: white;">HSD 10006</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 Kejaraan 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="map" style="width: 800px;"></div>
38 
+                <!-- <div id="capture"></div> -->
39 
+
40 
+            </div>
41 
+        </div>
42 
+
43 
+
44 
+
45 
+
46 
+        <div class="text-center pt-5"
47 
+            style="background-color: white; display: flex; justify-content: center; align-items: left; padding-left: 100px; margin-top: 250px;">
48 
+            <div style="display: flex; flex-direction: row;">
49 
+                <div>
50 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Lokasi :</span> <span
51 
+                            style="color: #ACACAC;">Bukit Mendi</span></h6>
52 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Mukim :</span> <span
53 
+                            style="color: #ACACAC;">Triang</span></h6>
54 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Daerah :</span> <span
55 
+                            style="color: #ACACAC;">Bera</span></h6>
56 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Negeri :</span> <span
57 
+                            style="color: #ACACAC;">Pahang Darul Makmum</span></h6>
58 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Skala :</span> <span
59 
+                            style="color: #ACACAC;">Tanpa Skala</span></h6>
60 
+                </div>
61 
+                <div style="margin-left: 100px;">
62 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">No. Hak Milik :</span>
63 
+                        <span style="color: #ACACAC;">HSD 10006</span>
64 
+                    </h6>
65 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Keluasan (Ha) :</span>
66 
+                        <span style="color: #ACACAC;">30.36</span>
67 
+                    </h6>
68 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Kegunaan :</span> <span
69 
+                            style="color: #ACACAC;">Pertanian</span></h6>
70 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Syarat Nyata :</span>
71 
+                        <span style="color: #ACACAC;">Ternakan Domestik (Kambing/Lembu/Kerbau/Arnab/Kijang dan Rusa)</span>
72 
+                    </h6>
73 
+                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;"></span> <span
74 
+                            style="color: #ACACAC;"></span></h6>
75 
+                </div>
76 
+            </div>
77 
+        </div>
78 
+
79 
+        <div class="text-center pt-5 pb-5"
80 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
81 
+            <a href="../pdf_pages/hsd_10006.html" class="button-23 mb-2 mr-2"
82 
+                style="background-color: #1F9027; color: white; border: none;width: 200px;" role="button"
83 
+                data-toggle="modal" data-target="#exampleModal">View
84 
+                PDF</a>
85 
+
86 
+        </div>
87 
+
88 
+        <script src="js/jquery-3.7.1.js" defer></script>
89 
+
90 
+        <script src="js/pdfjs-viewer.js" defer></script>
91 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
92 
+            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
93 
+            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
94 
+
95 
+    </section>
96 
+
97 
+
98 
+    <!-- <div id="map"></div> -->
99 
+
100 
+    <script>
101 
+        var map;
102 
+        var src = 'https://file.io/t3IwR1hlxwkZ';
103 
+
104 
+        function initMap() {
105 
+            map = new google.maps.Map(document.getElementById('map'), {
106 
+                center: new google.maps.LatLng(-19.257753, 146.823688),
107 
+                zoom: 2,
108 
+                mapTypeId: 'satellite'
109 
+            });
110 
+
111 
+            var kmlLayer = new google.maps.KmlLayer(src, {
112 
+                suppressInfoWindows: true,
113 
+                preserveViewport: false,
114 
+                map: map
115 
+            });
116 
+        }
117 
+
118 
+
119 
+
120 
+
121 
+
122 
+    </script>
123 
+    <script async
124 
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
125 
+        </script>
126 
+
127 
+</body>
128 
+
129 
+</html>

+ 2
- 2
index.html View File 

@@ -54,7 +54,7 @@
54 54 
                                 C65.6,205,72.4,205.9,77.6,205.5z" />
55 55 
                         </a>
56 56 
                         <!-- Lipis -->
57 
-                        <a href="testing.html" data-area="lipis">
57 
+                        <a href="lists/lipis.html" data-area="lipis">
58 58 
                             <path id="lipis" class="pahang-barat"
59 59 
                                 d="M450.8,329.1c-5.7,4.5-13.3,9.2-20.1,9.3c-11.2,0.2-13.3,7.3-15.4,13.6c-13.1-3.3-21.3-13.5-31.4-20.9
60 60 
                                                 c-5.5-4-13.6-15.1-22.9-5.8c-6.2,6.2-3.1,13.6-0.7,20.7c0.2,1.3,0.9,2.7,1.3,4c0.2,3.5,3,4.9,5.3,6.6c5.6,4,4.5,8.3-0.9,10.5
 
@@ -199,7 +199,7 @@
199 199 
                                             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" />
200 200 
                         </a>
201 201 
                         <!-- Bera -->
202 
-                        <a href="testing.html" data-area="bera">
202 
+                        <a href="lists/bera.html" data-area="bera">
203 203 
                             <path id="bera" class="pahang-barat"
204 204 
                                 d="M671.1,911.5c-13.5-10.7-16-25.6-11-39.9c3.5-9.9,3.3-18.5,2.3-28.1c-0.4-3.6,1.4-7.4,2.1-11.1c0,0,0,0,0,0
205 205 
                                 c0,0,0,0,0,0c0.4-1.2,0.6-2.4,1.2-3.5c6.1-10.4,13.1-20.5-1.6-30c-2.9-1.9-4.8-5.7-4.9-9.8c-5.1-8.2,2.4-18.2-3.8-26.6

+ 105
- 0
lists/bera.html View File 

@@ -0,0 +1,105 @@
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 
+
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;">Bera</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;">
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="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
36 
+            <div class="pt-5" style="width: 600px;height: 100px;">
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="#" data-area="jerantut">
42 
+                            <path id="jerantut" class="pahang-barat" d="M671.1,911.5c-13.5-10.7-16-25.6-11-39.9c3.5-9.9,3.3-18.5,2.3-28.1c-0.4-3.6,1.4-7.4,2.1-11.1c0,0,0,0,0,0
43 
+                            c0,0,0,0,0,0c0.4-1.2,0.6-2.4,1.2-3.5c6.1-10.4,13.1-20.5-1.6-30c-2.9-1.9-4.8-5.7-4.9-9.8c-5.1-8.2,2.4-18.2-3.8-26.6
44 
+                            c-1.3-1.7,2.9-6.3,5.6-5.3c10.6,3.9,16.1-5.2,26.9-8.8c-19.9-13.4-34.9-29-49.3-45.4c0,0,0,0,0,0c-7.1-8.3,1.1-17-0.6-25.4
45 
+                            c-9.3-4.9-17.2-11.7-24.6-19c-3.3-3.3-6-6.6-11.3-7c-4.1-0.2-7.5-2.6-6.7-7.3c1.6-9.6-5.2-14.4-10.6-20c0,0,0,0,0,0
46 
+                            c-7.7-3.4-15.5-6-24.3-5.3c-9.7,0.7-14.8,9.7-14.3,14.9c2.4,24.5-8.5,29-34.4,27.1c-5.6-0.4-11.2-2.5-16.8-4.7
47 
+                            c-9.8-3.9-20.4-5.5-29.2,3.3c0,0,0,0,0,0c-1,3-3.9,6-0.3,9.1c10.7,9.1,4.2,17.9-3,22.9c-11.4,7.9-10.2,18.9-11.1,29.7
48 
+                            c-0.2,2.2,2.3,5.7,0,6.9c-14.3,7.3-3.1,12,1.6,17.1c6.2,6.6,5.2,11.7-2.6,15.9c3.9,4.8,9.8,4.8,15,5.2
49 
+                            c22.6,1.7,39.6,11.4,51.4,31.4c5,8.5,10.2,17.6,18.8,23.5c25.9,17.5,51.8,35,77.7,52.3c3.1,2.1,6.7,4.7,10.1,4.7
50 
+                            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" />
51 
+                        </a>
52 
+                    </g>
53 
+                </svg>
54 
+
55 
+
56 
+            </div>
57 
+        </div>
58 
+
59 
+        <div id="penternakan_plot" class="content-div">
60 
+            <div class="text-center pt-5"
61 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px;margin-top: 250px;">
62 
+                <h6>Penternakan</h6><br>
63 
+
64 
+            </div>
65 
+            <div class="text-center pt-2 text-nowrap flex-wrap"
66 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px; margin-top: 0;gap: 10px;padding-right: 100px;">
67 
+                <a href="../details/penternakan_hsd_10006.html" class="button-23 mb-2 mr-2"
68 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 10006</a>
69 
+            </div>
70 
+        </div>
71 
+
72 
+
73 
+    </section>
74 
+
75 
+    <script>
76 
+
77 
+        document.getElementById('pembangun_btn').addEventListener('click', function () {
78 
+            showDiv('pembangun_plot');
79 
+        });
80 
+
81 
+        document.getElementById('penternakan_btn').addEventListener('click', function () {
82 
+            showDiv('penternakan_plot');
83 
+        });
84 
+
85 
+        document.getElementById('pertanian_btn').addEventListener('click', function () {
86 
+            showDiv('pertanian_plot');
87 
+        });
88 
+
89 
+        document.getElementById('industri_btn').addEventListener('click', function () {
90 
+            showDiv('industri_plot');
91 
+        });
92 
+
93 
+        function showDiv(divId) {
94 
+            var divs = document.getElementsByClassName('content-div');
95 
+            for (var i = 0; i < divs.length; i++) {
96 
+                divs[i].classList.add('hidden');
97 
+            }
98 
+            document.getElementById(divId).classList.remove('hidden');
99 
+        }
100 
+    </script>
101 
+    <script defer src="/ruta relativa a mi archivo .js"></script>
102 
+
103 
+</body>
104 
+
105 
+</html>

+ 118
- 0
lists/lipis.html View File 

@@ -0,0 +1,118 @@
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 
+
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;">Lipis</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;">
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="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
36 
+            <div class="pt-5" style="width: 600px;height: 100px;">
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="#" data-area="jerantut">
42 
+                            <path id="jerantut" class="pahang-barat" d="M450.8,329.1c-5.7,4.5-13.3,9.2-20.1,9.3c-11.2,0.2-13.3,7.3-15.4,13.6c-13.1-3.3-21.3-13.5-31.4-20.9
43 
+                            c-5.5-4-13.6-15.1-22.9-5.8c-6.2,6.2-3.1,13.6-0.7,20.7c0.2,1.3,0.9,2.7,1.3,4c0.2,3.5,3,4.9,5.3,6.6c5.6,4,4.5,8.3-0.9,10.5
44 
+                            c-10.5,4.2-21.5,9.5-32.8,3.1c-6.8-3.8-11.3-1.5-15.3,3.5c-4.5,5.6-8.3,11.7-12.7,17.3c-2.4,3.1-6.5,5.8-9.9,3.8
45 
+                            c-4.6-2.6-9.5-6.4-11.7-11c-2.3-4.8,4.5-4.4,7.2-6.6c6.6-5.5,13.2-10.3,4.1-20.1c-6-6.5-8.9-15.8-3-24.5c7.2-10.6-1-12.1-7.9-14.3
46 
+                            c-13.9-4.4-22.6,4.1-31,12.9c-3.6,3.7-9.9,5.7-8.6,12.8c-1.4,1.7-3.4,3.2-4,5.4l-6.8,0.4c-5.5-4.8-9.1-10.5-8.5-18.9
47 
+                            c0.3-3.4-2.9-6.7-6.6-6.5c-10.1,0.4-15.1-5.6-19.5-13.3c-1.7-2.9-4.7-5.1-8.5-3.5c-2.9,1.2-3,3.8-2.2,6.4c2.3,7.6-3.3,8.7-8.2,9.5
48 
+                            c-5.4,0.9-11.4,2.3-16.2,0.7c-15.5-5-30.7-4.7-46-0.1c0,0,0,0,0,0c-4.5-11.8-15.8-16.2-25.7-21.2c-11-5.6-15.7-12.4-12.3-24.9
49 
+                            c4.2-15.4,4.2-15.3-10.6-17c-9-1-15.2-4.2-9.2-14.6c2.6-4.5-0.5-7-2.4-10.1c-1.9-3.2-2.9-6.4-2.9-9.4c0-5.6,3.2-10.6,9.2-14.2
50 
+                            c12.7,2.5,23.7-2.5,34.9-7.4c6.1-2.7,10.3-12.1,19.3-5.7c0.5,0.4,3.9-1.4,3.9-2.2c0.3-11.1,8.7-20.6,8.7-31.8c0-2-0.3-3.9-0.8-6
51 
+                            c0.1-0.5,0.1-0.9,0.1-1.3c0-1.7-0.5-3.2-2-4.4c-1.7-2.2-3.4-4.3-5.1-6.5c0,0,0,0,0,0c2.8-4.6,3.4-9.2-0.1-13.7c0,0,0,0,0,0
52 
+                            c0.1-3.8,0.2-7.6,0.3-11.4c3.6-5.6,2-11.8,2-17.8c0-0.3,0-0.6,0-0.9c8.1-3.3,16.6,6.2,24.7-0.9c1.5-1.3,5.1-1.3,5.6-2.6
53 
+                            c4.7-14.3,18.9-16.3,29.4-23.2c1.6-1.1,2.4-3.8,4.9-3c13.7,4.5,16.7-5.8,18-14.7c1.9-13.1,4.6-26.3,1.8-39.7
54 
+                            c-1.2-5.8-0.4-11.5,7.2-12.2c6.7-0.7,12,0.7,10.2,9.7c-0.8,3.7,1.1,7,4.8,7.9c5.5,1.4,7.3,5.4,8.4,10c1.5,6.2,5.2,9.4,11.4,10
55 
+                            c8.7,0.9,11.1,6.4,10.9,14.2c-0.1,3.8-0.6,7.9,0.7,11.2c2.1,5.2,9.4,9.2,11.1,3.5c4.3-14.2,18.1-23.7,18.5-39.3
56 
+                            c0.2-6.3,0-12.7,0.2-19c0.1-3.4,1.4-8.8,5.1-5.6c5.1,4.4,11.8,2.2,15.3,4.5c14.4,9.4,26.8,5.5,40-1.6c13.6-7.3,13.8-7,18.2,8.4
57 
+                            c0.2,0.8,0.1,2.1,0.6,2.4c9.2,6.3,15.1,15.7,21.5,24.8c6.3,9.1,13.1,17.7,23.9,22.4c-9.7,16.5-1.1,29.5,8.8,41.7
58 
+                            c4.6,5.7,5.7,10.9,2.4,17.3c-1.9,3.7-3.8,7.6-3.1,12c0.4,2.3,0.7,4.6,0.7,6.7c0,7.7-3,14.1-11.1,18.4c-3.7,6.9-9.2,14.6-5.4,22
59 
+                            c6,11.9,9.1,24,9.8,37.1l0,0c3.7,3.5,6.9,7,6.6,12.8c-0.2,4.1,0,8.9,2,12.2c7.8,12.4,7.6,24.7,2.9,38.2c-0.9,2.6-1.7,5.5-1.7,8.4
60 
+                            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" />
61 
+                        </a>
62 
+                    </g>
63 
+                </svg>
64 
+
65 
+
66 
+            </div>
67 
+        </div>
68 
+
69 
+        <div id="penternakan_plot" class="content-div">
70 
+            <div class="text-center pt-5"
71 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px;margin-top: 250px;">
72 
+                <h6>Penternakan</h6><br>
73 
+
74 
+            </div>
75 
+            <div class="text-center pt-2 text-nowrap flex-wrap"
76 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px; margin-top: 0;gap: 10px;padding-right: 100px;">
77 
+                <a href="../details/penternakan_pn_17421_hsd_1950.html" class="button-23 mb-2 mr-2"
78 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">PN 17421 (HSD 1950)</a>
79 
+
80 
+                    <a href="../details/penternakan_pn_17427_hsd_1949.html" class="button-23 mb-2 mr-2"
81 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">PN 17427 (HSD 1949)</a>
82 
+            </div>
83 
+        </div>
84 
+
85 
+
86 
+    </section>
87 
+
88 
+    <script>
89 
+
90 
+        document.getElementById('pembangun_btn').addEventListener('click', function () {
91 
+            showDiv('pembangun_plot');
92 
+        });
93 
+
94 
+        document.getElementById('penternakan_btn').addEventListener('click', function () {
95 
+            showDiv('penternakan_plot');
96 
+        });
97 
+
98 
+        document.getElementById('pertanian_btn').addEventListener('click', function () {
99 
+            showDiv('pertanian_plot');
100 
+        });
101 
+
102 
+        document.getElementById('industri_btn').addEventListener('click', function () {
103 
+            showDiv('industri_plot');
104 
+        });
105 
+
106 
+        function showDiv(divId) {
107 
+            var divs = document.getElementsByClassName('content-div');
108 
+            for (var i = 0; i < divs.length; i++) {
109 
+                divs[i].classList.add('hidden');
110 
+            }
111 
+            document.getElementById(divId).classList.remove('hidden');
112 
+        }
113 
+    </script>
114 
+    <script defer src="/ruta relativa a mi archivo .js"></script>
115 
+
116 
+</body>
117 
+
118 
+</html>

+ 111
- 0
pdf_pages/hsd_10006.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/penternakan_hsd_10006.html"><i
22 
+                        class="fas fa-chevron-left"></i></a></h6>
23 
+            <h6 style="color: white;">HSD 10006</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 Kejaraan 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_10006.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/pn_17427_hsd_1950.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/penternakan_hsd_10006.html"><i
22 
+                        class="fas fa-chevron-left"></i></a></h6>
23 
+            <h6 style="color: white;">PN 17427 HSD 1950</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 Kejaraan 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 = '../PN_17421_HSD_1950.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