From 4c3092ac58603f7a6c58f0037b81b74f600b78bc Mon Sep 17 00:00:00 2001
From: Korina Cordero <cordero.korina@gmail.com>
Date: Mon, 10 Jun 2019 07:56:22 +0000
Subject: [PATCH] Add methods to map managers to display a Bing map or a Google
 map for geofence. #221

---
 src/Service/BingMapManager.php      | 30 ++++++++++++++++++++++-
 src/Service/GoogleMapManager.php    | 37 ++++++++++++++++++++++++++++-
 src/Service/MapManagerInterface.php |  9 ++-----
 templates/geofence/list.html.twig   |  6 ++---
 4 files changed, 70 insertions(+), 12 deletions(-)

diff --git a/src/Service/BingMapManager.php b/src/Service/BingMapManager.php
index 8069e1ce..6b1145b3 100644
--- a/src/Service/BingMapManager.php
+++ b/src/Service/BingMapManager.php
@@ -4,7 +4,35 @@ namespace App\Service;
 
 class BingMapManager implements MapManagerInterface
 {
-    public function jsDisplayMap()
+    public function jsGeofence()
     {
+
+        echo "<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key={{ bingmaps_api_key }}' async defer></script>" . "\n";
+        echo "<script>" . "\n";
+        echo "var polygons = new Array();" . "\n";
+
+        echo "function GetMap() {" . "\n";
+        echo "var map = new Microsoft.Maps.Map('#m_geomap', {" . "\n";
+        echo "    center: new Microsoft.Maps.Location(14.6091, 121.0223)," . "\n";
+        echo "    mapTypeId: Microsoft.Maps.MapTypeId.road," . "\n";
+        echo "    zoom: 13 });" . "\n";
+
+        echo "{% if areas %}" . "\n";
+        echo "    {% for obj in areas %}" . "\n";
+        echo "        var pointsArray = new Array();" . "\n";
+        echo "        {% for point in obj.getCoverageArea.getRing(0).getPoints() %}" . "\n";
+        echo "            var polylatlng = new Microsoft.Maps.Location(" . "\n";
+        echo "                {{ point.getLatitude }}," . "\n";
+        echo "                {{ point.getLongitude }});" . "\n";
+        echo "            pointsArray.push(polylatlng);" . "\n";
+        echo "        {% endfor %}" . "\n";
+        echo "        var coveredarea = new Microsoft.Maps.Polygon(pointsArray, {" . "\n";
+        echo "            fillColor: \"#FF0000\" });" . "\n";
+        echo "        map.entities.push(coveredarea);" . "\n";
+        echo "        polygons[{{ obj.getID}}] = coveredarea;" . "\n";
+        echo "    {% endfor %}" . "\n";
+        echo "{% endif %} }" . "\n";
+        echo "</script>". "\n";
+
     }
 }
diff --git a/src/Service/GoogleMapManager.php b/src/Service/GoogleMapManager.php
index ac02d107..8b425654 100644
--- a/src/Service/GoogleMapManager.php
+++ b/src/Service/GoogleMapManager.php
@@ -2,6 +2,41 @@
 
 namespace App\Service;
 
-class GoogleMapManager
+class GoogleMapManager implements MapManagerInterface
 {
+   public function jsGeofence()
+    {   
+        echo "<script src=\"//maps.google.com/maps/api/js?key={{ gmaps_api_key }}\" type=\"text/javascript\"></script>" . "\n"; 
+        echo "<script src=\"/assets/vendors/custom/gmaps/gmaps.js\" type=\"text/javascript\"></script>" . "\n";
+        echo "<script>" . "\n";
+        echo "var polygons = new Array();" . "\n";
+
+        echo "initMap();" . "\n";
+
+        echo "function initMap() {" . "\n";
+        echo "var map = new google.maps.Map(document.getElementById('m_geomap'), {" . "\n";
+        echo "    center: {lat: 14.6091, lng: 121.0223}," . "\n";
+        echo "    mapTypeId: 'roadmap'," . "\n";
+        echo "    zoom: 13 });" . "\n";
+
+        echo "{% if areas %}" . "\n";
+        echo "    {% for obj in areas %}" . "\n";
+        echo "        var pointsArray = new Array();" . "\n";
+        echo "        {% for point in obj.getCoverageArea.getRing(0).getPoints() %}" . "\n";
+        echo "            var polylatlng = new google.maps.LatLng(" . "\n";
+        echo "                {{ point.getLatitude }}," . "\n";
+        echo "                {{ point.getLongitude }});" . "\n";
+        echo "            pointsArray.push(polylatlng);" . "\n";
+        echo "        {% endfor %}" . "\n";
+        echo "        var coveredarea = new google.maps.Polygon(pointsArray, {" . "\n";
+        echo "            paths: pointsArray," . "\n";
+        echo "            fillColor: \"#FF0000\"," . "\n";
+        echo "            fillOpacity: .5," . "\n";
+        echo "            mapTypeId: 'roadmap' });" . "\n";
+        echo "        coveredarea.setMap(map);" . "\n";
+        echo "        polygons[{{ obj.getID}}] = coveredarea;" . "\n";
+        echo "    {% endfor %}" . "\n";
+        echo "{% endif %} }" . "\n";
+        echo "</script>". "\n";
+    }   
 }
diff --git a/src/Service/MapManagerInterface.php b/src/Service/MapManagerInterface.php
index fdb9bb77..10934d7a 100644
--- a/src/Service/MapManagerInterface.php
+++ b/src/Service/MapManagerInterface.php
@@ -4,17 +4,12 @@ namespace App\Service;
 
 interface MapManagerInterface
 {
-    /* 
-     * Return a map to be used to display location
-     *
-     */
-    public function jsDisplayMap();
 
     /*
-     * Return a map with polygons to show coverage areas
+     * Return javascript text with map and polygons to show coverage areas
      *
      */
-    //public function jsGeofence();
+    public function jsGeofence();
 
     //public function jsJobOrderDetails();
 
diff --git a/templates/geofence/list.html.twig b/templates/geofence/list.html.twig
index 3b9e7bba..341a627b 100644
--- a/templates/geofence/list.html.twig
+++ b/templates/geofence/list.html.twig
@@ -39,7 +39,7 @@
                         <div class="m-portlet__body">
                            <div class="form-group m-form__group row">
                                <div class="col-lg-12">
-                                   <div id="m_bingmap" style="height:600px;"></div>
+                                   <div id="m_geomap" style="height:600px;"></div>
                                </div>
                            </div>
                            <div id = "area-rows" class="form-group m-form__group row">
@@ -90,7 +90,7 @@ var polygons = new Array();
 
 function GetMap()
 {
-    var map = new Microsoft.Maps.Map('#m_bingmap', {
+    var map = new Microsoft.Maps.Map('#m_geomap', {
         center: new Microsoft.Maps.Location(14.6091, 121.0223),
         mapTypeId: Microsoft.Maps.MapTypeId.road,
         zoom: 13 
@@ -109,7 +109,7 @@ function GetMap()
             {% endfor %}
 
             var coveredarea = new Microsoft.Maps.Polygon(pointsArray, {
-                fillColor: "#FF0000",
+                fillColor: "#FF0000"
             });
             map.entities.push(coveredarea);