How to Build a Map Application with Lovable

1Set up a PostGIS-powered map database in Supabase:
2
31. Enable PostGIS: CREATE EXTENSION IF NOT EXISTS postgis;
4
52. Create tables:
6   - locations: id, user_id (nullable, for user-submitted locations), name (text), description (text), category (text), address (text), phone (text, nullable), website (text, nullable), image_url (text, nullable), tags (text array), is_verified (bool default false), is_active (bool default true), coordinates geography(POINT, 4326), created_at
7   - location_reviews: id, location_id, user_id, rating (int 1-5), comment (text), created_at
8   - location_images: id, location_id, user_id, storage_path (text), caption (text), created_at
9
103. RLS:
11   - locations: public SELECT WHERE is_active = true. Authenticated users can INSERT their own rows. Users can UPDATE their own rows.
12   - location_reviews: public SELECT. Authenticated users can INSERT their own reviews.
13   - location_images: public SELECT. Authenticated users can INSERT.
14
154. Spatial index: CREATE INDEX idx_locations_coordinates ON locations USING GIST (coordinates);
16
175. Regular indexes: CREATE INDEX idx_locations_category ON locations(category, is_active);
18
196. SQL function get_locations_in_bounds(north float, south float, east float, west float, p_category text DEFAULT NULL):
20   Returns locations WHERE coordinates && ST_MakeEnvelope(west, south, east, north, 4326)::geography AND is_active = true AND (p_category IS NULL OR category = p_category)
21   Include columns: id, name, category, address, ST_X(coordinates::geometry) as lng, ST_Y(coordinates::geometry) as lat, is_verified, tags, image_url
22
237. SQL function get_nearby_locations(p_lat float, p_lng float, p_radius_meters float DEFAULT 5000, p_limit int DEFAULT 20):
24   Returns locations WHERE ST_DWithin(coordinates, ST_MakePoint(p_lng, p_lat)::geography, p_radius_meters) ORDER BY ST_Distance(coordinates, ST_MakePoint(p_lng, p_lat)::geography) ASC LIMIT p_limit

1Build a MapView component at src/components/MapView.tsx.
2
3Requirements:
4- Use Leaflet (import via 'leaflet' — Lovable will install it). Import CSS: import 'leaflet/dist/leaflet.css'
5- Initialize the map in a useEffect with a ref on a div container. Use OpenStreetMap tile layer: https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png with attribution
6- Default center: props.defaultCenter or [37.7749, -122.4194] (San Francisco). Default zoom: 12.
7- Accept props: locations: Location[], onBoundsChange: (bounds: Bounds) => void, onMarkerClick: (location: Location) => void, selectedLocationId: string | null
8- When bounds change (map moveend event), call onBoundsChange with { north, south, east, west } from map.getBounds()
9- Render locations as custom markers. Create a custom icon per category using L.divIcon with a colored dot:
10  - restaurant=red, park=green, hotel=blue, shop=yellow, other=gray
11- Use Leaflet.markercluster for clustering. Install and import @changey/react-leaflet-markercluster or use vanilla Leaflet MarkerClusterGroup. All markers added to the cluster group, not the map directly.
12- When selectedLocationId changes, pan the map to that location with map.panTo and open its popup
13- Show a 'Locate Me' button (crosshair icon) that calls navigator.geolocation.getCurrentPosition and pans the map to the user's coordinates
14- Clean up the Leaflet instance in the useEffect return function to prevent memory leaks

1Build two things:
2
31. Edge Function at supabase/functions/geocode-address/index.ts:
4- Accept POST body: { address: string }
5- Call Google Maps Geocoding API: https://maps.googleapis.com/maps/api/geocode/json?address={encoded}&key={GEOCODING_API_KEY}
6- From the response, extract: formatted_address, lat and lng from geometry.location, place_id
7- Return { lat, lng, formatted_address, place_id }
8- If using Nominatim (free): call https://nominatim.openstreetmap.org/search?format=json&q={encoded}&limit=1 instead
9- Handle geocoding failures (zero_results, request_denied) with appropriate error messages
10
112. Add Location form at src/components/AddLocationForm.tsx:
12- A Dialog with a multi-step form:
13  Step 1: Address search
14  - Text Input: 'Enter address or place name'
15  - Search Button that calls geocode-address Edge Function
16  - Shows a mini-map preview (or just displays the returned formatted_address for confirmation)
17  - 'Use this location' Button advances to step 2
18  Step 2: Location details
19  - Name Input (required)
20  - Category Select: restaurant, park, hotel, shop, other
21  - Description Textarea
22  - Phone Input (optional)
23  - Website Input (optional)
24  - Tags Input (comma-separated, displays as Badges)
25  Step 3: Submit
26  - On submit, INSERT to locations table: include all fields + coordinates = ST_MakePoint(lng, lat)::geography using the Supabase RPC or raw SQL via service role Edge Function
27  - Show success Toast and close dialog

1Build the main map page at src/pages/MapPage.tsx and a LocationDetail component.
2
31. MapPage.tsx:
4- State: locations: Location[], selectedLocation: Location | null, categoryFilter: string | null, isLoading: boolean
5- When onBoundsChange fires, debounce by 300ms then call supabase.rpc('get_locations_in_bounds', { north, south, east, west, p_category: categoryFilter })
6- Set loading indicator on the map during fetch (a small spinner overlay in the top-left)
7- Category filter Buttons row above the map: All, Restaurant, Park, Hotel, Shop, Other. Each with a colored dot icon. Clicking a category updates categoryFilter and re-fetches
8- Add a search Input above the map. Typing calls supabase.from('locations').select('id, name, address, lat:ST_Y(coordinates::geometry), lng:ST_X(coordinates::geometry)').ilike('name', '%query%').limit(5) for autocomplete. Selecting a result sets selectedLocation and triggers map pan.
9- Pass selectedLocation.id as selectedLocationId to MapView
10
112. LocationDetail Sheet:
12- Props: location: Location | null, onClose: () => void
13- Sheet opens from the right (side='right', width 400px)
14- Header: location name, category Badge, is_verified Badge (checkmark icon)
15- If image_url exists, show full-width image at top
16- Body sections:
17  - Address with a 'Get Directions' link (https://maps.google.com/?q={lat},{lng})
18  - Phone and Website (if present)
19  - Description
20  - Tags as Badges
21  - Average rating (from location_reviews aggregate) and review count
22  - Recent reviews list: last 3 reviews with star rating and comment
23  - 'Add Review' Button that opens a nested Dialog