fix: Updates region viewer to adapt for unsupported boundary types which may be returned. (#1802)

Author: willum070

samples/dds-region-viewer/index.njk

@@ -24,15 +24,18 @@
                     <option id="school_district" value="school_district">School district</option>
                 </select>
             </div>
+            <!-- Autocomplete control -->
             <div id="ac-input">
                 <input id="pac-input" class="pac-controls" type="text" placeholder="Enter a location name"/>
             </div>
+            <div id="filter-checkbox">
+                <label for="pac-filter-option"><input id="pac-filter-option" type="checkbox" /> Restrict search to selected feature type</label>
+            </div>
             <!-- Color controls -->
             <div id="color-controls" class="pac-controls">
-                <label for="head">Fill:</label>
-                <input type="color" id="fill-color-picker" name="head" value="#810FCB"/>
-                <label for="body">Stroke:</label>
-                <input type="color" id="stroke-color-picker" name="body" value="#810FCB"/>
+                <label for="head">Fill:&nbsp;<input type="color" id="fill-color-picker" name="head" value="#810FCB"/></label>
+                &nbsp;&nbsp;
+                <label for="body">Stroke:&nbsp;<input type="color" id="stroke-color-picker" name="body" value="#810FCB"/></label>
             </div>
             <!-- Place details, photo, etc. -->
             <div id="pac-content"></div>

samples/dds-region-viewer/index.ts

@@ -15,6 +15,7 @@ let map: google.maps.Map;
 let countryMenu: HTMLSelectElement;
 let featureMenu: HTMLSelectElement;
 let searchInput: HTMLInputElement;
+let searchInputOption: HTMLInputElement;
 let fillColorPicker: HTMLInputElement;
 let strokeColorPicker: HTMLInputElement;
 let contentDiv: HTMLElement;
@@ -45,6 +46,7 @@ function initMap() {
     const card = document.getElementById('pac-card') as HTMLElement;
     contentDiv = document.getElementById('pac-content') as HTMLElement;
     searchInput = document.getElementById('pac-input') as HTMLInputElement;
+    searchInputOption = document.getElementById('pac-filter-option') as HTMLInputElement;
     countryMenu = document.getElementById('country-select') as HTMLSelectElement;
     featureMenu = document.getElementById('feature-type-select') as HTMLSelectElement;
     fillColorPicker = document.getElementById('fill-color-picker') as HTMLInputElement;
@@ -70,6 +72,18 @@ function initMap() {
     autoComplete = new google.maps.places.Autocomplete(searchInput, autocompleteOptions);
     placesService = new google.maps.places.PlacesService(map);
 
+    searchInputOption.addEventListener('change', () => {
+        if (searchInputOption.checked) {
+            // Do not show school_district since AC cannot use it for filtering.
+            featureMenu.item(5)!.disabled = true;
+            setFeatureType();
+        } else {
+            // Show school districts.
+            featureMenu.item(5)!.disabled = false;
+            setFeatureType();
+        }
+    });
+
     autoComplete.addListener('place_changed', () => {
         const place = autoComplete.getPlace() as google.maps.places.PlaceResult;
         const types = place.types as string[];
@@ -98,10 +112,11 @@ function initMap() {
                 break;
         }
 
-        showSelectedPolygon(place.place_id);
+        showSelectedPolygon(place.place_id, 1);
 
     });
 
+
     // Add all the feature layers.
     //@ts-ignore
     countryLayer = map.getFeatureLayer('COUNTRY');
@@ -133,7 +148,7 @@ function initMap() {
     // Set up country and feature menus.
     buildMenu();
     onCountrySelected();
-    featureMenu.selectedIndex = 1;
+    featureMenu.selectedIndex = 0; // Set to COUNTRY.
 }
 
 // Restyle and make a request when the feature type is changed.
@@ -148,34 +163,52 @@ function featureTypeChanged() {
     });
 
     revertStyles();
+    setFeatureType();
     selectedPlaceId = '';
     contentDiv.innerHTML = '';
 
     // Apply the style to the selected feature layer.
     switch (featureMenu.value) {
         case 'country':
             countryLayer.style = styleStrokeOnly;
+            searchInputOption.disabled = false;
             break;
         case 'administrative_area_level_1':
             admin1Layer.style = styleStrokeOnly;
+            searchInputOption.disabled = false;
             break;
         case 'administrative_area_level_2':
             admin2Layer.style = styleStrokeOnly;
+            searchInputOption.disabled = false;
             break;
         case 'locality':
             localityLayer.style = styleStrokeOnly;
+            searchInputOption.disabled = false;
             break;
         case 'postal_code':
             postalCodeLayer.style = styleStrokeOnly;
+            searchInputOption.disabled = false;
             break;
         case 'school_district':
             schoolDistrictLayer.style = styleStrokeOnly;
+            searchInputOption.disabled = true;
             break;
         default:
             break;
     }
 }
 
+// Toggle autocomplete types based on restrict search checkbox.
+function setFeatureType() {
+    if (searchInputOption.checked) {
+        // Set autocomplete to the selected type.
+        autoComplete.setTypes([featureMenu.value]);
+    } else {
+        // Set autocomplete to return all feature types.
+        autoComplete.setTypes(['(regions)']);
+    }
+}
+
 // Restyle when the stroke or fill is changed.
 function styleChanged() {
     if (selectedPlaceId) {
@@ -216,21 +249,27 @@ function applyStyle(placeid?) {
     switch (featureMenu.value) {
         case 'country':
             countryLayer.style = featureStyle;
+            searchInputOption.disabled = false;
             break;
         case 'administrative_area_level_1':
             admin1Layer.style = featureStyle;
+            searchInputOption.disabled = false;
             break;
         case 'administrative_area_level_2':
             admin2Layer.style = featureStyle;
+            searchInputOption.disabled = false;
             break;
         case 'locality':
             localityLayer.style = featureStyle;
+            searchInputOption.disabled = false;
             break;
         case 'postal_code':
             postalCodeLayer.style = featureStyle;
+            searchInputOption.disabled = false;
             break;
         case 'school_district':
             schoolDistrictLayer.style = featureStyle;
+            searchInputOption.disabled = true;
             break;
         default:
             break;
@@ -255,10 +294,28 @@ function buildMenu() {
 function onCountrySelected() {
     // Get the selected value.
     let selected = countryMenu.value;
+    let featureAvailabilityMap = getFeatureAvailability(selected);
+
+    // Set the feature list selection to 'country'.
+    featureMenu.namedItem('country')!.selected = true;
+
+    // Do a comparison on the map, and disable any false items.
+    for (const item of featureAvailabilityMap) {
+        if (item[1] == false) {
+            featureMenu.namedItem(item[0])!.disabled = true;
+        } else {
+            featureMenu.namedItem(item[0])!.disabled = false;
+        }
+    }
 
+    showSelectedCountry(countryMenu.options[countryMenu.selectedIndex].text);
+}
+
+// Return a map of feature availability for a country.
+function getFeatureAvailability(countryName) {
     // Return the data for the selected country.
     const selectedCountry = countries.find((country) => {
-        return country.code === selected;
+        return country.code === countryName;
     });
 
     // Create a map for our values.
@@ -271,19 +328,7 @@ function onCountrySelected() {
         ['school_district', selectedCountry?.feature.school_district],
     ]);
 
-    // Set the feature list selection to 'country'.
-    featureMenu.namedItem('country')!.selected = true;
-
-    // Do a comparison on the map, and disable any false items.
-    for (const item of featureAvailabilityMap) {
-        if (item[1] == false) {
-            featureMenu.namedItem(item[0])!.disabled = true;
-        } else {
-            featureMenu.namedItem(item[0])!.disabled = false;
-        }
-    }
-
-    showSelectedCountry(countryMenu.options[countryMenu.selectedIndex].text);
+    return featureAvailabilityMap;
 }
 
 // Restyle all feature layers to be invisible.
@@ -297,7 +342,7 @@ function revertStyles() {
 function handlePlaceClick(event) {
     let clickedPlaceId = event.features[0].placeId;
     if (!clickedPlaceId) return;
-    showSelectedPolygon(clickedPlaceId);
+    showSelectedPolygon(clickedPlaceId, 0);
 }
 
 // Get the place ID for the selected country, then call showSelectedPolygon().
@@ -315,13 +360,14 @@ function showSelectedCountry(countryName) {
             status === google.maps.places.PlacesServiceStatus.OK &&
             place
         ) {
-            showSelectedPolygon(place[0].place_id);
+            showSelectedPolygon(place[0].place_id, 0);
         }
     });
 }
 
 // Event handler for when a polygon is selected.
-function showSelectedPolygon(placeid) {
+// mode 0 = click, mode 1 = autocomplete.
+function showSelectedPolygon(placeid, mode) {
     selectedPlaceId = placeid;
     contentDiv.innerHTML = ''; // Clear the info display.
 
@@ -353,17 +399,23 @@ function showSelectedPolygon(placeid) {
             const types = place.types as string[];
 
             // Create HTML for place information.
-            contentDiv.innerHTML = '<hr><span id="place-info"><b>' + place.formatted_address +
-                '</b><br/> Place ID: <code>' + placeid + '</code>' +
-                '<br/> Feature type: <code>' + types[0] + '</code></span><br/>';
+            // Show information if boundary was clicked (mode 0).
+            if (mode == 0){
+                contentDiv.innerHTML = `<hr><span id="place-info"><b>${place.formatted_address}
+                    </b><br/> Place ID: <code>${placeid}</code>
+                    <br/> Feature type: <code>${types[0]}</code></span><br/>`;
+            } else {
+                // Display no information if autocomplete was used (mode 1).
+                contentDiv.innerHTML = `<hr><span id="place-info">Click a boundary to see its place ID and feature type.</span>`
+            };
         }
     });
 
     // Call the global styling function.
     applyStyle(placeid);
-
 }
-/** GENERATED FILE, DO NOT EDIT */
+
+/** GENERATED CONTENT, DO NOT EDIT BELOW THIS LINE */
 
 const countries = [
     {

samples/dds-region-viewer/style.scss

@@ -58,4 +58,15 @@
   font-size: 14px;
 }
 
+#color-controls {
+  display: flex;
+  align-items: center;
+}
+
+label {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+
 /* [END maps_dds_region_viewer] */