Merge pull request #29 from googlemaps-samples/feat/demo-price-filter

feat(demo): Add Price Level filter and expand H3 resolution limits

Author: henrikvalv3

places_insights/places-insights-demo/README.md

@@ -49,7 +49,7 @@ This application uses client-side OAuth 2.0 to authorize users to run BigQuery q
 3.  For "Application type", select **Web application**.
 4.  Give it a name (e.g., "Places Insights Demo").
 5.  Under **Authorized JavaScript origins**, click **+ ADD URI**.
-6.  Enter the origin for your local development server. For most  servers, this is `http://localhost:8000`.
+6.  Enter the origin for your local development server. For most servers, this is `http://localhost:8000`.
 7.  Click **CREATE**.
 8.  Copy the **Your Client ID** value. You will need this in the next step.
 
@@ -118,12 +118,12 @@ For a detailed walkthrough, click the **Help** button in the application's sideb
     *   **Places Count Per H3 (Function):** Uses server-side BigQuery functions for high-performance density mapping. This mode supports **low counts (0-4)** and **sample place markers**.
 4.  **Apply Filters:** Narrow your search using the collapsible filter sections:
     *   **Place Types:** Select types and optionally check **"Match Primary Type Only"** for stricter filtering.
-    *   **Attributes:** Filter by Rating, Business Status (Operational/Closed), Price, etc.
+    *   **Attributes:** Filter by Price Level, Rating, Business Status (Operational/Closed), and various amenities (e.g., "Offers Delivery").
     *   **Opening Hours:** Filter by day and time (Standard modes only).
     *   **Brands:** Filter by brand name or category (US Standard mode only).
 5.  **Visualize:**
     *   Leave **Show H3 Density Map** unchecked for simple aggregate counts (Standard modes only).
-    *   Check the box to visualize the results as a color-coded heatmap of hexagonal cells.
+    *   Check the box to visualize the results as a color-coded heatmap of hexagonal cells. You can use the **H3 Resolution slider** (supporting up to resolution 11) to adjust the granularity of the cells.
 6.  **Run Search:** Click the "Run Search" button to execute the query and see the results on the map.
 
 ### Interactive Features (H3 Function Mode)

places_insights/places-insights-demo/help.js

@@ -132,15 +132,15 @@ function generateGuideHtml() {
       <li><strong>Included Place Types:</strong> Start typing a place category (e.g., <code>restaurant</code>, <code>park</code>) and click a suggestion to add it as a tag.</li>
       <li><strong>Match Primary Type Only:</strong> Check this box to search strictly for places where the selected type is their <em>primary</em> classification (e.g., finding a "Restaurant" that is primarily a restaurant, not a hotel with a restaurant).</li>
       <li><strong>Business Status:</strong> Filter places by their operational status (Operational, Closed Temporarily, Closed Permanently, or Any). Default is <strong>Operational</strong>.</li>
-      <li><strong>Attribute Filters:</strong> Set min/max ratings or select checkboxes for amenities (e.g., "Offers Delivery").</li>
+      <li><strong>Attribute Filters:</strong> Filter by Price Level, set min/max ratings, or select checkboxes for amenities (e.g., "Offers Delivery").</li>
       <li><strong>Opening Hours:</strong> Select a <strong>Day of Week</strong> and time window (Not available in H3 Function mode).</li>
       <li><strong>Brand Filters (US Only):</strong> Filter by Brand Category or Brand Name (Not available in H3 Function mode).</li>
     </ul>
 
     <h2>5. Choosing Your Visualization</h2>
     <ul>
       <li><strong>Simple Count (Default):</strong> Results are displayed as numbers in a pop-up window.</li>
-      <li><strong>H3 Density Map:</strong> Check the <strong>Show H3 Density Map</strong> box to see a heatmap. Use the <strong>H3 Resolution</strong> slider to change the cell size. (This is always enabled in H3 Function mode).</li>
+      <li><strong>H3 Density Map:</strong> Check the <strong>Show H3 Density Map</strong> box to see a heatmap. Use the <strong>H3 Resolution</strong> slider (up to resolution 11) to change the cell size. (This is always enabled in H3 Function mode).</li>
     </ul>
 
     <h2>6. Running a Query and Managing the App</h2>

places_insights/places-insights-demo/index.html

@@ -155,6 +155,17 @@ <h1>Places Insights</h1>
                     <option value="">Any Status</option>
                 </select>
             </div>
+            <div class="control-group">
+                <label for="price-level-select">Price Level</label>
+                <select id="price-level-select">
+                    <option value="" selected>All Price Levels</option>
+                    <option value="PRICE_LEVEL_FREE">Free</option>
+                    <option value="PRICE_LEVEL_INEXPENSIVE">Inexpensive</option>
+                    <option value="PRICE_LEVEL_MODERATE">Moderate</option>
+                    <option value="PRICE_LEVEL_EXPENSIVE">Expensive</option>
+                    <option value="PRICE_LEVEL_VERY_EXPENSIVE">Very Expensive</option>
+                </select>
+            </div>
             <div class="rating-inputs">
               <div class="control-group"><label for="min-rating-input">Min Rating</label><input type="number" id="min-rating-input" min="1" max="5" step="0.1" placeholder="1.0"></div>
               <div class="control-group"><label for="max-rating-input">Max Rating</label><input type="number" id="max-rating-input" min="1" max="5" step="0.1" placeholder="5.0"></div>

places_insights/places-insights-demo/map.js

@@ -74,13 +74,13 @@ function handleDemoTypeChange(e) {
         h3Toggle.checked = true;
         h3Toggle.disabled = true;
 
-        // Show Slider with Max 8
+        // Show Slider with Max 11
         document.getElementById('h3-resolution-controls').classList.remove('hidden');
         const h3Slider = document.getElementById('h3-resolution-slider');
-        h3Slider.max = '8';
-        if (parseInt(h3Slider.value) > 8) {
-            h3Slider.value = '8';
-            document.getElementById('h3-resolution-value').textContent = '8';
+        h3Slider.max = '11';
+        if (parseInt(h3Slider.value) > 11) {
+            h3Slider.value = '11';
+            document.getElementById('h3-resolution-value').textContent = '11';
         }
 
         // Always Hide Brand Filters for Function mode

places_insights/places-insights-demo/query.js

@@ -193,6 +193,9 @@ async function runQuery() {
 
             const bizStatus = document.getElementById('business-status-select').value;
             if (bizStatus) allFilters.push(`places.business_status = '${bizStatus}'`);
+
+            const priceLevel = document.getElementById('price-level-select').value;
+            if (priceLevel) allFilters.push(`places.price_level = '${priceLevel}'`);
 
             // Brand Filters (only applicable here, not in H3 Function)
             const brandNames = [...document.querySelectorAll('#selected-brands-list span')].map(s => s.textContent);
@@ -401,7 +404,13 @@ function buildH3FunctionQuery(countryCode) {
     if (!isNaN(minRating)) jsonParts.push(`'min_rating', ${minRating}`);
     if (!isNaN(maxRating)) jsonParts.push(`'max_rating', ${maxRating}`);
 
-    // 4. Boolean Attributes
+    // 4. Price Level
+    const priceLevel = document.getElementById('price-level-select').value;
+    if (priceLevel) {
+        jsonParts.push(`'price_level', ['${priceLevel}']`);
+    }
+
+    // 5. Boolean Attributes
     const attributes = [...document.querySelectorAll('.attribute-filter:checked')].map(cb => cb.name);
     attributes.forEach(attr => {
         jsonParts.push(`'${attr}', TRUE`);

places_insights/places-insights-demo/ui.js

@@ -82,6 +82,7 @@ function resetSidebarUI(targetMode = 'circle-search') {
     document.getElementById('min-rating-input').value = '';
     document.getElementById('max-rating-input').value = '';
     document.getElementById('business-status-select').value = 'OPERATIONAL';
+    document.getElementById('price-level-select').value = '';
     document.querySelectorAll('.attribute-filter').forEach(cb => cb.checked = false);
 
     // Reset Time