Untitled

// function di Controller Peta
function new_peta() {
        $cluster = $this->input->get("cluster");
        $markers = $this->db->query("SELECT * FROM `ndb_cj` WHERE MICRO_CLUSTER IN ('$cluster') GROUP BY LATITUDE,LONGITUDE ORDER BY LATITUDE ASC ")->result();
        $data['markers'] = $markers;
        $this->load->view("/admin/PackageTracker/new_peta", $data);
    }


//view. File name new_peta.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <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>
        <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>
    </head>
    <style media="screen">
        #mapid{
            height: 95vh;
        }
    </style>
    <body>
        <div id="mapid"><div>
                </body>
                <script src="https://code.jquery.com/jquery-3.2.1.js" ></script>
                <script type="text/javascript">
                    var mymap = L.map('mapid').setView([-6.9897797, 110.4196803, 10], 13);
                    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);

                    //addmarker

                    var markers = L.markerClusterGroup();
<?php
if (!empty($markers)) {
    foreach ($markers as $key => $value) {
        ?>
                            var m = L.marker([<?= $value->LATITUDE ?>, <?= $value->LONGITUDE ?>], {title: "<?= $value->MICRO_CLUSTER ?>"}).addTo(mymap).on('click', onClick);
        <?php
    }
}
?>

                    function onClick(e) {
                        var lat = e.latlng.lat;
                        var lon = e.latlng.lng;
                        var cluster = e.target.options.title;
                        var url = '<?= site_url("admin/peta/get_top_package") ?>';
                        $.get(url, {'lat': lat, 'lng': lon, 'cluster': cluster}, function (data) {
                            // e.target.bindPopup(data).openPopup();
                        });

                    }

                </script>
                </html>