Demo app ready for prod

Author: unatarajan

geopoly-demo/README.md

@@ -0,0 +1,41 @@
+# Example App using SQLite's Geopoly Extension
+
+<img width="721" alt="Screenshot 2024-08-06 at 3 33 47 PM" src="https://github.com/user-attachments/assets/113ebbdc-778e-4862-a4cb-080c20cb57fd">
+
+## Description
+
+This example demos using SQLite's built-in Geopoly extension with SQLite Cloud to create a local attractions finder map-plication.
+
+To build the app from scratch and/or customize the attractions, read the [Tutorial](https://docs.sqlitecloud.io/docs/tutorial-geopoly) in the SQLite Cloud documentation.
+
+## Tutorial TL;DR - Get up-and-exploring NYC attractions fast!
+
+1. In your SQLite Cloud account dashboard's left nav, click Databases > Create Database. To minimize code changes, name your new database `geopoly-demo`.
+
+2. Clone and open the `examples` repo in your local editor. Install the `geopoly-demo` app's dependencies.
+
+```
+git clone https://github.com/sqlitecloud/examples.git
+cd geopoly-demo
+npm i
+```
+
+3. [Sign up](https://account.mapbox.com/auth/signup/) for an Individual Mapbox account. (We'll stay on the free tier.)
+
+4. Create a `.env` file. Add 2 env vars:
+
+- `REACT_APP_CONNECTION_STRING`. Copy/ paste your connection string from your SQLite Cloud account dashboard.
+- `REACT_APP_MAPBOX_TOKEN`. In your Mapbox account dashboard's nav, click Tokens. Copy/ paste your default public token.
+
+5. Run `npm run create-tables` to create 2 DB tables in the `geopoly-demo` database:
+
+- a `polygons` table to store the polygons generated by Geopoly as you interact with the app map, and
+- an `attractions` table to store NYC attraction geodata. Since `data/geodata.json` contains ~2000 Point features, it will take a little time for this command to finish inserting the attractions as rows.
+
+6. Run `npm start` to start your local dev server. Visit `http://localhost:3000/` (adjust the port as-needed) in your browser to view the app.
+
+- The loaded map is centered at Central Park, NYC.
+- In the geocoder (i.e. search input) at the top right of the map, enter "Empire" and select the "Empire State Building" search result.
+- A polygon will be generated by Geopoly, added to your `polygons` table, and displayed on the map.
+- All attractions from your `attractions` table within the polygon area will be listed (nearest to furthest from the Empire State Building) in the left sidebar AND rendered as map markers.
+- The map will zoom in to the closest attraction to your searched location, in this case the "Empire State Building". However, you can click on any attraction listing or marker to center that attraction on the map.

geopoly/data/geodata.json geopoly-demo/data/geodata.jsongeopoly/data/geodata.json renamed to geopoly-demo/data/geodata.json

@@ -7,7 +7,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "create-db": "node src/helpers/createDatabase.js"
+    "create-tables": "node src/helpers/createDatabase.js"
   },
   "eslintConfig": {
     "extends": [

geopoly/images/attraction-pin.png geopoly-demo/images/attraction-pin.pnggeopoly/images/attraction-pin.png renamed to geopoly-demo/images/attraction-pin.png

@@ -7,7 +7,7 @@
       name="description"
       content="Create a React web app that uses Mapbox GL JS to render a map"
     />
-    <title>Local Attraction Finder</title>
+    <title>Local Attractions Finder</title>
     <link rel="icon" type="image/x-icon" href="../images/favicon.ico" />
     <link rel="icon" type="image/svg+xml" href="../images/favicon.svg" />
   </head>

geopoly/images/favicon.ico geopoly-demo/images/favicon.icogeopoly/images/favicon.ico renamed to geopoly-demo/images/favicon.ico

@@ -6,36 +6,34 @@ import { point, distance } from '@turf/turf';
 import { Database } from '@sqlitecloud/drivers';
 import { getBbox } from './helpers/getBbox.js';
 
-mapboxgl.accessToken =
-  'pk.eyJ1IjoidW5hdGFyYWphbiIsImEiOiJjbDFpcW82MGYxeDE1M2RwNjU4MmZ1YndsIn0.HyxwEtZz-pQ_7R6e48l0-g';
+mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_TOKEN;
 
 function App() {
   const mapContainerRef = useRef();
   const mapRef = useRef();
 
-  // centers on Central Park, NYC
   const [lng, setLng] = useState(-73.9654897);
   const [lat, setLat] = useState(40.7824635);
   const [zoom, setZoom] = useState(12);
 
   const [places, setPlaces] = useState([]);
   const [geometry, setGeometry] = useState([]);
 
-  const units = 'miles'; // default is 'kilometers'; can also be miles, degrees, or radians
+  const units = 'miles';
 
   async function queryGeopoly(searchedLng, searchedLat) {
     const db = new Database(process.env.REACT_APP_CONNECTION_STRING);
 
-    const db_name = 'geopoly-app';
+    const db_name = 'geopoly-demo';
+
+    const radius = 0.05;
+    const sides = 50;
 
-    const radius = 0.05; // must be non-negative
-    const sides = 50; // caps at 1000
-    // use coords to create a polygon to store in geopoly
     const polygonCoords =
       await db.sql`USE DATABASE ${db_name}; INSERT INTO polygons(_shape) VALUES(geopoly_regular(${searchedLng}, ${searchedLat}, ${radius}, ${sides})) RETURNING geopoly_json(_shape);`;
 
     const attractionsInPolygon =
-      await db.sql`USE DATABASE ${db_name}; SELECT name, coordinates FROM attractions WHERE geopoly_contains_point(${polygonCoords[0]['geopoly_json(_shape)']}, lng, lat);`; // here, lng and lat are the cols in the attractions table
+      await db.sql`USE DATABASE ${db_name}; SELECT name, coordinates FROM attractions WHERE geopoly_contains_point(${polygonCoords[0]['geopoly_json(_shape)']}, lng, lat);`;
 
     db.close();
 
@@ -65,11 +63,10 @@ function App() {
         },
       };
 
-      // (re-)apply markers for newly searched location
       const marker = document.createElement('div');
       marker.key = `marker-${attractionFeature.properties.id}`;
       marker.id = `marker-${attractionFeature.properties.id}`;
-      marker.className = 'marker'; // no css for this class; adding to enable removal later
+      marker.className = 'marker';
 
       marker.addEventListener('click', (e) => {
         handleClick(attractionFeature);
@@ -89,14 +86,12 @@ function App() {
       if (a.properties.distance < b.properties.distance) {
         return -1;
       }
-      return 0; // a must be equal to b
+      return 0;
     });
 
     setPlaces(attractionFeatures);
 
-    // if there is at least one attraction in the polygon
     if (attractionFeatures[0]) {
-      // create bounding box around searched location and closest attraction
       const bbox = getBbox(attractionFeatures, searchedLng, searchedLat);
       mapRef.current.fitBounds(bbox, {
         padding: 100,
@@ -134,7 +129,7 @@ function App() {
         type: 'geojson',
         data: {
           type: 'FeatureCollection',
-          features: geometry, // array of feature objects (polygon + attraction points)
+          features: geometry,
         },
       });
 
@@ -162,7 +157,7 @@ function App() {
     } else {
       mapRef.current.getSource(sourceId).setData({
         type: 'FeatureCollection',
-        features: geometry, // array of feature objects (polygon + attraction points)
+        features: geometry,
       });
     }
   }
@@ -237,13 +232,11 @@ function App() {
     mapRef.current.on('move', updateCoordinates);
 
     geocoder.on('result', (e) => {
-      // remove existing map markers
       const existingMarkers = document.getElementsByClassName('marker');
       while (existingMarkers[0]) {
         existingMarkers[0].remove();
       }
 
-      // remove existing popups
       const popUps = document.getElementsByClassName('mapboxgl-popup');
       while (popUps[0]) {
         popUps[0].remove();
@@ -253,7 +246,6 @@ function App() {
       queryGeopoly(lng, lat);
     });
 
-    // return effect cleanup function
     return () => {
       mapRef.current.removeControl(geocoder);
       mapRef.current.removeControl(fullscreenCtrl);
@@ -286,7 +278,6 @@ function App() {
             <div
               key={index}
               id={`listing-${place.properties.id}`}
-              // first item in the list is the closest, active by default
               className={`item ${index === 0 && 'active'}`}
             >
               <a href="#" className="title" onClick={() => handleClick(place)}>

geopoly/images/favicon.svg geopoly-demo/images/favicon.svggeopoly/images/favicon.svg renamed to geopoly-demo/images/favicon.svg

@@ -5,14 +5,13 @@ import geodata from '../../data/geodata.json' assert { type: 'json' };
 async function createDatabase() {
   const db = new Database(process.env.REACT_APP_CONNECTION_STRING);
 
-  const db_name = 'geopoly-app';
+  const db_name = 'geopoly-demo';
   await db.sql`USE DATABASE ${db_name};`;
 
   await db.sql`CREATE VIRTUAL TABLE polygons USING geopoly()`;
 
   await db.sql`CREATE TABLE attractions (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, lng REAL NOT NULL, lat REAL NOT NULL, coordinates TEXT NOT NULL)`;
 
-  // stick to node (Point) data from Overpass API!
   for (const feature of geodata['features']) {
     const { name } = feature.properties;
     const { coordinates } = feature.geometry;
@@ -29,34 +28,3 @@ async function createDatabase() {
 }
 
 createDatabase();
-
-/*
-Overpass API query:
-
-[out:json][timeout:25];
-
-// Define areas for Paris, New York, and Tokyo
-area[name="New York"]->.newyork;
-
-// Fetch nodes, ways, and relations tagged as tourist attractions in these areas
-(
-  node["amenity"="events_venue"](area.newyork);
-  node["amenity"="exhibition_centre"](area.newyork);
-  node["amenity"="music_venue"](area.newyork);
-  node["amenity"="social_centre"](area.newyork);
-  node["amenity"="marketplace"](area.newyork);
-  node["building"="museum"](area.newyork);
-  node["historic"="building"](area.newyork);
-  node["tourism"="attraction"](area.newyork);
-  node["leisure"="park"](area.newyork);
-  node["natural"="beach"](area.newyork);
-  node["shop"="coffee"](area.newyork);
-  node["sport"="yoga"](area.newyork);
-);
-
-// Output the data
-out body;
->;
-out skel qt;
-
-*/

geopoly/package.json geopoly-demo/package.jsongeopoly/package.json renamed to geopoly-demo/package.json

@@ -1,16 +1,6 @@
 export function getBbox(sortedEvents, locationLng, locationLat) {
-  const lons = [
-    // closest event lng
-    sortedEvents[0].geometry.coordinates[0],
-    // searched location lng
-    locationLng,
-  ];
-  const lats = [
-    // closest event lat
-    sortedEvents[0].geometry.coordinates[1],
-    // searched location lat
-    locationLat,
-  ];
+  const lons = [sortedEvents[0].geometry.coordinates[0], locationLng];
+  const lats = [sortedEvents[0].geometry.coordinates[1], locationLat];
   const sortedLons = lons.sort((a, b) => {
     if (a > b) {
       return 1;