Add methods to map managers to display a Bing map or a Google map for geofence. #221

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";
+
     }
 }

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";
+    }   
 }

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();
 

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);