esri-map-view
Version:
Display an Esri map view as a web component.
229 lines (228 loc) • 10.2 kB
TypeScript
/**
* <esri-map-view> 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;
}