The Here Times

/** * This application creates "The Here Times", a map-based news aggregator. * It uses the Google Maps JavaScript API for map rendering, Geonames for location data, * and the NewsAPI for fetching news articles. * The app displays news for the top 12 most populous cities/neighborhoods in the current map view. * * We'll use the following approach: * 1. Use Google Maps JavaScript API for rendering the map * 2. Use Geonames API to get top 12 most populous cities within the map bounds * 3. Fetch news data from NewsAPI based on these locations * 4. Display news articles in a side drawer, only showing articles that contain the city's name in the title * 5. Place markers on the map for each location (exactly 12) * 6. Add a search bar to allow users to search for specific locations * 7. Recenter the map when a location is clicked or searched */ import { Loader } from "https://esm.sh/@googlemaps/js-api-loader@1.16.2"; import ReactDOM from "https://esm.sh/react-dom@18.2.0"; import React from "https://esm.sh/react@18.2.0"; function App() { const mapRef = React.useRef(null); const [map, setMap] = React.useState(null); const [center, setCenter] = React.useState({ lat: 40.7128, lng: -74.006 }); const [zoom, setZoom] = React.useState(10); const [news, setNews] = React.useState([]); const [locations, setLocations] = React.useState([]); const [isDrawerOpen, setIsDrawerOpen] = React.useState(false); const [error, setError] = React.useState(null); const markersRef = React.useRef([]); const [googleMaps, setGoogleMaps] = React.useState(null); const [selectedLocation, setSelectedLocation] = React.useState(null); const [searchQuery, setSearchQuery] = React.useState(""); const searchBoxRef = React.useRef(null); React.useEffect(() => { const initMap = async () => { try { const response = await fetch("/api/maps-key"); const { apiKey } = await response.json(); const loader = new Loader({ apiKey: apiKey, version: "weekly", libraries: ["places"], }); const google = await loader.load(); setGoogleMaps(google.maps); const newMap = new google.maps.Map(mapRef.current, { center: center, zoom: zoom, mapTypeControl: false, }); setMap(newMap); // Initialize SearchBox after Google Maps is fully loaded const searchInput = document.getElementById("search-input"); const searchBox = new google.maps.places.SearchBox(searchInput); searchBoxRef.current = searchBox; newMap.controls[google.maps.ControlPosition.TOP_LEFT].push(document.getElementById("search-container")); newMap.addListener("bounds_changed", () => { searchBox.setBounds(newMap.getBounds()); }); searchBox.addListener("places_changed", () => { const places = searchBox.getPlaces(); if (places.length === 0) return; const bounds = new google.maps.LatLngBounds(); places.forEach((place) => { if (place.geometry && place.geometry.location) { if (place.geometry.viewport) { bounds.union(place.geometry.viewport); } else { bounds.extend(place.geometry.location); } } }); newMap.fitBounds(bounds); newMap.setZoom(Math.min(newMap.getZoom(), 12)); // Limit zoom level setSearchQuery(""); }); newMap.addListener("idle", async () => { const newCenter = newMap.getCenter(); setCenter({ lat: newCenter.lat(), lng: newCenter.lng() }); setZoom(newMap.getZoom()); const bounds = newMap.getBounds(); const ne = bounds.getNorthEast(); const sw = bounds.getSouthWest(); await fetchLocationsAndNews(sw.lat(), sw.lng(), ne.lat(), ne.lng()); }); } catch (error) { console.error("Error initializing map:", error); setError("Failed to load the map. Please try again later."); } }; initMap(); }, []); React.useEffect(() => { if (map && locations.length > 0 && googleMaps) { console.log("Updating markers. Number of locations:", locations.length); updateMarkers(); } }, [map, locations, googleMaps]); const fetchLocationsAndNews = async (south, west, north, east) => { try { const locationResponse = await fetch(`/api/locations?south=${south}&west=${west}&north=${north}&east=${east}`); if (!locationResponse.ok) { throw new Error(`HTTP error! status: ${locationResponse.status}`); } const fetchedLocations = await locationResponse.json(); console.log("Fetched locations:", fetchedLocations.length); const limitedLocations = fetchedLocations.slice(0, 12); setLocations(limitedLocations); console.log("Set locations:", limitedLocations.length); const newsPromises = limitedLocations.map(location => fetch(`/api/news?location=${encodeURIComponent(location.name)}`) .then(async response => { if (!response.ok) { if (response.status === 429) { console.warn("Rate limit reached for News API. Using placeholder data."); return [{ title: "Rate limit reached", description: "Please try again later.", url: "#" }]; } const errorText = await response.text(); throw new Error(`HTTP error! status: ${response.status}. Error: ${errorText}`); } return response.json(); }) ); const newsResults = await Promise.all(newsPromises); const combinedNews = newsResults.flat(); setNews(combinedNews); console.log("Set news articles:", combinedNews.length); setError(null); } catch (error) { console.error("Error fetching locations and news:", error); setError(`Failed to fetch news: ${error.message}. Please try again later.`); setNews([]); setLocations([]); } }; const updateMarkers = () => { console.log("Updating markers. Current markers:", markersRef.current.length); // Remove all existing markers from the map markersRef.current.forEach(marker => { if (marker.setMap) { marker.setMap(null); } }); markersRef.current = []; console.log("Cleared all markers. Now adding new ones."); // Ensure we're working with exactly 12 locations const limitedLocations = locations.slice(0, 12); console.log("Number of locations to add markers for:", limitedLocations.length); // Add new markers (one per location, exactly 12) limitedLocations.forEach((location, index) => { if (map && googleMaps) { let marker; if (googleMaps.marker && googleMaps.marker.AdvancedMarkerElement) { marker = new googleMaps.marker.AdvancedMarkerElement({ map: map, position: { lat: location.lat, lng: location.lng }, title: location.name, }); } else { marker = new googleMaps.Marker({ map: map, position: { lat: location.lat, lng: location.lng }, title: location.name, }); } marker.addListener("click", () => { setSelectedLocation(location); setIsDrawerOpen(true); // Recenter the map to the clicked location map.panTo({ lat: location.lat, lng: location.lng }); }); markersRef.current.push(marker); console.log(`Added marker ${index + 1}: ${location.name}`); } }); console.log("Finished adding markers. Total markers:", markersRef.current.length); }; const filteredNews = React.useMemo(() => { if (!selectedLocation) return []; return news.filter(article => article.title.toLowerCase().includes(selectedLocation.name.toLowerCase())); }, [news, selectedLocation]); return React.createElement( "div", { style: { display: "flex", flexDirection: "column", height: "100vh" } }, React.createElement( "div", { id: "search-container", className: "search-container" }, React.createElement("input", { id: "search-input", type: "text", placeholder: "Search for a location", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), }), ), React.createElement("div", { ref: mapRef, style: { flexGrow: 1 } }), isDrawerOpen && React.createElement( "div", { className: "drawer" }, React.createElement("button", { onClick: () => setIsDrawerOpen(false), className: "close-button" }, "×"), React.createElement("h2", null, selectedLocation ? `News for ${selectedLocation.name}` : "Local News"), error ? React.createElement("p", { className: "error" }, error) : filteredNews.length > 0 ? filteredNews.map((article, index) => React.createElement( "div", { key: index, className: "article" }, React.createElement("h3", null, article.title), React.createElement("p", null, article.description), React.createElement("a", { href: article.url, target: "_blank", rel: "noopener noreferrer" }, "Read more"), ) ) : React.createElement("p", null, "No news articles found for this location."), ), React.createElement( "div", { className: "attribution" }, React.createElement( "a", { href: import.meta.url.replace("esm.town", "val.town"), target: "_blank", rel: "noopener noreferrer", }, "View Source", ), ), ); } function client() { ReactDOM.createRoot(document.getElementById("root")).render(React.createElement(App)); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const url = new URL(request.url); if (url.pathname === "/api/maps-key") { const apiKey = Deno.env.get("GOOGLE_MAPS_API_KEY"); return new Response(JSON.stringify({ apiKey }), { headers: { "Content-Type": "application/json" }, }); } if (url.pathname === "/api/locations") { const south = url.searchParams.get("south"); const west = url.searchParams.get("west"); const north = url.searchParams.get("north"); const east = url.searchParams.get("east"); const geonamesUsername = Deno.env.get("GEONAMES_USERNAME"); if (!geonamesUsername) { return new Response(JSON.stringify({ error: "GEONAMES_USERNAME is not set" }), { status: 500, headers: { "Content-Type": "application/json" }, }); } const geonamesUrl = `http://api.geonames.org/citiesJSON?south=${south}&west=${west}&north=${north}&east=${east}&maxRows=12&username=${geonamesUsername}&orderby=population`; try { const response = await fetch(geonamesUrl); if (!response.ok) { throw new Error(`Geonames API responded with status: ${response.status}`); } const data = await response.json(); if (data.geonames && Array.isArray(data.geonames)) { console.log("Server: Fetched locations:", data.geonames.length); return new Response(JSON.stringify(data.geonames.slice(0, 12)), { headers: { "Content-Type": "application/json" }, }); } else { throw new Error("No location data found"); } } catch (error) { console.error("Error fetching location data:", error); return new Response(JSON.stringify({ error: error.message }), { status: 500, headers: { "Content-Type": "application/json" }, }); } } if (url.pathname === "/api/news") { try { const location = url.searchParams.get("location"); const newsApiKey = Deno.env.get("NEWS_API_KEY"); if (!newsApiKey) { console.error("NEWS_API_KEY is not set"); throw new Error("NEWS_API_KEY is not set"); } const apiUrl = `https://newsapi.org/v2/everything?q=${ encodeURIComponent(location || '') }&sortBy=publishedAt&apiKey=${newsApiKey}`; if (!location) { throw new Error("Location is not provided"); } console.log(`Fetching news for ${location} from ${apiUrl}`); const response = await fetch(apiUrl); if (!response.ok) { if (response.status === 429) { console.warn("Rate limit reached for News API. Returning placeholder data."); return new Response( JSON.stringify([ { title: "Rate limit reached", description: "Please try again later.", url: "#" }, ]), { headers: { "Content-Type": "application/json" }, }, ); } const errorText = await response.text(); console.error(`News API error: ${response.status} ${response.statusText}. Body: ${errorText}`); throw new Error(`News API responded with status: ${response.status}. Error: ${errorText}`); } const data = await response.json(); if (!data.articles || !Array.isArray(data.articles)) { console.error("Unexpected response format from News API:", data); throw new Error("Unexpected response format from News API"); } const newsData = data.articles .filter(article => article.title && article.title.toLowerCase().includes(location.toLowerCase())) .slice(0, 5) .map(article => ({ title: article.title, description: article.description, url: article.url, })); console.log(`Server: Fetched news for ${location}:`, newsData.length); return new Response(JSON.stringify(newsData), { headers: { "Content-Type": "application/json" }, }); } catch (error) { console.error("Server-side error in /api/news:", error); return new Response(JSON.stringify({ error: error.message }), { status: 500, headers: { "Content-Type": "application/json" }, }); } } const css = ` body { margin: 0; padding: 0; font-family: Arial, sans-serif; } .search-container { margin: 10px; width: 300px; } #search-input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; } .drawer { position: fixed; top: 0; right: 0; width: 30%; height: 100%; background: white; box-shadow: -2px 0 5px rgba(0,0,0,0.2); overflow-y: auto; padding: 20px; box-sizing: border-box; } .close-button { position: absolute; top: 10px; right: 10px; font-size: 24px; background: none; border: none; cursor: pointer; } .article { margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 20px; } .article h3 { margin-top: 0; } .attribution { position: absolute; bottom: 10px; right: 10px; background: rgba(255, 255, 255, 0.7); padding: 5px; border-radius: 3px; } .error { color: red; font-weight: bold; } `; return new Response( ` The Here Times

`, { headers: { "Content-Type": "text/html" }, }, ); }

theHereTimes

Version 7