backoffice/application/views/gestion_map.php

<style>

    #map {
        min-height: 250px;
        height: 100%;
    }

    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .btn-center{
        text-align: center;
    }

    .img-center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 65%;
    }

</style>

<link rel="stylesheet" href="<?php echo base_url('bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css') ?>">
<link rel="stylesheet" href="<?php echo base_url('bower_components/jvectormap/jquery-jvectormap.css') ?>">
<div class="content-wrapper">

    <section class="content-header">

        <?php

        if($alert=="ok") {

            if(!$success=="ok"){
                ?>
                <div class='alert alert-danger alert-dismissible'>
                    <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button>
                    <h4><i class='icon fa fa-ban'></i> Error!</h4>
                    <?php echo $message; ?>
                </div>

                <?php
            } else {
                ?>
                <div class="alert alert-success alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                    <h4><i class="icon fa fa-check"></i> Success!</h4>
                    <?php echo $message; ?>
                </div>

                <?php
            }
        }
        ?>
        <section class="content">
            <div class="box box-success">
                <div class="box-header with-border">
                    <h3 class="box-title">iLink World dans le monde</h3>
                </div>
                <!-- /.box-header -->
                <div class="box-body no-padding">
                    <div class="row">
                        <div class="col-md-9 col-sm-8">
                            <div class="pad">
                                <!-- Map will be created here -->
                                <div id="world-map-markers" style="width: 100%; height: 500px"></div>
                            </div>
                        </div>
                        <!-- /.col -->
                        <div class="col-md-3 col-sm-4">
                            <div class="pad box-pane-right bg-green" style="min-height: 280px">
                                <div class="description-block margin-bottom">
                                    <div class="sparkbar pad" data-color="#fff">90,70,90,70,75,80,70</div>
                                    <h5 class="description-header">8390</h5>
                                    <span class="description-text">Visits</span>
                                </div>
                                <!-- /.description-block -->
                                <div class="description-block margin-bottom">
                                    <div class="sparkbar pad" data-color="#fff">90,50,90,70,61,83,63</div>
                                    <h5 class="description-header">30%</h5>
                                    <span class="description-text">Referrals</span>
                                </div>
                                <!-- /.description-block -->
                                <div class="description-block">
                                    <div class="sparkbar pad" data-color="#fff">90,50,90,70,61,83,63</div>
                                    <h5 class="description-header">70%</h5>
                                    <span class="description-text">Organic</span>
                                </div>
                                <!-- /.description-block -->
                            </div>
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.box-body -->
            </div>
        </section>
</div>
<!-- jQuery 3 -->
<script src="<?php echo base_url('bower_components/jquery/dist/jquery.min.js') ?>"></script>
<!-- Bootstrap 3.3.7 -->
<script src="<?php echo base_url('bower_components/bootstrap/dist/js/bootstrap.min.js') ?>"></script>
<!-- DataTables -->
<script src="<?php echo base_url('bower_components/datatables.net/js/jquery.dataTables.min.js') ?>"></script>
<script src="<?php echo base_url('bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js') ?>"></script>
<!-- SlimScroll -->
<script src="<?php echo base_url('bower_components/jquery-slimscroll/jquery.slimscroll.min.js') ?>"></script>
<!-- FastClick -->
<script src="<?php echo base_url('bower_components/fastclick/lib/fastclick.js') ?>"></script>
<!-- AdminLTE App -->
<script src="<?php echo base_url('dist/js/adminlte.min.js') ?>"></script>
<!-- AdminLTE for demo purposes -->
<script src="<?php echo base_url('dist/js/demo.js') ?>"></script>
<script src="<?php echo base_url('bower_components/jquery-sparkline/dist/jquery.sparkline.min.js') ?>"></script>

<script src="<?php echo base_url('bower_components/chart.js/Chart.js') ?>"></script>

<script src="<?php echo base_url('plugins/jvectormap/jquery-jvectormap-1.2.2.min.js') ?>"></script>
<script src="<?php echo base_url('plugins/jvectormap/jquery-jvectormap-world-mill-en.js') ?>"></script>




<script type='text/javascript'>
    $( document ).ready(function() {

        var total = parseInt($( "#total-point" ).text(), 10);
        var start_page = 1001;

        //$(document).on("click", "#total-point", function () {
        $.ajax({
            url:'<?php echo base_url('Admin/progressRequestUser_g')?>',
            type: 'post',
            data: {start_at: start_page},
            dataType: 'json',
            async:true,
            success: function(data){
                alert(data);
            }
        });
        //});

    });
</script>

<script>
    $('#world-map-markers').vectorMap({
        map              : 'world_mill_en',
        normalizeFunction: 'polynomial',
        hoverOpacity     : 0.7,
        hoverColor       : false,
        backgroundColor  : 'transparent',
        regionStyle      : {
            initial      : {
                fill            : 'rgba(210, 214, 222, 1)',
                'fill-opacity'  : 1,
                stroke          : 'none',
                'stroke-width'  : 0,
                'stroke-opacity': 1
            },
            hover        : {
                'fill-opacity': 0.7,
                cursor        : 'pointer'
            },
            selected     : {
                fill: 'yellow'
            },
            selectedHover: {}
        },
        markerStyle      : {
            initial: {
                fill  : '#00a65a',
                stroke: '#111'
            }
        },
        markers          : [
            <?php

            $result=$positions;

            if($result!=false){
                $numrows=$result->num_rows();
                $num = 0;
                if ($numrows > 0) {

                    foreach ($result->result() as $row) {
                        $num++;
                        $mlat = (float)$row->latitude;
                        $mlng = (float)$row->longitude;
                        if($num<$numrows){
                            echo "{ latLng: [".$mlat.", ".$mlng."], name: '".addslashes($row->lastname)."' },";
                        }elseif ($numrows==$num){
                            echo "{ latLng: [".$mlat.", ".$mlng."], name: '".addslashes($row->lastname)."' }";
                        }
                    }
                }
            }
            ?>
        ]
    });

    /* SPARKLINE CHARTS
     * ----------------
     * Create a inline charts with spark line
     */

    // -----------------
    // - SPARKLINE BAR -
    // -----------------
    $('.sparkbar').each(function () {
        var $this = $(this);
        $this.sparkline('html', {
            type    : 'bar',
            height  : $this.data('height') ? $this.data('height') : '30',
            barColor: $this.data('color')
        });
    });
</script>