/** * a custom web component for rendering a 2D map on a web page. */ import { EventEmitter } from "../../stencil-public-runtime"; import { offsetProps } from "../../utils/utils"; import esriConfig from "@arcgis/core/config.js"; export declare class EsriMapView { hostElement: HTMLElement; /** * The `mapLoaded` event fires when the basemap or web map has finished loading. */ mapLoaded: EventEmitter; /** * The `mapLoadError` event fires if the basemap or web map did not load due to some type of error. Check the console for error messages. */ mapLoadError: EventEmitter; private ArcGISJavaScriptVersion; private assetPath; private mapViewWidgets; /** * Properties to hold the map, map view, and initial viewpoint */ esriConfig: esriConfig; esriMap: __esri.Map; esriWebMap: __esri.WebMap; esriMapView: __esri.MapView; symbolGraphic: __esri.Graphic; searchWidget: any; longitude: number; latitude: number; levelOfDetail: number; minZoom: number; maxZoom: number; parsedViewpoint: boolean; parsedOffset: offsetProps; defaultBasemap: string; viewChangePending: Boolean; mapChangePending: Boolean; /** * Options for esri-loader */ esriMapOptions: { url: string; css: boolean; }; /** * Set your API key. Learn more about [API keys](https://developers.arcgis.com/documentation/mapping-apis-and-services/security/api-keys/). */ apikey: string; watchAPIKeyHandler(newValue: string, oldValue: string): void; /** * Indicate a basemap id to use for the map. Select one of the basemap style options from the enumeration https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html#basemap, * or the item ID of a custom basemap style. This property will be ignored by `webmap` if that attribute is provided. If neither `webmap` nor `basemap` are set, then * a default basemap is assigned. Options for `basemap` are defined in the [ArcGIS API for JavaScript](https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html#basemap). */ basemap: string; watchBasemapHandler(newValue: string, oldValue: string): void; /** * Indicate a web map id to use for the map. If neither `webmap` nor `basemap` * are set, then a default basemap is assigned. */ webmap: string; watchWebmapHandler(newValue: string, oldValue: string): void; /** * Indicate an initial viewpoint to focus the map. This is a string of 3 comma-separated numbers * expected: longitude (x), latitude (y), and levelOfDetail (LOD). Example: "22.7783,34.1234,9". * You should set this if you set a `basemap`. You do not need to set this if you set `webmap` as * the web map's initial viewpoint is used. If you do set `viewpoint` and `webmap` then this * setting will override the initial viewpoint of the web map. */ viewpoint: string; watchViewPointHandler(newValue: string, oldValue: string): void; /** * Specify 0 or more layers to add on top of the basemap. Each layer is a string that is either a URL * to the feature service, or the item ID of the feature service. Multiple layers are separated * with a comma. */ layers: string; watchLayersHandler(newValue: string, oldValue: string): void; /** * Include a search widget by indicating where on the map view it should appear. The valid values for this * attribute are `top-left`, `top-right`, `bottom-left`, `bottom-right`. If this attribute is empty/missing * or an invalid value then a search widget will not show. */ search: string; watchSearchHandler(newValue: string, oldValue: string): void; /** * Indicate a symbol to use to mark the location of the initial viewpoint. This is the fully qualified URL * to a 64x64 px PNG image. CORS is respected when accessing the image. You can also specify `green-pin` to * use a green map pin as the symbol. You can also specify `pin:{color}` to use a text symbol marker * and the color value. Use a 6-digit HTML color value or the standard HTML color name. */ symbol: string; watchSymbolHandler(newValue: string, oldValue: string): void; /** * Some symbols will require an x/y offset so that the registration point of the * symbol is exactly on the map point. Here you can specify an x,y offset, in pixels, to adjust * the symbol. Use a comma separated coordinate pair. */ symboloffset: string; watchSymbolOffsetHandler(newValue: string, oldValue: string): void; /** * If `symbol` is set, tapping the symbol will show a pop-up. This is the `title` for that pop-up. */ popuptitle: string; watchPopupTitleHandler(newValue: string, oldValue: string): void; /** * If `symbol` is set, tapping the symbol will show a pop-up. This is the `content` for that pop-up. */ popupinfo: string; watchPopupInfoHandler(newValue: string, oldValue: string): void; /** * You can show or hide the map UI (Pan/zoom controls) with the `ui` attribute. Setting `ui=hide` or `ui=off` to hide it, * set `ui=show` or `ui=on` to show it. The default value is to show the ui. */ ui: string; watchUIHandler(newValue: string, oldValue: string): void; /** * Set the minimum and maximum zoom levels allowed by either the UI zoom controls or * the mouse/touch interaction. This is a comma separated string of 2 numbers, the first is * the minimum and the second is the maximum. For example, 14,16 will constrain the zoom to * a minimum of 14 and a maximum of 16. If only one number is provided (or valid) then * both min and max are set to that value. */ minmaxzoom: string; watchMinMaxZoomHandler(newValue: string, oldValue: string): void; constructor(); /** * The component is loaded and has rendered. Attach the MapView to the HTML element. * Only called once per component life cycle. */ componentDidLoad(): void; /** * Set the configuration object authentication based on the user provided apikey. If no apikey is provided * then a login pop up will appear if authentication is required. * The esri configuration object https://developers.arcgis.com/javascript/latest/api-reference/esri-config.html */ private setAuthentication; /** * Create a map object. Review the element attributes to determine which type of map should be created: * either a standard basemap, a custom vector basemap, or a web map. */ private createEsriMap; /** * Create a web map. */ private updateEsriWebMap; /** * Create a map object. Review the element attributes to determine which type of map should be created. * Given the attributes set on the element, creates either a standard basemap, a custom vector basemap, * or a web scene. */ private updateEsriMap; /** * Creates the map view used in the component. Assumes the map was created before getting here. */ private createEsriMapView; /** * Add layers to the map. Each layer can be specified by its item ID or its service URL. * @param {string} layers A list of 1 or more layers where multiple layers are separated with commas. */ private addLayers; /** * Create a search widget and add it to the view at the given UI position. * @param {string} searchWidgetPosition The UI position where to place the search widget in the view. */ private createSearchWidget; /** * Remove the search widget from the map view. */ private removeSearchWidget; /** * Add graphics to the graphics layer depending on which properties the user requested. */ private addGraphics; /** * Add a graphic symbol to the map view graphics layer, and remove a prior graphic. * @param symbolGraphic A Graphic to add to the graphics layer of the map view. */ private updateGraphicSymbol; /** * Show a symbol on the map at the initial viewpoint location. * @param {string} symbol Either an asset id of a local symbol asset or a fully qualified URL to a PNG to use as the symbol. */ private showSymbol; /** * Show a pin on the map at the initial viewpoint location. * @param {string} pinColor The color value of the pin symbol. */ private showPin; render(): any; /** * Constrain the UI to restrict the user from panning or zooming the map. If the UI is hidden then the * map view is constrained to the current extent. If the UI controls are showing then the map view is * constrained to the min/max zoom that was configured. * @param uiSetting Show or hide the UI controls (pan/zoom) * @param isInitializing True if we are in the initialization stage of the component, false if the component was previously initialized. * @returns {boolean} True if the UI is constrained. */ private constrainUI; /** * Validate the map properties to verify if we can render a map. Either a basemap or a webmap * must be specified. If neither are set then a default basemap is used. * @returns {boolean} True if we think we can render a map. */ private verifyMapProps; /** * Verify the viewpoint attribute and break it down to its individual parts. * @returns {boolean} True if a viewpoint is parsed. */ private verifyViewpoint; /** * Verify the search widget position is valid. * @returns {boolean} True if a valid search widget position is specified. */ private verifySearch; /** * Verify the min and max zoom values are set properly. * @returns {boolean} True if min/max zoom is set. */ private verifyMinMaxZoom; /** * Verify and validate any attributes set on the component to make sure * we are in a valid starting state we can render. * @returns {boolean} True if all props are acceptable and we can render the map. */ private verifyProps; }