Skip to content

Commit 92af488

Browse files
Sheane-marioSheane-mario
committed
Added map on home page for guest users
1 parent ad9c901 commit 92af488

File tree

7 files changed

+127
-3
lines changed

7 files changed

+127
-3
lines changed

‎controllers/SiteController.php

+29
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
namespace app\controllers;
44

55
use app\core\Controller;
6+
use app\models\ServiceCenter;
7+
use app\models\Technician;
68

79
class SiteController extends Controller
810
{
@@ -26,4 +28,31 @@ public function selectUserSignUp()
2628
$this->setLayout('auth');
2729
return $this->render('/select-user-sign-up');
2830
}
31+
32+
public function homeMap()
33+
{
34+
$this->setLayout('main');
35+
return $this->render('/home-map');
36+
}
37+
38+
public function homeGeolocationTechnicians()
39+
{
40+
header("Access-Control-Allow-Origin: http://localhost:8080");
41+
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
42+
header("Access-Control-Allow-Headers: Content-Type");
43+
44+
$technician = new Technician();
45+
return $technician->techniciansGeocoding();
46+
}
47+
48+
public function homeGeolocationServiceCentres()
49+
{
50+
header("Access-Control-Allow-Origin: http://localhost:8080");
51+
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
52+
header("Access-Control-Allow-Headers: Content-Type");
53+
54+
$serviceCenter = new ServiceCenter();
55+
return $serviceCenter->serviceCentresGeocoding();
56+
57+
}
2958
}

‎models/Technician.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ public function TechnicianAddressGeocoding()
6767

6868
public function techniciansGeocoding()
6969
{
70-
$sql = "SELECT tech_id, fname, lname, latitude, longitude FROM technician WHERE latitude IS NOT NULL AND longitude IS NOT NULL";
70+
$sql = "SELECT tech_id, fname, lname, latitude, longitude, profile_picture FROM technician WHERE latitude IS NOT NULL AND longitude IS NOT NULL";
7171
$stmt = self::prepare($sql);
7272
$stmt->execute();
7373
$technicians = $stmt->fetchAll(\PDO::FETCH_ASSOC);

‎public/css/home/home-map.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.container-map {
2+
height: 90vh;
3+
}
4+
5+
#map {
6+
width: 100%;
7+
height: 100%;
8+
}

‎public/index.php

+3
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,9 @@
3838
$app->router->get('/', [SiteController::class, 'home']);
3939
$app->router->get('/select-user-login', [SiteController::class, 'selectUserLogin']);
4040
$app->router->get('/select-user-sign-up', [SiteController::class, 'selectUserSignUp']);
41+
$app->router->get('/home-map', [SiteController::class, 'homeMap']);
42+
$app->router->get('/home-geolocation-technicians', [SiteController::class, 'homeGeolocationTechnicians']);
43+
$app->router->get('/home-geolocation-service-centres', [SiteController::class, 'homeGeolocationServiceCentres']);
4144

4245
/* Technician Routes */
4346
$app->router->get('/technician-landing', [TechnicianController::class, 'technicianLanding']);

‎public/js/home/home-map.js

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
async function loadMap() {
2+
const {Map, InfoWindow} = await google.maps.importLibrary("maps");
3+
const {AdvancedMarkerElement, PinElement} = await google.maps.importLibrary("marker");
4+
const infoWindow = new InfoWindow();
5+
6+
let centerLat = 7.873054;
7+
let centerLng = 80.771797;
8+
9+
/* Make the map focus into Sri Lanka */
10+
const map = new Map(document.getElementById("map"), {
11+
zoom: 10,
12+
center: {lat: centerLat, lng: centerLng},
13+
mapId: "DEMO_MAP_ID",
14+
});
15+
16+
await fetch('http://localhost:8080/home-geolocation-technicians')
17+
.then(response => response.json())
18+
.then(technicians => {
19+
console.log(technicians);
20+
technicians.forEach(technician => {
21+
const pin = new PinElement({
22+
background: "#0b7ff6",
23+
borderColor: "#025ab8",
24+
glyphColor: "#235c9a",
25+
});
26+
const marker = new AdvancedMarkerElement({
27+
position: {lat: parseFloat(technician['latitude']), lng: parseFloat(technician['longitude'])},
28+
map: map,
29+
title: `${technician.fname} ${technician.lname}`,
30+
content: pin.element,
31+
//gmpClikable: true,
32+
});
33+
marker.addListener("click", ({domEvent, latLng}) => {
34+
const {target} = domEvent;
35+
36+
infoWindow.close();
37+
infoWindow.setContent(marker.title);
38+
infoWindow.open(marker.map, marker);
39+
});
40+
});
41+
})
42+
.catch(error => console.error('Error fetching technician geo co-ordinates!'));
43+
44+
await fetch('http://localhost:8080/home-geolocation-service-centres')
45+
.then(response => response.json())
46+
.then(serviceCentres => {
47+
console.log(serviceCentres);
48+
serviceCentres.forEach(serviceCentre => {
49+
const marker = new AdvancedMarkerElement({
50+
position: {lat: parseFloat(serviceCentre['latitude']), lng: parseFloat(serviceCentre['longitude'])},
51+
map: map,
52+
title: `${serviceCentre['name']}`,
53+
});
54+
marker.addListener("click", ({domEvent, latLng}) => {
55+
const {target} = domEvent;
56+
57+
infoWindow.close();
58+
infoWindow.setContent(marker.title);
59+
infoWindow.open(marker.map, marker);
60+
});
61+
});
62+
})
63+
.catch(error => console.error('Error fetching service centres geo co-ordinates!'));
64+
65+
}
66+
67+
window.onload = loadMap;

‎views/home-map.php

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<?php
2+
?>
3+
4+
<div class="container-map">
5+
<center>
6+
<!-- <h1>Geolocations of the technicians and service centres</h1>-->
7+
</center>
8+
<div class="map" id="map"></div>
9+
</div>
10+
11+
12+
13+

‎views/layouts/main.php

+6-2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
<link rel="stylesheet" href="/css/home/navbar.css">
1515
<link rel="stylesheet" href="/css/home/footer.css">
1616
<link rel="stylesheet" href="/css/home/home.css">
17+
<link rel="stylesheet" href="/css/home/home-map.css">
18+
<script src="/js/home/home-map.js"></script>
1719
<script src="/js/home/main.js"></script>
1820
<script src="/js/technician/main.js"></script>
1921
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
@@ -36,8 +38,7 @@
3638
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
3739
<li><a href="/" class="nav-link px-2 link-secondary">Home</a></li>
3840
<li><a href="#" class="nav-link px-2">Features</a></li>
39-
<li><a href="#" class="nav-link px-2">Map</a></li>
40-
<li><a href="/service-centre-landing" class="nav-link px-2">Service Centre</a></li>
41+
<li><a href="/home-map" class="nav-link px-2">Map</a></li>
4142
<li><a href="#" class="nav-link px-2">FAQs</a></li>
4243
<li><a href="#" class="nav-link px-2">About</a></li>
4344
</ul>
@@ -128,6 +129,9 @@
128129
</div>
129130
</footer>
130131
</div>
132+
<script async defer
133+
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBCGNUZAUhEzeW8LeV_j3deW44jsA9hWY0&callback=loadMap&loading=async&libraries=marker&v=beta">
134+
</script>
131135
</body>
132136

133137
</html>

0 commit comments

Comments
 (0)