Skip to content

Commit

Permalink
fix: Updates region viewer to adapt for unsupported boundary types wh…
Browse files Browse the repository at this point in the history 
…ich may be returned. (#1802)
  • Loading branch information
@willum070
willum070 authored Aug 20, 2024
1 parent 6c7cead commit 9e2ba80
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 28 deletions.
11 changes: 7 additions & 4 deletions samples/dds-region-viewer/index.njk
View file
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
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
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] */

0 comments on commit 9e2ba80

Please sign in to comment.