Skip to content

fix: Updates region viewer behavior for autocomplete #1802

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 20, 2024
Merged

fix: Updates region viewer behavior for autocomplete #1802

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions samples/dds-region-viewer/index.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
100 changes: 76 additions & 24 deletions samples/dds-region-viewer/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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[];
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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.
Expand All @@ -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) {
Expand Down Expand Up @@ -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;
Expand All @@ -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.
Expand All @@ -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.
Expand All @@ -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().
Expand All @@ -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.

Expand Down Expand Up @@ -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 = [
{
Expand Down
11 changes: 11 additions & 0 deletions samples/dds-region-viewer/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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] */
Loading