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

Add map manager interface. #270

Browse source
This commit is contained in:
Korina Cordero 2019-12-03 09:42:23 +00:00
parent 9e9dba957e
commit ade2c3b5de
11 changed files with 168 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
config/services.yaml
View file

@ -159,3 +159,13 @@ services:
# rider assignment interface
App\Service\RiderAssignmentHandlerInterface: "@App\\Service\\RiderAssignmentHandler\\CMBRiderAssignmentHandler"
# map manager
#App\Service\GISManager\Bing: ~
#App\Service\GISManager\OpenStreet: ~
App\Service\GISManager\Google: ~
#App\Service\GISManagerInterface: "@App\\Service\\GISManager\\Bing"
#App\Service\GISManagerInterface: "@App\\Service\\GISManager\\OpenStreet"
App\Service\GISManagerInterface: "@App\\Service\\GISManager\\Google"

9
src/Controller/HomeController.php
View file

@ -8,6 +8,7 @@ use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Doctrine\ORM\EntityManagerInterface;
use App\Service\RiderTracker;
use App\Service\GISManagerInterface;
use App\Entity\Rider;
@ -17,9 +18,13 @@ class HomeController extends Controller
/**
* @Menu(selected="home")
*/
public function index(EntityManagerInterface $em, RiderTracker $rider_tracker)
public function index(EntityManagerInterface $em, RiderTracker $rider_tracker,
GISManagerInterface $gis_manager)
{
return $this->render('home.html.twig');
// get map
$params['map_js_file'] = $gis_manager->getJSInitFile();
return $this->render('home.html.twig', $params);
}
public function getRiderLocations(EntityManagerInterface $em, RiderTracker $rider_tracker)

17
src/Service/GISManager/Bing.php Normal file
View file

@ -0,0 +1,17 @@
<?php
namespace App\Service\GISManager;
use App\Service\GISManagerInterface;
class Bing implements GISManagerInterface
{
const JS_INIT_FILE = 'initBingMap.js';
public function getJSInitFile()
{
// return the bing map js file: initBingMap.js
return self::JS_INIT_FILE;
}
}

17
src/Service/GISManager/Google.php Normal file
View file

@ -0,0 +1,17 @@
<?php
namespace App\Service\GISManager;
use App\Service\GISManagerInterface;
class Google implements GISManagerInterface
{
const JS_INIT_FILE = 'initGoogleMap.js';
public function getJSInitFile()
{
// return the google map js file: initGoogleMap.js
return self::JS_INIT_FILE;
}
}

17
src/Service/GISManager/OpenStreet.php Normal file
View file

@ -0,0 +1,17 @@
<?php
namespace App\Service\GISManager;
use App\Service\GISManagerInterface;
class OpenStreet implements GISManagerInterface
{
const JS_INIT_FILE = 'initOpenStreetMap.js';
public function getJSInitFile()
{
// return the openstreet map js file: initOpenStreetMap.js
return self::JS_INIT_FILE;
}
}

10
src/Service/GISManagerInterface.php Normal file
View file

@ -0,0 +1,10 @@
<?php
namespace App\Service;
interface GISManagerInterface
{
// returns the actual JS file
public function getJSInitFile();
}

135
templates/home.html.twig
View file

@ -31,7 +31,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="dashboard_map" style="height:600px;"></div>
</div>
</div>
</div>
@ -42,135 +42,18 @@
</div>
{% endblock %}
{% block scripts %}
{% block js_end %}
{{ include('map/' ~ map_js_file) }}
<script>
var map;
var markerLayerGroup;
var markers;
initMap();
displayMarkers();
console.log('mogol');
function initMap() {
map = L.map('m_gmap').setView([3.084216, 101.6129996], 15);
var default_lat = {% trans %}default_lat{% endtrans %};
var default_lng = {% trans %}default_long{% endtrans %};
// add tile layer
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
accessToken: 'pk.eyJ1Ijoia2NvcmRlcm8iLCJhIjoiY2szbzA3ZHdsMDZxdTNsbGl4ZGNnN2VxaSJ9.LRzAe3RlV8sIP1N1x0chdw'
}).addTo(map);
console.log(default_lat);
// add marker layer group
markerLayerGroup = L.layerGroup().addTo(map);
var map = mapCreate('dashboard_map', default_lat, default_lng, 'road', 13);
}
function displayMarkers() {
$.ajax({
url: '{{ path('rider_locations') }}',
}).done(function(response) {
// clear all markers
markerLayerGroup.clearLayers();
// get riders and mark
var riders = response.riders;
$.each(riders, function(rider_id, point) {
var lat = point[0];
var long = point[1];
// create markers
L.marker([lat, long]).addTo(markerLayerGroup);
});
});
}
setInterval(displayMarkers, 60 * 1000);
</script>
{#
<script src="//maps.googleapis.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>
// BEGIN google maps stuff
var map;
var markers = [];
initMap();
function initMap() {
map = new google.maps.Map(document.getElementById('m_gmap'),
{
center: {
lat: {% trans %}default_lat{% endtrans %},
lng: {% trans %}default_long{% endtrans %},
},
mapTypeId: 'roadmap',
zoom: 13
});
displayMarkers();
}
function addMarker(rider_id, location) {
var marker = new google.maps.Marker({
position: location,
label: {
text: rider_id,
color: 'black',
fontWeight: 'bold',
},
map: map
});
markers.push(marker);
}
function clearMarkers() {
setMapOnAll(null);
markers = [];
}
function setMapOnAll(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
function displayMarkers() {
$.ajax({
url: '{{ path('rider_locations') }}',
}).done(function(response) {
// clear all markers
clearMarkers();
// get riders and mark
var riders = response.riders;
$.each(riders, function(rider_id, point) {
var lat = point[0];
var long = point[1];
var location = {
lat: lat,
lng: long
};
addMarker(rider_id, location);
});
});
}
setInterval(displayMarkers, 60 * 1000);
// END google maps stuff
</script>
#}
{% endblock %}

BIN
templates/map/.initGoogleMap.js.swo Normal file
View file

Binary file not shown.

36
templates/map/initBingMap.js Normal file
View file

@ -0,0 +1,36 @@
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=initMap&key={{ bingmaps_api_key|raw }}' async defer></script>
<script>
function mapCreate(div_id, center_lat, center_lng, map_type, zoom) {
var map_type_id = Microsoft.Maps.MapTypeId.road;
switch (map_type) {
case 'road':
map_type_id = Microsoft.Maps.MapTypeId.road;
break;
case 'aerial':
map_type_id = Microsoft.Maps.MapTypeId.aerial;
break;
case 'dark':
map_type_id = Microsoft.Maps.MapTypeId.canvasDark;
break;
case 'light':
map_type_id = Microsoft.Maps.MapTypeId.canvasLight;
break;
case 'grayscale':
map_type_id = Microsoft.Maps.MapTypeId.grayscale;
break;
default:
map_type_id = Microsoft.Maps.MapTypeId.road;
break;
}
var map = new Microsoft.Maps.Map('#' + div_id, {
center: new Microsoft.Maps.Location(center_lat, center_lng),
mapTypeId: map_type_id,
zoom: zoom
});
return map;
}
</script>

22
templates/map/initGoogleMap.js Normal file
View file

@ -0,0 +1,22 @@
<script src="//maps.google.com/maps/api/js?key={{ gmaps_api_key|raw }}&callback=initMap" type="text/javascript" async defer></script>
<script>
function mapCreate(div_id, center_lat, center_lng, map_type, zoom) {
var map_type_id = 'roadmap';
switch (map_type) {
case 'road':
map_type_id = 'roadmap';
break;
default:
map_type_id = 'roadmap';
break;
}
var map = new google.maps.Map(document.getElementById(div_id),
{
center: {lat: center_lat, lng: center_lng},
mapTypeId: map_type_id,
zoom: zoom
});
}
</script>

23
templates/map/initOpenStreetMap.js Normal file
View file

@ -0,0 +1,23 @@
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin="">
</script>
<script>
function mapCreate(div_id, center_lat, center_lng, map_type, zoom) {
var map = L.map(div_id).setView(
[center_lat, center_lng],
zoom
);
// add tile layer
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
accessToken: 'pk.eyJ1Ijoia2NvcmRlcm8iLCJhIjoiY2szbzA3ZHdsMDZxdTNsbGl4ZGNnN2VxaSJ9.LRzAe3RlV8sIP1N1x0chdw'
}).addTo(map);
}
</script>