diff --git a/src/components/GoogleMap.vue b/src/components/GoogleMap.vue index 72387db259334b26c1c41b1f443095deaa5caa08..5f13bd624d487533969e3983e05c785b9fd51dbc 100644 --- a/src/components/GoogleMap.vue +++ b/src/components/GoogleMap.vue @@ -41,13 +41,11 @@ export default { toggleHeatmap() { this.heatmap.setMap(this.heatmap.getMap() ? null : this.map) }, - // Centers the map on user position when the button is presed centerMap() { this.map.setCenter(new google.maps.LatLng(this.center.lat, this.center.lng)) this.map.setZoom(15) }, - /********************* APIs IMPLEMENTATION **********************/ @@ -149,8 +147,34 @@ export default { map: map }) - // Add marker for every nightlife establishment along with an info window + // Wait for google Places API to be finished fetching relevant data await this.findPlaces() + // Initialize all relevant places on map + this.initializePlaces(map) + // Initialize all relevant signals on the map + this.initializeSignals(map) + + // Create a heatmap based on crimes location + await this.getCrimeData() + this.crimes.forEach(crime => { + const lat = crime.location.latitude + const lng = crime.location.longitude + + heatmapData.push(new google.maps.LatLng(lat, lng)) + }) + + var heatmap = new google.maps.visualization.HeatmapLayer({ + data: heatmapData + }) + heatmap.set('radius', heatmap.get('radius') ? null : 80) + heatmap.set('opacity', heatmap.get('opacity') ? null : 0.3) + + // Save heatmap and map instance for use in toggleHeatmap() + this.heatmap = heatmap + this.map = map + }, + // Creates markers and infoWindows for every relevant nightlife establishment in the area + initializePlaces(map) { this.places.forEach(place => { const lat = place.geometry.location.lat const lng = place.geometry.location.lng @@ -170,29 +194,31 @@ export default { infoWindow.open(map, marker) }) }) + }, + // Creates markers and infoWindows for every signal in the area + initializeSignals(map) { + var infoWindow = new google.maps.InfoWindow() - // Create a heatmap based on crimes location - await this.getCrimeData() - this.crimes.forEach(crime => { - const lat = crime.location.latitude - const lng = crime.location.longitude - - heatmapData.push(new google.maps.LatLng(lat, lng)) - }) + for (const signalId in this.signals) { + let signal = this.signals[signalId] - var heatmap = new google.maps.visualization.HeatmapLayer({ - data: heatmapData - }) - heatmap.set('radius', heatmap.get('radius') ? null : 80) - heatmap.set('opacity', heatmap.get('opacity') ? null : 0.3) + let marker = new google.maps.Marker({ + position: new google.maps.LatLng(signal.lat, signal.lng), + map: map, + icon: this.getSignalIcon(signal.type) + }) - // Save heatmap and map instance for use in toggleHeatmap() - this.heatmap = heatmap - this.map = map + google.maps.event.addListener(marker, 'click', () => { + infoWindow.setContent( + `<p class="text-subtitle1" style="margin-bottom:8px;">${signal.type}</p> + <p class="text-weight-light">${signal.details}</p>` + ) + infoWindow.open(map, marker) + }) + } }, - /********************* - GET PLACE'S DETAILS + GET PLACES DETAILS **********************/ // Return html element, either Open or closed isPlaceOpen(place) { @@ -225,11 +251,29 @@ export default { icon = 'https://img.icons8.com/color/40/000000/food-and-wine.png' } return icon + }, + /********************* + GET SIGNAL ICON + **********************/ + getSignalIcon(signalType) { + switch (signalType) { + case 'Danger': + return 'https://img.icons8.com/color/50/000000/error--v1.png' + case 'Emergency': + return 'https://img.icons8.com/color/50/000000/ambulance.png' + case 'Fight Breakout': + return 'https://img.icons8.com/color/50/000000/judo.png' + case 'Free Drinks': + return 'https://img.icons8.com/color/50/000000/dizzy-person.png' + case 'Car Rental': + return 'https://img.icons8.com/color/50/000000/car-rental.png' + } } }, computed: { - ...mapState(['mapStyles']) + ...mapState(['mapStyles']), + ...mapState('firebase', ['signals']) }, async mounted() {