[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { MapInterface } from "@/components/map-interface" export default function Home() { return (

Expand Your Reach: Visualize Your Service Areas

Optimize your territory with precision and clarity.

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @theme inline { --font-sans: var(--font-open-sans); --font-serif: var(--font-montserrat); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Custom styles for map */ .leaflet-container { font-family: var(--font-open-sans); } .leaflet-popup-content-wrapper { border-radius: 0.5rem; } /* Custom styles for enhanced map elements */ .custom-marker { background: transparent !important; border: none !important; } .radius-label { background: transparent !important; border: none !important; } .location-marker { background: transparent !important; border: none !important; } /* Added styles for county labels */ .county-label { background: transparent !important; border: none !important; } .radius-changing { transition: all 0.3s ease-in-out; } /* Enhanced circle animation */ .leaflet-interactive { transition: all 0.2s ease-in-out; } .leaflet-interactive:hover { opacity: 0.9 !important; } [V0_FILE]typescriptreact:file="components/ui/toast.tsx" isMerged="true" import * as React from "react" import * as ToastPrimitives from "@radix-ui/react-toast" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" const ToastProvider = ToastPrimitives.Provider const ToastViewport = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastViewport.displayName = ToastPrimitives.Viewport.displayName const toastVariants = cva( "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", { variants: { variant: { default: "border bg-background text-foreground", destructive: "destructive border-destructive bg-destructive text-destructive-foreground", }, }, defaultVariants: { variant: "default", }, }, ) const Toast = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, ...props }, ref) => { return }) Toast.displayName = ToastPrimitives.Root.displayName const ToastAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastAction.displayName = ToastPrimitives.Action.displayName const ToastClose = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastClose.displayName = ToastPrimitives.Close.displayName const ToastTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastTitle.displayName = ToastPrimitives.Title.displayName const ToastDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastDescription.displayName = ToastPrimitives.Description.displayName type ToastProps = React.ComponentPropsWithoutRef type ToastActionElement = React.ReactElement export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, } [V0_FILE]typescriptreact:file="components/ui/toaster.tsx" isMerged="true" "use client" import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast" import { useToast } from "@/hooks/use-toast" export function Toaster() { const { toasts } = useToast() return ( {toasts.map(({ id, title, description, action, ...props }) => (

{title && {title}} {description && {description}}

{action} ))} ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Montserrat, Open_Sans } from "next/font/google" import { Toaster } from "@/components/ui/toaster" import "./globals.css" const montserrat = Montserrat({ subsets: ["latin"], display: "swap", variable: "--font-montserrat", weight: ["400", "600", "700", "900"], }) const openSans = Open_Sans({ subsets: ["latin"], display: "swap", variable: "--font-open-sans", weight: ["400", "500", "600"], }) export const metadata: Metadata = { title: "LSA Territory Expansion Tool", description: "Optimize your Local Services Ads territory with precision mapping", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]html:file="public/leaflet-draw.css" url="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67", "leaflet": "1.9.4" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/map-interface.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect, useRef } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Slider } from "@/components/ui/slider" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ScrollArea } from "@/components/ui/scroll-area" import { Switch } from "@/components/ui/switch" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { useToast } from "@/hooks/use-toast" import { MapPin, Search, Target, Zap, Building, Car, Home, MapIcon, Hash, Loader2, Eye, Copy, Download, FileText, Edit, } from "lucide-react" interface CustomPolygon { coordinates: [number, number][] area: number } interface MapData { center: [number, number] zoom: number address: string radius: number } interface GeographicLocation { name: string lat: number lon: number distance: number type: "city" | "town" | "village" state?: string county?: string } interface ZipCodeData { zipCode: string city: string state: string lat: number lon: number distance: number } interface CountyArea { name: string bounds: [[number, number], [number, number]] area: number } const RADIUS_PRESETS = [ { label: "Local Service", value: 15, icon: Home, color: "bg-blue-500" }, { label: "Contractor", value: 25, icon: Building, color: "bg-emerald-500" }, { label: "Delivery", value: 35, icon: Car, color: "bg-orange-500" }, { label: "Regional", value: 50, icon: Zap, color: "bg-purple-500" }, ] // Added export format options const EXPORT_FORMATS = [ { value: "comma", label: "Comma Separated", description: "City1, City2, City3" }, { value: "line", label: "Line Separated", description: "One per line" }, { value: "lsa", label: "LSA Format", description: "Optimized for Google LSA" }, { value: "csv", label: "CSV Format", description: "Spreadsheet compatible" }, ] export function MapInterface() { const [mapData, setMapData] = useState({ center: [39.8283, -98.5795], // Center of US zoom: 4, address: "", radius: 25, }) const [isLoading, setIsLoading] = useState(false) const [isRadiusChanging, setIsRadiusChanging] = useState(false) const [isProcessingGeoData, setIsProcessingGeoData] = useState(false) const [citiesInRadius, setCitiesInRadius] = useState([]) const [zipCodesInRadius, setZipCodesInRadius] = useState([]) const [showComparison, setShowComparison] = useState(false) const [currentCountyAreas, setCurrentCountyAreas] = useState([]) const [drawingMode, setDrawingMode] = useState<"radius" | "custom">("radius") const [customPolygon, setCustomPolygon] = useState(null) const [isDrawing, setIsDrawing] = useState(false) const [drawToggleEnabled, setDrawToggleEnabled] = useState(false) // Added state for export functionality const [exportFormat, setExportFormat] = useState("lsa") const { toast } = useToast() const [drawingPoints, setDrawingPoints] = useState<[number, number][]>([]) const [tempPolygonLayer, setTempPolygonLayer] = useState(null) const mapRef = useRef(null) const mapInstanceRef = useRef(null) const circleRef = useRef(null) const markerRef = useRef(null) const locationMarkersRef = useRef([]) const countyAreasRef = useRef([]) const radiusLayersRef = useRef([]) const drawControlRef = useRef(null) const polygonLayerRef = useRef(null) const drawnItemsRef = useRef(null) // Added export functions const formatCitiesForExport = (format: string): string => { if (citiesInRadius.length === 0) return "" switch (format) { case "comma": return citiesInRadius.map((city) => city.name).join(", ") case "line": return citiesInRadius.map((city) => city.name).join("\n") case "lsa": return citiesInRadius.map((city) => `${city.name}${city.state ? `, ${city.state}` : ""}`).join("\n") case "csv": return [ "City,State,Type,Distance (miles)", ...citiesInRadius.map((city) => `"${city.name}","${city.state || ""}","${city.type}","${city.distance}"`), ].join("\n") default: return citiesInRadius.map((city) => city.name).join(", ") } } const formatZipCodesForExport = (format: string): string => { if (zipCodesInRadius.length === 0) return "" switch (format) { case "comma": return zipCodesInRadius.map((zip) => zip.zipCode).join(", ") case "line": return zipCodesInRadius.map((zip) => zip.zipCode).join("\n") case "lsa": return zipCodesInRadius.map((zip) => `${zip.zipCode} (${zip.city}, ${zip.state})`).join("\n") case "csv": return [ "Zip Code,City,State,Distance (miles)", ...zipCodesInRadius.map( (zip) => `"${zip.zipCode}","${zip.city}","${zip.state}","${zip.distance.toFixed(1)}"`, ), ].join("\n") default: return zipCodesInRadius.map((zip) => zip.zipCode).join(", ") } } const copyToClipboard = async (text: string, type: string) => { try { await navigator.clipboard.writeText(text) toast({ title: "Copied to clipboard!", description: `${type} data has been copied in ${EXPORT_FORMATS.find((f) => f.value === exportFormat)?.label} format.`, }) } catch (err) { toast({ title: "Copy failed", description: "Unable to copy to clipboard. Please try again.", variant: "destructive", }) } } const downloadAsFile = (content: string, filename: string, type: string) => { const blob = new Blob([content], { type: "text/plain" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = filename document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) toast({ title: "File downloaded!", description: `${type} data has been saved as ${filename}.`, }) } const handleCopyCities = () => { const formattedData = formatCitiesForExport(exportFormat) if (formattedData) { copyToClipboard(formattedData, "Cities") } } const handleCopyZipCodes = () => { const formattedData = formatZipCodesForExport(exportFormat) if (formattedData) { copyToClipboard(formattedData, "Zip codes") } } const handleDownloadCities = () => { const formattedData = formatCitiesForExport(exportFormat) if (formattedData) { const extension = exportFormat === "csv" ? "csv" : "txt" const filename = drawingMode === "custom" ? `cities_custom_area.${extension}` : `cities_${mapData.radius}mi_radius.${extension}` downloadAsFile(formattedData, filename, "Cities") } } const handleDownloadZipCodes = () => { const formattedData = formatZipCodesForExport(exportFormat) if (formattedData) { const extension = exportFormat === "csv" ? "csv" : "txt" const filename = drawingMode === "custom" ? `zipcodes_custom_area.${extension}` : `zipcodes_${mapData.radius}mi_radius.${extension}` downloadAsFile(formattedData, filename, "Zip codes") } } const handleCopyAllForLSA = () => { const citiesData = formatCitiesForExport("lsa") const zipCodesData = formatZipCodesForExport("lsa") const combinedData = [ "=== CITIES & TOWNS ===", citiesData, "", "=== ZIP CODES ===", zipCodesData, "", `Generated from ${mapData.address} with ${mapData.radius} mile radius`, `Total coverage: ${Math.round(Math.PI * mapData.radius * mapData.radius).toLocaleString()} sq mi`, ].join("\n") copyToClipboard(combinedData, "Complete service area") } const calculateDistance = (lat1: number, lon1: number, lat2: number, lon2: number): number => { const R = 3959 // Earth's radius in miles const dLat = ((lat2 - lat1) * Math.PI) / 180 const dLon = ((lon2 - lon1) * Math.PI) / 180 const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos((lat1 * Math.PI) / 180) * Math.cos((lat2 * Math.PI) / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2) const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)) return R * c } const generateCountyAreas = () => { if (!mapData.address || !mapData.center) return const counties: CountyArea[] = [ { name: "Primary County", bounds: [ [mapData.center[0] - 0.2, mapData.center[1] - 0.3], [mapData.center[0] + 0.15, mapData.center[1] + 0.2], ], area: 450, }, { name: "Adjacent County North", bounds: [ [mapData.center[0] + 0.15, mapData.center[1] - 0.2], [mapData.center[0] + 0.4, mapData.center[1] + 0.25], ], area: 380, }, { name: "Adjacent County South", bounds: [ [mapData.center[0] - 0.35, mapData.center[1] - 0.1], [mapData.center[0] - 0.2, mapData.center[1] + 0.3], ], area: 320, }, ] setCurrentCountyAreas(counties) } const isPointInPolygon = (point: [number, number], polygon: [number, number][]): boolean => { const [x, y] = point let inside = false for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) { const [xi, yi] = polygon[i] const [xj, yj] = polygon[j] if (yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi) { inside = !inside } } return inside } const processGeographicData = async () => { if (!mapData.address || !mapData.center) return if (drawingMode === "custom" && !customPolygon) return setIsProcessingGeoData(true) try { let bbox: number[] if (drawingMode === "radius") { // Calculate bounding box for radius search const latDelta = mapData.radius / 69 const lonDelta = mapData.radius / (69 * Math.cos((mapData.center[0] * Math.PI) / 180)) bbox = [ mapData.center[1] - lonDelta, mapData.center[0] - latDelta, mapData.center[1] + lonDelta, mapData.center[0] + latDelta, ] } else { // Calculate bounding box for custom polygon const lats = customPolygon!.coordinates.map((coord) => coord[0]) const lons = customPolygon!.coordinates.map((coord) => coord[1]) bbox = [ Math.min(...lons), // west Math.min(...lats), // south Math.max(...lons), // east Math.max(...lats), // north ] } let locations: GeographicLocation[] = [] const zipCodes: ZipCodeData[] = [] try { // Search for cities and towns within the bounding box const placesResponse = await fetch( `https://nominatim.openstreetmap.org/search?format=json&q=city&viewbox=${bbox.join(",")}&bounded=1&limit=50&addressdetails=1&extratags=1&namedetails=1&featuretype=settlement`, { headers: { "User-Agent": "LSA-Territory-Tool/1.0", }, }, ) if (placesResponse.ok) { const placesData = await placesResponse.json() locations = placesData .filter((place: any) => { const lat = Number.parseFloat(place.lat) const lon = Number.parseFloat(place.lon) if (drawingMode === "radius") { const distance = calculateDistance(mapData.center[0], mapData.center[1], lat, lon) return distance <= mapData.radius && place.display_name } else { // Check if point is inside custom polygon return isPointInPolygon([lat, lon], customPolygon!.coordinates) && place.display_name } }) .map((place: any) => { const lat = Number.parseFloat(place.lat) const lon = Number.parseFloat(place.lon) const distance = drawingMode === "radius" ? calculateDistance(mapData.center[0], mapData.center[1], lat, lon) : calculateDistance(mapData.center[0], mapData.center[1], lat, lon) // Distance from center for reference return { name: place.display_name.split(",")[0], lat, lon, distance: Math.round(distance * 10) / 10, type: place.type === "city" ? "city" : place.type === "town" ? "town" : "village", state: place.address?.state, county: place.address?.county, } }) .sort((a: GeographicLocation, b: GeographicLocation) => a.distance - b.distance) .slice(0, 20) } } catch (apiError) { console.warn("API search failed:", apiError) } // Fetch real zip codes for found locations using APIs const stateNameToAbbr: { [key: string]: string } = { Alabama: "AL", Alaska: "AK", Arizona: "AZ", Arkansas: "AR", California: "CA", Colorado: "CO", Connecticut: "CT", Delaware: "DE", Florida: "FL", Georgia: "GA", Hawaii: "HI", Idaho: "ID", Illinois: "IL", Indiana: "IN", Iowa: "IA", Kansas: "KS", Kentucky: "KY", Louisiana: "LA", Maine: "ME", Maryland: "MD", Massachusetts: "MA", Michigan: "MI", Minnesota: "MN", Mississippi: "MS", Missouri: "MO", Montana: "MT", Nebraska: "NE", Nevada: "NV", "New Hampshire": "NH", "New Jersey": "NJ", "New Mexico": "NM", "New York": "NY", "North Carolina": "NC", "North Dakota": "ND", Ohio: "OH", Oklahoma: "OK", Oregon: "OR", Pennsylvania: "PA", "Rhode Island": "RI", "South Carolina": "SC", "South Dakota": "SD", Tennessee: "TN", Texas: "TX", Utah: "UT", Vermont: "VT", Virginia: "VA", Washington: "WA", "West Virginia": "WV", Wisconsin: "WI", Wyoming: "WY", } for (const location of locations.slice(0, 10)) { const stateAbbr = stateNameToAbbr[location.state || ""] || location.state || "FL" const cityName = location.name.replace(/\s+/g, "%20") try { const zipResponse = await fetch(`https://api.zippopotam.us/us/${stateAbbr}/${cityName}`, { signal: AbortSignal.timeout(5000), }) if (zipResponse.ok) { const zipData = await zipResponse.json() if (zipData.places && zipData.places.length > 0) { // Use real zip codes from API for (const place of zipData.places.slice(0, 2)) { const zipCode = place["post code"] if (!zipCodes.some((z) => z.zipCode === zipCode)) { zipCodes.push({ zipCode, city: location.name, state: stateAbbr, lat: Number.parseFloat(place.latitude) || location.lat, lon: Number.parseFloat(place.longitude) || location.lon, distance: calculateDistance( mapData.center[0], mapData.center[1], Number.parseFloat(place.latitude) || location.lat, Number.parseFloat(place.longitude) || location.lon, ), }) } } } } } catch (apiError) { console.warn(`Zip code API failed for ${location.name}:`, apiError) // NO FALLBACK - if API fails, we don't add fake zip codes } } // Sort zip codes by distance zipCodes.sort((a, b) => a.distance - b.distance) setCitiesInRadius(locations) setZipCodesInRadius(zipCodes) if (locations.length === 0) { toast({ title: "No results found", description: "Try a different location or larger area.", variant: "destructive", }) } } catch (error) { console.error("Error processing geographic data:", error) toast({ title: "Processing Error", description: "Unable to process geographic data. Please try again.", variant: "destructive", }) } finally { setIsProcessingGeoData(false) } } const processCustomPolygonData = async (polygonCoords: [number, number][]) => { console.log("[v0] Starting processCustomPolygonData with coordinates:", polygonCoords) setIsProcessingGeoData(true) try { // Calculate bounding box for API queries const lats = polygonCoords.map((p) => p[0]) const lngs = polygonCoords.map((p) => p[1]) const minLat = Math.min(...lats) const maxLat = Math.max(...lats) const minLng = Math.min(...lngs) const maxLng = Math.max(...lngs) const centerLat = (minLat + maxLat) / 2 const centerLng = (minLng + maxLng) / 2 console.log("[v0] Polygon bounds:", { minLat, maxLat, minLng, maxLng }) const uniqueCities = new Set() const locations: GeographicLocation[] = [] const zipCodes: ZipCodeData[] = [] const stateNameToAbbr: { [key: string]: string } = { Alabama: "AL", Alaska: "AK", Arizona: "AZ", Arkansas: "AR", California: "CA", Colorado: "CO", Connecticut: "CT", Delaware: "DE", Florida: "FL", Georgia: "GA", Hawaii: "HI", Idaho: "ID", Illinois: "IL", Indiana: "IN", Iowa: "IA", Kansas: "KS", Kentucky: "KY", Louisiana: "LA", Maine: "ME", Maryland: "MD", Massachusetts: "MA", Michigan: "MI", Minnesota: "MN", Mississippi: "MS", Missouri: "MO", Montana: "MT", Nebraska: "NE", Nevada: "NV", "New Hampshire": "NH", "New Jersey": "NJ", "New Mexico": "NM", "New York": "NY", "North Carolina": "NC", "North Dakota": "ND", Ohio: "OH", Oklahoma: "OK", Oregon: "OR", Pennsylvania: "PA", "Rhode Island": "RI", "South Carolina": "SC", "South Dakota": "SD", Tennessee: "TN", Texas: "TX", Utah: "UT", Vermont: "VT", Virginia: "VA", Washington: "WA", "West Virginia": "WV", Wisconsin: "WI", Wyoming: "WY", } // Point-in-polygon check function const isPointInPolygon = (point: [number, number], polygon: [number, number][]) => { const [lat, lng] = point let inside = false for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) { const [xi, yi] = polygon[i] const [xj, yj] = polygon[j] if (yi > lng !== yj > lng && lat < ((xj - xi) * (lng - yi)) / (yj - yi) + xi) { inside = !inside } } return inside } // Fetch cities and towns from OpenStreetMap Overpass API with timeout try { const overpassQuery = ` [out:json][timeout:15]; ( node["place"~"^(city|town|village)$"](${minLat},${minLng},${maxLat},${maxLng}); way["place"~"^(city|town|village)$"](${minLat},${minLng},${maxLat},${maxLng}); relation["place"~"^(city|town|village)$"](${minLat},${minLng},${maxLat},${maxLng}); ); out center; ` console.log("[v0] Fetching cities from Overpass API...") const controller = new AbortController() const timeoutId = setTimeout(() => controller.abort(), 10000) // 10 second timeout const overpassResponse = await fetch("https://overpass-api.de/api/interpreter", { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded", }, body: `data=${encodeURIComponent(overpassQuery)}`, signal: controller.signal, }) clearTimeout(timeoutId) if (overpassResponse.ok) { const overpassData = await overpassResponse.json() console.log("[v0] Overpass API returned:", overpassData.elements?.length, "places") for (const element of (overpassData.elements || []).slice(0, 100)) { // Limit to 100 results let lat, lon if (element.type === "node") { lat = element.lat lon = element.lon } else if (element.center) { lat = element.center.lat lon = element.center.lon } else { continue } const cityName = element.tags?.name || `${element.tags?.place} ${element.id}` const cityKey = `${cityName.toLowerCase()}_${element.tags?.place || "unknown"}` if (uniqueCities.has(cityKey)) { continue } // Check if point is within the custom polygon if (isPointInPolygon([lat, lon], polygonCoords)) { uniqueCities.add(cityKey) const distance = Math.sqrt(Math.pow(lat - centerLat, 2) + Math.pow(lon - centerLng, 2)) * 69 const state = element.tags?.["addr:state"] || element.tags?.["is_in:state"] || "Florida" locations.push({ name: cityName, lat, lon, state, distance: Math.round(distance * 10) / 10, type: element.tags?.place === "city" ? "city" : element.tags?.place === "town" ? "town" : "village", }) console.log("[v0] Found unique city:", cityName, state) if (locations.length >= 25) { break } } } } } catch (overpassError) { console.warn("Overpass API failed:", overpassError) } console.log("[v0] Generating zip codes for", Math.min(locations.length, 15), "cities") for (const location of locations.slice(0, 15)) { const stateAbbr = stateNameToAbbr[location.state] || location.state || "FL" const cityName = location.name.replace(/\s+/g, "%20") try { // Try Zippopotam.us API first const zipResponse = await fetch(`https://api.zippopotam.us/us/${stateAbbr}/${cityName}`, { signal: AbortSignal.timeout(5000), }) if (zipResponse.ok) { const zipData = await zipResponse.json() console.log("[v0] Found zip codes for", location.name, ":", zipData.places?.length || 0) if (zipData.places && zipData.places.length > 0) { // Use real zip codes from API const numZipsToUse = Math.min(3, zipData.places.length) for (let i = 0; i < numZipsToUse; i++) { const place = zipData.places[i] const zipCode = place["post code"] if (!zipCodes.some((z) => z.zipCode === zipCode)) { zipCodes.push({ zipCode, city: location.name, state: stateAbbr, lat: Number.parseFloat(place.latitude) || location.lat, lon: Number.parseFloat(place.longitude) || location.lon, distance: calculateDistance( centerLat, centerLng, Number.parseFloat(place.latitude) || location.lat, Number.parseFloat(place.longitude) || location.lon, ), }) } } continue // Skip to next city if API succeeded } } } catch (apiError) { console.warn(`Zip code API failed for ${location.name}:`, apiError) } // Fallback: Try GeoNames API try { const geonamesResponse = await fetch( `http://api.geonames.org/postalCodeSearchJSON?placename=${cityName}&country=US&maxRows=3&username=demo`, { signal: AbortSignal.timeout(5000), }, ) if (geonamesResponse.ok) { const geonamesData = await geonamesResponse.json() if (geonamesData.postalCodes && geonamesData.postalCodes.length > 0) { for (const postal of geonamesData.postalCodes.slice(0, 3)) { const zipCode = postal.postalCode if (!zipCodes.some((z) => z.zipCode === zipCode)) { zipCodes.push({ zipCode, city: postal.placeName || location.name, state: postal.adminCode1 || stateAbbr, lat: Number.parseFloat(postal.lat) || location.lat, lon: Number.parseFloat(postal.lng) || location.lon, distance: calculateDistance( centerLat, centerLng, Number.parseFloat(postal.lat) || location.lat, Number.parseFloat(postal.lng) || location.lon, ), }) } } } } } catch (geonamesError) { console.warn(`GeoNames API failed for ${location.name}:`, geonamesError) } } console.log("[v0] Total unique cities found:", locations.length) console.log("[v0] Total zip codes generated:", zipCodes.length) // Sort by distance from polygon center locations.sort((a, b) => a.distance - b.distance) zipCodes.sort((a, b) => a.distance - b.distance) setCitiesInRadius(locations) setZipCodesInRadius(zipCodes) if (locations.length === 0) { toast({ title: "No cities found", description: "Try drawing a larger area or check a different location.", variant: "destructive", }) } else { toast({ title: "Data extracted successfully!", description: `Found ${locations.length} unique cities and ${zipCodes.length} zip codes in your custom area.`, }) } } catch (error) { console.error("Error processing custom polygon data:", error) toast({ title: "Processing error", description: "Unable to process the custom area data. Please try again.", variant: "destructive", }) } finally { setIsProcessingGeoData(false) } } useEffect(() => { if (mapData.address && mapData.center[0] !== 39.8283) { const timeoutId = setTimeout(() => { if (drawingMode === "radius" || (drawingMode === "custom" && customPolygon)) { processGeographicData() } }, 1000) return () => clearTimeout(timeoutId) } else { setCitiesInRadius([]) setZipCodesInRadius([]) } }, [mapData.address, mapData.radius, mapData.center, drawingMode, customPolygon]) // Initialize map useEffect(() => { if (typeof window !== "undefined" && mapRef.current && !mapInstanceRef.current) { import("leaflet").then((L) => { const map = L.map(mapRef.current!).setView(mapData.center, mapData.zoom) L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "© OpenStreetMap contributors", }).addTo(map) mapInstanceRef.current = map }) } }, []) const clearAllDrawings = () => { if (mapInstanceRef.current) { // Remove existing marker if (markerRef.current) { mapInstanceRef.current.removeLayer(markerRef.current) markerRef.current = null } // Remove existing circle if (circleRef.current) { mapInstanceRef.current.removeLayer(circleRef.current) circleRef.current = null } // Remove existing polygon if (polygonLayerRef.current) { mapInstanceRef.current.removeLayer(polygonLayerRef.current) polygonLayerRef.current = null } // Clear radius layers radiusLayersRef.current.forEach((layer) => { mapInstanceRef.current.removeLayer(layer) }) radiusLayersRef.current = [] } } const deleteAllAreas = () => { if (mapInstanceRef.current) { // Remove existing marker if (markerRef.current) { mapInstanceRef.current.removeLayer(markerRef.current) markerRef.current = null } // Remove existing circle if (circleRef.current) { mapInstanceRef.current.removeLayer(circleRef.current) circleRef.current = null } // Remove existing polygon if (polygonLayerRef.current) { mapInstanceRef.current.removeLayer(polygonLayerRef.current) polygonLayerRef.current = null } // Clear radius layers radiusLayersRef.current.forEach((layer) => { if (mapInstanceRef.current && mapInstanceRef.current.hasLayer(layer)) { mapInstanceRef.current.removeLayer(layer) } }) radiusLayersRef.current = [] // Clear location markers locationMarkersRef.current.forEach((marker) => { if (mapInstanceRef.current && mapInstanceRef.current.hasLayer(marker)) { mapInstanceRef.current.removeLayer(marker) } }) locationMarkersRef.current = [] // Clear county areas countyAreasRef.current.forEach((area) => { if (mapInstanceRef.current && mapInstanceRef.current.hasLayer(area)) { mapInstanceRef.current.removeLayer(area) } }) countyAreasRef.current = [] } // Reset all state setCustomPolygon(null) setCitiesInRadius([]) setZipCodesInRadius([]) setDrawToggleEnabled(false) setIsDrawing(false) setMapData((prev) => ({ ...prev, address: "", center: [39.8283, -98.5795], zoom: 4 })) toast({ title: "Areas cleared", description: "All drawn areas have been removed from the map.", }) } useEffect(() => { if (mapInstanceRef.current && mapData.address && drawingMode === "radius") { import("leaflet").then((L) => { // Clear previous drawings clearAllDrawings() // Add marker for the address const marker = L.marker(mapData.center).addTo(mapInstanceRef.current!) markerRef.current = marker // Add radius circle const circle = L.circle(mapData.center, { radius: mapData.radius * 1609.34, // Convert miles to meters fillColor: "#10b981", color: "#10b981", weight: 2, opacity: 0.8, fillOpacity: 0.2, }).addTo(mapInstanceRef.current!) circleRef.current = circle radiusLayersRef.current.push(circle) // Fit map to circle bounds mapInstanceRef.current!.fitBounds(circle.getBounds()) }) } }, [mapData.address, mapData.center, mapData.radius, drawingMode]) useEffect(() => { if (mapInstanceRef.current && drawingMode === "custom") { import("leaflet").then((L) => { const map = mapInstanceRef.current! // Clear previous drawings when entering custom mode clearAllDrawings() let isDrawing = false let drawingPoints: [number, number][] = [] let tempPolyline: any = null const startDrawing = (e: any) => { if (!drawToggleEnabled) return isDrawing = true drawingPoints = [[e.latlng.lat, e.latlng.lng]] setIsDrawing(true) map.dragging.disable() } const continueDrawing = (e: any) => { if (!isDrawing || !drawToggleEnabled) return drawingPoints.push([e.latlng.lat, e.latlng.lng]) // Remove previous temp line if (tempPolyline) { map.removeLayer(tempPolyline) } // Add temp line showing current path tempPolyline = L.polyline(drawingPoints, { color: "#10b981", weight: 3, opacity: 0.8, }).addTo(map) } const finishDrawing = (e: any) => { if (!isDrawing || drawingPoints.length < 3 || !drawToggleEnabled) return isDrawing = false setIsDrawing(false) map.dragging.enable() // Remove temp line if (tempPolyline) { map.removeLayer(tempPolyline) } // Clear any existing polygon before creating new one if (polygonLayerRef.current) { map.removeLayer(polygonLayerRef.current) polygonLayerRef.current = null } // Simplify points to avoid too many coordinates const simplifiedPoints = drawingPoints.filter((_, index) => index % 3 === 0) if (simplifiedPoints.length < 3) { simplifiedPoints.push(...drawingPoints.slice(-2)) } // Create final polygon const polygon = L.polygon(simplifiedPoints, { fillColor: "#10b981", color: "#10b981", weight: 2, opacity: 0.8, fillOpacity: 0.3, }).addTo(map) polygonLayerRef.current = polygon // Calculate area const area = (L.GeometryUtil as any)?.geodesicArea?.(polygon.getLatLngs()[0]) || 0 const areaMiles = (area * 0.000000386102).toFixed(2) setCustomPolygon({ coordinates: simplifiedPoints, area: Number.parseFloat(areaMiles), }) // Fit map to polygon bounds map.fitBounds(polygon.getBounds()) } map.on("mousedown", startDrawing) map.on("mousemove", continueDrawing) map.on("mouseup", finishDrawing) if (drawToggleEnabled) { map.dragging.disable() } else { map.dragging.enable() } // Cleanup function return () => { map.off("mousedown", startDrawing) map.off("mousemove", continueDrawing) map.off("mouseup", finishDrawing) if (tempPolyline) { map.removeLayer(tempPolyline) } map.dragging.enable() // Re-enable dragging on cleanup } }) } }, [drawingMode, drawToggleEnabled]) // Added drawToggleEnabled to dependency array const handleAddressSearch = async () => { if (!mapData.address.trim()) return setIsLoading(true) try { // Try multiple geocoding approaches for better address resolution const searchQueries = [ mapData.address, // Original address mapData.address .replace(/suite\s+\d+/i, "") .replace(/,\s*,/g, ",") .trim(), // Remove suite number mapData.address .replace(/\d+\s+/, "") .trim(), // Remove street number ] let foundLocation = null for (const query of searchQueries) { if (foundLocation) break try { const response = await fetch( `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&limit=5&addressdetails=1`, { headers: { "User-Agent": "LSA-Territory-Tool/1.0", }, }, ) if (response.ok) { const data = await response.json() // Find the best match (prefer more specific addresses) const bestMatch = data.find( (result: any) => result.display_name.toLowerCase().includes("springfield") && result.display_name.toLowerCase().includes("missouri"), ) || data[0] if (bestMatch) { foundLocation = { lat: Number.parseFloat(bestMatch.lat), lon: Number.parseFloat(bestMatch.lon), display_name: bestMatch.display_name, } } } } catch (queryError) { console.warn(`Search failed for query: ${query}`, queryError) } } if (foundLocation) { const newCenter: [number, number] = [foundLocation.lat, foundLocation.lon] setMapData((prev) => ({ ...prev, center: newCenter, zoom: 12 })) if (mapInstanceRef.current) { mapInstanceRef.current.setView(newCenter, 12) // Remove existing marker if (markerRef.current) { mapInstanceRef.current.removeLayer(markerRef.current) } // Add enhanced marker for the address if (typeof window !== "undefined") { import("leaflet").then((L) => { const customIcon = L.divIcon({ className: "custom-marker", html: `

`, iconSize: [32, 32], iconAnchor: [16, 16], }) const marker = L.marker(newCenter, { icon: customIcon }) .addTo(mapInstanceRef.current) .bindPopup( `${mapData.address}
Business Location
${foundLocation.display_name}`, ) markerRef.current = marker }) } } toast({ title: "Address found!", description: `Located: ${foundLocation.display_name.split(",").slice(0, 3).join(", ")}`, }) } else { toast({ title: "Address not found", description: "Please try a different address format or check the spelling.", variant: "destructive", }) } } catch (error) { console.error("Geocoding error:", error) toast({ title: "Search failed", description: "Unable to search for the address. Please try again.", variant: "destructive", }) } finally { setIsLoading(false) } } const handleRadiusChange = (value: number[]) => { setIsRadiusChanging(true) setMapData((prev) => ({ ...prev, radius: value[0] })) setTimeout(() => setIsRadiusChanging(false), 300) } const handlePresetRadius = (radius: number) => { setIsRadiusChanging(true) setMapData((prev) => ({ ...prev, radius })) setTimeout(() => setIsRadiusChanging(false), 300) } const coverageArea = Math.round(Math.PI * mapData.radius * mapData.radius) const estimatedPopulation = Math.round(coverageArea * 180) const currentCountyArea = currentCountyAreas.reduce((sum, county) => sum + county.area, 0) const additionalCoverage = Math.max(0, coverageArea - currentCountyArea) const coverageIncrease = currentCountyArea > 0 ? Math.round(((coverageArea - currentCountyArea) / currentCountyArea) * 100) : 0 return (

{/* Control Panel */}

Business Address

Enter your business address

setMapData((prev) => ({ ...prev, address: e.target.value }))} onKeyPress={(e) => e.key === "Enter" && handleAddressSearch()} />

View Options

Show Current vs. Suggested Coverage

{showComparison && (

Current County Coverage

Suggested Radius Coverage

)} Service Radius

Coverage Mode

{drawingMode === "custom" && (

DRAW

{drawToggleEnabled ? "Drawing enabled" : "Map dragging enabled"}

{drawToggleEnabled ? isDrawing ? "Click and drag on the map to draw your custom service area" : "Click on the map to start drawing your custom area" : "Turn on DRAW toggle above to start drawing, or drag to move the map"}

{customPolygon && ( )}

)}

{drawingMode === "radius" && ( <>

Quick Select

{RADIUS_PRESETS.map((preset) => { const Icon = preset.icon const isActive = mapData.radius === preset.value return ( ) })}

Custom Radius: {mapData.radius} miles

1 mile 100 miles

Adjust the radius to see your potential service area coverage.

{mapData.address && ( )} )}

{/* Map and Data Container */}

{(citiesInRadius.length > 0 || zipCodesInRadius.length > 0) && ( Export Options

Format:

Use "Copy All for LSA" to get formatted data ready to paste into your Google Local Services Ads account.

)} Service Area Analysis {isProcessingGeoData && } Cities & Towns ({citiesInRadius.length}) Zip Codes ({zipCodesInRadius.length}) {citiesInRadius.length > 0 ? (

{citiesInRadius.map((city, index) => (

{city.name}

{city.type} • {city.state}

{city.distance} mi

))}

) : (

{mapData.address ? isProcessingGeoData ? "Processing geographic data..." : "No cities found in this radius" : "Enter an address to see cities in your service area"}

)} {zipCodesInRadius.length > 0 ? (

{zipCodesInRadius.map((zip, index) => (

{zip.zipCode}

{zip.city}, {zip.state}

{zip.distance.toFixed(1)} mi

))}

) : (

{mapData.address ? isProcessingGeoData ? "Processing zip code data..." : "No zip codes found in this radius" : "Enter an address to see zip codes in your service area"}

)}

) }