How to Build Map application with V0

1// Paste this prompt into V0's AI chat:
2// Build a map application. First, I need to set up Supabase with spatial queries.
3// Create this SQL migration:
4// 1. Enable PostGIS: CREATE EXTENSION IF NOT EXISTS postgis;
5// 2. Create locations table: id (uuid PK), name (text), description (text), category (text), latitude (numeric), longitude (numeric), address (text), metadata (jsonb), image_url (text), created_at (timestamptz)
6// 3. Add a geography column: ALTER TABLE locations ADD COLUMN geog geography(Point, 4326);
7// 4. Create trigger to auto-update geog from lat/lng on insert/update
8// 5. Create spatial index: CREATE INDEX idx_locations_geog ON locations USING GIST (geog);
9// 6. Create user_favorites table: user_id (uuid FK to auth.users), location_id (uuid FK to locations), PRIMARY KEY (user_id, location_id)
10// Add RLS policies: anyone can read locations, authenticated users manage favorites.

1import { createClient } from '@supabase/supabase-js'
2import { NextRequest, NextResponse } from 'next/server'
3
4const supabase = createClient(
5  process.env.SUPABASE_URL!,
6  process.env.SUPABASE_SERVICE_ROLE_KEY!
7)
8
9export async function GET(req: NextRequest) {
10  const { searchParams } = new URL(req.url)
11  const lat = parseFloat(searchParams.get('lat') || '0')
12  const lng = parseFloat(searchParams.get('lng') || '0')
13  const radius = parseInt(searchParams.get('radius') || '5000')
14  const category = searchParams.get('category')
15
16  let query = supabase.rpc('nearby_locations', {
17    p_lat: lat,
18    p_lng: lng,
19    p_radius_meters: radius,
20  })
21
22  if (category) {
23    query = query.eq('category', category)
24  }
25
26  const { data, error } = await query.limit(50)
27
28  if (error) {
29    return NextResponse.json({ error: error.message }, { status: 500 })
30  }
31
32  return NextResponse.json({ data })
33}

1'use client'
2
3import { useState, useCallback } from 'react'
4import Map, { Marker, Popup } from 'react-map-gl'
5import 'mapbox-gl/dist/mapbox-gl.css'
6
7interface Location {
8  id: string
9  name: string
10  category: string
11  latitude: number
12  longitude: number
13  address: string
14}
15
16interface MapViewProps {
17  locations: Location[]
18  onSelect: (location: Location) => void
19}
20
21export function MapView({ locations, onSelect }: MapViewProps) {
22  const [popup, setPopup] = useState<Location | null>(null)
23
24  return (
25    <Map
26      mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_TOKEN}
27      initialViewState={{ longitude: -73.98, latitude: 40.75, zoom: 12 }}
28      style={{ width: '100%', height: '100%' }}
29      mapStyle="mapbox://styles/mapbox/light-v11"
30    >
31      {locations.map((loc) => (
32        <Marker
33          key={loc.id}
34          longitude={loc.longitude}
35          latitude={loc.latitude}
36          onClick={(e) => {
37            e.originalEvent.stopPropagation()
38            setPopup(loc)
39            onSelect(loc)
40          }}
41        />
42      ))}
43      {popup && (
44        <Popup
45          longitude={popup.longitude}
46          latitude={popup.latitude}
47          onClose={() => setPopup(null)}
48        >
49          <div className="p-2">
50            <h3 className="font-semibold">{popup.name}</h3>
51            <p className="text-sm text-muted-foreground">{popup.address}</p>
52          </div>
53        </Popup>
54      )}
55    </Map>
56  )
57}

1// Paste this prompt into V0's AI chat:
2// Create a map application page at app/map/page.tsx.
3// Requirements:
4// - Server Component that fetches initial locations from Supabase
5// - Dynamically import the MapView component with next/dynamic and { ssr: false }
6// - Layout: full-screen map on the right (70% width), sidebar on the left (30% width)
7// - Sidebar has: Command palette search at top for finding locations by name
8// - Below search: ScrollArea with location Cards showing name, category Badge, address, distance
9// - Clicking a sidebar Card highlights the marker on the map
10// - Clicking a marker opens a shadcn/ui Sheet slide-over with full location details: image, description, metadata, category Badge, address, and a favorite toggle Button (heart icon)
11// - Add category filter as a row of Badge-style toggle buttons above the sidebar list
12// - Add Skeleton loading states for the map and sidebar while data loads
13// - Mobile layout: map full-screen with a bottom Sheet for the sidebar

1-- Run this in Supabase SQL Editor
2CREATE OR REPLACE FUNCTION nearby_locations(
3  p_lat double precision,
4  p_lng double precision,
5  p_radius_meters int DEFAULT 5000
6)
7RETURNS TABLE (
8  id uuid,
9  name text,
10  description text,
11  category text,
12  latitude numeric,
13  longitude numeric,
14  address text,
15  metadata jsonb,
16  image_url text,
17  distance_meters double precision
18) AS $$
19BEGIN
20  RETURN QUERY
21  SELECT
22    l.id, l.name, l.description, l.category,
23    l.latitude, l.longitude, l.address,
24    l.metadata, l.image_url,
25    ST_Distance(
26      l.geog,
27      ST_SetSRID(ST_MakePoint(p_lng, p_lat), 4326)::geography
28    ) AS distance_meters
29  FROM locations l
30  WHERE ST_DWithin(
31    l.geog,
32    ST_SetSRID(ST_MakePoint(p_lng, p_lat), 4326)::geography,
33    p_radius_meters
34  )
35  ORDER BY distance_meters;
36END;
37$$ LANGUAGE plpgsql SECURITY DEFINER;