theHereTimes

Public

Version 139

8/26/2024

/**

* 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(() => {

Updated: September 2, 2024