v_peta

<!DOCTYPE html>
<html lang="en">

    <head>
        <title> Peta Analisis </title>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
        <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
        <script src="<?= base_url('assets/js/leaflet.ajax.min.js'); ?>"></script>
        <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
        <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />
        <script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script>
        <?php $this->load->view("admin/_partial/head.php") ?>
    </head>

    <body id="page-top">

        <?php $this->load->view("admin/_partial/navbar.php") ?>
        <div id="wrapper">
            <?php $this->load->view("admin/_partial/sidebar.php") ?>

            <div id="mapid" class="w-100" style="margin-bottom: 80px">
                <div class=" mt-2" style="z-index: 1001; position: absolute; right: 10px;">
                    <div class="card">
                        <div class="card-body">
                            <label for="" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Pilih Cluster</label>
                            <div class="collapse multi-collapse show" id="multiCollapseExample1">
                                <?php $cluster = $this->db->query("SELECT * FROM `package_trx_171_1911` GROUP BY MICRO_CLUSTER ORDER BY MICRO_CLUSTER ASC ")->result() ?>
                                <select name="cluster" id="" class="form-control">
                                    <option value="">--Silahkan Pilih--</option>
                                    <option value="ALL" <?= ($this->input->get('cluster') == 'ALL') ? "selected" : "" ?> onclick="location.assign('<?php echo site_url('admin/peta?cluster=ALL') ?>')">ALL</option>
                                    <?php foreach ($cluster as $r) { ?>
                                        <option value="<?= $r->MICRO_CLUSTER ?>" <?= ($this->input->get('cluster') == $r->MICRO_CLUSTER) ? "selected" : "" ?> onclick="location.assign('<?php echo site_url('admin/peta?cluster=' . $r->MICRO_CLUSTER) ?>')"><?= $r->MICRO_CLUSTER ?></option>
                                    <?php } ?>
                                </select>
                            </div>

                        </div>
                    </div>
                    <div class="card mt-1">
                        <div class="card-body">
                            <label for="" data-toggle="collapse" href="#package" role="button" aria-expanded="false" aria-controls="package">Ranking Used Pakcage <?= $this->input->get('cluster') ?> Cluster</label>
                            <div class="collapse package show" id="package">
                                <?php
                                if ($this->input->get('cluster') == "ALL") {
                                    $topPakcage = $this->db->query("SELECT * FROM `v_package_most_used_all`")->result();
                                } else {
                                    $topPakcage = $this->db->query("SELECT PACKAGE, COUNT(PACKAGE) as used, colors FROM `package_trx_171_1911`
                                                                    INNER JOIN tb_package ON PACKAGE=tb_package.package_name
                                                                    WHERE MICRO_CLUSTER IN ('" . $this->input->get('cluster') . "') GROUP BY PACKAGE ORDER BY used DESC")->result();
                                }
                                ?>
                                <ul class="list-group">
                                    <?php
                                    foreach ($topPakcage as $key => $t) {
                                        if ($key == 0) {
                                            $mostPackage = $t->PACKAGE . "<br>Dipergunakan sebanyak: " . $t->used;
                                        }
                                        ?>
                                        <li class="list-group-item d-flexm justify-content-between">
                                            <div class="row">
                                                <div class="col-md-2">
                                                    <div class="d-block" style="background: <?= $t->colors ?>; width: 10px; height: 10px"></div>
                                                </div>
                                                <div class="col-md-10">
                                                    <span><?= $t->PACKAGE ?> (<?= $t->used ?>)</span>
                                                </div>
                                            </div>
                                        </li>
                                    <?php } ?>
                                </ul>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <!-- DataTables -->

            <?php $this->load->view("admin/_partial/footer.php") ?>
        </div>

        <!-- /.container-fluid -->

        <!-- Sticky Footer -->


    </div>
    <!-- /.content-wrapper -->

</div>
<!-- /#wrapper -->


<?php $this->load->view("admin/_partial/scrolltop.php") ?>
<?php $this->load->view("admin/_partial/modal.php") ?>
<?php $this->load->view("admin/_partial/js.php") ?>

<script>
    var mymap = L.map('mapid', {
        center: [-6.9897797, 110.4196803, 10],
        zoom: 10
    });

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery ©️ <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken: 'pk.eyJ1IjoidHJpYW5ub3ZpYW5kaSIsImEiOiJjanowMjY4MGgwMW8wM25xdG40MmV3cnBnIn0.dgGkT5I8gXsIRMPD-Cx_FQ'
    }).addTo(mymap);


    var geojsonLayer = new L.GeoJSON.AJAX("<?php echo site_url('Restapi/routes?cluster=' . $this->input->get('cluster')) ?>", {
        style: setStyle
    });

    geojsonLayer.bindTooltip("<?= $this->input->get('cluster') ?> Cluster.<br> Paket Populer: <?= $mostPackage ?>").openTooltip();
    geojsonLayer.addTo(mymap);
        //var markers = L.markerClusterGroup();


        function setStyle(feature) {
            return{
                fillColor: feature.properties.color,
                weight: 2,
                opacity: 1,
                color: 'transparent', //Outline color
                fillOpacity: feature.properties.opacity
            }
        }
</script>
</body>

</html>