+ { this._basemapElement = el }} />
+
+ );
+ }
+
+ /**
+ * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
+ */
+ async componentDidLoad(): Promise {
+ if (this.mapView) {
+ await this.mapViewWatchHandler();
+ }
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Functions (protected)
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Load esri javascript api modules
+ *
+ * @returns Promise resolving when function is done
+ *
+ * @protected
+ */
+ protected async _initModules(): Promise {
+ const [BasemapGallery, PortalBasemapsSource] = await loadModules([
+ "esri/widgets/BasemapGallery",
+ "esri/widgets/BasemapGallery/support/PortalBasemapsSource"
+ ]);
+ this.BasemapGallery = BasemapGallery;
+ this.PortalBasemapsSource = PortalBasemapsSource;
+ }
+
+ /**
+ * Initialize the basemap gallery or reset the current view if it already exists
+ *
+ * @returns void
+ *
+ * @protected
+ */
+ protected async _initBaseMapGallery(
+ view: __esri.MapView
+ ): Promise {
+ if (this.BasemapGallery) {
+ if (this.basemapWidget) {
+ this.basemapWidget.destroy();
+ }
+
+ const source = new this.PortalBasemapsSource({
+ query: this.basemapConfig?.basemapGroupId ? `id:${this.basemapConfig.basemapGroupId}` : null,
+ filterFunction: this.basemapConfig ? (basemap: __esri.Basemap) => {
+ return !this.basemapConfig.basemapIdsToFilter.includes(basemap.portalItem.id);
+ } : () => true
+ });
+ await source.refresh();
+
+ this.basemapWidget = new this.BasemapGallery({
+ container: this._basemapElement,
+ view,
+ source
+ });
+ }
+ }
+}
diff --git a/src/components/basemap-gallery/readme.md b/src/components/basemap-gallery/readme.md
new file mode 100644
index 000000000..4d408b735
--- /dev/null
+++ b/src/components/basemap-gallery/readme.md
@@ -0,0 +1,32 @@
+# basemap-gallery
+
+
+
+
+
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| --------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ----------- |
+| `basemapConfig` | -- | IBasemapConfig: List of any basemaps to filter out from the basemap widget | `IBasemapConfig` | `undefined` |
+| `basemapWidget` | -- | esri/widgets/BasemapGallery: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-BasemapGallery.html BasemapGallery instance | `BasemapGallery` | `undefined` |
+| `mapView` | -- | esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html | `MapView` | `undefined` |
+
+
+## Dependencies
+
+### Used by
+
+ - [map-tools](../map-tools)
+
+### Graph
+```mermaid
+graph TD;
+ map-tools --> basemap-gallery
+ style basemap-gallery fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/buffer-tools/buffer-tools.tsx b/src/components/buffer-tools/buffer-tools.tsx
index 7dc4d696d..6ae16fe7f 100644
--- a/src/components/buffer-tools/buffer-tools.tsx
+++ b/src/components/buffer-tools/buffer-tools.tsx
@@ -14,7 +14,7 @@
* limitations under the License.
*/
-import { Component, Element, Event, EventEmitter, Host, h, Prop, State, VNode, Watch } from "@stencil/core";
+import { Component, Element, Event, EventEmitter, Host, h, Method, Prop, State, VNode, Watch } from "@stencil/core";
import { loadModules } from "../../utils/loadModules";
import BufferTools_T9n from "../../assets/t9n/buffer-tools/resources.json";
import { getLocaleComponentStrings } from "../../utils/locale";
@@ -114,6 +114,11 @@ export class BufferTools {
*/
protected _unitElement: HTMLCalciteSelectElement;
+ /**
+ * Key Value pair: Lookup hash for translated units
+ */
+ protected _units: {[key: string]: string};
+
//--------------------------------------------------------------------------
//
// Watch handlers
@@ -141,6 +146,21 @@ export class BufferTools {
//
//--------------------------------------------------------------------------
+ /**
+ * Get the translated unit for display
+ *
+ * @returns Promise resolving with the translated unit
+ */
+ @Method()
+ async getTranslatedUnit(
+ unit: string
+ ): Promise {
+ if (!this._units) {
+ await this._defineTranslations();
+ }
+ return this._units[unit];
+ }
+
//--------------------------------------------------------------------------
//
// Events (public)
@@ -174,7 +194,7 @@ export class BufferTools {
* @returns Promise when complete
*/
async componentWillLoad(): Promise {
- await this._getTranslations();
+ await this._defineTranslations();
await this._initModules();
}
@@ -195,6 +215,18 @@ export class BufferTools {
//
//--------------------------------------------------------------------------
+ /**
+ * Loads translations and defines unit names using those translations.
+ *
+ * @returns Promise resolving when function is done
+ *
+ * @protected
+ */
+ protected async _defineTranslations(): Promise {
+ await this._getTranslations();
+ this._initTranslatedUnits();
+ }
+
/**
* Load esri javascript api modules
*
@@ -212,21 +244,29 @@ export class BufferTools {
}
/**
- * Gets the nodes for each of the possible distance units
- *
- * @returns An array of option nodes
+ * Init the lookup hash for translated units
*
* @protected
*/
- protected _getUnits(): VNode[] {
- const units = {
+ protected _initTranslatedUnits(): void {
+ this._units = {
"feet": this._translations.feet,
"meters": this._translations.meters,
"miles": this._translations.miles,
"kilometers": this._translations.kilometers
};
- return Object.keys(units).map(u => {
- return ();
+ }
+
+ /**
+ * Gets the nodes for each of the possible distance units
+ *
+ * @returns An array of option nodes
+ *
+ * @protected
+ */
+ protected _getUnits(): VNode[] {
+ return Object.keys(this._units).map(u => {
+ return ();
});
}
@@ -283,14 +323,21 @@ export class BufferTools {
}
this._bufferTimeout = setTimeout(() => {
- // needs to be wgs 84 or Web Mercator
if (this.geometries?.length > 0 && this.unit && this.distance > 0) {
- const buffer = this._geometryEngine.geodesicBuffer(
- this.geometries,
- this.distance,
- this.unit,
- this.unionResults
- );
+ const geom = this.geometries[0];
+ const sr = geom.spatialReference;
+ const buffer = (sr.isWGS84 || sr.isWebMercator) ?
+ this._geometryEngine.geodesicBuffer(
+ this.geometries,
+ this.distance,
+ this.unit,
+ this.unionResults
+ ) : this._geometryEngine.buffer(
+ this.geometries,
+ this.distance,
+ this.unit,
+ this.unionResults
+ );
this.bufferComplete.emit(buffer);
}
}, 400);
diff --git a/src/components/buffer-tools/readme.md b/src/components/buffer-tools/readme.md
index f3219a5db..2e9bdca25 100644
--- a/src/components/buffer-tools/readme.md
+++ b/src/components/buffer-tools/readme.md
@@ -29,6 +29,19 @@
| `unitChanged` | Emitted on demand when the unit changes | `CustomEvent` |
+## Methods
+
+### `getTranslatedUnit(unit: string) => Promise`
+
+Get the translated unit for display
+
+#### Returns
+
+Type: `Promise