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

This commit is contained in:
Korina Cordero 2019-06-11 06:18:28 +00:00
parent 4c3092ac58
commit bc110c1353
8 changed files with 99 additions and 104 deletions

View file

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

View file

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

View file

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

View file

@ -4,39 +4,10 @@ namespace App\Service;
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";
const MANAGER = 'google';
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";
public function getMapManager()
{
return self::MANAGER;
}
}

View file

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

View file

@ -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 %}
}

View file

@ -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 %}
}

View file

@ -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>
<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 %}
}
{% if map_manager == 'bing' %}
{{ include ('geofence/bingmaps.js.twig')}}
{% else %}
{{ include ('geofence/googlemaps.js.twig')}}
{% endif %}
$('tr td').click(function(e) {
e.preventDefault();