FloatBackOfffice/application/views/admin/report/view_report_heatmap.php

<h1>Heatmap</h1>
<br/>
<style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 625px;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }
      #floating-panel {
        background-color: #fff;
        border: 1px solid #999;
        left: 25%;
        padding: 5px;
        position: absolute;
        top: 10px;
        z-index: 5;
      }
    </style>
    <div id="floating-panel">
      <button onclick="toggleHeatmap()">Toggle Heatmap</button>
      <button onclick="changeGradient()">Change gradient</button>
      <button onclick="changeRadius()">Change radius</button>
      <button onclick="changeOpacity()">Change opacity</button>
    </div>
    <div id="map"></div>
    <script>

      // This example requires the Visualization library. Include the libraries=visualization
      // parameter when you first load the API. For example:
      // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization">

      var map, heatmap;

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 12,
          center: {lat: <?=$center_lat?>, lng: <?=$center_lng?>},
          mapTypeId: 'roadmap'
        });

        heatmap = new google.maps.visualization.HeatmapLayer({
          data: getPoints(),
          map: map
        });

                                var iconBase =
            'https://developers.google.com/maps/documentation/javascript/examples/full/images/';
                                var icons = {
          parking: {
            icon: iconBase + 'parking_lot_maps.png'
          },
          library: {
            icon: iconBase + 'library_maps.png'
          },
          info: {
            icon: iconBase + 'info-i_maps.png'
          }
        };
                                var icon = {
                                        url: '/assets/images/pin-673-443159.png',
                                        size: new google.maps.Size(30, 40),
                                        scaledSize: new google.maps.Size(30, 40)
                                };
                                var features = []; //getParkings();
                                // Create markers.
        for (var i = 0; i < features.length; i++) {
          var marker = new google.maps.Marker({
            position: features[i].position,
            icon: icon, /*icons['parking'].icon,*/ /*features[i].type].icon,*/
                                                title: features[i].provider + '\r\n' + features[i].name + '\r\n' + features[i].description,
            map: map
          });
        };
        var toplocations = getTopLocations();
                                for (var i = 0; i <toplocations.length; i++) {
                                        var marker = new google.maps.Marker({
            position: toplocations[i].position,
            icon: icons['library'].icon, /*features[i].type].icon,*/
            title: 'Total ' + toplocations[i].count,
            map: map
          });
                                }
                                customSettings();
      }

      function toggleHeatmap() {
        heatmap.setMap(heatmap.getMap() ? null : map);
      }

      function changeGradient() {
        var gradient = [
          'rgba(0, 255, 255, 0)',
          'rgba(0, 255, 255, 1)',
          'rgba(0, 191, 255, 1)',
          'rgba(0, 127, 255, 1)',
          'rgba(0, 63, 255, 1)',
          'rgba(0, 0, 255, 1)',
          'rgba(0, 0, 223, 1)',
          'rgba(0, 0, 191, 1)',
          'rgba(0, 0, 159, 1)',
          'rgba(0, 0, 127, 1)',
          'rgba(63, 0, 91, 1)',
          'rgba(127, 0, 63, 1)',
          'rgba(191, 0, 31, 1)',
          'rgba(255, 0, 0, 1)'
        ]
        heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
      }

      function changeRadius() {
        heatmap.set('radius', heatmap.get('radius') ? null : 50);
      }

      function changeOpacity() {
        heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
      }

      // Heatmap data: 500 Points
      function getPoints() {
        return [
<?
        foreach ($top_locations as $f) {
                if ($f["total"]>1) {
                        for ($i=0;$i<$f["total"];$i++) {
                                echo "new google.maps.LatLng(".$f["lat"].",".$f["lng"]."),\n";
                        }
                } else {
                        echo "new google.maps.LatLng(".$f["lat"].",".$f["lng"]."),\n";
                }
        }
?>
        ];
      }

      function getTopLocations() {
                                return [
<? $i=0; foreach ($top_locations as $f) { ?>
                                        {position: new google.maps.LatLng(<?=$f["lat"].",".$f["lng"]?>), count: <?=$f["total"]?>},
<? $i++; if ($i>10) break; } ?>
                                ];
                        }
      function getParkings() {
              return [<?
              $handle = fopen("application/models/parking.txt", "r");
              while (($line = fgets($handle)) !== false) {
                      echo "{position: new google.maps.LatLng(".trim(str_replace('position: {lat:','',str_replace('lng:','',str_replace('},','',$line))))."),";
                      echo " provider: \"\", name: \"\", description: \"\"},\n";
              }
              fclose($handle);?>];
      }
    </script>
Showing <?php echo count($top_locations); ?> result(s)
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=<?=$googleKey?>&libraries=visualization&callback=initMap">
    </script>

<script>
//                      $(function() {
                                // Handler for .ready() called.
                        function customSettings() {
                                heatmap.set('radius', 30);
        var gradient = [
          'rgba(0, 255, 255, 0)',
          'rgba(0, 255, 255, 1)',
          'rgba(0, 191, 255, 1)',
          'rgba(0, 127, 255, 1)',
          'rgba(0, 63, 255, 1)',
          'rgba(0, 0, 255, 1)',
          'rgba(0, 0, 223, 1)',
          'rgba(0, 0, 191, 1)',
          'rgba(0, 0, 159, 1)',
          'rgba(0, 0, 127, 1)',
          'rgba(63, 0, 91, 1)',
          'rgba(127, 0, 63, 1)',
          'rgba(191, 0, 31, 1)',
          'rgba(255, 0, 0, 1)'
        ]
        heatmap.set('gradient', gradient);
                        }
                        //});
/*
      <button onclick="toggleHeatmap()">Toggle Heatmap</button>
      <button onclick="changeGradient()">Change gradient</button>
      <button onclick="changeRadius()">Change radius</button>
      <button onclick="changeOpacity()">Change opacity</button>
*/
                </script>
<h1>Top locations</h1>
<table>
<tr><th>Total</th><th>Latitude</th><th>Longitude</th></tr>
<? foreach ($top_locations as $f) { ?>
<tr align=right>
        <td><?=$f["total"]?></td>
        <td><?=$f["lat"]?></td>
        <td><?=$f["lng"]?></td>
</tr>
<? } ?>
</table>