How to Build a Map Application with Replit

1// Type this into Replit Agent:
2// Build a map application with Express, PostgreSQL using Drizzle ORM, and React.
3// Tables:
4// - locations: id serial pk, name text not null, description text, category text,
5//   latitude numeric not null, longitude numeric not null, address text, city text,
6//   state text, country text, metadata jsonb, image_url text, creator_id text,
7//   is_active boolean default true, created_at timestamp default now()
8// - location_categories: id serial, name text unique not null, icon text,
9//   color text default '#3B82F6', position integer default 0
10// - user_favorites: id serial, user_id text not null, location_id integer FK locations,
11//   created_at timestamp default now(), unique(user_id, location_id)
12// Add a compound index on (latitude, longitude).
13// Routes:
14// GET /api/locations?min_lat=&max_lat=&min_lng=&max_lng=&category= (viewport query)
15// GET /api/locations/:id (detail)
16// POST /api/locations (create with optional geocoding)
17// PUT /api/locations/:id (update)
18// DELETE /api/locations/:id
19// GET /api/locations/nearby?lat=&lng=&radius_km= (Haversine formula)
20// POST /api/locations/:id/favorite (toggle saved)
21// GET /api/favorites (user's saved locations)
22// GET /api/geocode?address= (forward geocode using OpenCage API)
23// GET /api/categories
24// React frontend with react-leaflet full-screen map, react-leaflet-cluster for marker clustering,
25// category-colored markers, sidebar panel on marker click, search bar, category filter buttons,
26// Add Location form with click-on-map coordinate selection.
27// Use Replit Auth. Bind server to 0.0.0.0.

1const express = require('express');
2const { db } = require('../db');
3const { locations, locationCategories } = require('../../shared/schema');
4const { eq, and, gte, lte, between } = require('drizzle-orm');
5
6const router = express.Router();
7
8// GET /api/locations?min_lat=40.0&max_lat=41.0&min_lng=-74.5&max_lng=-73.5&category=restaurant
9router.get('/', async (req, res) => {
10  const { min_lat, max_lat, min_lng, max_lng, category } = req.query;
11
12  const conditions = [eq(locations.isActive, true)];
13
14  // Viewport bounding box filter
15  if (min_lat && max_lat) {
16    conditions.push(between(locations.latitude, parseFloat(min_lat), parseFloat(max_lat)));
17  }
18  if (min_lng && max_lng) {
19    conditions.push(between(locations.longitude, parseFloat(min_lng), parseFloat(max_lng)));
20  }
21  if (category) {
22    conditions.push(eq(locations.category, category));
23  }
24
25  const rows = await db
26    .select({
27      id: locations.id,
28      name: locations.name,
29      category: locations.category,
30      latitude: locations.latitude,
31      longitude: locations.longitude,
32      address: locations.address,
33      imageUrl: locations.imageUrl,
34    })
35    .from(locations)
36    .where(and(...conditions))
37    .limit(500); // Safety cap — clustering handles visual overload
38
39  res.json(rows);
40});
41
42// GET /api/locations/:id — detail with full metadata
43router.get('/:id', async (req, res) => {
44  const [location] = await db
45    .select()
46    .from(locations)
47    .where(eq(locations.id, parseInt(req.params.id)));
48
49  if (!location) return res.status(404).json({ error: 'Location not found' });
50  res.json(location);
51});
52
53module.exports = router;

1const { sql } = require('drizzle-orm');
2
3// GET /api/locations/nearby?lat=40.7128&lng=-74.0060&radius_km=5
4router.get('/nearby', async (req, res) => {
5  const { lat, lng, radius_km = 5 } = req.query;
6
7  if (!lat || !lng) {
8    return res.status(400).json({ error: 'lat and lng query params are required' });
9  }
10
11  const latNum = parseFloat(lat);
12  const lngNum = parseFloat(lng);
13  const radiusNum = parseFloat(radius_km);
14
15  // Haversine formula in PostgreSQL
16  // Returns distance in km using Earth radius 6371
17  const nearby = await db.execute(sql`
18    SELECT
19      id, name, category, latitude, longitude, address, image_url,
20      ROUND(
21        acos(
22          sin(radians(${latNum})) * sin(radians(latitude)) +
23          cos(radians(${latNum})) * cos(radians(latitude)) *
24          cos(radians(longitude - ${lngNum}))
25        ) * 6371
26      , 2) AS distance_km
27    FROM locations
28    WHERE is_active = true
29      AND acos(
30        sin(radians(${latNum})) * sin(radians(latitude)) +
31        cos(radians(${latNum})) * cos(radians(latitude)) *
32        cos(radians(longitude - ${lngNum}))
33      ) * 6371 < ${radiusNum}
34    ORDER BY distance_km ASC
35    LIMIT 50
36  `);
37
38  res.json(nearby.rows);
39});

1const axios = require('axios');
2const { userFavorites } = require('../../shared/schema');
3
4// GET /api/geocode?address=1600+Pennsylvania+Ave+Washington+DC
5router.get('/geocode', async (req, res) => {
6  const { address } = req.query;
7  if (!address) return res.status(400).json({ error: 'address param required' });
8
9  const apiKey = process.env.OPENCAGE_API_KEY;
10  if (!apiKey) {
11    return res.status(503).json({ error: 'Geocoding not configured. Add OPENCAGE_API_KEY to Replit Secrets.' });
12  }
13
14  try {
15    const response = await axios.get('https://api.opencagedata.com/geocode/v1/json', {
16      params: { q: address, key: apiKey, limit: 5, no_annotations: 1 },
17    });
18    const results = response.data.results.map(r => ({
19      formatted: r.formatted,
20      lat: r.geometry.lat,
21      lng: r.geometry.lng,
22    }));
23    res.json(results);
24  } catch (err) {
25    res.status(500).json({ error: 'Geocoding request failed' });
26  }
27});
28
29// POST /api/locations/:id/favorite — toggle
30router.post('/:id/favorite', async (req, res) => {
31  const userId = req.user?.id;
32  if (!userId) return res.status(401).json({ error: 'Login required' });
33
34  const locationId = parseInt(req.params.id);
35
36  const existing = await db
37    .select()
38    .from(userFavorites)
39    .where(and(eq(userFavorites.userId, userId), eq(userFavorites.locationId, locationId)));
40
41  if (existing.length > 0) {
42    await db.delete(userFavorites).where(eq(userFavorites.id, existing[0].id));
43    return res.json({ favorited: false });
44  }
45
46  await db.insert(userFavorites).values({ userId, locationId });
47  res.json({ favorited: true });
48});

1// client/src/components/Map.jsx — React Leaflet map with viewport loading
2// Install: npm install react-leaflet leaflet react-leaflet-cluster
3
4import { useEffect, useState, useCallback } from 'react';
5import { MapContainer, TileLayer, useMapEvents, Marker, Popup } from 'react-leaflet';
6import MarkerClusterGroup from 'react-leaflet-cluster';
7import 'leaflet/dist/leaflet.css';
8
9function MapEventHandler({ onBoundsChange }) {
10  const map = useMapEvents({
11    moveend: () => onBoundsChange(map.getBounds()),
12    zoomend: () => onBoundsChange(map.getBounds()),
13  });
14  return null;
15}
16
17export function MapView({ selectedCategory }) {
18  const [markers, setMarkers] = useState([]);
19  const [selectedLocation, setSelectedLocation] = useState(null);
20
21  const fetchMarkers = useCallback(async (bounds) => {
22    const params = new URLSearchParams({
23      min_lat: bounds.getSouth(),
24      max_lat: bounds.getNorth(),
25      min_lng: bounds.getWest(),
26      max_lng: bounds.getEast(),
27      ...(selectedCategory && { category: selectedCategory }),
28    });
29    const res = await fetch(`/api/locations?${params}`);
30    const data = await res.json();
31    setMarkers(data);
32  }, [selectedCategory]);
33
34  // Debounce map movement to avoid hammering the API
35  let debounceTimer;
36  const handleBoundsChange = (bounds) => {
37    clearTimeout(debounceTimer);
38    debounceTimer = setTimeout(() => fetchMarkers(bounds), 300);
39  };
40
41  return (
42    <MapContainer center={[40.7128, -74.006]} zoom={13} style={{ height: '100vh', width: '100%' }}>
43      <TileLayer
44        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
45        attribution='&copy; OpenStreetMap contributors'
46      />
47      <MapEventHandler onBoundsChange={handleBoundsChange} />
48      <MarkerClusterGroup>
49        {markers.map(loc => (
50          <Marker
51            key={loc.id}
52            position={[parseFloat(loc.latitude), parseFloat(loc.longitude)]}
53            eventHandlers={{ click: () => setSelectedLocation(loc) }}
54          >
55            <Popup>{loc.name}</Popup>
56          </Marker>
57        ))}
58      </MarkerClusterGroup>
59    </MapContainer>
60  );
61}