rgutierrez/resq
1
0
Fork 0
Code Issues 126 Pull requests 49 Projects Releases 4 Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Korina Cordero 2019-06-10 07:56:22 +00:00
parent 3ed9b1bfcd
commit 4c3092ac58
4 changed files with 70 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/Service/BingMapManager.php
View file

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

37
src/Service/GoogleMapManager.php
View file

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

9
src/Service/MapManagerInterface.php
View file

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

6
templates/geofence/list.html.twig
View file

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