Add markers for nearby places

Author: rohitrp

client/src/app/home/home.component.ts

@@ -47,8 +47,8 @@ export class HomeComponent implements AfterViewInit {
           for (i = 0; i < res.length; i++) {
             var shelterMarkerDiv = document.createElement('div');
             shelterMarkerDiv.style.backgroundImage = 'url("assets/shelter.png")';
-            shelterMarkerDiv.style.width = '50px';
-            shelterMarkerDiv.style.height = '50px';
+            shelterMarkerDiv.style.width = '64px';
+            shelterMarkerDiv.style.height = '64px';
             shelterMarkerDiv.style.backgroundRepeat = 'no-repeat'
 
             const shelter = res[i];

client/src/app/shelters/shelter-info/shelter-info.component.ts

@@ -59,6 +59,29 @@ export class ShelterInfoComponent implements OnInit {
     }
   }
 
+  addMarkerToMap(map, places, type) {
+    var maxIter = Math.min(5, places.length);
+
+    var i = 0;
+    for (i = 0; i < maxIter; i++) {
+      var shelterMarkerDiv = document.createElement('div');
+      shelterMarkerDiv.style.backgroundImage = `url("assets/${type}.png")`;
+      shelterMarkerDiv.style.width = '32px';
+      shelterMarkerDiv.style.height = '32px';
+      shelterMarkerDiv.style.backgroundRepeat = 'no-repeat'
+
+      const place = places[i];
+
+      new mapboxgl.Marker(shelterMarkerDiv)
+        .setLngLat([place.geometry.location.lng, place.geometry.location.lat])
+        .setPopup(
+          new mapboxgl.Popup({ offset: 25 }) // add popups
+            .setHTML('<h3 class="subtitle">' + place.name + '</h3>')
+        )
+        .addTo(map);
+    }
+  }
+
   ngOnInit() {
     const shelterId = this.route.snapshot.paramMap.get('id');
 
@@ -71,41 +94,71 @@ export class ShelterInfoComponent implements OnInit {
 
           var map = new mapboxgl.Map({
             container: 'map',
-            style: 'mapbox://styles/mapbox/satellite-streets-v10',
+            style: 'mapbox://styles/mapbox/navigation-guidance-night-v4',
             center: this.shelter.lngLat.split(","),
             zoom: 12
           });
+          
+          var _tempShelterMarker = [
+            {
+              geometry: {
+                location: {
+                  lat: this.shelter.lngLat.split(',')[1],
+                  lng: this.shelter.lngLat.split(',')[0],
+                }
+              },
+              name: this.shelter.name
+            }
+          ];
+
+          this.addMarkerToMap(map, _tempShelterMarker, 'shelter');
 
           this.shelterService.getNearbyPlaces(this.shelter.lngLat, 5000, 'hospital')
             .subscribe(
-              (res) => this.nearByHospitals = res.results,
+              (res) => {
+                this.nearByHospitals = res.results;
+                this.addMarkerToMap(map, this.nearByHospitals, 'hospital');
+              },
               this.alertService.error
             );
           this.shelterService.getNearbyPlaces(this.shelter.lngLat, 5000, 'atm')
             .subscribe(
               (res) => {
                 this.nearByAtms = res.results;
+                this.addMarkerToMap(map, this.nearByAtms, 'atm')
               },
               this.alertService.error
             );
           this.shelterService.getNearbyPlaces(this.shelter.lngLat, 5000, 'airport')
             .subscribe(
-              (res) => this.nearByAirports = res.results,
+              (res) => {
+                this.nearByAirports = res.results;
+                this.addMarkerToMap(map, this.nearByAirports, 'airport');              
+              },
               this.alertService.error
             );
           this.shelterService.getNearbyPlaces(this.shelter.lngLat, 5000, 'police')
             .subscribe(
-              (res) => this.nearByPoliceStations = res.results,
+              (res) => {
+                this.nearByPoliceStations = res.results;
+                this.addMarkerToMap(map, this.nearByPoliceStations, 'police_station');              
+              },
               this.alertService.error
             );
           this.shelterService.getNearbyPlaces(this.shelter.lngLat, 5000, 'train_station')
             .subscribe(
-              (res) => this.nearByTrainStations = res.results,
+              (res) => {
+                this.nearByTrainStations = res.results;
+                this.addMarkerToMap(map, this.nearByTrainStations, 'train_station');              
+              },
               this.alertService.error
             );
           this.shelterService.getNearbyPlaces(this.shelter.lngLat, 5000, 'fire_station')
             .subscribe(
-              (res) => this.nearByFireStations = res.results,
+              (res) => {
+                this.nearByFireStations = res.results;
+                this.addMarkerToMap(map, this.nearByFireStations, 'fire_station');              
+              },
               this.alertService.error
             );
         },