Add twig files containing the javascript to create the maps and polygons. Modify the mapManagers to return what type of map is to be used. #221

config/services.yaml

@@ -87,6 +87,10 @@ services:
             $password: "%env(REDIS_CLIENT_PASSWORD)%"
             $env_flag: "dev"
 
+    App\Service\GoogleMapManager: ~
+
+    App\Service\MapManagerInterface: "@App\\Service\\GoogleMapManager"
+
     Catalyst\APIBundle\Security\APIKeyUserProvider:
         arguments:
             $em: "@doctrine.orm.entity_manager"

src/Controller/GeofenceController.php

@@ -6,6 +6,7 @@ use App\Entity\SupportedArea;
 
 use App\Service\KMLFileImporter;
 use App\Service\FileUploader;
+use App\Service\MapManagerInterface;
 
 use Doctrine\ORM\Query;
 use Doctrine\ORM\QueryBuilder;
@@ -25,13 +26,14 @@ class GeofenceController extends Controller
     /**
      * @Menu(selected="geofence_list")
      */
-    public function index()
+    public function index(MapManagerInterface $map_manager)
     {
         $this->denyAccessUnlessGranted('geofence.list', null, 'No access.');
 
         $params['areas'] = $this->getDoctrine()
                 ->getRepository(SupportedArea::class)
-                ->findAll();;
+                ->findAll();
+        $params['map_manager'] = $map_manager->getMapManager();
 
         return $this->render('geofence/list.html.twig', $params);
     }

src/Service/BingMapManager.php

@@ -4,35 +4,10 @@ namespace App\Service;
 
 class BingMapManager implements MapManagerInterface
 {
-    public function jsGeofence()
+    const MANAGER = 'bing';
+
+    public function getMapManager()
     {
-
+        return self::MANAGER;
-        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

@@ -4,39 +4,10 @@ namespace App\Service;
 
 class GoogleMapManager implements MapManagerInterface
 {
-   public function jsGeofence()
+    const MANAGER = 'google';
+
+    public function getMapManager()
     {
-        echo "<script src=\"//maps.google.com/maps/api/js?key={{ gmaps_api_key }}\" type=\"text/javascript\"></script>" . "\n"; 
+        return self::MANAGER;   
-        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

@@ -5,11 +5,7 @@ namespace App\Service;
 interface MapManagerInterface
 {
 
-    /*
+    public function getMapManager();
-     * Return javascript text with map and polygons to show coverage areas
-     *
-     */
-    public function jsGeofence();
 
     //public function jsJobOrderDetails();
 

templates/geofence/bingmaps.js.twig

@@ -0,0 +1,35 @@
+<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key={{ bingmaps_api_key }}' async defer></script>
+<script>
+
+var polygons = new Array();
+
+function GetMap()
+{
+    var map = new Microsoft.Maps.Map('#m_geomap', {
+        center: new Microsoft.Maps.Location(14.6091, 121.0223),
+        mapTypeId: Microsoft.Maps.MapTypeId.road,
+        zoom: 13
+    });
+
+    {% if areas %}
+        {% for obj in areas %}
+            var pointsArray = new Array();
+
+            {% for point in obj.getCoverageArea.getRing(0).getPoints() %}
+                var polylatlng = new Microsoft.Maps.Location(
+                    {{ point.getLatitude }},
+                    {{ point.getLongitude }});
+
+                pointsArray.push(polylatlng);
+            {% endfor %}
+
+            var coveredarea = new Microsoft.Maps.Polygon(pointsArray, {
+                fillColor: "#FF0000"
+            });
+            map.entities.push(coveredarea);
+
+            polygons[{{ obj.getID}}] = coveredarea;
+
+        {% endfor %}
+    {% endif %}
+}

templates/geofence/googlemaps.js.twig

@@ -0,0 +1,42 @@
+<script src="//maps.google.com/maps/api/js?key={{ gmaps_api_key }}" type="text/javascript"></script>
+<script src="/assets/vendors/custom/gmaps/gmaps.js" type="text/javascript"></script>
+
+<script>
+
+var polygons = new Array();
+
+initMap();
+
+function initMap() {
+    var map = new google.maps.Map(document.getElementById('m_geomap'),
+    {
+        center: {lat: 14.6091, lng: 121.0223},
+        mapTypeId: 'roadmap',
+        zoom: 13 
+    });
+
+    {% if areas %}
+        {% for obj in areas %}
+            var pointsArray = new Array();
+
+            {% for point in obj.getCoverageArea.getRing(0).getPoints() %}
+                var polylatlng = new google.maps.LatLng(
+                    {{ point.getLatitude }},
+                    {{ point.getLongitude }});
+
+                pointsArray.push(polylatlng);
+            {% endfor %}
+
+            var coveredarea = new google.maps.Polygon({
+                paths: pointsArray,
+                fillColor: "#FF0000",
+                fillOpacity: .5,
+                mapTypeId: 'roadmap'
+            });
+            coveredarea.setMap(map);
+
+            polygons[{{ obj.getID}}] = coveredarea;
+
+        {% endfor %}
+    {% endif %}
+}

templates/geofence/list.html.twig

@@ -83,41 +83,11 @@
 {% endblock %}
 
 {% block scripts %}
-<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key={{ bingmaps_api_key }}' async defer></script>
+{% if map_manager == 'bing' %}
-<script>
+    {{ include ('geofence/bingmaps.js.twig')}}
-
+{% else %}
-var polygons = new Array();
+    {{ include ('geofence/googlemaps.js.twig')}}
-
-function GetMap()
-{
-    var map = new Microsoft.Maps.Map('#m_geomap', {
-        center: new Microsoft.Maps.Location(14.6091, 121.0223),
-        mapTypeId: Microsoft.Maps.MapTypeId.road,
-        zoom: 13 
-    });
-
-    {% if areas %}
-        {% for obj in areas %}
-            var pointsArray = new Array();
-
-            {% for point in obj.getCoverageArea.getRing(0).getPoints() %}
-                var polylatlng = new Microsoft.Maps.Location(
-                    {{ point.getLatitude }},
-                    {{ point.getLongitude }});
-
-                pointsArray.push(polylatlng);
-            {% endfor %}
-
-            var coveredarea = new Microsoft.Maps.Polygon(pointsArray, {
-                fillColor: "#FF0000"
-            });
-            map.entities.push(coveredarea);
-
-            polygons[{{ obj.getID}}] = coveredarea;
-
-        {% endfor %}
 {% endif %}
-}
 
 $('tr td').click(function(e) {
     e.preventDefault();