esri-map-view/dist/components/esri-map-view2.js

Display an Esri map view as a web component.

import{proxyCustomElement as t,HTMLElement as s,createEvent as i,getAssetPath as e,h,transformTag as a}from"@stencil/core/internal/client";import{p as n,e as r,i as o,a as l,b as c,s as p,c as m,d as w}from"./utils.js";const d=t(class extends s{watchAPIKeyHandler(t,s){t!=s&&(this.esriConfig.apiKey=t)}watchBasemapHandler(t,s){const i=this;i.viewChangePending||i.mapChangePending?i.mapLoadError.emit(new Error("Cannot change the map while a viewpoint change is in process.")):t!=s&&(i.mapChangePending=!0,i.updateEsriMap(t).then((()=>{i.basemap=t,i.mapChangePending=!1,i.mapLoaded.emit("loaded"),i.layers&&i.addLayers(i.layers)})).catch((t=>{i.mapChangePending=!1,i.mapLoadError.emit(t.toString())})))}watchWebmapHandler(t,s){this.viewChangePending||this.mapChangePending?this.mapLoadError.emit(new Error("Cannot change the map while a viewpoint change is in process.")):t!=s&&(this.mapChangePending=!0,this.webmap=t,this.createEsriMap().then((()=>{this.esriMapView&&this.esriWebMap&&(this.esriMapView.map=this.esriWebMap),this.mapChangePending=!1,this.mapLoaded.emit("loaded"),this.layers&&this.addLayers(this.layers)})).catch((t=>{console.log(`web map change, Map loading failed ${t.toString()}`),this.mapChangePending=!1,this.mapLoadError.emit(t.toString())})))}watchViewPointHandler(t,s){const i=this;if(i.viewChangePending||i.mapChangePending)i.mapLoadError.emit(new Error("Cannot change the viewpoint while a map change is in process."));else if(t!=s)if(i.parsedViewpoint=!1,i.viewpoint=t,i.verifyViewpoint()){if(null==i.esriMapView)return;i.viewChangePending=!0,i.esriMapView.goTo({center:[i.longitude,i.latitude],zoom:i.levelOfDetail}).then((function(){i.viewChangePending=!1,i.addGraphics()})).catch((function(){i.viewChangePending=!1,i.viewpoint=s,i.verifyViewpoint()}))}else i.viewpoint=s,i.verifyViewpoint()}watchLayersHandler(t,s){t!=s&&(this.layers=t,this.addLayers(t))}watchSearchHandler(t,s){t!=s&&(this.removeSearchWidget(),this.search=t,this.verifySearch()&&this.createSearchWidget(this.search))}watchSymbolHandler(t,s){t!=s&&(this.symbol=t,this.addGraphics())}watchSymbolOffsetHandler(t,s){t!=s&&(this.symboloffset=t,this.parsedOffset=n(t),this.addGraphics())}watchPopupTitleHandler(t,s){t!=s&&(this.popuptitle=t,this.addGraphics())}watchPopupInfoHandler(t,s){t!=s&&(this.popupinfo=t,this.addGraphics())}watchUIHandler(t,s){t!=s&&this.constrainUI(t,!1)}watchMinMaxZoomHandler(t,s){t!=s&&(this.minmaxzoom=t,this.verifyMinMaxZoom()||(this.minmaxzoom=s,this.verifyMinMaxZoom()))}constructor(t){super(),!1!==t&&this.__registerHost(),this.mapLoaded=i(this,"mapLoaded",7),this.mapLoadError=i(this,"mapLoadError",7),this.ArcGISJavaScriptVersion="4.34",this.assetPath=e("./assets/"),this.mapViewWidgets=["zoom"],this.esriMap=null,this.esriWebMap=null,this.esriMapView=null,this.symbolGraphic=null,this.searchWidget=null,this.longitude=0,this.latitude=0,this.levelOfDetail=2,this.minZoom=0,this.maxZoom=24,this.parsedViewpoint=!1,this.defaultBasemap="osm-streets",this.viewChangePending=!1,this.mapChangePending=!1,this.esriMapOptions={url:`https://js.arcgis.com/${this.ArcGISJavaScriptVersion}/`,css:!0},this.apikey="YOUR_API_KEY",this.basemap="osm-streets",this.webmap="",this.viewpoint="",this.layers="",this.search="",this.symbol="",this.symboloffset="",this.popuptitle="",this.popupinfo="",this.ui="",this.minmaxzoom="",this.verifyProps(),r.setDefaultOptions(this.esriMapOptions),r.loadCss(`${this.esriMapOptions.url}/esri/css/main.css`),this.setAuthentication().then((()=>{this.createEsriMap().then((()=>{this.mapLoaded.emit("map-created")})).catch((t=>{console.log(`Map loading failed ${t.toString()}`),this.mapLoadError.emit(t.toString())}))})).catch((t=>{console.log(`Authentication failed ${t.toString()}`),this.mapLoadError.emit(t.toString())}))}componentDidLoad(){this.createEsriMapView().then((()=>{this.mapLoaded.emit("view-created"),this.symbol&&this.addGraphics()}))}setAuthentication(){return new Promise(((t,s)=>{r.loadModules(["esri/config"]).then((([s])=>{this.esriConfig=s,this.apikey?this.esriConfig.apiKey=this.apikey:this.esriConfig.request.useIdentity=!0,t()})).catch((t=>{s(t)}))}))}async createEsriMap(){return new Promise(((t,s)=>{o(this.webmap)?this.updateEsriWebMap(this.webmap).then((()=>{t()})).catch((t=>{s(t)})):this.updateEsriMap(this.basemap).then((()=>{t()})).catch((t=>{s(t)}))}))}async updateEsriWebMap(t){return new Promise(((s,i)=>{r.loadModules(["esri/WebMap"]).then((([i])=>{this.esriWebMap=new i({portalItem:{id:t}}),s()})).catch((t=>{i(t)}))}))}async updateEsriMap(t){return new Promise(((s,i)=>{o(t)?r.loadModules(["esri/Map","esri/Basemap","esri/layers/VectorTileLayer"]).then((([i,e,h])=>{const a=new e({baseLayers:[new h({portalItem:{id:t}})]});this.esriMap?this.esriMap.basemap=a:this.esriMap=new i({basemap:a}),s()})).catch((t=>{i(t)})):r.loadModules(["esri/Map","esri/Basemap"]).then((([i,e])=>{const h=new e({style:{id:t,language:"en"}});this.esriMap?this.esriMap.basemap=h:this.esriMap=new i({basemap:h}),s()})).catch((t=>{i(t)}))}))}async createEsriMapView(){const[t]=await r.loadModules(["esri/views/MapView"]),s=this.hostElement.querySelector("div");this.webmap&&!this.parsedViewpoint?null==this.esriMapView?this.esriMapView=new t({container:s,map:this.esriWebMap}):this.esriMapView.map=this.esriWebMap:null==this.esriMapView?this.esriMapView=new t({container:s,zoom:this.levelOfDetail,center:[this.longitude,this.latitude],map:this.esriMap||this.esriWebMap}):this.esriMapView.map=this.esriMap||this.esriWebMap,this.esriMapView&&(this.constrainUI(this.ui,!0),this.layers&&this.addLayers(this.layers),l(this.search)&&"off"!=this.search&&this.createSearchWidget(this.search))}addLayers(t){const s=t.split(",");for(let t=s.length;t>=0;t--){const i=s[t];o(i)||c(i)||s.splice(t,1)}s.length>0&&r.loadModules(["esri/layers/FeatureLayer","esri/layers/Layer","esri/portal/PortalItem"]).then((([t,i,e])=>{this.esriMap.layers.removeAll(),s.forEach((s=>{if(o(s)){const t=new e({id:s});i.fromPortalItem({portalItem:t}).then((t=>{this.esriMap.layers.add(t)})).catch((t=>{console.log(`Layer ${s} loading failed ${t.toString()}`)}))}else if(c(s)){const i=new t({url:s});i&&this.esriMap.layers.add(i)}}))}))}async createSearchWidget(t){const[s]=await r.loadModules(["esri/widgets/Search"]),i=new s({view:this.esriMapView});this.esriMapView.ui.add(i,{position:t,index:0}),this.searchWidget=i}async removeSearchWidget(){this.searchWidget&&(this.esriMapView.ui.remove(this.searchWidget),this.searchWidget=null)}async addGraphics(){this.esriMapView&&(0===this.symbol.indexOf("pin:")?this.showPin(this.symbol.substring(4)):this.symbol.length>0&&this.showSymbol(this.symbol))}updateGraphicSymbol(t){null!=this.symbolGraphic&&this.esriMapView.graphics.remove(this.symbolGraphic),this.symbolGraphic=t,this.esriMapView.graphics.add(t)}async showSymbol(t){const s=this.parsedOffset.x.toString(),i=this.parsedOffset.y.toString();let e;e=null==t.match(/https?:\/\//)?this.assetPath+t+".png":t;const[h,a,n]=await r.loadModules(["esri/symbols/PictureMarkerSymbol","esri/Graphic","esri/geometry/Point"]),o=new a({geometry:new n({longitude:this.longitude,latitude:this.latitude}),symbol:new h({url:e,width:"64px",height:"64px",xoffset:s,yoffset:i}),popupTemplate:{title:this.popuptitle,content:this.popupinfo}});this.updateGraphicSymbol(o)}async showPin(t){const[s,i,e]=await r.loadModules(["esri/symbols/TextSymbol","esri/Graphic","esri/geometry/Point"],this.esriMapOptions);let h=this.parsedOffset.x,a=this.parsedOffset.y;const n=new i({geometry:new e({longitude:this.longitude,latitude:this.latitude}),symbol:new s({color:t,haloColor:"black",haloSize:"1px",text:"",font:{size:30,family:"CalciteWebCoreIcons"},xoffset:h,yoffset:a}),popupTemplate:{title:this.popuptitle,content:this.popupinfo}});this.updateGraphicSymbol(n)}render(){return h("div",{key:"956ea553424f9064fec8976fc2e3b63b74b45090",class:"esri-map-view"})}constrainUI(t,s){let i;return p(t)?s||(this.esriMapView.ui.add(this.mapViewWidgets),this.esriMapView.constraints={},i=!1):(this.esriMapView.ui.remove(this.mapViewWidgets),this.esriMapView.constraints={minZoom:this.minZoom,maxZoom:this.maxZoom,geometry:this.esriMapView.extent},i=!0),i}verifyMapProps(){return!this.webmap||o(this.webmap)&&c(this.webmap)||(this.webmap=null),this.basemap||this.webmap||(this.basemap=this.defaultBasemap),!0}verifyViewpoint(){let t=!1;if(this.viewpoint||this.webmap||(this.viewpoint="0,0,2"),this.viewpoint){const s=m(this.viewpoint);this.longitude=s.longitude,this.latitude=s.latitude,this.levelOfDetail=s.levelOfDetail,this.parsedViewpoint=!0,t=!0}return t}verifySearch(){let t=!0;return this.search=this.search.toLocaleLowerCase(),this.search&&!l(this.search)?(this.search=null,t=!1):"off"==this.search&&(this.search=null),t}verifyMinMaxZoom(){const t=w(this.minmaxzoom,0,24);return this.minZoom=t.min,this.maxZoom=t.max,!0}verifyProps(){let t=!0;return t=this.verifyMapProps(),t=this.verifyViewpoint(),t=this.verifySearch(),t=this.verifyMinMaxZoom(),this.parsedOffset=n(this.symboloffset),t}static get assetsDirs(){return["assets"]}get hostElement(){return this}static get watchers(){return{apikey:[{watchAPIKeyHandler:0}],basemap:[{watchBasemapHandler:0}],webmap:[{watchWebmapHandler:0}],viewpoint:[{watchViewPointHandler:0}],layers:[{watchLayersHandler:0}],search:[{watchSearchHandler:0}],symbol:[{watchSymbolHandler:0}],symboloffset:[{watchSymbolOffsetHandler:0}],popuptitle:[{watchPopupTitleHandler:0}],popupinfo:[{watchPopupInfoHandler:0}],ui:[{watchUIHandler:0}],minmaxzoom:[{watchMinMaxZoomHandler:0}]}}static get style(){return".esri-map-view{height:100%;width:100%;padding:0;margin:0}"}},[0,"esri-map-view",{apikey:[1537],basemap:[1537],webmap:[1537],viewpoint:[1537],layers:[1537],search:[1537],symbol:[1537],symboloffset:[1537],popuptitle:[1537],popupinfo:[1537],ui:[1537],minmaxzoom:[1537]},void 0,{apikey:[{watchAPIKeyHandler:0}],basemap:[{watchBasemapHandler:0}],webmap:[{watchWebmapHandler:0}],viewpoint:[{watchViewPointHandler:0}],layers:[{watchLayersHandler:0}],search:[{watchSearchHandler:0}],symbol:[{watchSymbolHandler:0}],symboloffset:[{watchSymbolOffsetHandler:0}],popuptitle:[{watchPopupTitleHandler:0}],popupinfo:[{watchPopupInfoHandler:0}],ui:[{watchUIHandler:0}],minmaxzoom:[{watchMinMaxZoomHandler:0}]}]);function u(){"undefined"!=typeof customElements&&["esri-map-view"].forEach((t=>{"esri-map-view"===t&&(customElements.get(a(t))||customElements.define(a(t),d))}))}export{d as E,u as d}