Use bing maps for geofencing. #221

.env.dist

@@ -16,6 +16,7 @@ APP_SECRET=b344cd6cd151ae1d61403ed55806c5ce
 DATABASE_URL=mysql://db_user:db_password@127.0.0.1:3306/db_name
 ###< doctrine/doctrine-bundle ###
 GMAPS_API_KEY=insertgmapsapikeyhere
+BINGMAPS_API_KEY=insertbingmapsapikeyhere
 
 # rising tide sms gateway
 RT_USER=rt_user

config/packages/twig.yaml

@@ -4,3 +4,4 @@ twig:
     strict_variables: '%kernel.debug%'
     globals:
         gmaps_api_key: "%env(GMAPS_API_KEY)%"
+        bingmaps_api_key: "%env(BINGMAPS_API_KEY)%"

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_gmap" style="height:600px;"></div>
+                                   <div id="m_bingmap" style="height:600px;"></div>
                                </div>
                            </div>
                            <div id = "area-rows" class="form-group m-form__group row">
@@ -83,21 +83,16 @@
 {% endblock %}
 
 {% block scripts %}
-<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 type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key={{ bingmaps_api_key }}' async defer></script>
 <script>
-// BEGIN google maps stuff
 
 var polygons = new Array();
 
-initMap();
-
-function initMap() {
-    var map = new google.maps.Map(document.getElementById('m_gmap'),
-    {
-        center: {lat: 14.6091, lng: 121.0223},
-        mapTypeId: 'roadmap',
+function GetMap()
+{
+    var map = new Microsoft.Maps.Map('#m_bingmap', {
+        center: new Microsoft.Maps.Location(14.6091, 121.0223),
+        mapTypeId: Microsoft.Maps.MapTypeId.road,
         zoom: 13 
     });
 
@@ -106,20 +101,17 @@ function initMap() {
             var pointsArray = new Array();
 
             {% for point in obj.getCoverageArea.getRing(0).getPoints() %}
-                var polylatlng = new google.maps.LatLng(
+                var polylatlng = new Microsoft.Maps.Location(
                     {{ point.getLatitude }},
                     {{ point.getLongitude }});
 
                 pointsArray.push(polylatlng);
             {% endfor %}
 
-            var coveredarea = new google.maps.Polygon({
-                paths: pointsArray,
+            var coveredarea = new Microsoft.Maps.Polygon(pointsArray, {
                 fillColor: "#FF0000",
-                fillOpacity: .5,
-                mapTypeId: 'roadmap'
             });
-            coveredarea.setMap(map);
+            map.entities.push(coveredarea);
 
             polygons[{{ obj.getID}}] = coveredarea;
 
@@ -127,8 +119,6 @@ function initMap() {
     {% endif %}
 }
 
-// END google maps stuff
-
 $('tr td').click(function(e) {
     e.preventDefault();