muqriz
/
SIBS2024


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
							<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>KML Click Capture Sample</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
        integrity="sha512-abc123..." crossorigin="anonymous" />


    <style>
        html,
        body {
            height: 370px;
            padding: 0;
            margin: 0;
        }

        #map {
            height: 360px;
            width: 300px;
            overflow: hidden;
            float: left;
            border: thin solid #333;
        }

        #capture {
            height: 360px;
            width: 480px;
            overflow: hidden;
            float: left;
            background-color: #ECECFB;
            border: thin solid #333;
            border-left: none;
        }

        #pdfViewer {
            width: 100%;
            height: 600px;
        }
    </style>

    <style>
        /* CSS */
        .button-23 {
            background-color: #FFFFFF;
            border: 1px solid #222222;
            border-radius: 8px;
            box-sizing: border-box;
            color: #222222;
            cursor: pointer;
            display: inline-block;
            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
            font-size: 16px;
            font-weight: 600;
            line-height: 20px;
            margin: 0;
            outline: none;
            padding: 13px 23px;
            position: relative;
            text-align: center;
            text-decoration: none;
            touch-action: manipulation;
            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
            user-select: none;
            -webkit-user-select: none;
            width: auto;
        }

        .button-23:focus-visible {
            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
            transition: box-shadow .2s;
        }

        .button-23:active {
            background-color: #F7F7F7;
            border-color: #000000;
            transform: scale(.96);
        }

        .button-23:disabled {
            border-color: #DDDDDD;
            color: #DDDDDD;
            cursor: not-allowed;
            opacity: 1;
        }

        .map-svg {
            display: block;
            margin: 0 auto;
            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));

            a {
                transition: all 1s;
                transform-origin: 50% 50%;
                text-decoration: none;
                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));

                @media only screen and (min-width: 992px) {

                    polygon,
                    &:hover {
                        cursor: pointer;
                        transform: scale(1.05);
                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));

                        .st0 {
                            fill: $dark-default;
                        }
                    }
                }
            }

            .pahang-barat {
                fill: #427bba;
            }

            .pahang-tengah {
                fill: #144172;
            }

            .pahang-timur {
                fill: #0c6088;
            }

            .label-text {
                font-size: 35px;
                fill: white;
                transform: translate(0,
                        3px);
                /* adjust vertical position to centre text */
            }

            .label-text-cameron {
                font-size: 20px;
                fill: white;
                transform: translate(0,
                        3px);
                /* adjust vertical position to centre text */
            }


        }
    </style>

</head>

<body>

    <section class="section" style="max-height: 100vh;">

        <div class=""
            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="detail.html"><i
                        class="fas fa-chevron-left"></i></a></h6>
            <h6 style="color: white;">Jerantut</h6>
        </div>

        <!-- <div class="text-center pt-5"
            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
            <h5 style="font-weight: 500;">Perbadanan Setiausaha Kejaraan Pahang</h5>

        </div> -->

        <div class="text-center pt-1 pb-5"
            style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -150px;">
            <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
                <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->

                <!-- <div id="capture"></div> -->
                <div id="pdfViewer"></div>


            </div>
        </div>


        <script src="js/jquery-3.7.1.js" defer></script>

        <script src="js/pdfjs-viewer.js" defer></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
            integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
            crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>

    </section>


    <!-- <div id="map"></div> -->

    <script>
        var map;
        var src = 'https://file.io/t3IwR1hlxwkZ';

        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: new google.maps.LatLng(-19.257753, 146.823688),
                zoom: 2,
                mapTypeId: 'satellite'
            });

            var kmlLayer = new google.maps.KmlLayer(src, {
                suppressInfoWindows: true,
                preserveViewport: false,
                map: map
            });
        }

        document.addEventListener('DOMContentLoaded', () => {
            // PDF.js script to render PDF
            const pdfUrl = './HSD 11991.pdf'; // Replace with your PDF URL
            const pdfjsLib = window['pdfjs-dist/build/pdf'];
            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';

            pdfjsLib.getDocument(pdfUrl).promise.then(function (pdf) {
                pdf.getPage(1).then(function (page) {
                    const scale = 1.5;
                    const viewport = page.getViewport({ scale });

                    const canvas = document.createElement('canvas');
                    const context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;

                    const renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };

                    page.render(renderContext);
                    document.getElementById('pdfViewer').appendChild(canvas);
                });
            });

        })

    </script>
    <script async
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
        </script>

</body>

</html>