diff --git a/dist/samples/dds-region-viewer/app/index.html b/dist/samples/dds-region-viewer/app/index.html
index 2ae8b471a5..d5acfefc28 100644
--- a/dist/samples/dds-region-viewer/app/index.html
+++ b/dist/samples/dds-region-viewer/app/index.html
@@ -43,6 +43,7 @@
+
+
+
+
-
-
-
-
+
+
+
diff --git a/dist/samples/dds-region-viewer/app/index.ts b/dist/samples/dds-region-viewer/app/index.ts
index 201dc47f08..b86cc0d576 100644
--- a/dist/samples/dds-region-viewer/app/index.ts
+++ b/dist/samples/dds-region-viewer/app/index.ts
@@ -14,6 +14,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;
@@ -44,6 +45,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;
@@ -69,6 +71,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[];
@@ -97,10 +111,11 @@ function initMap() {
break;
}
- showSelectedPolygon(place.place_id);
+ showSelectedPolygon(place.place_id, 1);
});
+
// Add all the feature layers.
//@ts-ignore
countryLayer = map.getFeatureLayer('COUNTRY');
@@ -132,7 +147,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.
@@ -147,6 +162,7 @@ function featureTypeChanged() {
});
revertStyles();
+ setFeatureType();
selectedPlaceId = '';
contentDiv.innerHTML = '';
@@ -154,27 +170,44 @@ function featureTypeChanged() {
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) {
@@ -215,21 +248,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;
@@ -254,10 +293,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.
@@ -270,19 +327,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.
@@ -296,7 +341,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().
@@ -314,13 +359,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.
@@ -352,17 +398,23 @@ function showSelectedPolygon(placeid) {
const types = place.types as string[];
// Create HTML for place information.
- contentDiv.innerHTML = '
' + place.formatted_address +
- '
Place ID: ' + placeid + '
' +
- '
Feature type: ' + types[0] + '
';
+ // Show information if boundary was clicked (mode 0).
+ if (mode == 0){
+ contentDiv.innerHTML = `
${place.formatted_address}
+
Place ID: ${placeid}
+
Feature type: ${types[0]}
`;
+ } else {
+ // Display no information if autocomplete was used (mode 1).
+ contentDiv.innerHTML = `
Click a boundary to see its place ID and feature type.`
+ };
}
});
// Call the global styling function.
applyStyle(placeid);
-
}
-/** GENERATED FILE, DO NOT EDIT */
+
+/** GENERATED CONTENT, DO NOT EDIT BELOW THIS LINE */
const countries = [
{
diff --git a/dist/samples/dds-region-viewer/app/style.css b/dist/samples/dds-region-viewer/app/style.css
index ad6ddd97de..9c09c9431c 100644
--- a/dist/samples/dds-region-viewer/app/style.css
+++ b/dist/samples/dds-region-viewer/app/style.css
@@ -70,3 +70,14 @@ body {
font-size: 14px;
}
+#color-controls {
+ display: flex;
+ align-items: center;
+}
+
+label {
+ display: flex;
+ align-items: center;
+ font-size: 14px;
+}
+
diff --git a/dist/samples/dds-region-viewer/docs/index.html b/dist/samples/dds-region-viewer/docs/index.html
index 01c5eceb3b..16b208938d 100644
--- a/dist/samples/dds-region-viewer/docs/index.html
+++ b/dist/samples/dds-region-viewer/docs/index.html
@@ -44,6 +44,7 @@
+
+
+
+
-
-
-
-
+
+
+
diff --git a/dist/samples/dds-region-viewer/docs/index.js b/dist/samples/dds-region-viewer/docs/index.js
index da2fdbfa1a..1d21ba1032 100644
--- a/dist/samples/dds-region-viewer/docs/index.js
+++ b/dist/samples/dds-region-viewer/docs/index.js
@@ -13,6 +13,7 @@ let map;
let countryMenu;
let featureMenu;
let searchInput;
+let searchInputOption;
let fillColorPicker;
let strokeColorPicker;
let contentDiv;
@@ -42,6 +43,7 @@ function initMap() {
contentDiv = document.getElementById("pac-content");
searchInput = document.getElementById("pac-input");
+ searchInputOption = document.getElementById("pac-filter-option");
countryMenu = document.getElementById("country-select");
featureMenu = document.getElementById("feature-type-select");
fillColorPicker = document.getElementById("fill-color-picker");
@@ -69,6 +71,17 @@ function initMap() {
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();
const types = place.types;
@@ -97,7 +110,7 @@ function initMap() {
break;
}
- showSelectedPolygon(place.place_id);
+ showSelectedPolygon(place.place_id, 1);
});
// Add all the feature layers.
//@ts-ignore
@@ -133,7 +146,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,33 +161,51 @@ 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) {
@@ -214,21 +245,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,9 +292,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.
let featureAvailabilityMap = new Map([
@@ -274,20 +330,7 @@ function onCountrySelected() {
["locality", selectedCountry?.feature.locality],
["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.
@@ -303,7 +346,7 @@ function handlePlaceClick(event) {
if (!clickedPlaceId) return;
- showSelectedPolygon(clickedPlaceId);
+ showSelectedPolygon(clickedPlaceId, 0);
}
// Get the place ID for the selected country, then call showSelectedPolygon().
@@ -317,13 +360,14 @@ function showSelectedCountry(countryName) {
placesService.findPlaceFromQuery(request, (place, status) => {
if (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.
@@ -350,22 +394,22 @@ function showSelectedPolygon(placeid) {
const types = place.types;
// Create HTML for place information.
- contentDiv.innerHTML =
- '
' +
- place.formatted_address +
- "
Place ID: " +
- placeid +
- "
" +
- "
Feature type: " +
- types[0] +
- "
";
+ // Show information if boundary was clicked (mode 0).
+ if (mode == 0) {
+ contentDiv.innerHTML = `
${place.formatted_address}
+
Place ID: ${placeid}
+
Feature type: ${types[0]}
`;
+ } else {
+ // Display no information if autocomplete was used (mode 1).
+ contentDiv.innerHTML = `
Click a boundary to see its place ID and feature type.`;
+ }
}
});
// Call the global styling function.
applyStyle(placeid);
}
-/** GENERATED FILE, DO NOT EDIT */
+/** GENERATED CONTENT, DO NOT EDIT BELOW THIS LINE */
const countries = [
{
name: "Afghanistan",
diff --git a/dist/samples/dds-region-viewer/docs/style.css b/dist/samples/dds-region-viewer/docs/style.css
index d9ff20e412..3f60e68ed0 100644
--- a/dist/samples/dds-region-viewer/docs/style.css
+++ b/dist/samples/dds-region-viewer/docs/style.css
@@ -71,4 +71,15 @@ body {
font-size: 14px;
}
+#color-controls {
+ display: flex;
+ align-items: center;
+}
+
+label {
+ display: flex;
+ align-items: center;
+ font-size: 14px;
+}
+
/* [END maps_dds_region_viewer] */
\ No newline at end of file
diff --git a/dist/samples/dds-region-viewer/iframe/index.html b/dist/samples/dds-region-viewer/iframe/index.html
index 6610c1f10d..eefee37b85 100644
--- a/dist/samples/dds-region-viewer/iframe/index.html
+++ b/dist/samples/dds-region-viewer/iframe/index.html
@@ -8,8 +8,8 @@
Region Coverage Viewer
-
-
+
+
@@ -43,6 +43,7 @@
+
+
+
+
-
-
-
-
+
+
+
diff --git a/dist/samples/dds-region-viewer/jsfiddle/demo.css b/dist/samples/dds-region-viewer/jsfiddle/demo.css
index ad6ddd97de..9c09c9431c 100644
--- a/dist/samples/dds-region-viewer/jsfiddle/demo.css
+++ b/dist/samples/dds-region-viewer/jsfiddle/demo.css
@@ -70,3 +70,14 @@ body {
font-size: 14px;
}
+#color-controls {
+ display: flex;
+ align-items: center;
+}
+
+label {
+ display: flex;
+ align-items: center;
+ font-size: 14px;
+}
+
diff --git a/dist/samples/dds-region-viewer/jsfiddle/demo.html b/dist/samples/dds-region-viewer/jsfiddle/demo.html
index 72a931b8fb..70d3f3e123 100644
--- a/dist/samples/dds-region-viewer/jsfiddle/demo.html
+++ b/dist/samples/dds-region-viewer/jsfiddle/demo.html
@@ -42,6 +42,7 @@
+
+
+
+
-
-
-
-
+
+
+
diff --git a/dist/samples/dds-region-viewer/jsfiddle/demo.js b/dist/samples/dds-region-viewer/jsfiddle/demo.js
index 6311d9819e..bef867d6a2 100644
--- a/dist/samples/dds-region-viewer/jsfiddle/demo.js
+++ b/dist/samples/dds-region-viewer/jsfiddle/demo.js
@@ -12,6 +12,7 @@ let map;
let countryMenu;
let featureMenu;
let searchInput;
+let searchInputOption;
let fillColorPicker;
let strokeColorPicker;
let contentDiv;
@@ -41,6 +42,7 @@ function initMap() {
contentDiv = document.getElementById("pac-content");
searchInput = document.getElementById("pac-input");
+ searchInputOption = document.getElementById("pac-filter-option");
countryMenu = document.getElementById("country-select");
featureMenu = document.getElementById("feature-type-select");
fillColorPicker = document.getElementById("fill-color-picker");
@@ -68,6 +70,17 @@ function initMap() {
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();
const types = place.types;
@@ -96,7 +109,7 @@ function initMap() {
break;
}
- showSelectedPolygon(place.place_id);
+ showSelectedPolygon(place.place_id, 1);
});
// Add all the feature layers.
//@ts-ignore
@@ -132,7 +145,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.
@@ -147,33 +160,51 @@ 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) {
@@ -213,21 +244,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;
@@ -254,9 +291,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.
let featureAvailabilityMap = new Map([
@@ -273,20 +329,7 @@ function onCountrySelected() {
["locality", selectedCountry?.feature.locality],
["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.
@@ -302,7 +345,7 @@ function handlePlaceClick(event) {
if (!clickedPlaceId) return;
- showSelectedPolygon(clickedPlaceId);
+ showSelectedPolygon(clickedPlaceId, 0);
}
// Get the place ID for the selected country, then call showSelectedPolygon().
@@ -316,13 +359,14 @@ function showSelectedCountry(countryName) {
placesService.findPlaceFromQuery(request, (place, status) => {
if (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.
@@ -349,22 +393,22 @@ function showSelectedPolygon(placeid) {
const types = place.types;
// Create HTML for place information.
- contentDiv.innerHTML =
- '
' +
- place.formatted_address +
- "
Place ID: " +
- placeid +
- "
" +
- "
Feature type: " +
- types[0] +
- "
";
+ // Show information if boundary was clicked (mode 0).
+ if (mode == 0) {
+ contentDiv.innerHTML = `
${place.formatted_address}
+
Place ID: ${placeid}
+
Feature type: ${types[0]}
`;
+ } else {
+ // Display no information if autocomplete was used (mode 1).
+ contentDiv.innerHTML = `
Click a boundary to see its place ID and feature type.`;
+ }
}
});
// Call the global styling function.
applyStyle(placeid);
}
-/** GENERATED FILE, DO NOT EDIT */
+/** GENERATED CONTENT, DO NOT EDIT BELOW THIS LINE */
const countries = [
{
name: "Afghanistan",
diff --git a/dist/samples/dds-region-viewer/playground/index.html b/dist/samples/dds-region-viewer/playground/index.html
index 5198e3c7e8..3aec6b5d95 100644
--- a/dist/samples/dds-region-viewer/playground/index.html
+++ b/dist/samples/dds-region-viewer/playground/index.html
@@ -45,6 +45,7 @@
+
+
+
+
-
-
-
-
+
+
+
diff --git a/dist/samples/dds-region-viewer/playground/index.ts b/dist/samples/dds-region-viewer/playground/index.ts
index 53a98c68a7..be9ac25c5f 100644
--- a/dist/samples/dds-region-viewer/playground/index.ts
+++ b/dist/samples/dds-region-viewer/playground/index.ts
@@ -14,6 +14,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;
@@ -44,6 +45,9 @@ 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",
@@ -78,6 +82,18 @@ function initMap() {
);
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[];
@@ -106,7 +122,7 @@ function initMap() {
break;
}
- showSelectedPolygon(place.place_id);
+ showSelectedPolygon(place.place_id, 1);
});
// Add all the feature layers.
@@ -147,7 +163,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.
@@ -162,6 +178,7 @@ function featureTypeChanged() {
};
revertStyles();
+ setFeatureType();
selectedPlaceId = "";
contentDiv.innerHTML = "";
@@ -169,27 +186,44 @@ function featureTypeChanged() {
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) {
@@ -230,21 +264,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;
@@ -269,10 +309,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.
@@ -291,19 +349,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.
@@ -317,7 +363,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().
@@ -330,13 +376,14 @@ function showSelectedCountry(countryName) {
placesService.findPlaceFromQuery(request, (place, status) => {
if (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.
@@ -363,22 +410,23 @@ function showSelectedPolygon(placeid) {
const types = place.types as string[];
// Create HTML for place information.
- contentDiv.innerHTML =
- '
' +
- place.formatted_address +
- "
Place ID: " +
- placeid +
- "
" +
- "
Feature type: " +
- types[0] +
- "
";
+ // Show information if boundary was clicked (mode 0).
+ if (mode == 0) {
+ contentDiv.innerHTML = `
${place.formatted_address}
+
Place ID: ${placeid}
+
Feature type: ${types[0]}
`;
+ } else {
+ // Display no information if autocomplete was used (mode 1).
+ contentDiv.innerHTML = `
Click a boundary to see its place ID and feature type.`;
+ }
}
});
// Call the global styling function.
applyStyle(placeid);
}
-/** GENERATED FILE, DO NOT EDIT */
+
+/** GENERATED CONTENT, DO NOT EDIT BELOW THIS LINE */
const countries = [
{
diff --git a/dist/samples/dds-region-viewer/playground/style.css b/dist/samples/dds-region-viewer/playground/style.css
index 2ac44a6968..2e049e61fd 100644
--- a/dist/samples/dds-region-viewer/playground/style.css
+++ b/dist/samples/dds-region-viewer/playground/style.css
@@ -65,3 +65,14 @@ body {
font-size: 14px;
}
+#color-controls {
+ display: flex;
+ align-items: center;
+}
+
+label {
+ display: flex;
+ align-items: center;
+ font-size: 14px;
+}
+