@esri/solutions-components 0.7.25 → 0.7.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/calcite-alert_4.cjs.entry.js +2 -2
- package/dist/cjs/calcite-flow_4.cjs.entry.js +43 -12
- package/dist/cjs/card-manager_3.cjs.entry.js +3 -1
- package/dist/cjs/crowdsource-reporter.cjs.entry.js +11 -22
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{popupUtils-a73902a6.js → popupUtils-7755782a.js} +9 -12
- package/dist/cjs/solutions-components.cjs.js +1 -1
- package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.css +0 -21
- package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.js +27 -21
- package/dist/collection/components/feature-list/feature-list.js +43 -10
- package/dist/collection/components/info-card/info-card.js +1 -1
- package/dist/collection/components/layer-list/layer-list.js +2 -1
- package/dist/collection/components/layer-table/layer-table.js +3 -1
- package/dist/collection/demos/crowdsource-reporter.html +92 -58
- package/dist/collection/demos/feature-list.html +65 -17
- package/dist/collection/demos/layer-list.html +43 -3
- package/dist/collection/utils/interfaces.ts +1 -1
- package/dist/collection/utils/popupUtils.js +9 -12
- package/dist/collection/utils/popupUtils.ts +30 -32
- package/dist/components/crowdsource-reporter.js +12 -23
- package/dist/components/feature-list2.js +42 -10
- package/dist/components/info-card2.js +1 -1
- package/dist/components/layer-list2.js +2 -1
- package/dist/components/layer-table2.js +3 -1
- package/dist/components/popupUtils.js +9 -12
- package/dist/esm/calcite-alert_4.entry.js +2 -2
- package/dist/esm/calcite-flow_4.entry.js +43 -12
- package/dist/esm/card-manager_3.entry.js +3 -1
- package/dist/esm/crowdsource-reporter.entry.js +12 -23
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{popupUtils-a593bd78.js → popupUtils-d75edf93.js} +9 -12
- package/dist/esm/solutions-components.js +1 -1
- package/dist/solutions-components/demos/crowdsource-reporter.html +92 -58
- package/dist/solutions-components/demos/feature-list.html +65 -17
- package/dist/solutions-components/demos/layer-list.html +43 -3
- package/dist/solutions-components/p-515a319e.js +21 -0
- package/dist/solutions-components/p-6a452a84.entry.js +17 -0
- package/dist/solutions-components/p-8756eebb.entry.js +6 -0
- package/dist/solutions-components/{p-29f661f5.entry.js → p-934cbe40.entry.js} +2 -2
- package/dist/solutions-components/{p-5af99fd8.entry.js → p-9549b5b1.entry.js} +1 -1
- package/dist/solutions-components/solutions-components.esm.js +1 -1
- package/dist/solutions-components/utils/interfaces.ts +1 -1
- package/dist/solutions-components/utils/popupUtils.ts +30 -32
- package/dist/types/components/crowdsource-reporter/crowdsource-reporter.d.ts +5 -1
- package/dist/types/components/feature-list/feature-list.d.ts +8 -0
- package/dist/types/components.d.ts +19 -0
- package/dist/types/preact.d.ts +3 -1
- package/dist/types/utils/interfaces.d.ts +1 -1
- package/dist/types/utils/popupUtils.d.ts +3 -2
- package/package.json +1 -1
- package/dist/solutions-components/p-0b619197.entry.js +0 -17
- package/dist/solutions-components/p-db868283.js +0 -21
- package/dist/solutions-components/p-e88a64be.entry.js +0 -6
@@ -44,27 +44,6 @@
|
|
44
44
|
border: 1px solid var(--calcite-color-border-3);
|
45
45
|
}
|
46
46
|
|
47
|
-
.map-container {
|
48
|
-
position: absolute;
|
49
|
-
width: calc(100% - 390px);
|
50
|
-
left: 390px;
|
51
|
-
}
|
52
|
-
|
53
|
-
.side-panel {
|
54
|
-
padding: 2px;
|
55
|
-
width: 390px;
|
56
|
-
height: 100%;
|
57
|
-
position: absolute;
|
58
|
-
top: 0;
|
59
|
-
left: 0;
|
60
|
-
z-index: 60;
|
61
|
-
}
|
62
|
-
|
63
47
|
.error-msg{
|
64
48
|
padding: 10px;
|
65
49
|
}
|
66
|
-
|
67
|
-
.collapsed-side-panel {
|
68
|
-
top: calc(100% - 55px);
|
69
|
-
height: 54px;
|
70
|
-
}
|
@@ -58,9 +58,7 @@ export class CrowdsourceReporter {
|
|
58
58
|
* Called each time the mapView prop is changed.
|
59
59
|
*/
|
60
60
|
async isMobileWatchHandler() {
|
61
|
-
|
62
|
-
this._sidePanelCollapsed = false;
|
63
|
-
}
|
61
|
+
this._sidePanelCollapsed = false;
|
64
62
|
}
|
65
63
|
/**
|
66
64
|
* Called each time the mapView prop is changed.
|
@@ -72,16 +70,6 @@ export class CrowdsourceReporter {
|
|
72
70
|
}
|
73
71
|
//--------------------------------------------------------------------------
|
74
72
|
//
|
75
|
-
// Methods (public)
|
76
|
-
//
|
77
|
-
//--------------------------------------------------------------------------
|
78
|
-
//--------------------------------------------------------------------------
|
79
|
-
//
|
80
|
-
// Events (public)
|
81
|
-
//
|
82
|
-
//--------------------------------------------------------------------------
|
83
|
-
//--------------------------------------------------------------------------
|
84
|
-
//
|
85
73
|
// Functions (lifecycle)
|
86
74
|
//
|
87
75
|
//--------------------------------------------------------------------------
|
@@ -123,13 +111,8 @@ export class CrowdsourceReporter {
|
|
123
111
|
break;
|
124
112
|
}
|
125
113
|
});
|
126
|
-
let sidePanelClass = "side-panel";
|
127
|
-
//in case of mobile handle for collapsed styles of the panel
|
128
|
-
if (this.isMobile && this._sidePanelCollapsed) {
|
129
|
-
sidePanelClass += " collapsed-side-panel";
|
130
|
-
}
|
131
114
|
const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
|
132
|
-
return (h("calcite-panel", { class:
|
115
|
+
return (h("calcite-panel", { class: "width-full " + themeClass }, this.mapView
|
133
116
|
? h("calcite-flow", null, (renderLists === null || renderLists === void 0 ? void 0 : renderLists.length) > 0 && renderLists)
|
134
117
|
: h("calcite-loader", { scale: "m" })));
|
135
118
|
}
|
@@ -139,7 +122,10 @@ export class CrowdsourceReporter {
|
|
139
122
|
* @protected
|
140
123
|
*/
|
141
124
|
getLayerListFlowItem() {
|
142
|
-
return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, this._hasValidLayers &&
|
125
|
+
return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, this._hasValidLayers &&
|
126
|
+
h("calcite-action", { icon: "sort-ascending-arrow", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.sort, "text-enabled": this.isMobile }), this._hasValidLayers &&
|
127
|
+
h("calcite-action", { icon: "filter", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.filter, "text-enabled": this.isMobile }), this.isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports &&
|
128
|
+
h("calcite-button", { appearance: "secondary", slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { class: "height-full", layers: this.layers, mapView: this.mapView, noLayerErrorMsg: this._translations.noLayerToDisplayErrorMsg, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this) }))));
|
143
129
|
}
|
144
130
|
/**
|
145
131
|
* When layer list is loaded, we will receive the list of layers, if its means we don't have any valid layer to be listed
|
@@ -174,6 +160,7 @@ export class CrowdsourceReporter {
|
|
174
160
|
*/
|
175
161
|
toggleSidePanel() {
|
176
162
|
this._sidePanelCollapsed = !this._sidePanelCollapsed;
|
163
|
+
this.togglePanel.emit(this._sidePanelCollapsed);
|
177
164
|
}
|
178
165
|
/**
|
179
166
|
* When feature is selected from list store that and show feature details
|
@@ -190,7 +177,8 @@ export class CrowdsourceReporter {
|
|
190
177
|
* @protected
|
191
178
|
*/
|
192
179
|
getFeatureListFlowItem(layerId, layerName) {
|
193
|
-
return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, onCalciteFlowItemBack: this.backFromFeatureList.bind(this) }, h("calcite-action", { icon: "sort-ascending-arrow", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.sort, "text-enabled": this.isMobile }), h("calcite-action", { icon: "filter", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.filter, "text-enabled": this.isMobile }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports &&
|
180
|
+
return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, onCalciteFlowItemBack: this.backFromFeatureList.bind(this) }, h("calcite-action", { icon: "sort-ascending-arrow", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.sort, "text-enabled": this.isMobile }), h("calcite-action", { icon: "filter", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.filter, "text-enabled": this.isMobile }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports &&
|
181
|
+
h("calcite-button", { appearance: "secondary", slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { class: "height-full", highlightOnMap: true, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, selectedLayerId: layerId }))));
|
194
182
|
}
|
195
183
|
/**
|
196
184
|
* Returns the calcite-flow item for feature details
|
@@ -631,6 +619,24 @@ export class CrowdsourceReporter {
|
|
631
619
|
"_hasValidLayers": {}
|
632
620
|
};
|
633
621
|
}
|
622
|
+
static get events() {
|
623
|
+
return [{
|
624
|
+
"method": "togglePanel",
|
625
|
+
"name": "togglePanel",
|
626
|
+
"bubbles": true,
|
627
|
+
"cancelable": true,
|
628
|
+
"composed": true,
|
629
|
+
"docs": {
|
630
|
+
"tags": [],
|
631
|
+
"text": "Emitted when toggle panel button is clicked in reporter"
|
632
|
+
},
|
633
|
+
"complexType": {
|
634
|
+
"original": "boolean",
|
635
|
+
"resolved": "boolean",
|
636
|
+
"references": {}
|
637
|
+
}
|
638
|
+
}];
|
639
|
+
}
|
634
640
|
static get elementRef() { return "el"; }
|
635
641
|
static get watchers() {
|
636
642
|
return [{
|
@@ -36,6 +36,18 @@ export class FeatureList {
|
|
36
36
|
}
|
37
37
|
//--------------------------------------------------------------------------
|
38
38
|
//
|
39
|
+
// Watch handlers
|
40
|
+
//
|
41
|
+
//--------------------------------------------------------------------------
|
42
|
+
/**
|
43
|
+
* Watch for selectedLayerId change and update layer instance and features list for new layerId
|
44
|
+
*/
|
45
|
+
async selectedLayerWatchHandler() {
|
46
|
+
this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
|
47
|
+
await this.initializeFeatureItems();
|
48
|
+
}
|
49
|
+
//--------------------------------------------------------------------------
|
50
|
+
//
|
39
51
|
// Functions (lifecycle)
|
40
52
|
//
|
41
53
|
//--------------------------------------------------------------------------
|
@@ -47,23 +59,22 @@ export class FeatureList {
|
|
47
59
|
await this._getTranslations();
|
48
60
|
this._isLoading = true;
|
49
61
|
this._popupUtils = new PopupUtils();
|
50
|
-
|
62
|
+
if (this.mapView && this.selectedLayerId) {
|
63
|
+
this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
|
64
|
+
}
|
51
65
|
}
|
52
66
|
/**
|
53
67
|
* StencilJS: Called once just after the component is fully loaded and the first render() occurs.
|
54
68
|
*/
|
55
69
|
async componentDidLoad() {
|
56
|
-
|
57
|
-
this._featureItems = await this.queryPage(0);
|
58
|
-
this._featuresCount = await this._selectedLayer.queryFeatureCount();
|
59
|
-
this._isLoading = false;
|
60
|
-
}
|
70
|
+
await this.initializeFeatureItems();
|
61
71
|
}
|
62
72
|
/**
|
63
73
|
* Renders the component.
|
64
74
|
*/
|
65
75
|
render() {
|
66
|
-
return (h("calcite-panel", { "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { scale: "m" }), this._featureItems.length === 0 && !this._isLoading &&
|
76
|
+
return (h("calcite-panel", { "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { scale: "m" }), this._featureItems.length === 0 && !this._isLoading &&
|
77
|
+
h("calcite-notice", { class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { "selection-appearance": "border", "selection-mode": "single" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
|
67
78
|
h("div", { class: "width-full", slot: "footer" }, h("calcite-pagination", { class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, "start-item": "1", "total-items": this._featuresCount }))));
|
68
79
|
}
|
69
80
|
//--------------------------------------------------------------------------
|
@@ -71,6 +82,17 @@ export class FeatureList {
|
|
71
82
|
// Functions (protected)
|
72
83
|
//
|
73
84
|
//--------------------------------------------------------------------------
|
85
|
+
/**
|
86
|
+
* Initialize the features list using the selected layer
|
87
|
+
*/
|
88
|
+
async initializeFeatureItems() {
|
89
|
+
if (this._selectedLayer) {
|
90
|
+
this._isLoading = true;
|
91
|
+
this._featureItems = await this.queryPage(0);
|
92
|
+
this._featuresCount = await this._selectedLayer.queryFeatureCount();
|
93
|
+
this._isLoading = false;
|
94
|
+
}
|
95
|
+
}
|
74
96
|
/**
|
75
97
|
* On page change get the next updated feature list
|
76
98
|
* @param event page change event
|
@@ -115,14 +137,19 @@ export class FeatureList {
|
|
115
137
|
*/
|
116
138
|
async queryPage(page) {
|
117
139
|
const featureLayer = this._selectedLayer;
|
140
|
+
const objectIdField = featureLayer.objectIdField;
|
118
141
|
const query = {
|
119
142
|
start: page,
|
120
143
|
num: this.pageSize,
|
121
144
|
outFields: ["*"],
|
122
|
-
orderByFields: [featureLayer.objectIdField + " DESC"],
|
123
145
|
returnGeometry: true,
|
124
|
-
where: featureLayer.definitionExpression
|
146
|
+
where: featureLayer.definitionExpression,
|
147
|
+
outSpatialReference: this.mapView.spatialReference.toJSON()
|
125
148
|
};
|
149
|
+
//sort only when objectId field is found
|
150
|
+
if (objectIdField) {
|
151
|
+
query.orderByFields = [objectIdField.toString() + " DESC"];
|
152
|
+
}
|
126
153
|
const featureSet = await featureLayer.queryFeatures(query);
|
127
154
|
return await this.createFeatureItem(featureSet);
|
128
155
|
}
|
@@ -135,7 +162,7 @@ export class FeatureList {
|
|
135
162
|
async createFeatureItem(featureSet) {
|
136
163
|
const currentFeatures = featureSet === null || featureSet === void 0 ? void 0 : featureSet.features;
|
137
164
|
const items = currentFeatures.map(async (feature) => {
|
138
|
-
const popupTitle = await this._popupUtils.getPopupTitle(feature);
|
165
|
+
const popupTitle = await this._popupUtils.getPopupTitle(feature, this.mapView.map);
|
139
166
|
return this.getFeatureItem(feature, popupTitle);
|
140
167
|
});
|
141
168
|
return Promise.all(items);
|
@@ -300,4 +327,10 @@ export class FeatureList {
|
|
300
327
|
}];
|
301
328
|
}
|
302
329
|
static get elementRef() { return "el"; }
|
330
|
+
static get watchers() {
|
331
|
+
return [{
|
332
|
+
"propName": "selectedLayerId",
|
333
|
+
"methodName": "selectedLayerWatchHandler"
|
334
|
+
}];
|
335
|
+
}
|
303
336
|
}
|
@@ -176,7 +176,7 @@ export class InfoCard {
|
|
176
176
|
if (this.graphics.length > 0) {
|
177
177
|
this._layer = (_a = this.graphics[0]) === null || _a === void 0 ? void 0 : _a.layer;
|
178
178
|
this._editEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsUpdate;
|
179
|
-
this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[0]);
|
179
|
+
this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[0], this.mapView.map);
|
180
180
|
this._features.open({
|
181
181
|
features: this.graphics
|
182
182
|
});
|
@@ -56,7 +56,8 @@ export class LayerList {
|
|
56
56
|
* Renders the component.
|
57
57
|
*/
|
58
58
|
render() {
|
59
|
-
return (h(Fragment, null, this._isLoading && h("calcite-loader", { scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
|
59
|
+
return (h(Fragment, null, this._isLoading && h("calcite-loader", { scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
|
60
|
+
h("calcite-notice", { class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { slot: "title" }, this._translations.error), h("div", { slot: "message" }, this.noLayerErrorMsg ? this.noLayerErrorMsg : this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
|
60
61
|
h("calcite-list", null, this.renderLayerList())));
|
61
62
|
}
|
62
63
|
//--------------------------------------------------------------------------
|
@@ -1109,7 +1109,7 @@ export class LayerTable {
|
|
1109
1109
|
*/
|
1110
1110
|
_filterModal() {
|
1111
1111
|
var _a, _b, _c;
|
1112
|
-
return (h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: async () => this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, (_b = (_a = this._translations) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.replace("{{title}}", (_c = this._layer) === null || _c === void 0 ? void 0 : _c.title)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl:
|
1112
|
+
return (h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: async () => this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, (_b = (_a = this._translations) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.replace("{{title}}", (_c = this._layer) === null || _c === void 0 ? void 0 : _c.title)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), layerExpressions: this._layerExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, view: this.mapView, zoomBtn: false }))));
|
1113
1113
|
}
|
1114
1114
|
/**
|
1115
1115
|
* Reset the filter active prop
|
@@ -1210,6 +1210,8 @@ export class LayerTable {
|
|
1210
1210
|
var _a, _b;
|
1211
1211
|
const layerExpressions = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filterConfig) === null || _b === void 0 ? void 0 : _b.layerExpressions;
|
1212
1212
|
this._layerExpressions = layerExpressions ? layerExpressions.filter((exp) => exp.id === this._layer.id) : [];
|
1213
|
+
this._filterList.layerExpressions = this._layerExpressions;
|
1214
|
+
this._filterActive = false;
|
1213
1215
|
}
|
1214
1216
|
/**
|
1215
1217
|
* Select all rows that are not currently selectd
|
@@ -27,10 +27,10 @@
|
|
27
27
|
top: 0px;
|
28
28
|
right: 0px;
|
29
29
|
bottom: 0px;
|
30
|
-
left:
|
30
|
+
left: 361px;
|
31
31
|
}
|
32
32
|
#viewDiv[dir="rtl"] {
|
33
|
-
right:
|
33
|
+
right: 361px;
|
34
34
|
left: 0px;
|
35
35
|
}
|
36
36
|
.over-map {
|
@@ -43,7 +43,6 @@
|
|
43
43
|
}
|
44
44
|
.column {
|
45
45
|
width: 360px;
|
46
|
-
padding: 1rem;
|
47
46
|
border: 1px solid var(--calcite-color-border-2);
|
48
47
|
height: -webkit-fill-available;
|
49
48
|
height: 100%;
|
@@ -51,6 +50,29 @@
|
|
51
50
|
.column[dir="rtl"] {
|
52
51
|
float: right;
|
53
52
|
}
|
53
|
+
|
54
|
+
@media screen and (max-width: 600px) {
|
55
|
+
#viewDiv {
|
56
|
+
left: 0;
|
57
|
+
height: 50%;
|
58
|
+
width: 100%;
|
59
|
+
}
|
60
|
+
|
61
|
+
.column {
|
62
|
+
height: 50%;
|
63
|
+
top: 50%;
|
64
|
+
width: calc(100% - 2px);
|
65
|
+
}
|
66
|
+
|
67
|
+
.map-with-panel-collapsed {
|
68
|
+
height: calc(100% - 100px) !important;
|
69
|
+
}
|
70
|
+
|
71
|
+
.column-collapsed {
|
72
|
+
top: calc(100% - 100px);
|
73
|
+
height: 100px;
|
74
|
+
}
|
75
|
+
}
|
54
76
|
</style>
|
55
77
|
|
56
78
|
<link rel="stylesheet" href="https://jsdev.arcgis.com/4.29/esri/themes/light/main.css"/>
|
@@ -69,52 +91,44 @@
|
|
69
91
|
esriConfig
|
70
92
|
) => {
|
71
93
|
const demo = document.getElementById("demo");
|
72
|
-
|
73
|
-
|
74
|
-
//
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
// portal = v;
|
90
|
-
// default:
|
91
|
-
// break;
|
92
|
-
// }
|
93
|
-
// });
|
94
|
-
|
95
|
-
// if (portal) {
|
96
|
-
// esriConfig.portalUrl = portal;
|
97
|
-
// }
|
98
|
-
|
99
|
-
// demo.mapInfos = [{
|
100
|
-
// //id: "f8c4d99deb3c483cac296cc261e18a25", //blank no layers
|
101
|
-
// //id: "a7e880f7afbb471991d43c8c4f1438ac" // Se mapping
|
102
|
-
// //id: "c720e337ff814fe4a83bc244c46f8e43" //15 Layers
|
103
|
-
// //id: "f5186c798b9e40dab1078658ddbc28cf" // 30K features
|
104
|
-
// //id: "dda88d905a6748a5ab46bea5be795f33" // screening layers
|
105
|
-
// id: "b5bdcb1e5d684dd3b21a2d44b8e4f928" //Popup content
|
106
|
-
// }];
|
107
|
-
// //if id is passed in the url parameter use that mapInfos
|
108
|
-
// if (custom?.length > 0) {
|
109
|
-
// demo.mapInfos = custom;
|
110
|
-
// }
|
111
|
-
|
112
|
-
//esriConfig.portalUrl = "https://solutions.mapsdevext.arcgis.com";
|
113
|
-
var webMap = new WebMap({
|
114
|
-
portalItem: {
|
115
|
-
id: "b5bdcb1e5d684dd3b21a2d44b8e4f928"
|
94
|
+
let custom = null;
|
95
|
+
let portal;
|
96
|
+
//Support webmap and portal URL parameter
|
97
|
+
var vars = window.location.search.substring(1).split("&");
|
98
|
+
vars.forEach((param) => {
|
99
|
+
let vals = param.split("=");
|
100
|
+
const v = vals[1];
|
101
|
+
switch (vals[0]) {
|
102
|
+
case "webmap":
|
103
|
+
custom = {
|
104
|
+
id: v
|
105
|
+
};
|
106
|
+
break;
|
107
|
+
case "portal":
|
108
|
+
portal = v;
|
109
|
+
default:
|
110
|
+
break;
|
116
111
|
}
|
117
112
|
});
|
113
|
+
//update the portalUrl if found in urlParams
|
114
|
+
//esriConfig.portalUrl = "https://solutions.mapsdevext.arcgis.com";
|
115
|
+
if (portal) {
|
116
|
+
esriConfig.portalUrl = portal;
|
117
|
+
}
|
118
|
+
|
119
|
+
let portalItem = {
|
120
|
+
//id: "b5bdcb1e5d684dd3b21a2d44b8e4f928"
|
121
|
+
//id: "f8c4d99deb3c483cac296cc261e18a25", //blank no layers
|
122
|
+
//id: "a7e880f7afbb471991d43c8c4f1438ac" // Se mapping
|
123
|
+
//id: "c720e337ff814fe4a83bc244c46f8e43" //15 Layers
|
124
|
+
//id: "f5186c798b9e40dab1078658ddbc28cf" // 30K features
|
125
|
+
//id: "dda88d905a6748a5ab46bea5be795f33" // screening layers
|
126
|
+
id: "b5bdcb1e5d684dd3b21a2d44b8e4f928" //Popup content
|
127
|
+
//id: "d399ec39959a4aac8617ae4f05dd6785" //Arcade
|
128
|
+
}
|
129
|
+
const webMap = new WebMap({
|
130
|
+
portalItem: custom ?? portalItem
|
131
|
+
});
|
118
132
|
|
119
133
|
demo.mapView = new MapView({
|
120
134
|
container: "viewDiv",
|
@@ -122,24 +136,44 @@
|
|
122
136
|
});
|
123
137
|
|
124
138
|
demo.mapView.when(() => {
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
139
|
+
// const legend = new Legend({
|
140
|
+
// view: demo.mapView
|
141
|
+
// });
|
142
|
+
// demo.mapView.ui.add(legend, "top-left");
|
129
143
|
});
|
130
|
-
|
131
|
-
// demo.enableHome = true;
|
132
|
-
// demo.enableSearch = true;
|
133
|
-
// demo.enableZoom = true;
|
134
144
|
demo.reportsHeader = "Reports";
|
135
145
|
demo.reportButtonText = "Report an incident";
|
136
146
|
demo.enableNewReports = true;
|
137
|
-
//Select reporting layers -
|
138
|
-
//demo.layers = ['SE_field_mapping_9688', 'SE_field_mapping_5784', 'SE_field_mapping_1853'];
|
139
|
-
//demo.layers = ['Three_Layers_nested_4042', 'SE_sort_2889', 'SE_sort_756']; //screening layers
|
140
147
|
demo.theme = "light";
|
141
148
|
demo.reportSubmittedMessage = "Thank you";
|
149
|
+
//Select reporting layers -
|
150
|
+
//demo.layers = ['SE_field_mapping_9688', 'SE_field_mapping_5784', 'SE_field_mapping_1853']; //Se mapping
|
151
|
+
//demo.layers = ['Three_Layers_nested_4042', 'SE_sort_2889', 'SE_sort_756']; //screening layers
|
152
|
+
|
153
|
+
//Update isMobile property of the reporter component
|
154
|
+
const mediaQueryList = window.matchMedia("screen and (max-width: 600px)");
|
155
|
+
demo.isMobile = mediaQueryList.matches;
|
156
|
+
//on change update the prop for is mobile
|
157
|
+
mediaQueryList.onchange = (e) => {
|
158
|
+
demo.isMobile = e.matches;
|
159
|
+
togglePanel({detail:false})
|
160
|
+
}
|
161
|
+
//listen to togglePanel event
|
162
|
+
demo.addEventListener('togglePanel', togglePanel);
|
142
163
|
});
|
164
|
+
|
165
|
+
function togglePanel(evt){
|
166
|
+
const state = evt.detail;
|
167
|
+
const viewDiv = document.getElementById("viewDiv");
|
168
|
+
const demo = document.getElementById("demo");
|
169
|
+
if(state){
|
170
|
+
demo.classList.add("column-collapsed");
|
171
|
+
viewDiv.classList.add("map-with-panel-collapsed");
|
172
|
+
} else{
|
173
|
+
demo.classList.remove("column-collapsed");
|
174
|
+
viewDiv.classList.remove("map-with-panel-collapsed");
|
175
|
+
}
|
176
|
+
}
|
143
177
|
</script>
|
144
178
|
</head>
|
145
179
|
|
@@ -7,24 +7,51 @@
|
|
7
7
|
/>
|
8
8
|
<title>Feature list</title>
|
9
9
|
<!--
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
10
|
+
| Copyright 2022 Esri
|
11
|
+
|
|
12
|
+
| Licensed under the Apache License, Version 2.0 (the "License");
|
13
|
+
| you may not use this file except in compliance with the License.
|
14
|
+
| You may obtain a copy of the License at
|
15
|
+
|
|
16
|
+
| http://www.apache.org/licenses/LICENSE-2.0
|
17
|
+
|
|
18
|
+
| Unless required by applicable law or agreed to in writing, software
|
19
|
+
| distributed under the License is distributed on an "AS IS" BASIS,
|
20
|
+
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
21
|
+
| See the License for the specific language governing permissions and
|
22
|
+
| limitations under the License.
|
23
|
+
-->
|
24
24
|
<style>
|
25
|
+
#viewDiv {
|
26
|
+
padding: 0;
|
27
|
+
margin: 0;
|
28
|
+
height: 100%;
|
29
|
+
width: calc(50% - 2px);
|
30
|
+
}
|
31
|
+
|
32
|
+
.over-map {
|
33
|
+
position: absolute;
|
34
|
+
top: 0;
|
35
|
+
right: 0px;
|
36
|
+
background-color: var(--calcite-color-foreground-1);
|
37
|
+
}
|
38
|
+
|
39
|
+
.column {
|
40
|
+
width: 50%;
|
41
|
+
height: 100%;
|
42
|
+
border: 1px solid var(--calcite-color-border-2);
|
43
|
+
}
|
44
|
+
|
45
|
+
.column[dir="rtl"] {
|
46
|
+
float: left;
|
47
|
+
}
|
48
|
+
|
49
|
+
.full-height {
|
50
|
+
height: 100%;
|
51
|
+
}
|
25
52
|
</style>
|
26
53
|
|
27
|
-
<link rel="stylesheet" href="https://jsdev.arcgis.com/4.29/esri/themes/light/main.css"/>
|
54
|
+
<link rel="stylesheet" href="https://jsdev.arcgis.com/4.29/esri/themes/light/main.css" />
|
28
55
|
<link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
|
29
56
|
<link rel="stylesheet" href="../solutions-components.css" type="text/css">
|
30
57
|
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.0.0/calcite.css" />
|
@@ -33,11 +60,32 @@
|
|
33
60
|
<script type="module" src="../solutions-components.esm.js"></script>
|
34
61
|
|
35
62
|
<script>
|
63
|
+
require(["esri/WebMap", "esri/views/MapView"], (
|
64
|
+
WebMap,
|
65
|
+
MapView
|
66
|
+
) => {
|
67
|
+
var webMap = new WebMap({
|
68
|
+
portalItem: {
|
69
|
+
id: "7377412d3bd7400cbd5b355404285682"
|
70
|
+
}
|
71
|
+
});
|
72
|
+
var view = new MapView({
|
73
|
+
container: "viewDiv",
|
74
|
+
map: webMap
|
75
|
+
});
|
76
|
+
|
77
|
+
view.when(function () {
|
78
|
+
const demo = document.getElementById("demo");
|
79
|
+
demo.mapView = view;
|
80
|
+
demo.selectedLayerId = 'BirdObservationTryItLive_2797'
|
81
|
+
demo.pageSize = 30;
|
82
|
+
})
|
83
|
+
});
|
36
84
|
</script>
|
37
85
|
</head>
|
38
86
|
|
39
|
-
<!-- <body class="calcite-mode-dark"> -->
|
40
87
|
<body>
|
41
|
-
<
|
88
|
+
<div id="viewDiv"></div>
|
89
|
+
<feature-list id="demo" class="over-map column full-height"></feature-list>
|
42
90
|
</body>
|
43
91
|
</html>
|
@@ -22,9 +22,32 @@
|
|
22
22
|
| limitations under the License.
|
23
23
|
-->
|
24
24
|
<style>
|
25
|
+
#viewDiv {
|
26
|
+
padding: 0;
|
27
|
+
margin: 0;
|
28
|
+
height: 100%;
|
29
|
+
width: calc(50% - 2px);
|
30
|
+
}
|
31
|
+
.over-map {
|
32
|
+
position: absolute;
|
33
|
+
top:0;
|
34
|
+
right: 0px;
|
35
|
+
background-color: var(--calcite-color-foreground-1);
|
36
|
+
}
|
37
|
+
.column {
|
38
|
+
width: 50%;
|
39
|
+
height: 100%;
|
40
|
+
border: 1px solid var(--calcite-color-border-2);
|
41
|
+
}
|
42
|
+
.column[dir="rtl"] {
|
43
|
+
float: left;
|
44
|
+
}
|
45
|
+
.full-height {
|
46
|
+
height: 100%;
|
47
|
+
}
|
25
48
|
</style>
|
26
49
|
|
27
|
-
<link rel="stylesheet" href="https://jsdev.arcgis.com/4.29/esri/themes/light/main.css"/>
|
50
|
+
<link rel="stylesheet" href="https://jsdev.arcgis.com/4.29/esri/themes/light/main.css" />
|
28
51
|
<link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
|
29
52
|
<link rel="stylesheet" href="../solutions-components.css" type="text/css">
|
30
53
|
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.0.0/calcite.css" />
|
@@ -33,11 +56,28 @@
|
|
33
56
|
<script type="module" src="../solutions-components.esm.js"></script>
|
34
57
|
|
35
58
|
<script>
|
59
|
+
require(["esri/WebMap", "esri/views/MapView"], (
|
60
|
+
WebMap,
|
61
|
+
MapView
|
62
|
+
) => {
|
63
|
+
var webMap = new WebMap({
|
64
|
+
portalItem: {
|
65
|
+
id: "b5bdcb1e5d684dd3b21a2d44b8e4f928"
|
66
|
+
}
|
67
|
+
});
|
68
|
+
|
69
|
+
const demo = document.getElementById("demo");
|
70
|
+
demo.mapView = new MapView({
|
71
|
+
container: "viewDiv",
|
72
|
+
map: webMap
|
73
|
+
});
|
74
|
+
});
|
36
75
|
</script>
|
37
76
|
</head>
|
38
77
|
|
39
|
-
<!-- <body class="calcite-mode-dark"> -->
|
40
78
|
<body>
|
41
|
-
<
|
79
|
+
<div id="viewDiv"></div>
|
80
|
+
<layer-list id="demo" class="over-map column full-height">
|
81
|
+
</layer-list>
|
42
82
|
</body>
|
43
83
|
</html>
|
@@ -546,5 +546,5 @@ export interface ILayerAndTableIds {
|
|
546
546
|
|
547
547
|
export interface IPopupUtils {
|
548
548
|
arcade: typeof import("esri/arcade");
|
549
|
-
getPopupTitle(graphic: __esri.Graphic): Promise<string>;
|
549
|
+
getPopupTitle(graphic: __esri.Graphic, map: __esri.Map): Promise<string>;
|
550
550
|
}
|