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:
parent
4c3092ac58
commit
bc110c1353
8 changed files with 99 additions and 104 deletions
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
35
templates/geofence/bingmaps.js.twig
Normal file
35
templates/geofence/bingmaps.js.twig
Normal 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 %}
|
||||
}
|
||||
42
templates/geofence/googlemaps.js.twig
Normal file
42
templates/geofence/googlemaps.js.twig
Normal 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 %}
|
||||
}
|
||||
|
|
@ -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();
|
||||
|
|
|
|||
Loading…
Reference in a new issue