${report.crime_type}

${report.description}

Status: ${report.status}

Reported: ${new Date(report.created_at || \"\").toLocaleDateString()}

\n ${report.address ? `

Address: ${report.address}

` : \"\"}\n

\n `;\n\n marker.bindPopup(popupContent);\n markersRef.current.push(marker);\n });\n }, [reports]);\n\n // Update selected location marker\n useEffect(() => {\n if (!mapInstanceRef.current) return;\n\n // Remove existing selected marker\n if (selectedMarkerRef.current) {\n mapInstanceRef.current.removeLayer(selectedMarkerRef.current);\n selectedMarkerRef.current = null;\n }\n\n // Add new selected marker\n if (selectedLocation) {\n const selectedIcon = window.L.divIcon({\n className: \"selected-location-marker\",\n html: \"📍\",\n iconSize: [24, 24],\n iconAnchor: [12, 12],\n });\n\n selectedMarkerRef.current = window.L.marker([selectedLocation.lat, selectedLocation.lng], {\n icon: selectedIcon,\n }).addTo(mapInstanceRef.current);\n\n selectedMarkerRef.current.bindPopup(\"Selected location for crime report\").openPopup();\n }\n }, [selectedLocation]);\n\n return (\n

\n Crime Reports\n

\n Selected Location\n

\n );\n}\n\nfunction getCrimeEmoji(crimeType: string): string {\n const emojiMap: Record = {\n \"Theft\": \"💰\",\n \"Burglary\": \"🏠\",\n \"Assault\": \"👊\",\n \"Vandalism\": \"🔨\",\n \"Drug-related\": \"💊\",\n \"Vehicle Crime\": \"🚗\",\n \"Fraud\": \"💳\",\n \"Domestic Violence\": \"🏠\",\n \"Public Disorder\": \"📢\",\n \"Other\": \"⚠️\",\n };\n\n return emojiMap[crimeType] || \"⚠️\";\n}","deleted","label",[171,172,153],"frontend","components","permalink","https://www.val.town/x/realcoder/CrimeMap/code/frontend/components/CrimeMap.tsx","extension","actionData","errors"]