Miami Food Truck Locator: Real-Time Map with Vue.js & Nuxt.js

// composables/useFoodTruckTracking.ts - Real-time truck location tracking
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { useGeolocation } from '@vueuse/core'
import { io } from 'socket.io-client'

interface FoodTruck {
  id: string
  name: string
  cuisine: string
  location: {
    lat: number
    lng: number
    address: string
    lastUpdated: Date
  }
  menu: MenuItem[]
  rating: number
  isActive: boolean
  operatingHours: {
    start: string
    end: string
  }
}

export function useFoodTruckTracking() {
  const foodTrucks = ref<FoodTruck[]>([])
  const nearbyTrucks = ref<FoodTruck[]>([])
  const selectedTruck = ref<FoodTruck | null>(null)
  const isLoading = ref(true)
  
  const { coords, isSupported, resume, pause } = useGeolocation()
  const socket = io('wss://api.miamifoodtrucks.com')

  const filters = reactive({
    cuisine: '',
    rating: 0,
    distance: 5, // miles
    isOpen: false
  })

  const calculateDistance = (truck: FoodTruck) => {
    if (!coords.value) return Infinity
    
    const R = 3959 // Earth's radius in miles
    const dLat = toRad(truck.location.lat - coords.value.latitude)
    const dLon = toRad(truck.location.lng - coords.value.longitude)
    
    const a = Math.sin(dLat/2) * Math.sin(dLat/2) +
      Math.cos(toRad(coords.value.latitude)) * Math.cos(toRad(truck.location.lat)) *
      Math.sin(dLon/2) * Math.sin(dLon/2)
    
    return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a))
  }

  const updateNearbyTrucks = () => {
    if (!coords.value) return
    
    nearbyTrucks.value = foodTrucks.value
      .filter(truck => {
        const distance = calculateDistance(truck)
        const matchesCuisine = !filters.cuisine || truck.cuisine === filters.cuisine
        const matchesRating = truck.rating >= filters.rating
        const withinDistance = distance <= filters.distance
        const isOperating = !filters.isOpen || truck.isActive
        
        return matchesCuisine && matchesRating && withinDistance && isOperating
      })
      .sort((a, b) => calculateDistance(a) - calculateDistance(b))
  }

  onMounted(() => {
    // Subscribe to real-time location updates
    socket.on('truck-location-update', (data) => {
      const truckIndex = foodTrucks.value.findIndex(t => t.id === data.truckId)
      if (truckIndex !== -1) {
        foodTrucks.value[truckIndex].location = data.location
        foodTrucks.value[truckIndex].isActive = data.isActive
      }
      updateNearbyTrucks()
    })

    socket.on('menu-update', (data) => {
      const truck = foodTrucks.value.find(t => t.id === data.truckId)
      if (truck) {
        truck.menu = data.menu
      }
    })

    // Initial data fetch
    fetchFoodTrucks()
  })

  onUnmounted(() => {
    socket.disconnect()
    pause()
  })

  return {
    foodTrucks,
    nearbyTrucks,
    selectedTruck,
    isLoading,
    coords,
    filters,
    updateNearbyTrucks,
    calculateDistance
  }
}

// pages/trucks/[id].vue - Dynamic truck pages with SSR
<template>
  <div class="truck-page">
    <TruckHeader :truck="truck" />
    <TruckLocation :location="truck.location" />
    <TruckMenu :menu="truck.menu" />
    <TruckReviews :reviews="reviews" />
  </div>
</template>

<script setup lang="ts">
import { useSeoMeta, useFetch } from '#app'

const route = useRoute()
const truckId = route.params.id

// Server-side data fetching with caching
const { data: truck, error } = await useFetch(
  `/api/trucks/${truckId}`,
  {
    key: `truck-${truckId}`,
    server: true,
    default: () => null
  }
)

const { data: reviews } = await useFetch(
  `/api/trucks/${truckId}/reviews`,
  {
    key: `reviews-${truckId}`,
    server: true,
    default: () => []
  }
)

if (error.value || !truck.value) {
  throw createError({
    statusCode: 404,
    statusMessage: 'Food truck not found'
  })
}

// SEO optimization for Miami food trucks
useSeoMeta({
  title: `${truck.value.name} - Miami Food Truck | ${truck.value.cuisine} Cuisine`,
  description: `Find ${truck.value.name} serving ${truck.value.cuisine} food in Miami-Dade. View real-time location, menu, and customer reviews.`,
  ogTitle: truck.value.name,
  ogDescription: `${truck.value.cuisine} food truck in Miami`,
  ogImage: truck.value.images?.[0],
  ogType: 'restaurant',
  twitterCard: 'summary_large_image'
})

// Structured data for local business
useJsonld({
  '@context': 'https://schema.org',
  '@type': 'FoodEstablishment',
  name: truck.value.name,
  servesCuisine: truck.value.cuisine,
  address: {
    '@type': 'PostalAddress',
    addressLocality: 'Miami',
    addressRegion: 'FL',
    addressCountry: 'US'
  },
  geo: {
    '@type': 'GeoCoordinates',
    latitude: truck.value.location.lat,
    longitude: truck.value.location.lng
  },
  aggregateRating: {
    '@type': 'AggregateRating',
    ratingValue: truck.value.rating,
    reviewCount: reviews.value.length
  }
})
</script>

// stores/foodTrucks.ts - Centralized state management with Pinia
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useFoodTruckStore = defineStore('foodTrucks', () => {
  const trucks = ref<FoodTruck[]>([])
  const userLocation = ref<Coordinates | null>(null)
  const favorites = ref<string[]>([])
  const searchFilters = ref({
    cuisine: '',
    radius: 5,
    rating: 0,
    isOpen: false,
    priceRange: ''
  })

  // Computed properties for filtered results
  const nearbyTrucks = computed(() => {
    if (!userLocation.value) return []
    
    return trucks.value
      .filter(truck => {
        const distance = calculateDistance(
          userLocation.value!,
          truck.location
        )
        
        const matchesFilters = (
          (!searchFilters.value.cuisine || truck.cuisine === searchFilters.value.cuisine) &&
          (truck.rating >= searchFilters.value.rating) &&
          (distance <= searchFilters.value.radius) &&
          (!searchFilters.value.isOpen || truck.isActive)
        )
        
        return matchesFilters
      })
      .sort((a, b) => {
        const distanceA = calculateDistance(userLocation.value!, a.location)
        const distanceB = calculateDistance(userLocation.value!, b.location)
        return distanceA - distanceB
      })
  })

  const favoriteTrucks = computed(() => 
    trucks.value.filter(truck => favorites.value.includes(truck.id))
  )

  // Actions for truck management
  const updateTruckLocation = (truckId: string, location: Location) => {
    const truck = trucks.value.find(t => t.id === truckId)
    if (truck) {
      truck.location = location
      truck.lastUpdated = new Date()
    }
  }

  const addToFavorites = (truckId: string) => {
    if (!favorites.value.includes(truckId)) {
      favorites.value.push(truckId)
      // Persist to localStorage
      localStorage.setItem('foodTruckFavorites', JSON.stringify(favorites.value))
    }
  }

  const removeFromFavorites = (truckId: string) => {
    const index = favorites.value.indexOf(truckId)
    if (index > -1) {
      favorites.value.splice(index, 1)
      localStorage.setItem('foodTruckFavorites', JSON.stringify(favorites.value))
    }
  }

  const submitReview = async (truckId: string, review: ReviewData) => {
    try {
      const response = await $fetch(`/api/trucks/${truckId}/reviews`, {
        method: 'POST',
        body: review
      })
      
      // Update truck rating
      const truck = trucks.value.find(t => t.id === truckId)
      if (truck) {
        truck.rating = response.newRating
        truck.reviewCount = response.reviewCount
      }
      
      return response
    } catch (error) {
      console.error('Failed to submit review:', error)
      throw error
    }
  }

  return {
    trucks,
    userLocation,
    favorites,
    searchFilters,
    nearbyTrucks,
    favoriteTrucks,
    updateTruckLocation,
    addToFavorites,
    removeFromFavorites,
    submitReview
  }
})

// components/InteractiveMap.vue - Vue Google Maps integration
<template>
  <div class="map-container">
    <div ref="mapElement" class="google-map"></div>
    
    <div class="map-controls">
      <button @click="centerOnUser" class="control-btn">
        📍 My Location
      </button>
      <button @click="toggleSatellite" class="control-btn">
        🛰️ Satellite
      </button>
    </div>
    
    <TruckInfoWindow 
      v-if="selectedTruck"
      :truck="selectedTruck"
      @close="selectedTruck = null"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useFoodTruckStore } from '~/stores/foodTrucks'

const mapElement = ref<HTMLElement>()
const map = ref<google.maps.Map>()
const markers = ref<Map<string, google.maps.Marker>>(new Map())
const selectedTruck = ref<FoodTruck | null>(null)

const store = useFoodTruckStore()

const initializeMap = () => {
  if (!mapElement.value) return
  
  map.value = new google.maps.Map(mapElement.value, {
    center: { lat: 25.7617, lng: -80.1918 }, // Miami coordinates
    zoom: 12,
    styles: [
      {
        featureType: 'poi',
        elementType: 'labels',
        stylers: [{ visibility: 'off' }]
      }
    ],
    mapTypeControl: true,
    streetViewControl: false,
    fullscreenControl: false
  })
  
  // Add user location marker
  if (store.userLocation) {
    new google.maps.Marker({
      position: {
        lat: store.userLocation.latitude,
        lng: store.userLocation.longitude
      },
      map: map.value,
      icon: {
        url: '/icons/user-location.svg',
        scaledSize: new google.maps.Size(40, 40)
      },
      title: 'Your Location'
    })
  }
}

const updateTruckMarkers = () => {
  if (!map.value) return
  
  // Clear existing markers
  markers.value.forEach(marker => marker.setMap(null))
  markers.value.clear()
  
  // Add markers for nearby trucks
  store.nearbyTrucks.forEach(truck => {
    const marker = new google.maps.Marker({
      position: {
        lat: truck.location.lat,
        lng: truck.location.lng
      },
      map: map.value,
      icon: {
        url: `/icons/cuisine/${truck.cuisine.toLowerCase()}.svg`,
        scaledSize: new google.maps.Size(50, 50)
      },
      title: truck.name,
      animation: google.maps.Animation.DROP
    })
    
    marker.addListener('click', () => {
      selectedTruck.value = truck
    })
    
    markers.value.set(truck.id, marker)
  })
}

const centerOnUser = () => {
  if (map.value && store.userLocation) {
    map.value.panTo({
      lat: store.userLocation.latitude,
      lng: store.userLocation.longitude
    })
    map.value.setZoom(15)
  }
}

onMounted(() => {
  initializeMap()
})

watch(() => store.nearbyTrucks, updateTruckMarkers, { deep: true })
</script>