muqriz
/
SIBS2024


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
							<!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="../lists/raub.html"><i
                        class="fas fa-chevron-left"></i></a></h6>
            <h6 style="color: white;">Raub HSD 11991</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="map" style="width: 800px;"></div>
                <!-- <div id="capture"></div> -->


            </div>
        </div>


        <div class="text-center pt-5"
            style="background-color: white; display: flex; justify-content: center; align-items: left; padding-left: 100px; margin-top: 250px;">
            <div style="display: flex; flex-direction: row;">
                <div>
                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Lokasi :</span> <span
                            style="color: #ACACAC;">Taman Raub Jaya</span></h6>
                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Mukim :</span> <span
                            style="color: #ACACAC;">Gali</span></h6>
                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Daerah :</span> <span
                            style="color: #ACACAC;">Raub</span></h6>
                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Negeri :</span> <span
                            style="color: #ACACAC;">Pahang Darul Makmur</span></h6>
                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Skala :</span> <span
                            style="color: #ACACAC;">Tanpa Skala</span></h6>
                </div>
                <div style="margin-left: 100px;">
                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">No. Hak Milik :</span>
                        <span style="color: #ACACAC;">HSD 11991</span>
                    </h6>
                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Keluasan (MP) :</span>
                        <span style="color: #ACACAC;">40.47</span>
                    </h6>
                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Kehunaan :</span> <span
                            style="color: #ACACAC;">Pertanian</span></h6>
                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Start Neat :</span>
                        <span style="color: #ACACAC;">Pertanian Bersepadu Bersekali Agrotourism</span>
                    </h6>
                    <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;"></span> <span
                            style="color: #ACACAC;"></span></h6>
                </div>
            </div>
        </div>

        <div class="text-center pt-5 pb-5"
            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
            <a href="../pdf_pages/view_pdf_hsd11991.html" class="button-23 mb-2 mr-2"
                style="background-color: #1F9027; color: white; border: none;width: 200px;" role="button"
                data-toggle="modal" data-target="#exampleModal">View
                PDF</a>

        </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://dev.suite.psk.gov.my/kml/HSD%2011991.kml';

        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
            });
        }

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

</body>

</html>