{props.label}
+ {label}
{value}
{props.children}
diff --git a/src/helpers/OLHelpers.js b/src/helpers/OLHelpers.js
index 4f4dcd31..0eca814c 100644
--- a/src/helpers/OLHelpers.js
+++ b/src/helpers/OLHelpers.js
@@ -157,6 +157,8 @@ export class LayerHelpers {
: layer.getSource().getFeatureInfoUrl(coordinate, viewResolution, "EPSG:3857", {
INFO_FORMAT: "application/json",
});
+ let attachmentUrl = layer.get("attachmentUrl");
+ const hasAttachments = layer.get("hasAttachments");
const params = {};
const secureKey = layer.get("secureKey");
if (secureKey !== undefined) {
@@ -171,6 +173,7 @@ export class LayerHelpers {
const tolerance = 20 - zoom;
url = url
.replace("#GEOMETRY#", coordinate)
+ .replace("#GEOMETRYTYPE#", "esriGeometryPoint")
.replace("#TOLERANCE#", tolerance >= 10 ? tolerance : 10)
.replace("#EXTENT#", extent.join(","))
.replace("#RESOLUTION#", arcgisResolution);
@@ -178,6 +181,15 @@ export class LayerHelpers {
if (url) {
await helpers.getJSONWaitWithParams(url, params, (result) => {
let features = isArcGISLayer ? LayerHelpers.parseESRIIdentify(result) : new GeoJSON().readFeatures(result);
+ if (hasAttachments) {
+ features = features.map((feature) => {
+ const keys = feature.getKeys();
+ const objectId = feature.get(keys.filter((item) => item.indexOf("OBJECTID") !== -1)[0]);
+ feature.values_["attachmentUrl"] = attachmentUrl.replace("#OBJECTID#", objectId);
+ return feature;
+ });
+ }
+
if (callback === undefined) {
return features.length > 0 ? features[0] : undefined;
} else {
@@ -194,6 +206,9 @@ export class LayerHelpers {
: layer.getSource().getFeatureInfoUrl(coordinate, viewResolution, "EPSG:3857", {
INFO_FORMAT: "application/json",
});
+ let attachmentUrl = layer.get("attachmentUrl");
+ const hasAttachments = layer.get("hasAttachments");
+
const params = {};
const secureKey = layer.get("secureKey");
if (secureKey !== undefined) {
@@ -208,6 +223,7 @@ export class LayerHelpers {
const tolerance = 20 - zoom;
url = url
.replace("#GEOMETRY#", coordinate)
+ .replace("#GEOMETRYTYPE#", "esriGeometryPoint")
.replace("#TOLERANCE#", tolerance >= 10 ? tolerance : 10)
.replace("#EXTENT#", extent.join(","))
.replace("#RESOLUTION#", arcgisResolution);
@@ -215,6 +231,14 @@ export class LayerHelpers {
if (url) {
helpers.getJSONWithParams(url, params, (result) => {
let features = isArcGISLayer ? LayerHelpers.parseESRIIdentify(result) : new GeoJSON().readFeatures(result);
+ if (hasAttachments) {
+ features = features.map((feature) => {
+ const keys = feature.getKeys();
+ const objectId = feature.get(keys.filter((item) => item.indexOf("OBJECTID") !== -1)[0]);
+ feature.values_["attachmentUrl"] = attachmentUrl.replace("#OBJECTID#", objectId);
+ return feature;
+ });
+ }
callback(features.length > 0 ? features[0] : undefined);
});
}
@@ -228,7 +252,7 @@ export class LayerHelpers {
delete item.geometryType;
let keys = Object.keys(item.attributes);
keys.forEach((key) => {
- if (item.attributes[key] === "Null" || item.attributes[key] === "") delete item.attributes[key];
+ if (item.attributes[key] === "Null" || item.attributes[key] === "") item.attributes[key] = ""; //delete item.attributes[key];
});
let tempFeature = new EsriJSON().readFeature(item);
@@ -279,7 +303,7 @@ export class LayerHelpers {
//headers["token"] = "GIS";
params["headers"] = headers;
}
- helpers.httpGetTextWithParams(url, params, (responseText) => {
+ const parseResponseText = (responseText, token = undefined) => {
if (responseText === null) {
callback([]);
return;
@@ -321,7 +345,7 @@ export class LayerHelpers {
case "rest":
response = JSON.parse(responseText);
if (response.layers !== undefined) {
- this.getESRILegend(`${root_url}/legend?f=json`, (legends) => {
+ this.getESRILegend(token ? `${root_url}/legend?f=json&token=${token}` : `${root_url}/legend?f=json`, (legends) => {
response.layers.forEach((item) => {
if (item !== undefined) {
item["layer_name"] = item.name;
@@ -342,7 +366,7 @@ export class LayerHelpers {
})[0];
if (item.drawingInfo !== undefined && item.drawingInfo.renderer !== undefined && item.drawingInfo.renderer.symbol !== undefined && item.legend === undefined)
item["style"] = `data:${item.drawingInfo.renderer.symbol.contentType};base64,${item.drawingInfo.renderer.symbol.imageData}`;
- item["url"] = `${root_url}/${item.id}`;
+ item["url"] = token ? `${root_url}/${item.id}?token=${token}` : `${root_url}/${item.id}`;
layers.push(item);
}
});
@@ -377,8 +401,105 @@ export class LayerHelpers {
console.warn("Unexpected error: " + error.message);
callback(layers);
}
+ };
+ if (options.token) {
+ url = `${url}&token=${options.token}`;
+ helpers.httpGetTextWithParams(url, params, (responseText) => {
+ parseResponseText(responseText, options.token);
+ });
+ } else {
+ helpers.httpGetTextWithParams(url, params, (responseText) => {
+ parseResponseText(responseText);
+ });
+ }
+ }
+
+ static createArcGISRestLayersFromService(capabilities, options, callback) {
+ const { returnLayers } = options;
+ let layerArray = [];
+ capabilities.forEach((layer) => {
+ if (!returnLayers || returnLayers.includes(layer.id)) {
+ const hasAttachments = layer.hasAttachments;
+ const layerOptions = {
+ sourceType: OL_DATA_TYPES.ImageArcGISRest,
+ source: "rest",
+ projection: layer.sourceSpatialReference && layer.sourceSpatialReference.latestWkid ? `${layer.sourceSpatialReference.latestWkid}` : "3857",
+ layerName: layer.name,
+ url: layer.url,
+ tiled: false,
+ extent: layer.extent,
+ name: layer.name,
+ };
+ if (layer.grouped) {
+ layerOptions["layers"] = layer.layers;
+ layerOptions.sourceType = OL_DATA_TYPES.LayerGroup;
+ }
+ LayerHelpers.getLayer(layerOptions, (newLayer) => {
+ const identifyUrl = (options) =>
+ `${options.url}/identify?geometry=${options.point}&geometryType=${options.geometryType}&layers=visible%3A${options.layerId}&sr=3857&datumTransformations=3857&tolerance=${options.tolerance}&mapExtent=${options.extent}&imageDisplay=${options.resolution}&maxAllowableOffset=10&returnGeometry=true&returnFieldName=false&f=json`;
+ const getAttachmentUrl = (options) => `${options.url}/${options.layerId}/queryAttachments?objectIds=${options.objectId}&returnUrl=true&f=json`;
+ const getRecordCountUrl = (options) => `${options.url}/${options.layerId}/query?where=0%3D0&returnCountOnly=true&f=json`;
+ const getQueryUrl = (options) => `${options.url}/${options.layerId}/query?where=#WHERE#&outFields=*&outSR=3857&returnCountOnly=false&f=geojson`;
+ const rootInfoUrl = layer.url;
+ let attachmentUrl = getAttachmentUrl({
+ url: layer.rootUrl,
+ layerId: layer.id,
+ objectId: "#OBJECTID#",
+ });
+ let wfsUrl = identifyUrl({
+ url: layer.rootUrl,
+ point: "#GEOMETRY#",
+ layerId: layer.id,
+ tolerance: "#TOLERANCE#",
+ extent: "#EXTENT#",
+ resolution: "#RESOLUTION#",
+ geometryType: "#GEOMETRYTYPE#",
+ });
+ let queryUrl = getQueryUrl({
+ url: layer.rootUrl,
+ layerId: layer.id,
+ });
+ let recordCountUrl = getRecordCountUrl({
+ url: layer.rootUrl,
+ layerId: layer.id,
+ });
+ var url = new URL(rootInfoUrl);
+ const urlParams = new URLSearchParams(url.searchParams);
+ const url_token = urlParams.get("token");
+ if (url_token) wfsUrl = `${wfsUrl}&token=${url_token}`;
+ if (url_token && hasAttachments) attachmentUrl = `${attachmentUrl}&token=${url_token}`;
+ if (url_token) recordCountUrl = `${recordCountUrl}&token=${url_token}`;
+ if (url_token) queryUrl = `${queryUrl}&token=${url_token}`;
+
+ newLayer.setVisible(layer.defaultVisibility);
+ newLayer.setOpacity(layer.options ? layer.options.opacity || 1 : 1);
+ newLayer.setProperties({
+ layerId: layer.id,
+ name: layer.name,
+ displayName: layer.name,
+ tocDisplayName: layer.name,
+ wfsUrl: wfsUrl,
+ rootInfoUrl: rootInfoUrl,
+ clickable: true,
+ disableParcelClick: false,
+ queryable: layer.queryable !== undefined ? layer.queryable : false,
+ opaque: layer.opaque !== undefined ? layer.opaque : false,
+ minScale: layer.minScale,
+ maxScale: layer.maxScale,
+ attachmentUrl: hasAttachments ? attachmentUrl : null,
+ hasAttachments: hasAttachments,
+ recordCountUrl: recordCountUrl,
+ featureQueryUrl: queryUrl,
+ });
+ newLayer["layerConfig"] = layer;
+ newLayer["key"] = helpers.getUID();
+ layerArray.push(newLayer);
+ });
+ }
});
+ callback(layerArray);
}
+
static getESRILegend(url, callback) {
helpers.httpGetText(url, (responseText) => {
var response = JSON.parse(responseText);
@@ -518,6 +639,7 @@ export class LayerHelpers {
let projection = options.projection !== undefined ? options.projection : "EPSG:3857";
let layerName = options.layerName;
let url = options.url;
+ let params = options.params;
let tiled = options.tiled !== undefined ? options.tiled : false;
let file = options.file;
let extent = options.extent !== undefined ? options.extent : [];
@@ -825,7 +947,6 @@ export class LayerHelpers {
declutter: true,
tilePixelRatio: 8,
background: background,
-
source: new VectorTileSource({
name: name,
format: new MVT(),
@@ -907,17 +1028,27 @@ export class LayerHelpers {
);
break;
case OL_DATA_TYPES.ImageArcGISRest:
- let urlArray = url.split("/");
+ let token = undefined;
+ let urlParam = url.split("?");
+ let urlArray = urlParam[0].split("/");
+ urlParam.shift();
let url_layer = urlArray[urlArray.length - 1];
urlArray.pop();
url = urlArray.join("/");
+ if (urlParam[0]) {
+ let tokenArray = urlParam[0].split("=");
+ token = tokenArray[1];
+ }
const sourceParams = {
url: url,
- params: { LAYERS: `SHOW:${url_layer}` },
+ params: params || { LAYERS: `SHOW:${url_layer}` },
ratio: 1,
projection: projection,
crossOrigin: "anonymous",
};
+ if (token) {
+ sourceParams.params["TOKEN"] = token;
+ }
if (extent !== undefined) sourceParams["extent"] = [extent.xmin, extent.ymin, extent.xmax, extent.ymax];
callback(
new ImageLayer({
diff --git a/src/helpers/Popup.jsx b/src/helpers/Popup.jsx
index 3b650343..d0c5a0ba 100644
--- a/src/helpers/Popup.jsx
+++ b/src/helpers/Popup.jsx
@@ -127,7 +127,7 @@ export default class Popup extends Overlay {
// x.classList.remove("sc-hidden");
const containers = document.getElementsByClassName("ol-overlay-container ol-selectable");
Array.prototype.forEach.call(containers, (el) => {
- if (el.childNodes[0].id === "sc-window-popup") el.classList.remove("sc-hidden");
+ if (el && el.childNodes && el.childNodes[0].id === "sc-window-popup") el.classList.remove("sc-hidden");
});
// SET TITLE
@@ -153,46 +153,47 @@ export default class Popup extends Overlay {
// console.info('start dragging');
// });
- header.addEventListener("mousedown", (evt) => {
- // IGNORE CLOSE BUTTON OR MOBILE
- var isCloser = evt.target.classList.contains("ol-popup-closer");
- if (isClosing || isCloser || helpers.isMobile()) {
- isMoving = false;
- isClosing = false;
- return;
- }
-
- // THIS FOLLOWING IS TO SUPPORT MAKE POPUP MOVABLE. NOT PERFECT YET.
- var that = this;
- function move(evt) {
- var coord = window.map.getEventCoordinate(evt);
- var pixel = window.map.getPixelFromCoordinate(coord);
- var width = getWidth(window.map.getView().getProjection().getExtent()) / window.map.getView().getResolution();
- var pixelX = ((pixel[0] % width) + width) % width;
- var pixelY = pixel[1];
- var popupElem = document.getElementsByClassName("ol-popup")[0];
- var popupHeight = popupElem.offsetHeight;
- var popupWidth = popupElem.offsetWidth;
-
- // THIS SNAPS TO CENTER OF POPUP X
- var calc = pixelX - popupWidth / 4;
- var pixel2 = [calc, pixelY + popupHeight];
- var point = window.map.getCoordinateFromPixel(pixel2);
-
- if (isMoving) {
- that.setPosition(point);
- } else {
- isMoving = true;
+ if (header)
+ header.addEventListener("mousedown", (evt) => {
+ // IGNORE CLOSE BUTTON OR MOBILE
+ var isCloser = evt.target.classList.contains("ol-popup-closer");
+ if (isClosing || isCloser || helpers.isMobile()) {
+ isMoving = false;
+ isClosing = false;
+ return;
}
- }
- function end(evt) {
- window.removeEventListener("mousemove", move);
- window.removeEventListener("mouseup", end);
- isMoving = false;
- }
- window.addEventListener("mousemove", move);
- window.addEventListener("mouseup", end);
- });
+
+ // THIS FOLLOWING IS TO SUPPORT MAKE POPUP MOVABLE. NOT PERFECT YET.
+ var that = this;
+ function move(evt) {
+ var coord = window.map.getEventCoordinate(evt);
+ var pixel = window.map.getPixelFromCoordinate(coord);
+ var width = getWidth(window.map.getView().getProjection().getExtent()) / window.map.getView().getResolution();
+ var pixelX = ((pixel[0] % width) + width) % width;
+ var pixelY = pixel[1];
+ var popupElem = document.getElementsByClassName("ol-popup")[0];
+ var popupHeight = popupElem.offsetHeight;
+ var popupWidth = popupElem.offsetWidth;
+
+ // THIS SNAPS TO CENTER OF POPUP X
+ var calc = pixelX - popupWidth / 4;
+ var pixel2 = [calc, pixelY + popupHeight];
+ var point = window.map.getCoordinateFromPixel(pixel2);
+
+ if (isMoving) {
+ that.setPosition(point);
+ } else {
+ isMoving = true;
+ }
+ }
+ function end(evt) {
+ window.removeEventListener("mousemove", move);
+ window.removeEventListener("mouseup", end);
+ isMoving = false;
+ }
+ window.addEventListener("mousemove", move);
+ window.addEventListener("mouseup", end);
+ });
if (callback !== undefined) {
closeCallback = callback;
@@ -247,7 +248,7 @@ export default class Popup extends Overlay {
window.activeClick = null;
const containers = document.getElementsByClassName("ol-overlay-container ol-selectable");
Array.prototype.forEach.call(containers, (el) => {
- if (el.childNodes[0].id === "sc-window-popup") el.classList.add("sc-hidden");
+ if (el && el.childNodes && el.childNodes[0] && el.childNodes[0] && el.childNodes[0].id === "sc-window-popup") el.classList.add("sc-hidden");
});
isMoving = false;
diff --git a/src/helpers/SC.css b/src/helpers/SC.css
index f8ce2f1b..b09eada9 100644
--- a/src/helpers/SC.css
+++ b/src/helpers/SC.css
@@ -486,7 +486,9 @@ input[type="number"]::-webkit-outer-spin-button {
font-size: 20px;
padding-top: 12px;
}
-
+.sc-attachment-icon {
+ color: #626262;
+}
@media print {
.no-print,
.no-print * {
diff --git a/src/helpers/URLWindow.jsx b/src/helpers/URLWindow.jsx
index 02399bf8..6b5df079 100644
--- a/src/helpers/URLWindow.jsx
+++ b/src/helpers/URLWindow.jsx
@@ -3,140 +3,140 @@ import "./UrlWindow.css";
import * as helpers from "./helpers";
class URLWindow extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- hide: false,
- };
- }
-
- onCloseClick = (value) => {
- this.setState({ hide: true });
- };
-
- onPopoutClick = () => {
- window.open(this.props.url, "_blank");
- };
-
- componentWillUnmount() {
- this.sidebarEmitter.remove();
- document.removeEventListener("keydown", this.escFunction, false);
- }
-
- componentDidMount() {
- helpers.waitForLoad("settings", Date.now(), 30, () => {
- this.storageKey = window.config.storageKeys.URLDontShowAgain;
-
- try {
- if (this.props.honorDontShow) {
- const saved = this.getStorage();
- if (saved !== null && saved !== undefined) {
- if (saved.find((item) => (item.url !== undefined ? item.url.toLowerCase() === this.props.url.toLowerCase() : false))) this.setState({ hide: true });
- }
- }
- } catch (e) {
- console.log(e);
- }
-
- document.addEventListener("keydown", this.escFunction, false);
- });
- // LISTEN FOR SIDEPANEL CHANGES
- this.sidebarEmitter = window.emitter.addListener("sidebarChanged", (isSidebarOpen) => this.sidebarChanged(isSidebarOpen));
- }
-
- isDontShow = () => {
- try {
- if (this.props.honorDontShow) {
- const saved = this.getStorage();
- if (saved !== null && saved !== undefined) {
- return saved.find((item) => (item.url !== undefined ? item.url.toLowerCase() === this.props.url.toLowerCase() : false));
- } else {
- return false;
- }
- } else {
- return false;
- }
- } catch (e) {
- return false;
- }
-
- if (this.props.honorDontShow) {
- const saved = this.getStorage();
- if (saved.includes(this.props.url)) return true;
- else return false;
- }
- };
-
- sidebarChanged = (isSidebarOpen) => {
- this.forceUpdate();
- };
-
- escFunction = (event) => {
- if (event.keyCode === 27) {
- this.setState({ hide: true });
- }
- };
-
- onDontShowThisAgain = () => {
- this.saveToStorage();
- };
-
- saveToStorage = () => {
- let item = { url: this.props.url, dateAdded: new Date().toLocaleString() };
- helpers.appendToStorage(this.storageKey, item);
- this.setState({ hide: true });
- };
-
- // GET STORAGE
- getStorage() {
- const storage = localStorage.getItem(this.storageKey);
- if (storage === null) return [];
-
- const data = JSON.parse(storage);
- return data;
- }
-
- render() {
- // DONT RENDER IF WERE NOT SHOWING, OTHERWISE ALL DATA/IMAGES FROM URL LINK WILL DOWNLOAD
- if (this.isDontShow()) return ;
-
- let className = "";
- if (this.state.hide) className = "sc-hidden";
- else if (this.props.mode === "full") className = "full";
- else if (!window.sidebarOpen) className = "full";
-
- let hideScrollClassName = "";
- if (this.props.hideScroll) hideScrollClassName = "sc-url-window-content-no-scroll";
- return (
-
Jh0+Nr!i(i<*
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 h1LGhp}pN(`BB?@BkVoor3?c6Z=m*dYW>Gj
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
abxVq8QXYq%k?tD6NujS#=7g`@^uGXt%A~gd
literal 0
HcmV?d00001
From be3f7397a2900dfa093333e9528b9f7ba9904364 Mon Sep 17 00:00:00 2001
From: Tom <58078313+reed-tom@users.noreply.github.com>
Date: Fri, 19 May 2023 13:14:43 -0400
Subject: [PATCH 02/11] switched community map styles to relative path
---
src/map/basemapSwitcherConfig.json | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/src/map/basemapSwitcherConfig.json b/src/map/basemapSwitcherConfig.json
index a1a30de5..9025533f 100644
--- a/src/map/basemapSwitcherConfig.json
+++ b/src/map/basemapSwitcherConfig.json
@@ -36,7 +36,7 @@
"url": "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer",
"type": "ESRI_VECTOR_TILED",
"isOverlay": true,
- "rootPath": "https://opengis.simcoe.ca/public/basemap/ESRI_WorldTopoCanadianStyle.json",
+ "rootPath": "/public/basemap/ESRI_WorldTopoCanadianStyle.json",
"excludePrint": true
},
{
@@ -49,7 +49,7 @@
"url": "https://tiles.arcgis.com/tiles/B6yKvIZqzuOr0jBR/arcgis/rest/services/Canada_Topographic/VectorTileServer",
"type": "ESRI_VECTOR_TILED",
"isOverlay": true,
- "rootPath": "https://opengis.simcoe.ca/public/basemap/ESRI_Canada_Topographic.json",
+ "rootPath": "/public/basemap/ESRI_Canada_Topographic.json",
"maxZoom": 23,
"excludePrint": true
}
@@ -71,14 +71,14 @@
"url": "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer",
"type": "ESRI_VECTOR_TILED",
"isOverlay": true,
- "rootPath": "https://opengis.simcoe.ca/public/basemap/ESRI_LightGreyBackground.json",
+ "rootPath": "/public/basemap/ESRI_LightGreyBackground.json",
"excludePrint": true
},
{
"url": "https://tiles.arcgis.com/tiles/B6yKvIZqzuOr0jBR/arcgis/rest/services/Canada_Topographic/VectorTileServer",
"type": "ESRI_VECTOR_TILED",
"isOverlay": true,
- "rootPath": "https://opengis.simcoe.ca/public/basemap/ESRI_LightGrey.json",
+ "rootPath": "/public/basemap/ESRI_LightGrey.json",
"excludePrint": true
}
]
@@ -98,14 +98,14 @@
"url": "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer",
"type": "ESRI_VECTOR_TILED",
"isOverlay": true,
- "rootPath": "https://opengis.simcoe.ca/public/basemap/ESRI_Streets_Night_Background.json",
+ "rootPath": "/public/basemap/ESRI_Streets_Night_Background.json",
"excludePrint": true
},
{
"url": "https://tiles.arcgis.com/tiles/B6yKvIZqzuOr0jBR/arcgis/rest/services/Canada_Topographic/VectorTileServer",
"type": "ESRI_VECTOR_TILED",
"isOverlay": true,
- "rootPath": "https://opengis.simcoe.ca/public/basemap/ESRI_Streets_Night.json",
+ "rootPath": "/public/basemap/ESRI_Streets_Night.json",
"minZoom": 0,
"maxZoom": 23,
"excludePrint": true
From bc286400229090293d3822788b3be7975082d6b7 Mon Sep 17 00:00:00 2001
From: Tom <58078313+reed-tom@users.noreply.github.com>
Date: Mon, 12 Jun 2023 13:59:48 -0400
Subject: [PATCH 03/11] Add or update the Azure App Service build and
deployment workflow config
---
.github/workflows/rc-1.4_sc-dev-opengis.yml | 56 +++++++++++++++++++++
1 file changed, 56 insertions(+)
create mode 100644 .github/workflows/rc-1.4_sc-dev-opengis.yml
diff --git a/.github/workflows/rc-1.4_sc-dev-opengis.yml b/.github/workflows/rc-1.4_sc-dev-opengis.yml
new file mode 100644
index 00000000..6bd1ba20
--- /dev/null
+++ b/.github/workflows/rc-1.4_sc-dev-opengis.yml
@@ -0,0 +1,56 @@
+# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
+# More GitHub Actions for Azure: https://github.com/Azure/actions
+
+name: Build and deploy Node.js app to Azure Web App - sc-dev-opengis
+
+on:
+ push:
+ branches:
+ - rc/1.4
+ workflow_dispatch:
+
+jobs:
+ build:
+ runs-on: ubuntu-latest
+
+ steps:
+ - uses: actions/checkout@v2
+
+ - name: Set up Node.js version
+ uses: actions/setup-node@v1
+ with:
+ node-version: '18.x'
+
+ - name: npm install, build, and test
+ run: |
+ npm install
+ npm run build --if-present
+ npm run test --if-present
+
+ - name: Upload artifact for deployment job
+ uses: actions/upload-artifact@v2
+ with:
+ name: node-app
+ path: .
+
+ deploy:
+ runs-on: ubuntu-latest
+ needs: build
+ environment:
+ name: 'Production'
+ url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
+
+ steps:
+ - name: Download artifact from build job
+ uses: actions/download-artifact@v2
+ with:
+ name: node-app
+
+ - name: 'Deploy to Azure Web App'
+ id: deploy-to-webapp
+ uses: azure/webapps-deploy@v2
+ with:
+ app-name: 'sc-dev-opengis'
+ slot-name: 'Production'
+ publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_C8976875441C46BDB76D397A99640041 }}
+ package: .
From 5f135e79d7f7e0683ced2fdd1e3a390e39807a90 Mon Sep 17 00:00:00 2001
From: Tom <58078313+reed-tom@users.noreply.github.com>
Date: Wed, 2 Aug 2023 16:08:51 -0400
Subject: [PATCH 04/11] fixed 211 theme handling of null website data
---
src/sidebar/components/themes/twooneone/TwoOneOne.jsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/sidebar/components/themes/twooneone/TwoOneOne.jsx b/src/sidebar/components/themes/twooneone/TwoOneOne.jsx
index 177b2e04..7f5e963d 100644
--- a/src/sidebar/components/themes/twooneone/TwoOneOne.jsx
+++ b/src/sidebar/components/themes/twooneone/TwoOneOne.jsx
@@ -408,7 +408,7 @@ const Result = (props) => {
const { result } = props;
let style = props.style;
let website = result.website;
- if (website !== undefined && website.indexOf("http", 1) === -1) website = "https://" + website;
+ if (website && website.indexOf("http", 1) === -1) website = "https://" + website;
return (
-
- );
- }
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ hide: false,
+ };
+ }
+
+ onCloseClick = (value) => {
+ this.setState({ hide: true });
+ };
+
+ onPopoutClick = () => {
+ window.open(this.props.url, "_blank");
+ };
+
+ componentWillUnmount() {
+ this.sidebarEmitter.remove();
+ document.removeEventListener("keydown", this.escFunction, false);
+ }
+
+ componentDidMount() {
+ helpers.waitForLoad("settings", Date.now(), 30, () => {
+ this.storageKey = window.config.storageKeys.URLDontShowAgain;
+
+ try {
+ if (this.props.honorDontShow) {
+ const saved = this.getStorage();
+ if (saved !== null && saved !== undefined) {
+ if (saved.find((item) => (item.url !== undefined ? item.url.toLowerCase() === this.props.url.toLowerCase() : false))) this.setState({ hide: true });
+ }
+ }
+ } catch (e) {
+ console.log(e);
+ }
+
+ document.addEventListener("keydown", this.escFunction, false);
+ });
+ // LISTEN FOR SIDEPANEL CHANGES
+ this.sidebarEmitter = window.emitter.addListener("sidebarChanged", (isSidebarOpen) => this.sidebarChanged(isSidebarOpen));
+ }
+
+ isDontShow = () => {
+ try {
+ if (this.props.honorDontShow) {
+ const saved = this.getStorage();
+ if (saved !== null && saved !== undefined) {
+ return saved.find((item) => (item.url !== undefined ? item.url.toLowerCase() === this.props.url.toLowerCase() : false));
+ } else {
+ return false;
+ }
+ } else {
+ return false;
+ }
+ } catch (e) {
+ return false;
+ }
+
+ if (this.props.honorDontShow) {
+ const saved = this.getStorage();
+ if (saved.includes(this.props.url)) return true;
+ else return false;
+ }
+ };
+
+ sidebarChanged = (isSidebarOpen) => {
+ this.forceUpdate();
+ };
+
+ escFunction = (event) => {
+ if (event.keyCode === 27) {
+ this.setState({ hide: true });
+ }
+ };
+
+ onDontShowThisAgain = () => {
+ this.saveToStorage();
+ };
+
+ saveToStorage = () => {
+ let item = { url: this.props.url, dateAdded: new Date().toLocaleString() };
+ helpers.appendToStorage(this.storageKey, item);
+ this.setState({ hide: true });
+ };
+
+ // GET STORAGE
+ getStorage() {
+ const storage = localStorage.getItem(this.storageKey);
+ if (storage === null) return [];
+
+ const data = JSON.parse(storage);
+ return data;
+ }
+
+ render() {
+ // DONT RENDER IF WERE NOT SHOWING, OTHERWISE ALL DATA/IMAGES FROM URL LINK WILL DOWNLOAD
+ if (this.isDontShow()) return ;
+
+ let className = "";
+ if (this.state.hide) className = "sc-hidden";
+ else if (this.props.mode === "full") className = "full";
+ else if (!window.sidebarOpen) className = "full";
+
+ let hideScrollClassName = "";
+ if (this.props.hideScroll) hideScrollClassName = "sc-url-window-content-no-scroll";
+ return (
+
-
- Information
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ );
+ }
}
export default URLWindow;
@@ -144,7 +144,7 @@ export default URLWindow;
// IMPORT ALL IMAGES
const images = importAllImages(require.context("./images", false, /\.(png|jpe?g|svg|gif)$/));
function importAllImages(r) {
- let images = {};
- r.keys().map((item, index) => (images[item.replace("./", "")] = r(item)));
- return images;
+ let images = {};
+ r.keys().map((item, index) => (images[item.replace("./", "")] = r(item)));
+ return images;
}
diff --git a/src/helpers/drawingHelpers.js b/src/helpers/drawingHelpers.js
index 18b2e428..c878330d 100644
--- a/src/helpers/drawingHelpers.js
+++ b/src/helpers/drawingHelpers.js
@@ -56,7 +56,7 @@ export function getFeatureById(id) {
}
export function getStyleFromJSON(styleJSON, pointType) {
- if (styleJSON === undefined || styleJSON === null) return getDefaultDrawStyle("#e809e5");
+ if (styleJSON === undefined || styleJSON === null) return getDefaultDrawStyle({ drawColor: "#e809e5" });
// FILL
let fill = null;
@@ -156,33 +156,40 @@ export function getStyleFromJSON(styleJSON, pointType) {
return style;
}
-export function getDefaultDrawStyle(drawColor, isText = false, strokeWidth = 3, pointType = "circle", geometryType) {
+export function getDefaultDrawStyle(opts) {
+ //{drawColor, isText = false, strokeWidth = 3, pointType = "circle", geometryType) {
+ let { drawColor, strokeColor, strokeOpacity, fillColor, fillOpacity, strokeWidth, pointType, geometryType, isText } = opts;
+ let hexColor = "#e809e5";
+ if (drawColor) hexColor = asArray(drawColor);
if (isText === undefined) isText = false;
if (strokeWidth === undefined) strokeWidth = 3;
+ if (pointType === undefined) pointType = "circle";
+ if (strokeColor === undefined) strokeColor = hexColor.slice();
+ else strokeColor = asArray(strokeColor).slice();
+ if (fillColor === undefined) fillColor = hexColor.slice();
+ else fillColor = asArray(fillColor).slice();
+ if (strokeOpacity === undefined) strokeOpacity = 0.8;
+ if (fillOpacity === undefined) fillOpacity = 0.4;
- // UPDATE FILL COLOR OPACITY
- var initialOpacity = 0.8;
- var hexColor = drawColor;
- var color = asArray(hexColor);
- color = color.slice();
- color[3] = isText ? 0 : initialOpacity; // change the alpha of the color
+ fillColor[3] = isText ? 0 : fillOpacity; // change the alpha of the color
+ strokeColor[3] = isText ? 0 : strokeOpacity; // change the alpha of the color
let drawStyle = new Style({
fill: new Fill({
- color: color, // USE OPACITY
+ color: fillColor, // USE OPACITY
}),
stroke: new Stroke({
- color: geometryType === "Polygon" || geometryType === "Circle" ? [0, 0, 0, 0.8] : color,
+ color: geometryType === "Polygon" || geometryType === "Circle" ? [0, 0, 0, 0.8] : strokeColor,
width: strokeWidth,
}),
image: new CircleStyle({
radius: 4,
stroke: new Stroke({
- color: isText ? color : [0, 0, 0, initialOpacity],
+ color: isText ? strokeColor : [0, 0, 0, strokeOpacity],
width: strokeWidth,
}),
fill: new Fill({
- color: color,
+ color: fillColor,
}),
}),
});
@@ -455,7 +462,6 @@ export function convertLineToArrow(geometry) {
export function importMyMaps(id, callback2) {
helpers.waitForLoad("settings", Date.now(), 30, () => {
helpers.getJSON(`${window.config.apiUrl}public/map/mymaps/${id}`, (result) => {
- console.log(result);
callback2(result);
});
});
@@ -479,7 +485,7 @@ export function exportMyMaps(callback2, id = null) {
}
}
- helpers.postJSON(window.config.apiUrl + "public/map/mymaps", data, (result) => {
+ helpers.postJSON(window.config.apiUrl + "public/map/mymaps/", data, (result) => {
callback2(result);
});
});
diff --git a/src/helpers/helpers.js b/src/helpers/helpers.js
index fd5eec82..c39bef9f 100644
--- a/src/helpers/helpers.js
+++ b/src/helpers/helpers.js
@@ -11,7 +11,6 @@ import MVT from "ol/format/MVT";
import VectorTileSource from "ol/source/VectorTile";
// import stylefunction from "ol-mapbox-style/dist/stylefunction";
import { stylefunction } from "ol-mapbox-style";
-
//import {file as FileLoader} from "ol/featureloader.js";
import { GeoJSON, WKT } from "ol/format.js";
import TileGrid from "ol/tilegrid/TileGrid.js";
@@ -913,6 +912,10 @@ export function toTitleCase(str) {
// e.target.dispatchEvent(evt);
// }
+// GET FEATURES FROM GEOJSON
+export function getFeaturesFromGeoJSON(geoJSON) {
+ return new GeoJSON().readFeatures(geoJSON);
+}
// GET FEATURE FROM GEOJSON
export function getFeatureFromGeoJSON(geoJSON) {
return new GeoJSON().readFeature(geoJSON);
@@ -1162,13 +1165,12 @@ export function getGeometryFromGeoJSON(geometry) {
}
//Generate Feature Reports for a Polygon (reproting area)
-export function generateReport(feature, reportObj, buffer = 0, callback = undefined) {
- const report = reportObj.report;
- const url = mainConfig.reportsUrl + 'Report/' + report;
+export function generateReport(feature, report, buffer = 0, callback = undefined) {
+ const url = mainConfig.reportsUrl + report;
let geom = feature.getGeometry();
//const utmNad83Geometry = geom.transform("EPSG:3857", _nad83Proj);
const geoJSON = getGeoJSONFromGeometry(geom);
- const obj = { geoJSON: geoJSON, srid: "3857", buffer: buffer, reportObj:reportObj};
+ const obj = { geoJSON: geoJSON, srid: "3857", buffer: buffer };
return fetch(url, {
method: "POST", // *GET, POST, PUT, DELETE, etc.
mode: "cors", // no-cors, cors, *same-origin
@@ -1196,29 +1198,34 @@ export function generateReport(feature, reportObj, buffer = 0, callback = undefi
export function download(url, filename = undefined, options = undefined) {
if (!options) options = {};
try {
+ var link = document.createElement("a");
+
if (options.isBlob) {
url = window.URL.createObjectURL(url);
}
- var link = document.createElement("a");
- link.setAttribute("href", url);
+ link.setAttribute("href", `${url}`);
link.setAttribute("target", "_blank");
link.setAttribute("rel", "noopener noreferrer");
- if (!isLoaded("apptrack-theme")) link.setAttribute("download", filename);
+ if (filename) {
+ link.setAttribute("download", filename);
document.body.appendChild(link); // Required for FF
link.click();
document.body.removeChild(link); //afterwards we remove the element again
+ if (options.isBlob) URL.revokeObjectURL(link.href);
+ } else {
+ window.open(url, `_blank`);
+ }
} catch (e) {
window.open(url, `_blank`);
}
}
-export function previewReport(feature, reportObj, buffer = 0, callback) {
- const report = reportObj.report;
- const url = mainConfig.reportsUrl + 'ReportPreview/' + report;
+export function previewReport(feature, report, buffer = 0, callback) {
+ const url = mainConfig.reportsUrl + report;
let geom = feature.getGeometry();
//const utmNad83Geometry = geom.transform("EPSG:3857", _nad83Proj);
const geoJSON = getGeoJSONFromGeometry(geom);
- const obj = { geoJSON: geoJSON, srid: "3857", buffer: buffer, reportObj:reportObj};
+ const obj = { geoJSON: geoJSON, srid: "3857", buffer: buffer };
return fetch(url, {
method: "POST", // *GET, POST, PUT, DELETE, etc.
mode: "cors", // no-cors, cors, *same-origin
@@ -1318,34 +1325,36 @@ export function removeURLParameter(url, parameter) {
}
return url;
}
-export function FeatureContent(props) {
+
+export function FilterKeys(feature) {
//WILDCARD = .*
//LITERAL STRING = [] EG: [_][.]
//NOT STRING = (?!string) EG: geostasis[.](?!test).*
const filterKeys = ["[_].*", "id", "geometry", "geom", "extent_geom", ".*gid.*", "globalid", "objectid.*", "shape.*", "displayfieldname", "displayfieldvalue", "geostasis[.].*", ".*fid.*"];
+ const featureProps = feature.getProperties();
- const featureProps = props.feature.getProperties();
let keys = Object.keys(featureProps);
const filterByKeyName = (keyName) => {
return (
filterKeys.filter((filterItem) => {
let returnValue = false;
- //returnValue = filterItem === keyName; //check for exact match
- //if (!returnValue){
var regexTest = new RegExp(`^${filterItem}$`);
returnValue = regexTest.test(keyName);
- //}
return returnValue;
}).length === 0
);
};
keys = keys.filter((key, i) => {
const keyName = key.toLowerCase();
- let val = props.feature.get(key);
+ let val = feature.get(key);
if (val === null) val = "";
if (typeof val === "object") return false; //EXCLUDE ALL OBJECT FIELDS
return filterByKeyName(keyName);
});
+ return keys;
+}
+export function FeatureContent(props) {
+ let keys = FilterKeys(props.feature);
return (
+
+ Information
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{keys.map((keyName, i) => {
@@ -1694,12 +1703,14 @@ export function mergeObjArray(targetArray, sourceArray) {
});
return resultArray.concat(sourceArray);
}
-export function mergeObj(targetObj, sourceObj) {
+export function mergeObj(targetObj, sourceObj, append = false) {
Object.keys(sourceObj).forEach((key) => {
if (typeof targetObj[key] === "object" && !(targetObj[key] instanceof Array)) {
targetObj[key] = mergeObj(targetObj[key], sourceObj[key]);
} else {
- targetObj[key] = sourceObj[key];
+ if (targetObj[key] instanceof Array && append) {
+ targetObj[key] = [].concat(sourceObj[key], targetObj[key]);
+ } else targetObj[key] = sourceObj[key];
}
});
return targetObj;
@@ -1795,3 +1806,21 @@ export function getBaseUrl(url) {
splitUrl.slice(0, 3);
return splitUrl.slice(0, 3).join("/");
}
+
+export function getCentroidCoords(geom) {
+ const area = geom.getArea();
+ const points = geom.getCoordinates();
+ const allPoints = points.flatMap((point) => point);
+ let x = 0;
+ let y = 0;
+ for (let i = 0, j = allPoints.length - 1; i < allPoints.length; j = i, i++) {
+ const point1 = allPoints[i];
+ const point2 = allPoints[j];
+ const f = point1[0] * point2[1] - point2[0] * point1[1];
+ x += (point1[0] + point2[0]) * f;
+ y += (point1[1] + point2[1]) * f;
+ }
+
+ const f = area * 6;
+ return [x / f, y / f];
+}
diff --git a/src/helpers/images/email-icon.png b/src/helpers/images/email-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..7725dbd71b2cbc5b58ce8f802bb238da5adcae3d
GIT binary patch
literal 410
zcmV;L0cHM)P)LW5&?XA?7qqxEG)N6DE;fWiLxWR`YlGFl&>T%o
z1^sg92feVcM}l^4PY8pkmp-_|(Z
z!^i}B#khg)RY&g4ssTjDvAu3img|SgN`Bp5IRX|LDoDEcK
z&=Z2IJBZGG-Ld3ye*%$y>7WXsKnutzKyIO&#jxt&3)+<}OU8KWi$SAe_%W-#|N7%qQ%+b>e-{1QBJV9`kk^tGQwLyD{v1V~Ktbg)5KbNU?!lHA7B
z26{Oxuag)LI|FV^8DWPbRaYiwRhB~nA=vB6&(zWL0l6G!nWV~x-v9sr07*qoM6N<$
Ef*Ja>aR2}S
literal 0
HcmV?d00001
diff --git a/src/helpers/images/information.png b/src/helpers/images/information.png
new file mode 100644
index 0000000000000000000000000000000000000000..12cd1aef900803abba99b26920337ec01ad5c267
GIT binary patch
literal 778
zcmV+l1NHogP)BVme|mWaqy4$_pJm?y9KM{-*hp?1+Ey3e-CEDooTa!B;e(Q>TSF?bj>5At13y1p
zriN3w3x~5SfZj{@J4M{kp{?=M_Lh2bV+5LH)Q)5W!-ePA$RgE1@5f1cyHki0Y}JyVEYZF(LD$xXlt$7A5CgE@
zpV-&l%vf;=5kZ2-2gi@Y6J&=cuwt>!vJ^#(&n|LcZyUzi6Duj$$hJ1s*HD-#;k-w@
zpdrwAuoDG_N2bvb07G$Zk*?Hc)JLtW4yqOnic_$zO7NZ#l>Fm){;fE?b$IbOaX2fe
z0la4g0Dfw2xk7Wi7NapVD8YMPCZu?A1QCK*67dgsvRKBLFtrM>?$%&_lD1882mzdO
zWPdw5KWw6IT`m1b_8=lS5jt8D3=RDa=&jWzR-)S@56WMslZ~mKu1)-wpXB>rNBQ>N
zU#K`#1B&v|_AQK;7I~B}OdGiUT9LX>f0xm6<;LeP!=vFjPsUQF*wCJ*dO)4YBypgdiuF!=i@6Zyi7F|q#K
zz?tlSZULa@t1D?$e;f@b36&N!V2mjOHw|*sm$HQ(N)Ek<
zrc#vXMLdW}TWpphCZsGREkUZr{Mg;M&b;luZ0IGA9rnH1`DVU1->eh_0hG(-dw<@)
z-1S-xc+D!@wd^?Z=a`M%%phe@J_EnT0QpH7V3
jcG~XA#&PRl)Zh6(yXt(^KFGF}00000NkvXXu0mjfDwr>g
literal 0
HcmV?d00001
diff --git a/src/layerInfo/App.js b/src/layerInfo/App.js
index d1520cc6..d63ccb5b 100644
--- a/src/layerInfo/App.js
+++ b/src/layerInfo/App.js
@@ -6,7 +6,8 @@ import * as helpers from "../helpers/helpers";
import mainConfig from "./config.json";
import ReactGA from "react-ga4";
-if (mainConfig.googleAnalyticsID !== undefined && mainConfig.googleAnalyticsID !== "") {
+const enableAnalytics = helpers.getURLParameter("ANALYTICS") !== "off";
+if (mainConfig.googleAnalyticsID !== undefined && mainConfig.googleAnalyticsID !== "" && enableAnalytics) {
ReactGA.initialize(mainConfig.googleAnalyticsID);
ReactGA.send({ hitType: "pageview", page: window.location.pathname + window.location.search });
}
diff --git a/src/layerInfo/config.json b/src/layerInfo/config.json
index dfe1eb1f..eb2a0f58 100644
--- a/src/layerInfo/config.json
+++ b/src/layerInfo/config.json
@@ -1,4 +1,3 @@
{
- "googleAnalyticsID": "G-GC5RRXFML6",
- "googleAnalyticsID_Old": "UA-3104541-53"
+ "googleAnalyticsID": "G-GC5RRXFML6"
}
diff --git a/src/legend/App.js b/src/legend/App.js
index 7806b657..0d6d4b1d 100644
--- a/src/legend/App.js
+++ b/src/legend/App.js
@@ -15,7 +15,8 @@ import mainConfig from "./config.json";
import ReactGA from "react-ga4";
import xml2js from "xml2js";
-if (mainConfig.googleAnalyticsID !== undefined && mainConfig.googleAnalyticsID !== "") {
+const enableAnalytics = helpers.getURLParameter("ANALYTICS") !== "off";
+if (mainConfig.googleAnalyticsID !== undefined && mainConfig.googleAnalyticsID !== "" && enableAnalytics) {
ReactGA.initialize(mainConfig.googleAnalyticsID);
ReactGA.send({ hitType: "pageview", page: window.location.pathname + window.location.search });
}
diff --git a/src/legend/config.json b/src/legend/config.json
index 5797d446..017527d8 100644
--- a/src/legend/config.json
+++ b/src/legend/config.json
@@ -1,5 +1,4 @@
{
"googleAnalyticsID": "G-GC5RRXFML6",
- "googleAnalyticsID_Old": "UA-3104541-53",
"geoserverLayerGroupsUrl": "https://opengis.simcoe.ca/geoserver/simcoe/Config_Public_Default/ows?service=wms&version=1.3.0&request=GetCapabilities"
}
diff --git a/src/map/Attachments.jsx b/src/map/Attachments.jsx
new file mode 100644
index 00000000..fdbc345d
--- /dev/null
+++ b/src/map/Attachments.jsx
@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from "react";
+import * as helpers from "../helpers/helpers";
+
+const Attachments = (props) => {
+ const [attachments, setAttachments] = useState([]);
+ useEffect(() => {
+ helpers.getJSONWithParams(props.attachmentUrl, {}, (attachments) => {
+ if (attachments.attachmentGroups && attachments.attachmentGroups.length > 0) {
+ setAttachments(attachments.attachmentGroups[0].attachmentInfos);
+ //console.log(attachments.attachmentGroups[0].attachmentInfos);
+ }
+ });
+ }, [props.attachmentUrl]);
+
+ return (
+
diff --git a/src/map/BasicBasemapSwitcher.jsx b/src/map/BasicBasemapSwitcher.jsx
index 1af88549..dd0bcd43 100644
--- a/src/map/BasicBasemapSwitcher.jsx
+++ b/src/map/BasicBasemapSwitcher.jsx
@@ -27,6 +27,7 @@ class BasicBasemapSwitcher extends Component {
toggleIndex: 1,
previousIndex: undefined,
showBaseMapSwitcher: true,
+ baseMapServicesOptions: BasemapConfig,
};
// LISTEN FOR MAP TO MOUNT
@@ -43,13 +44,18 @@ class BasicBasemapSwitcher extends Component {
// LOAD BASEMAP LAYERS
let basemapList = [];
//CHECK IF SETTINGS INCLUDES A BASEMAP LAYERS CONFIGURATION
- const baseMapServicesOptions = window.config.baseMapServices !== undefined ? window.config.baseMapServices : BasemapConfig.topoServices;
+ if (window.config.baseMapServices !== undefined) {
+ let basemapConfig = helpers.mergeObj(window.config.baseMapServices, BasemapConfig, true);
+ basemapConfig.topoServices = [...new Map(basemapConfig.topoServices.reverse().map((item) => [item["name"], item])).values()].reverse();
+ basemapConfig.imageryServices = [...new Map(basemapConfig.imageryServices.reverse().map((item) => [item["name"], item])).values()].reverse();
+ this.setState({ baseMapServicesOptions: basemapConfig });
+ }
//SET toggleService STATE BASED ON BASED LAYER OPTINS
- this.setState({ toggleService: baseMapServicesOptions[1] });
+ this.setState({ toggleService: this.state.baseMapServicesOptions.topoServices[1] });
//let basemapIndex = 0;
- baseMapServicesOptions.forEach((serviceGroup) => {
+ this.state.baseMapServicesOptions.topoServices.forEach((serviceGroup) => {
index = 0;
let serviceLayers = [];
serviceGroup.layers.forEach((service) => {
@@ -223,16 +229,14 @@ class BasicBasemapSwitcher extends Component {
};
onToggleBasemap = (index) => {
- const baseMapServicesOptions = window.config.baseMapServices !== undefined ? window.config.baseMapServices : BasemapConfig.topoServices;
-
if (index === this.state.topoActiveIndex) {
this.setState({ topoPanelOpen: false });
return;
}
let toggleIndex = this.state.topoActiveIndex;
if (toggleIndex === undefined) toggleIndex = 0;
- baseMapServicesOptions &&
- baseMapServicesOptions.forEach((service) => {
+ this.state.baseMapServicesOptions.topoServices &&
+ this.state.baseMapServicesOptions.topoServices.forEach((service) => {
if (service.index === toggleIndex) {
this.setState({ toggleService: service, toggleIndex: toggleIndex }, () => {
this.onTopoItemClick(index);
@@ -299,8 +303,6 @@ class BasicBasemapSwitcher extends Component {
}
}
render() {
- const baseMapServicesOptions = window.config.baseMapServices !== undefined ? window.config.baseMapServices : BasemapConfig.topoServices;
-
return (
+ {attachments.map((attachment) => (
+
+ );
+};
+
+const Attachment = (props) => {
+ const onAttachmentClick = (url, contentType) => {
+ if (contentType.includes("image")) {
+ helpers.showURLWindow(url, false);
+ } else {
+ window.open(url, "_blank");
+ }
+ };
+
+ return (
+ onAttachmentClick(props.url, props.contentType)}>
+ {props.title}
+
+ );
+};
+export default Attachments;
diff --git a/src/map/BMap.jsx b/src/map/BMap.jsx
index 7c7fc379..302091af 100644
--- a/src/map/BMap.jsx
+++ b/src/map/BMap.jsx
@@ -4,61 +4,32 @@ import BasicBasemapSwitcher from "./BasicBasemapSwitcher";
import * as helpers from "../helpers/helpers";
class BMap extends Component {
- constructor(props) {
- //IMPLEMENT OTHER JUNK HERE
- super(props);
- this.state = {
- baseMapType: null, //This is what basemap type will eventually be loaded into
- };
- }
-
-
- componentDidMount() {
- helpers.waitForLoad("settings", Date.now(), 30, () => {
-
- const basemap = (window.config.baseMapType !== undefined)
- ? window.config.baseMapType
- : "Default";
- this.setState({ baseMapType: basemap });
-
- });
- }
-
-
- render() {
-
- return (
-
-
- {
- (this.state.baseMapType == null )
- ? null
- :
-
- );
- }
+ constructor(props) {
+ //IMPLEMENT OTHER JUNK HERE
+ super(props);
+ this.state = {
+ baseMapType: null, //This is what basemap type will eventually be loaded into
+ };
+ }
+
+ componentDidMount() {
+ helpers.waitForLoad("settings", Date.now(), 30, () => {
+ const basemap = window.config.baseMapType !== undefined ? window.config.baseMapType : "Default";
+ this.setState({ baseMapType: basemap });
+ });
+ }
+
+ render() {
+ return {this.state.baseMapType == null ? null :
;
+ }
}
export default BMap;
-
class BMapItem extends Component {
- state = {};
-
- render() {
-
- return (
-
- {
+ state = {};
- (this.props.baseMapType.toLowerCase() == "basic")
- ?
- );
- }
-}
\ No newline at end of file
+ render() {
+ return {this.props.baseMapType.toLowerCase() == "basic" ?
;
+ }
+}
diff --git a/src/map/BasemapSwitcher.jsx b/src/map/BasemapSwitcher.jsx
index d6235468..19567e13 100644
--- a/src/map/BasemapSwitcher.jsx
+++ b/src/map/BasemapSwitcher.jsx
@@ -13,7 +13,8 @@ class BasemapSwitcher extends Component {
super(props);
this.state = {
- imagerySliderMarks: this.getImagerySliderMarks(),
+ baseMapServicesOptions: BasemapConfig,
+ imagerySliderMarks: this.getImagerySliderMarks(BasemapConfig),
imagerySliderMin: 0,
imagerySliderMax: BasemapConfig.imageryServices.length - 1,
imagerySliderDefaultValue: BasemapConfig.imageryServices.length - 1,
@@ -40,13 +41,13 @@ class BasemapSwitcher extends Component {
helpers.waitForLoad("map", Date.now(), 30, () => this.onMapLoad());
}
// CREATE YEAR MARKS ON THE SLIDER
- getImagerySliderMarks() {
- const numServices = BasemapConfig.imageryServices.length;
+ getImagerySliderMarks(options) {
+ const numServices = options.imageryServices.length;
if (numServices < 2) return {};
let marks = {};
for (let index = 0; index < numServices; index++) {
- marks[index] = BasemapConfig.imageryServices[index].name;
+ marks[index] = options.imageryServices[index].name;
}
return marks;
}
@@ -56,7 +57,23 @@ class BasemapSwitcher extends Component {
let layerList = [];
let index = 0;
- BasemapConfig.imageryServices.forEach((service) => {
+ if (window.config.baseMapServices !== undefined) {
+ let basemapConfig = helpers.mergeObj(window.config.baseMapServices, BasemapConfig, true);
+ basemapConfig.topoServices = [...new Map(basemapConfig.topoServices.reverse().map((item) => [item["name"], item])).values()].reverse();
+ basemapConfig.imageryServices = [...new Map(basemapConfig.imageryServices.reverse().map((item) => [item["name"], item])).values()].reverse();
+
+ this.setState({ baseMapServicesOptions: basemapConfig }, () => {
+ this.setState({
+ imagerySliderMarks: this.getImagerySliderMarks(this.state.baseMapServicesOptions),
+ imagerySliderMax: this.state.baseMapServicesOptions.imageryServices.length - 1,
+ imagerySliderDefaultValue: this.state.baseMapServicesOptions.imageryServices.length - 1,
+ imagerySliderValue: this.state.baseMapServicesOptions.imageryServices.length - 1,
+ activeButton: this.state.baseMapServicesOptions.defaultButton,
+ });
+ });
+ }
+
+ this.state.baseMapServicesOptions.imageryServices.forEach((service) => {
// LayerHelpers.getCapabilities(service.url, "wmts", (layers) => {
// console.log(layers);
// });
@@ -80,7 +97,7 @@ class BasemapSwitcher extends Component {
newLayer.setVisible(false);
// SET MAIN LAYER VISIBLE
- if (BasemapConfig.imageryServices.length - 1 === index) {
+ if (this.state.baseMapServicesOptions.imageryServices.length - 1 === index) {
newLayer.setVisible(true);
this.setState({ imagerySliderValue: index });
}
@@ -96,22 +113,22 @@ class BasemapSwitcher extends Component {
this.setState({ imageryLayers: layerList });
// LOAD IMAGERY STREETS LAYER
- if (BasemapConfig.streetService.url !== undefined) {
+ if (this.state.baseMapServicesOptions.streetService.url !== undefined) {
LayerHelpers.getLayer(
{
sourceType: OL_DATA_TYPES.TileImage,
source: "WMS",
layerName: "streetServiceBasemap",
- url: BasemapConfig.streetService.url,
+ url: this.state.baseMapServicesOptions.streetService.url,
tiled: true,
name: "streetServiceBasemap",
},
(newLayer) => {
- //var streetsLayer = helpers.getSimcoeTileXYZLayer(BasemapConfig.streetService);
newLayer.setOpacity(0.75);
- newLayer.setZIndex(BasemapConfig.imageryServices.length);
- if (BasemapConfig.streetService.fullExtent) {
- newLayer.setExtent(BasemapConfig.streetService.fullExtent);
+ //var streetsLayer = helpers.getSimcoeTileXYZLayer(BasemapConfig.streetService);
+ newLayer.setZIndex(this.state.baseMapServicesOptions.imageryServices.length);
+ if (this.state.baseMapServicesOptions.streetService.fullExtent) {
+ newLayer.setExtent(this.state.baseMapServicesOptions.streetService.fullExtent);
}
window.map.addLayer(newLayer);
this.setState({ streetsLayer: newLayer });
@@ -120,21 +137,21 @@ class BasemapSwitcher extends Component {
}
// LOAD BATHYMETRY LAYER
- if (BasemapConfig.bathymetryService.url !== undefined) {
+ if (this.state.baseMapServicesOptions.bathymetryService.url !== undefined) {
LayerHelpers.getLayer(
{
sourceType: OL_DATA_TYPES.TileImage,
source: "WMS",
layerName: "bathymetryServiceBasemap",
- url: BasemapConfig.bathymetryService.url,
+ url: this.state.baseMapServicesOptions.bathymetryService.url,
tiled: true,
name: "bathymetryServiceBasemap",
},
(newLayer) => {
//var bathymetryLayer = helpers.getSimcoeTileXYZLayer(BasemapConfig.bathymetryService.url);
newLayer.setZIndex(0);
- if (BasemapConfig.bathymetryService.fullExtent) {
- newLayer.setExtent(BasemapConfig.bathymetryService.fullExtent);
+ if (this.state.baseMapServicesOptions.bathymetryService.fullExtent) {
+ newLayer.setExtent(this.state.baseMapServicesOptions.bathymetryService.fullExtent);
}
window.map.addLayer(newLayer);
@@ -144,13 +161,13 @@ class BasemapSwitcher extends Component {
}
// LOAD WORLD LAYER
- if (BasemapConfig.worldImageryService !== undefined) {
+ if (this.state.baseMapServicesOptions.worldImageryService !== undefined) {
LayerHelpers.getLayer(
{
sourceType: OL_DATA_TYPES.XYZ,
source: "WMS",
layerName: "worldImageryServiceBasemap",
- url: BasemapConfig.worldImageryService,
+ url: this.state.baseMapServicesOptions.worldImageryService,
tiled: true,
name: "worldImageryServiceBasemap",
},
@@ -166,7 +183,7 @@ class BasemapSwitcher extends Component {
// LOAD BASEMAP LAYERS
let basemapList = [];
//let basemapIndex = 0;
- BasemapConfig.topoServices.forEach((serviceGroup) => {
+ this.state.baseMapServicesOptions.topoServices.forEach((serviceGroup) => {
index = 0;
let serviceLayers = [];
serviceGroup.layers.forEach((service) => {
@@ -191,6 +208,7 @@ class BasemapSwitcher extends Component {
newLayer.setProperties({
index: index,
name: layerName,
+ excludePrint: service.excludePrint || false,
isOverlay: service.isOverlay || false,
});
serviceLayers.push(newLayer);
@@ -213,6 +231,8 @@ class BasemapSwitcher extends Component {
newLayer.setProperties({
index: index,
name: layerName,
+ excludePrint: service.excludePrint || false,
+
isOverlay: service.isOverlay || false,
});
serviceLayers.push(newLayer);
@@ -236,6 +256,8 @@ class BasemapSwitcher extends Component {
newLayer.setProperties({
index: index,
name: layerName,
+ excludePrint: service.excludePrint || false,
+
isOverlay: service.isOverlay || false,
});
serviceLayers.push(newLayer);
@@ -263,6 +285,8 @@ class BasemapSwitcher extends Component {
newLayer.setProperties({
index: index,
name: layerName,
+ excludePrint: service.excludePrint || false,
+
isOverlay: service.isOverlay || false,
});
serviceLayers.push(newLayer);
@@ -299,6 +323,8 @@ class BasemapSwitcher extends Component {
groupLayer.setProperties({
index: overlayIndex,
name: layerNameOnly,
+ excludePrint: false,
+
isOverlay: true,
});
serviceLayers.push(groupLayer);
@@ -622,7 +648,7 @@ class BasemapSwitcher extends Component {
Overlay
- {BasemapConfig.topoServices.map((service, index) => (
+ {this.state.baseMapServicesOptions.topoServices.map((service, index) => (
@@ -319,8 +321,8 @@ class BasicBasemapSwitcher extends Component {
- {baseMapServicesOptions &&
- baseMapServicesOptions.map((service, index) => (
+ {this.state.baseMapServicesOptions.topoServices &&
+ this.state.baseMapServicesOptions.topoServices.map((service, index) => (
this.onMapLoad());
-
- this.setState({ showScale: window.mapControls.scale });
+ helpers.waitForLoad("settings", Date.now(), 30, () => this.setState({ scaleSelector: window.mapControls.scaleSelector, showScale: window.mapControls.scale }));
}
onMapLoad() {
const initScale = helpers.getMapScale();
-
this.setState({
scale: initScale.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","),
});
window.map.on("moveend", () => {
const scale = helpers.getMapScale();
-
this.setState({
scale: scale.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","),
// currentScale: scale,
@@ -118,7 +116,7 @@ class FooterTools extends Component {
}
}, 10);
- const scale = window.mapControls.scaleSelector ? (
+ const scale = this.state.scaleSelector ? (
@@ -369,8 +378,29 @@ function _getLayerObj(layerName, callback = undefined) {
});
}
+const onExportClick = (title, data) => {
+ var fields = helpers.FilterKeys(data[0]);
+ var headers = fields.map((field) => `"${field}"`).join(",");
+ var csv = data.map(function (row) {
+ return fields
+ .map(function (fieldName) {
+ return row.values_[fieldName] === null ? "" : `"${row.values_[fieldName]}"`;
+ })
+ .join(",");
+ });
+ csv.unshift(headers); // add header column
+ csv = csv.join("\r\n");
+ console.log(csv);
+ csv = csv.replaceAll("#", "Number");
+ let csvContent = "data:text/csv;charset=utf-8," + csv;
+ console.log(csvContent);
+ var encodedUri = encodeURI(csvContent);
+ console.log(encodedUri);
+ helpers.download(encodedUri, `${title} export.csv`);
+};
+
const Layer = (props) => {
- const [open, setOpen] = useState(true);
+ const [open, setOpen] = useState(props.expanded !== undefined ? props.expanded : true);
const { layer } = props;
@@ -382,7 +412,15 @@ const Layer = (props) => {
});
return (
Scale:
{this.state.layers.map((layer) => (
-
+
+ {
- return key.indexOf("login.microsoftonline.com") !== -1;
- })}
- clearLocalData={this.clearLocalData}
- />
diff --git a/src/sidebar/images/loading.gif b/src/sidebar/images/loading.gif
new file mode 100644
index 0000000000000000000000000000000000000000..4ee89c425435914e59da2fb90fab53f4fc290e92
GIT binary patch
literal 14917
zcmdVhSx^&pyy)@lWG4X(yM(YM5FlXKQL~YR#Sjn>5pCF46$KFyZ8jjRhE+gBKtx1D
zP*mJQKm{props.layer.features.length}
1 && window.config.allowIdentifyExport ? "sc-identify-export-csv" : "sc-hidden"}>
+ [
+ onExportClick(layer.type, props.layer.features)}>
+ Export to csv
+
+ ]
+
{props.layer.features.map((feature) => (
this.sidebarChanged(isSidebarOpen));
+ this.state = {
+ containerClassName: "nav-container",
+ showCurrentLocation: true,
+ showZoomExtent: true,
+ extentHistory: [0, 1],
+ showGridButton: true,
+ showGrid: false,
+ };
- // LISTEN FOR HISTORY CHANGES
- window.emitter.addListener("extentHistoryChanged", (index, count) => this.extentHistoryChanged([index, count]));
+ // LISTEN FOR SIDEPANEL CHANGES
+ window.emitter.addListener("sidebarChanged", (isSidebarOpen) => this.sidebarChanged(isSidebarOpen));
- // LISTEN FOR CONTROL VISIBILITY CHANGES
- window.emitter.addListener("mapControlsChanged", (control, visible) => this.controlStateChange(control, visible));
- }
+ // LISTEN FOR HISTORY CHANGES
+ window.emitter.addListener("extentHistoryChanged", (index, count) => this.extentHistoryChanged([index, count]));
- componentDidMount() {
- this.setState({
- showCurrentLocation: window.mapControls.currentLocation,
- showZoomExtent: window.mapControls.zoomExtent,
- });
- }
+ // LISTEN FOR CONTROL VISIBILITY CHANGES
+ window.emitter.addListener("mapControlsChanged", (control, visible) => this.controlStateChange(control, visible));
+ }
- extentHistoryChanged(extentHistory) {
- this.setState({ extentHistory });
- }
- // ZOOM TO FULL EXTENT
- zoomFullExtent() {
- helpers.waitForLoad("settings", Date.now(), 30, () => {
- let centerCoords = window.config.centerCoords;
- let defaultZoom = window.config.defaultZoom;
- window.map.getView().animate({ center: centerCoords, zoom: defaultZoom });
- });
- }
+ componentDidMount() {
+ helpers.waitForLoad(["settings", "map"], Date.now(), 30, () => {
+ this.graticule = new Graticule({
+ // the style to use for the lines, optional.
+ strokeStyle: new Stroke({
+ color: "rgba(255,120,0,0.9)",
+ width: 2,
+ lineDash: [0.5, 4],
+ }),
+ showLabels: true,
+ wrapX: false,
+ zIndex: 10000,
+ });
+ });
+ this.setState({
+ showCurrentLocation: window.mapControls && window.mapControls.currentLocation,
+ showZoomExtent: window.mapControls && window.mapControls.zoomExtent,
+ showGridButton: window.mapControls && window.mapControls.showGrid,
+ });
+ }
- // ZOOM TO CURRENT LOCATION
- zoomToCurrentLocation() {
- var options = { timeout: 5000 };
- navigator.geolocation.getCurrentPosition(
- function (pos) {
- const coords = fromLonLat([pos.coords.longitude, pos.coords.latitude]);
- helpers.flashPoint(coords);
- },
- (err) => {
- helpers.showMessage("Location", "Getting your location failed: " + err.message);
- },
- options
- );
+ extentHistoryChanged(extentHistory) {
+ this.setState({ extentHistory });
+ }
+ // ZOOM TO FULL EXTENT
+ zoomFullExtent() {
+ helpers.waitForLoad("settings", Date.now(), 30, () => {
+ let centerCoords = window.config.centerCoords;
+ let defaultZoom = window.config.defaultZoom;
+ window.map.getView().animate({ center: centerCoords, zoom: defaultZoom });
+ });
+ }
+ showGrid = () => {
+ this.setState({ showGrid: !this.state.showGrid }, () => {
+ if (this.state.showGrid) window.map.addLayer(this.graticule);
+ else window.map.removeLayer(this.graticule);
+ });
+ };
+ // ZOOM TO CURRENT LOCATION
+ zoomToCurrentLocation() {
+ var options = { timeout: 5000 };
+ navigator.geolocation.getCurrentPosition(
+ function (pos) {
+ const coords = fromLonLat([pos.coords.longitude, pos.coords.latitude]);
+ helpers.flashPoint(coords);
+ },
+ (err) => {
+ helpers.showMessage("Location", "Getting your location failed: " + err.message);
+ },
+ options
+ );
- helpers.addAppStat("Current Location", "Click");
- }
+ helpers.addAppStat("Current Location", "Click");
+ }
- // HANDLE SIDEBAR CHANGES
- sidebarChanged(isSidebarOpen) {
- // SIDEBAR IN AND OUT
- if (isSidebarOpen) {
- this.setState({
- containerClassName: "nav-container nav-container-slideout",
- });
- } else {
- this.setState({
- containerClassName: "nav-container nav-container-slidein",
- });
- }
- }
- controlStateChange(control, state) {
- switch (control) {
- case "fullExtent":
- this.setState({ showZoomExtent: state });
- break;
- case "zoomToCurrentLocation":
- this.setState({ showCurrentLocation: state });
- break;
- default:
- break;
- }
- }
+ // HANDLE SIDEBAR CHANGES
+ sidebarChanged(isSidebarOpen) {
+ // SIDEBAR IN AND OUT
+ if (isSidebarOpen) {
+ this.setState({
+ containerClassName: "nav-container nav-container-slideout",
+ });
+ } else {
+ this.setState({
+ containerClassName: "nav-container nav-container-slidein",
+ });
+ }
+ }
+ controlStateChange(control, state) {
+ switch (control) {
+ case "fullExtent":
+ this.setState({ showZoomExtent: state });
+ break;
+ case "zoomToCurrentLocation":
+ this.setState({ showCurrentLocation: state });
+ break;
+ case "showExtent":
+ this.setState({ showGridButton: state });
+ break;
+ default:
+ break;
+ }
+ }
- render() {
- return (
-
Click here for a high resolution screenshot
-
{/* MAP TITLE */}
-
-
{/* PRINT SIZE */}
-
{/* FORMAT */}
-
+
-
+ );
+ }
}
export default Navigation;
diff --git a/src/map/OLOverrides.css b/src/map/OLOverrides.css
index 02818d4e..90d54d95 100644
--- a/src/map/OLOverrides.css
+++ b/src/map/OLOverrides.css
@@ -2,147 +2,148 @@
/* SIMCOE COUNTY THEME OVERRIDES */
/* ------------------------- */
.map-theme .ol-zoom {
- display: none;
+ display: none;
}
.map-theme .ol-scale-line {
- right: 5px;
- left: auto !important;
- bottom: 5px;
+ right: 5px;
+ left: auto !important;
+ bottom: 5px;
}
.map-theme .ol-full-screen {
- left: 5px;
- bottom: 5px;
- right: auto;
- top: auto;
+ left: 5px;
+ bottom: 5px;
+ right: auto;
+ top: auto;
}
.map-theme .ol-popup {
- display: none;
- position: absolute;
- background-color: white;
- /* padding: 15px 25px 15px 15px; */
- border: 1px solid #cccccc;
- bottom: 12px;
- left: -50px;
- max-width: 270px !important;
- border-radius: 3px !important;
+ display: none;
+ position: absolute;
+ background-color: white;
+ /* padding: 15px 25px 15px 15px; */
+ border: 1px solid #cccccc;
+ bottom: 12px;
+ left: -50px;
+ max-width: 270px !important;
+ border-radius: 3px !important;
}
.map-theme .ol-popup:after,
.map-theme .ol-popup:before {
- top: 100%;
- border: solid transparent;
- content: " ";
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
+ top: 100%;
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
}
.map-theme .ol-popup:after {
- border-top-color: white;
- border-width: 10px;
- left: 48px;
- margin-left: -10px;
+ border-top-color: white;
+ border-width: 10px;
+ left: 48px;
+ margin-left: -10px;
}
.map-theme .ol-popup:before {
- border-top-color: #cccccc;
- border-width: 11px;
- left: 48px;
- margin-left: -11px;
+ border-top-color: #cccccc;
+ border-width: 11px;
+ left: 48px;
+ margin-left: -11px;
}
.map-theme .ol-popup-content {
- position: relative;
- width: 258px;
- max-width: 258px !important;
- z-index: 1;
- padding: 6px !important;
- background-color: #fff !important;
- max-height: 275px !important;
- min-height: 50px !important;
- overflow: hidden;
+ position: relative;
+ width: 258px;
+ max-width: 258px !important;
+ z-index: 1;
+ padding: 6px !important;
+ background-color: #fff !important;
+ max-height: 275px !important;
+ min-height: 50px !important;
+ overflow: hidden;
+ overflow-y: auto;
}
.map-theme .ol-popup-closer {
- position: absolute;
- top: 6px;
- right: 2px;
- font-size: 15pt;
- padding: 0 4px;
- color: white;
- text-decoration: none;
+ position: absolute;
+ top: 6px;
+ right: 2px;
+ font-size: 15pt;
+ padding: 0 4px;
+ color: white;
+ text-decoration: none;
}
.map-theme .ol-popup-closer:after {
- content: "\2716";
+ content: "\2716";
}
.map-theme .ol-popup div.infoResult {
- min-width: 130px;
+ min-width: 130px;
}
.map-theme .ol-popup div.infoResult p {
- padding: 0.1em;
- margin: 0;
+ padding: 0.1em;
+ margin: 0;
}
.map-theme .ol-popup-content h3 {
- margin: 0.25em 0;
+ margin: 0.25em 0;
}
.map-theme .ol-popup.marker {
- margin-bottom: 30px;
+ margin-bottom: 30px;
}
.map-theme .ol-full-screen {
- bottom: 5px;
- left: 4px;
- position: absolute;
- text-align: center;
- cursor: pointer;
- padding: 3px !important;
- padding-left: 5px !important;
- padding-right: 5px !important;
- background-color: rgba(255, 255, 255, 0.5);
- border: 1px solid #949494;
- border-radius: 3px;
- box-shadow: 0 0 10px 0px;
- z-index: 100 !important;
+ bottom: 5px;
+ left: 4px;
+ position: absolute;
+ text-align: center;
+ cursor: pointer;
+ padding: 3px !important;
+ padding-left: 5px !important;
+ padding-right: 5px !important;
+ background-color: rgba(255, 255, 255, 0.5);
+ border: 1px solid #949494;
+ border-radius: 3px;
+ box-shadow: 0 0 10px 0px;
+ z-index: 100 !important;
}
.map-theme .ol-attribution {
- display: none;
+ display: none;
}
@media only screen and (max-width: 770px) {
- .map-theme .ol-full-screen {
- display: none !important;
- }
- .map-theme .ol-scale-line {
- left: 5px;
- }
- .map-theme .ol-overlaycontainer-stopevent {
- z-index: 1 !important;
- }
+ .map-theme .ol-full-screen {
+ display: none !important;
+ }
+ .map-theme .ol-scale-line {
+ left: 5px;
+ }
+ .map-theme .ol-overlaycontainer-stopevent {
+ z-index: 1 !important;
+ }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
- .map-theme .ol-full-screen {
- display: none !important;
- }
- .map-theme .ol-scale-line {
- left: 5px;
- }
+ .map-theme .ol-full-screen {
+ display: none !important;
+ }
+ .map-theme .ol-scale-line {
+ left: 5px;
+ }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
- .ol-full-screen {
- display: none !important;
- }
- .ol-scale-line {
- left: 5px;
- }
+ .ol-full-screen {
+ display: none !important;
+ }
+ .ol-scale-line {
+ left: 5px;
+ }
}
diff --git a/src/map/PropertyReportClick.jsx b/src/map/PropertyReportClick.jsx
index 0a93f9ae..1eda7052 100644
--- a/src/map/PropertyReportClick.jsx
+++ b/src/map/PropertyReportClick.jsx
@@ -281,7 +281,6 @@ class PropertyReportClick extends Component {
var latLongCoords = null;
var pointerPoint = null;
if (clickEvt === null) {
- console.log("in");
helpers.getGeometryCenter(feature.getGeometry(), (center) => {
pointerPoint = center.flatCoordinates;
latLongCoords = helpers.toLatLongFromWebMercator(pointerPoint);
diff --git a/src/map/SCMap.jsx b/src/map/SCMap.jsx
index f8233e3d..cec54041 100644
--- a/src/map/SCMap.jsx
+++ b/src/map/SCMap.jsx
@@ -386,21 +386,21 @@ class SCMap extends Component {
if (id === "true" || (window.config.onCoordinateZoomID !== undefined && window.config.onCoordinateZoomID !== null && window.config.onCoordinateZoomID)) {
const iconFeature = new Feature({
geometry: new Point(coords),
- });
-
- const iconStyle = new Style({
+ });
+
+ const iconStyle = new Style({
image: new Icon({
anchor: [0.5, 1],
src: images["identify-marker.png"],
}),
- });
-
- iconFeature.setStyle(iconStyle);
- this.identifyIconLayer.getSource().clear();
- window.map.removeLayer(this.identifyIconLayer);
- this.identifyIconLayer.getSource().addFeature(iconFeature);
- window.map.addLayer(this.identifyIconLayer);
- };
+ });
+
+ iconFeature.setStyle(iconStyle);
+ this.identifyIconLayer.getSource().clear();
+ window.map.removeLayer(this.identifyIconLayer);
+ this.identifyIconLayer.getSource().addFeature(iconFeature);
+ window.map.addLayer(this.identifyIconLayer);
+ }
setTimeout(() => {
helpers.flashPoint(coords);
}, 1000);
@@ -616,7 +616,7 @@ class SCMap extends Component {
-
+
-
+ {
- window.map.getView().setZoom(window.map.getView().getZoom() + 1);
- }}
- >
- +
-
- {
- window.map.getView().setZoom(window.map.getView().getZoom() - 1);
- }}
- >
- -
-
-
-
+ render() {
+ return (
+ {
- helpers.addAppStat("ExtentHistory", "Button press previous");
- helpers.extentHistory("previous");
- }}
- >
-
- {
- helpers.addAppStat("ExtentHistory", "Button press next");
- helpers.extentHistory("next");
- }}
- >
-
-
+
- );
- }
+
+
-
+
- {
+ window.map.getView().setZoom(window.map.getView().getZoom() + 1);
+ }}
+ >
+ +
+
+ {
+ window.map.getView().setZoom(window.map.getView().getZoom() - 1);
+ }}
+ >
+ -
+
+
+
- {
+ helpers.addAppStat("ExtentHistory", "Button press previous");
+ helpers.extentHistory("previous");
+ }}
+ >
+
+ {
+ helpers.addAppStat("ExtentHistory", "Button press next");
+ helpers.extentHistory("next");
+ }}
+ >
+
+
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+ {this.state.showGrid ?
+ {
diff --git a/src/map/basemapSwitcherConfig.json b/src/map/basemapSwitcherConfig.json
index 00733cf4..a1a30de5 100644
--- a/src/map/basemapSwitcherConfig.json
+++ b/src/map/basemapSwitcherConfig.json
@@ -12,37 +12,110 @@
"topoServices": [
{
"name": "Topographic",
- "image": "esri-topo.png",
+ "image": "topo.png",
"index": 0,
"layers": [
+ {
+ "url": "https://services.arcgisonline.com/arcgis/rest/services/Elevation/World_Hillshade/MapServer/tile/{z}/{y}/{x}",
+ "type": "ESRI_TILED",
+ "isOverlay": true,
+ "excludePrint": true
+ },
{
"url": "https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}",
- "type": "ESRI_TILED"
+ "type": "ESRI_TILED",
+ "isOverlay": true
},
{
"url": "https://maps.simcoe.ca/arcgis/rest/services/Public/Topo_Cache/MapServer/tile/{z}/{y}/{x}",
"type": "SIMCOE_TILED",
- "fullExtent": [-9127039.9939, 5219474.5973000005, -8607132.7041, 5807644.523699999]
+ "fullExtent": [-9127039.9939, 5219474.5973000005, -8607132.7041, 5807644.523699999],
+ "isOverlay": true
+ },
+ {
+ "url": "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer",
+ "type": "ESRI_VECTOR_TILED",
+ "isOverlay": true,
+ "rootPath": "https://opengis.simcoe.ca/public/basemap/ESRI_WorldTopoCanadianStyle.json",
+ "excludePrint": true
+ },
+ {
+ "url": "https://tiles.arcgis.com/tiles/B6yKvIZqzuOr0jBR/arcgis/rest/services/Canada_Hillshade/MapServer/tile/{z}/{y}/{x}",
+ "type": "ESRI_TILED",
+ "isOverlay": true,
+ "excludePrint": true
+ },
+ {
+ "url": "https://tiles.arcgis.com/tiles/B6yKvIZqzuOr0jBR/arcgis/rest/services/Canada_Topographic/VectorTileServer",
+ "type": "ESRI_VECTOR_TILED",
+ "isOverlay": true,
+ "rootPath": "https://opengis.simcoe.ca/public/basemap/ESRI_Canada_Topographic.json",
+ "maxZoom": 23,
+ "excludePrint": true
}
],
"groupUrlDev": "https://opengis.simcoe.ca/geoserver/simcoe/Topo_Overlay/ows?service=wms&version=1.3.0&request=GetCapabilities"
},
{
- "name": "Streets",
- "image": "esri-streets.png",
+ "name": "Light Grey",
+ "image": "light-grey.png",
"index": 1,
"layers": [
{
"url": "https://maps.simcoe.ca/arcgis/rest/services/Public/Streets_Black_And_White_Cache/MapServer/tile/{z}/{y}/{x}",
"type": "SIMCOE_TILED",
+ "isOverlay": true,
+ "fullExtent": [-9127039.9939, 5219474.5973000005, -8607132.7041, 5807644.523699999]
+ },
+ {
+ "url": "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer",
+ "type": "ESRI_VECTOR_TILED",
+ "isOverlay": true,
+ "rootPath": "https://opengis.simcoe.ca/public/basemap/ESRI_LightGreyBackground.json",
+ "excludePrint": true
+ },
+ {
+ "url": "https://tiles.arcgis.com/tiles/B6yKvIZqzuOr0jBR/arcgis/rest/services/Canada_Topographic/VectorTileServer",
+ "type": "ESRI_VECTOR_TILED",
+ "isOverlay": true,
+ "rootPath": "https://opengis.simcoe.ca/public/basemap/ESRI_LightGrey.json",
+ "excludePrint": true
+ }
+ ]
+ },
+ {
+ "name": "Streets",
+ "image": "streets.png",
+ "index": 2,
+ "layers": [
+ {
+ "url": "https://maps.simcoe.ca/arcgis/rest/services/Public/Streets_Black_And_White_Cache/MapServer/tile/{z}/{y}/{x}",
+ "type": "SIMCOE_TILED",
+ "isOverlay": true,
"fullExtent": [-9127039.9939, 5219474.5973000005, -8607132.7041, 5807644.523699999]
+ },
+ {
+ "url": "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer",
+ "type": "ESRI_VECTOR_TILED",
+ "isOverlay": true,
+ "rootPath": "https://opengis.simcoe.ca/public/basemap/ESRI_Streets_Night_Background.json",
+ "excludePrint": true
+ },
+ {
+ "url": "https://tiles.arcgis.com/tiles/B6yKvIZqzuOr0jBR/arcgis/rest/services/Canada_Topographic/VectorTileServer",
+ "type": "ESRI_VECTOR_TILED",
+ "isOverlay": true,
+ "rootPath": "https://opengis.simcoe.ca/public/basemap/ESRI_Streets_Night.json",
+ "minZoom": 0,
+ "maxZoom": 23,
+ "excludePrint": true
}
]
},
{
"name": "Open Street Map",
"image": "osm-topo.jpg",
- "index": 2,
+ "index": 3,
"layers": [
{
"url": "",
diff --git a/src/sidebar/MenuButton.css b/src/sidebar/MenuButton.css
index c30f8455..98efebbe 100644
--- a/src/sidebar/MenuButton.css
+++ b/src/sidebar/MenuButton.css
@@ -1,204 +1,234 @@
.sc-menu-button-container {
- margin-left: 13px;
- /* background-color: #fff;
- opacity: 1;
- font-size: 10pt;
- cursor: pointer;
- border-radius: 3px;
- padding: 3px; */
+ margin-left: 13px;
+ /* background-color: #fff;
+ opacity: 1;
+ font-size: 10pt;
+ cursor: pointer;
+ border-radius: 3px;
+ padding: 3px; */
}
#sc-menu-button-container.slidein {
- transform: translateX(-14px);
- transition: transform 300ms ease-in;
+ transform: translateX(-14px);
+ transition: transform 300ms ease-in;
}
#sc-menu-button-container.slideout {
- transform: translateX(-80px);
- transition: transform 300ms ease-in;
+ transform: translateX(-80px);
+ transition: transform 300ms ease-in;
}
#sc-menu-button {
- width: 56px;
- height: 25px;
- cursor: pointer;
- border-radius: 3px;
+ width: 56px;
+ height: 25px;
+ cursor: pointer;
+ border-radius: 3px;
}
.sc-menu-button-icon {
- /* background-image: url(./images/menu.png);
+ background-image: url(./images/more.png);
background-repeat: no-repeat;
background-position-y: center;
- padding-left: 15px; */
- font-size: 14px;
+ padding-left: 15px;
+ font-size: 14px;
}
.sc-menu-button-list-container {
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- position: absolute;
- bottom: 70px;
- width: 180px;
- max-height: 500px;
- background-color: #fff;
- border: 1px solid #ccc;
- border-radius: 4px;
- padding: 6px;
- font-size: 12px;
- overflow: auto;
- margin-top: 2px;
- box-shadow: 2px 2px 5px 0px rgba(77, 77, 77, 1);
- text-align: left;
- max-height: 400px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ position: absolute;
+ bottom: 70px;
+ width: 180px;
+ max-height: 500px;
+ background-color: #fff;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ padding: 6px;
+ font-size: 12px;
+ overflow: auto;
+ margin-top: 2px;
+ box-shadow: 2px 2px 5px 0px rgba(77, 77, 77, 1);
+ text-align: left;
+ max-height: 400px;
}
.sc-menu-button-list-container.sideBarOpen {
- left: 420px;
+ bottom: unset;
}
.sc-menu-list-item {
- padding: 3px;
- cursor: pointer;
- border-radius: 3px;
- border: 1px solid #fff;
- border-bottom: 1px solid #e2e2e2;
+ padding: 3px;
+ cursor: pointer;
+ border-radius: 3px;
+ border: 1px solid #fff;
+ border-bottom: 1px solid #e2e2e2;
}
.sc-menu-list-item:hover {
- border: 1px solid #90b5d5;
- background: rgb(242, 245, 246); /* Old browsers */
- background: -moz-linear-gradient(top, rgba(242, 245, 246, 1) 0%, rgba(227, 234, 237, 1) 37%, rgba(200, 215, 220, 1) 100%); /* FF3.6+ */
- background: -webkit-gradient(
- linear,
- left top,
- left bottom,
- color-stop(0%, rgba(242, 245, 246, 1)),
- color-stop(37%, rgba(227, 234, 237, 1)),
- color-stop(100%, rgba(200, 215, 220, 1))
- ); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, rgba(242, 245, 246, 1) 0%, rgba(227, 234, 237, 1) 37%, rgba(200, 215, 220, 1) 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, rgba(242, 245, 246, 1) 0%, rgba(227, 234, 237, 1) 37%, rgba(200, 215, 220, 1) 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, rgba(242, 245, 246, 1) 0%, rgba(227, 234, 237, 1) 37%, rgba(200, 215, 220, 1) 100%); /* IE10+ */
- background: linear-gradient(to bottom, rgba(242, 245, 246, 1) 0%, rgba(227, 234, 237, 1) 37%, rgba(200, 215, 220, 1) 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 ); /* IE6-9 */
+ border: 1px solid #90b5d5;
+ background: rgb(242, 245, 246); /* Old browsers */
+ background: -moz-linear-gradient(top, rgba(242, 245, 246, 1) 0%, rgba(227, 234, 237, 1) 37%, rgba(200, 215, 220, 1) 100%); /* FF3.6+ */
+ background: -webkit-gradient(
+ linear,
+ left top,
+ left bottom,
+ color-stop(0%, rgba(242, 245, 246, 1)),
+ color-stop(37%, rgba(227, 234, 237, 1)),
+ color-stop(100%, rgba(200, 215, 220, 1))
+ ); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, rgba(242, 245, 246, 1) 0%, rgba(227, 234, 237, 1) 37%, rgba(200, 215, 220, 1) 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, rgba(242, 245, 246, 1) 0%, rgba(227, 234, 237, 1) 37%, rgba(200, 215, 220, 1) 100%); /* Opera 11.10+ */
+ background: -ms-linear-gradient(top, rgba(242, 245, 246, 1) 0%, rgba(227, 234, 237, 1) 37%, rgba(200, 215, 220, 1) 100%); /* IE10+ */
+ background: linear-gradient(to bottom, rgba(242, 245, 246, 1) 0%, rgba(227, 234, 237, 1) 37%, rgba(200, 215, 220, 1) 100%); /* W3C */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 ); /* IE6-9 */
}
.sc-menu-list-item-label {
- background-repeat: no-repeat;
- padding-left: 22px;
- min-height: 16px;
+ background-repeat: no-repeat;
+ padding-left: 22px;
+ min-height: 16px;
}
.sc-menu-list-item-heading {
- padding: 3px;
- cursor: pointer;
- border-bottom: 1px solid #e2e2e2;
- font-size: 12px;
- font-weight: bold;
- text-transform: uppercase;
- color: #797979;
- padding-top: 10px;
- text-shadow: 0.5px 0.5px #e2e2e2;
+ padding: 3px;
+ cursor: pointer;
+ border-bottom: 1px solid #e2e2e2;
+ font-size: 12px;
+ font-weight: bold;
+ text-transform: uppercase;
+ color: #797979;
+ padding-top: 10px;
+ text-shadow: 0.5px 0.5px #e2e2e2;
}
.sc-menu-tools-icon {
- background-image: url(./images/tools.png);
+ background-image: url(./images/tools.png);
}
.sc-menu-mymaps-icon {
- background-image: url(./images/myMaps.png);
+ background-image: url(./images/myMaps.png);
}
.sc-menu-theme-icon {
- background-image: url(./images/themes.png);
+ background-image: url(./images/themes.png);
}
.sc-menu-help-icon {
- background-image: url(./images/help.png);
+ background-image: url(./images/help.png);
}
.sc-menu-screenshot-icon {
- background-image: url(./images/screenshot.png);
+ background-image: url(./images/screenshot.png);
}
.sc-menu-feedback-icon {
- background-image: url(./images/feedback.png);
+ background-image: url(./images/feedback.png);
}
.sc-menu-legend-icon {
- background-image: url(./images/legend.png);
+ background-image: url(./images/legend.png);
}
.sc-menu-about-icon {
- background-image: url(./images/about.png);
+ background-image: url(./images/about.png);
}
.sc-menu-terms-icon {
- background-image: url(./images/terms.png);
+ background-image: url(./images/terms.png);
}
.sc-menu-more-button {
- display: contents;
- border: none;
- padding-top: 10px;
- padding-left: 8px;
- font-size: 9pt;
+ display: contents;
+ border: none;
+ padding-top: 10px;
+ padding-left: 8px;
+ font-size: 9pt;
}
+.sc-menu-button-main-container.sideBarOpen .sc-menu-more-button {
+ display: unset;
+ padding-top: 5px;
+ padding-left: 8px;
+}
+
.sc-menu-button-main-container.map-float {
- left: 415px;
- bottom: 5px;
- right: auto;
- top: auto;
- height: 35px;
- width: 35px;
- background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
- box-shadow: 0px 0px 5px 0px rgba(80, 80, 80, 0.69);
- border-radius: 5px;
+ left: 415px;
+ bottom: 5px;
+ right: auto;
+ top: auto;
+ height: 35px;
+ width: 35px;
+ background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
+ box-shadow: 0px 0px 5px 0px rgba(80, 80, 80, 0.69);
+ border-radius: 5px;
}
.sc-menu-button-main-container.map-float.no-fullscreen {
- left: 375px;
+ left: 425px;
}
.sc-menu-button-main-container.map-float .sc-menu-button-container {
- margin-left: unset;
- padding: 0px;
- height: 35px;
- width: 35px;
- border: none;
+ margin-left: unset;
+ padding: 0px;
+ height: 35px;
+ width: 35px;
+ border: none;
+}
+.sc-menu-button-main-container.sideBarOpen {
+ position: absolute;
+ top: 51px;
+ right: -87px;
+}
+.sc-menu-button-main-container.sideBarOpen .sc-menu-more-button {
+ width: 37px !important;
+ height: 37px !important;
+ line-height: 34px !important;
+ border-radius: 4px !important;
+ color: #5d5d5d !important;
+ background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
+ box-shadow: 0px 0px 5px 0px rgba(80, 80, 80, 0.69);
+ cursor: pointer;
+ font-size: 24px;
+ user-select: none;
+ text-align: center;
+ font-family: verdana, helvetica;
+ margin-bottom: 5px;
}
+.sc-menu-button-main-container.sideBarOpen.map-float > .sc-menu-button-list-container {
+ left: 0px;
+ top: 40px;
+}
.sc-menu-button-main-container {
- position: absolute;
- bottom: 9px;
- right: -49px;
+ position: absolute;
+ bottom: 9px;
+ right: -49px;
}
.sc-menu-button-main-container.map-float .sc-menu-more-button {
- display: block;
- padding: 3px;
+ display: block;
+ padding: 3px;
- height: 35px;
- width: 35px;
- border: none;
- background: transparent;
+ height: 35px;
+ width: 35px;
+ border: none;
+ background: transparent;
}
-.sc-menu-button-main-container.map-float .sc-menu-more-button:hover img {
- background-color: #c8c8c8;
+.sc-menu-button-main-container.map-float .sc-menu-more-button:hover {
+ background-color: #c8c8c8;
}
-.sc-menu-button-main-container.map-float .sc-menu-more-button img {
- height: 29px;
- width: 29px;
- border: none;
+.sc-menu-button-main-container.map-float .sc-menu-more-button {
+ height: 29px;
+ width: 29px;
+ border: none;
}
.sc-menu-button-main-container.map-float > .sc-menu-button-list-container {
- left: 0px;
- bottom: 40px;
+ left: 0px;
+ bottom: 40px;
}
@media only screen and (max-width: 770px) {
- .sc-menu-button-container {
- display: none;
- }
+ .sc-menu-button-container {
+ display: none;
+ }
- #sc-menu-button-list-container {
- bottom: 0px;
- }
+ #sc-menu-button-list-container {
+ bottom: 0px;
+ }
}
diff --git a/src/sidebar/MenuButton.jsx b/src/sidebar/MenuButton.jsx
index 101c2936..39c49440 100644
--- a/src/sidebar/MenuButton.jsx
+++ b/src/sidebar/MenuButton.jsx
@@ -4,7 +4,7 @@ import * as helpers from "../helpers/helpers";
import * as htmlToImage from "html-to-image";
import { saveAs } from "file-saver";
import { transformWithProjections } from "ol/proj";
-
+import { ImMenu3, ImMenu4 } from "react-icons/im";
const feedbackTemplate = (url, xmin, xmax, ymin, ymax, centerx, centery, scale) => `${url}/?xmin=${xmin}&xmax=${xmax}&ymin=${ymin}&ymax=${ymax}¢erx=${centerx}¢ery=${centery}&scale=${scale}`;
class MenuButton extends Component {
@@ -41,7 +41,7 @@ class MenuButton extends Component {
let itemList = [];
itemList.push();
window.config.sidebarToolComponents.forEach((tool) => {
- if (tool.enabled === undefined || tool.enabled)
+ if ((tool.enabled || tool.enabled === undefined) && (tool.disable === false || tool.disable === undefined))
itemList.push(
Is your Print too grainy or low quality? Click here for a high resolution screenshot
** Note: Some basemap layers are currently unsupported by print
{/* PRINT BUTTON */}
+ {/* {
let layers = [];
let groupLayers = layer.getLayers().getArray();
if (groupLayers !== undefined) {
- let layersPromise = groupLayers.map((item) =>
- getLayerByType(item, printoptions, (retLayers) => {
- if (retLayers !== undefined) {
- if (Array.isArray(retLayers)) layers = layers.concat(retLayers);
- else layers.push(retLayers);
- }
- })
- );
+ let layersPromise = groupLayers
+ .filter((item) => item.getProperties().excludePrint !== true)
+ .map((item) =>
+ getLayerByType(item, printoptions, (retLayers) => {
+ if (retLayers !== undefined) {
+ if (Array.isArray(retLayers)) layers = layers.concat(retLayers);
+ else layers.push(retLayers);
+ }
+ })
+ );
//wait for list of layer promises to be resolved
await Promise.all(layersPromise);
}
@@ -423,21 +425,23 @@ export async function printRequest(mapLayers, printSelectedOption) {
layer.setProperties({ printIndex: layerOrder });
}
});
- let mapLayerPromises = mapLayers.map((layer) =>
- getLayerByType(layer, printRequest.attributes, (retLayers) => {
- if (retLayers !== undefined) {
- if (Array.isArray(retLayers)) mainMap = mainMap.concat(retLayers);
- else mainMap.push(retLayers);
- if (Array.isArray(retLayers)) {
- retLayers.forEach((item) => {
- if (isOverviewLayer(item.layer)) overviewMap.push(item);
- });
- } else {
- if (isOverviewLayer(retLayers.layer)) overviewMap.push(retLayers);
+ let mapLayerPromises = mapLayers
+ .filter((layer) => layer.getProperties().excludePrint !== true)
+ .map((layer) =>
+ getLayerByType(layer, printRequest.attributes, (retLayers) => {
+ if (retLayers !== undefined) {
+ if (Array.isArray(retLayers)) mainMap = mainMap.concat(retLayers);
+ else mainMap.push(retLayers);
+ if (Array.isArray(retLayers)) {
+ retLayers.forEach((item) => {
+ if (isOverviewLayer(item.layer)) overviewMap.push(item);
+ });
+ } else {
+ if (isOverviewLayer(retLayers.layer)) overviewMap.push(retLayers);
+ }
}
- }
- })
- );
+ })
+ );
//wait for list of layer promises to be resolved
await Promise.all(mapLayerPromises);
diff --git a/src/sidebar/components/tools/settings/Settings.jsx b/src/sidebar/components/tools/settings/Settings.jsx
index 7385e284..155f4383 100644
--- a/src/sidebar/components/tools/settings/Settings.jsx
+++ b/src/sidebar/components/tools/settings/Settings.jsx
@@ -287,15 +287,6 @@ class Settings extends Component {
clearLocalData={this.clearLocalData}
/>
-
- */}
Printing...
![loading]({images["loading20.gif"]})
-
{/* ADVANCED OPTIONS */}
@@ -448,7 +448,7 @@ const Result = (props) => {
const PopupContent = (props) => {
const { feature } = props;
let website = feature.get("website");
- if (website !== undefined && website.indexOf("http", 1) === -1) website = "https://" + website;
+ if (website && website.indexOf("http", 1) === -1) website = "https://" + website;
return (
-
-
-
-
-
-
-
-
-
-
-
- );
- }
-}
+ return (
+
+
+
+
+ );
+};
-function MapApp() {
+const MapApp = (props) => {
const [mapLoading, setMapLoading] = useState(true);
const [sidebarLoading, setSidebarLoading] = useState(true);
const [headerLoading, setHeaderLoading] = useState(true);
- // LISTEN FOR MAP TO MOUNT
- window.emitter.addListener("mapLoaded", () => setMapLoading(false));
- // LISTEN FOR SIDEBAR TO MOUNT
- window.emitter.addListener("sidebarLoaded", () => setSidebarLoading(false));
- // LISTEN FOR HEADER TO MOUNT
- window.emitter.addListener("headerLoaded", () => setHeaderLoading(false));
+
const changeIcon = (icon) => {
var link = document.getElementById("favicon");
if (!link) {
@@ -80,6 +65,16 @@ function MapApp() {
link.href = icon;
};
useEffect(() => {
+ // LISTEN FOR MAP TO MOUNT
+ const mapLoadedListener = () => setMapLoading(false);
+ window.emitter.addListener("mapLoaded", mapLoadedListener);
+ // LISTEN FOR SIDEBAR TO MOUNT
+ const sidebarLoadedListener = () => setSidebarLoading(false);
+ window.emitter.addListener("sidebarLoaded", sidebarLoadedListener);
+ // LISTEN FOR HEADER TO MOUNT
+ const headerLoadedListener = () => setHeaderLoading(false);
+ window.emitter.addListener("headerLoaded", headerLoadedListener);
+
window.app = packageJson.name;
window.homepage = packageJson.homepage;
window.version = packageJson.version;
@@ -90,6 +85,15 @@ function MapApp() {
if (window.config.default_theme !== undefined) window.emitter.emit("activateSidebarItem", window.config.default_theme, "themes");
if (window.config.default_tool !== undefined) window.emitter.emit("activateSidebarItem", window.config.default_tool, "tools");
});
+ return () => {
+ window.emitter.removeListener("mapLoaded", mapLoadedListener);
+ window.emitter.removeListener("sidebarLoaded", sidebarLoadedListener);
+ window.emitter.removeListener("headerLoaded", headerLoadedListener);
+
+ // headerLoadedListener.remove();
+ // sidebarLoadedListener.remove();
+ // mapLoadedListener.remove();
+ };
}, []);
return (
@@ -101,5 +105,5 @@ function MapApp() {
-
- );
- }
-}
+ return (
+
+
+ );
+};
export default ThemeComponent;
diff --git a/src/componentTemplate/ToolComponent.jsx b/src/componentTemplate/ToolComponent.jsx
index 790665c2..91bbbb90 100644
--- a/src/componentTemplate/ToolComponent.jsx
+++ b/src/componentTemplate/ToolComponent.jsx
@@ -1,25 +1,20 @@
-import React, { Component } from "react";
+import React from "react";
import "./ToolComponent.css";
-import * as helpers from "../../../../helpers/helpers";
import PanelComponent from "../../../PanelComponent";
-class ToolComponent extends Component {
- state = {};
-
- onClose = () => {
+const ToolComponent = (props) => {
+ const onClose = () => {
// ADD CLEAN UP HERE (e.g. Map Layers, Popups, etc)
// CALL PARENT WITH CLOSE
- this.props.onClose();
+ props.onClose();
};
- render() {
- return (
-
-
- );
- }
-}
+ return (
+
+
+ );
+};
export default ToolComponent;
diff --git a/src/components/Autocomplete.jsx b/src/components/Autocomplete.jsx
new file mode 100644
index 00000000..061a5494
--- /dev/null
+++ b/src/components/Autocomplete.jsx
@@ -0,0 +1,86 @@
+import * as React from "react";
+import TextField from "@mui/material/TextField";
+import Autocomplete from "@mui/material/Autocomplete";
+import { get } from "../helpers/api";
+import { getUID } from "../helpers/react";
+
+// This key was created specifically for the demo in mui.com.
+// You need to create a new one for your application.
+
+const SCAutoComplete = (props) => {
+ const [url, setUrl] = React.useState(null);
+ const [value, setValue] = React.useState(null);
+ const [inputValue, setInputValue] = React.useState("");
+ const [options, setOptions] = React.useState([]);
+ const [loading, setLoading] = React.useState(false);
+ const handleChange = (e) => {
+ setValue(e.target.value);
+ if (props.onChange) props.onChange(e.target.value);
+ };
+ React.useEffect(() => {
+ if (props.url) setUrl(props.url);
+ }, [props.url]);
+
+ React.useEffect(() => {
+ if (inputValue === "") {
+ setOptions(value ? [value] : []);
+ return undefined;
+ }
+ setLoading(true);
+
+ get(`${url}/${inputValue}`, { useBearerToken: true }, (results) => {
+ // console.log(results);
+ if (results)
+ setOptions(
+ results.map((item) => {
+ return { value: item.id, description: item.COMPANY_NAME ? item.COMPANY_NAME : item.CONTACT_NAME };
+ })
+ );
+ else setOptions([]);
+ setLoading(false);
+ });
+ }, [value, inputValue]);
+
+ return (
+ <>
+ x}
+ autoComplete
+ includeInputInList
+ filterSelectedOptions
+ disableClearable
+ freeSolo
+ loading={loading}
+ value={value}
+ options={options}
+ onChange={handleChange}
+ onInputChange={(event, newInputValue) => {
+ setInputValue(newInputValue);
+ }}
+ getOptionLabel={(option) => (typeof option === "string" ? option : option.description)}
+ renderOption={(props, option) => {
+ return {
+ setValue(e.target.value);
+ }}
+ label={props.label}
+ placeholder="Type to search..."
+ InputProps={{
+ ...params.InputProps,
+ type: "search",
+ }}
+ />
+ )}
+ />
+
+ );
+};
+export default SCAutoComplete;
diff --git a/src/components/react-use-iframe-content-height.jsx b/src/components/react-use-iframe-content-height.jsx
new file mode 100644
index 00000000..e8157e34
--- /dev/null
+++ b/src/components/react-use-iframe-content-height.jsx
@@ -0,0 +1,35 @@
+import { useRef, useEffect, useState } from "react";
+
+function useInterval(callback, interval) {
+ const savedCallback = useRef(() => callback);
+
+ useEffect(() => {
+ savedCallback.current = callback;
+ });
+
+ // Set up the interval.
+ useEffect(() => {
+ function tick() {
+ savedCallback.current();
+ }
+ if (interval !== null) {
+ let id = setInterval(tick, interval);
+ return () => clearInterval(id);
+ }
+ }, [interval]);
+}
+
+export default function useIframeContentHeight(interval = 250) {
+ const iframeRef = useRef(null);
+ const [iframeHeight, setIframeHeight] = useState(0);
+
+ useInterval(() => {
+ try {
+ const iframe = iframeRef.current;
+ const newHeight = iframe.contentWindow.document.body.scrollHeight;
+ setIframeHeight(newHeight);
+ } catch (_) {}
+ }, interval);
+
+ return [iframeRef, iframeHeight];
+}
diff --git a/src/components/sc-github-btn.css b/src/components/sc-github-btn.css
new file mode 100644
index 00000000..19af0fe7
--- /dev/null
+++ b/src/components/sc-github-btn.css
@@ -0,0 +1,112 @@
+body {
+ margin: 0;
+}
+a {
+ text-decoration: none;
+ outline: 0;
+}
+.widget {
+ display: inline-block;
+ overflow: hidden;
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
+ font-size: 0;
+ line-height: 0;
+ white-space: nowrap;
+}
+.btn,
+.social-count {
+ position: relative;
+ display: inline-block;
+ display: inline-flex;
+ height: 14px;
+ padding: 2px 5px;
+ font-size: 11px;
+ font-weight: 600;
+ line-height: 14px;
+ vertical-align: bottom;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ background-repeat: repeat-x;
+ background-position: -1px -1px;
+ background-size: 110% 110%;
+ border: 1px solid;
+}
+.btn {
+ border-radius: 0.25em;
+}
+.btn:not(:last-child) {
+ border-radius: 0.25em 0 0 0.25em;
+}
+.social-count {
+ border-left: 0;
+ border-radius: 0 0.25em 0.25em 0;
+}
+.widget-lg .btn,
+.widget-lg .social-count {
+ height: 16px;
+ padding: 5px 10px;
+ font-size: 12px;
+ line-height: 16px;
+}
+.octicon {
+ display: inline-block;
+ vertical-align: text-top;
+ fill: currentColor;
+ overflow: visible;
+}
+.btn:focus-visible,
+.social-count:focus-visible {
+ outline: 2px solid #0969da;
+ outline-offset: -2px;
+}
+.btn {
+ color: #24292f;
+ background-color: #ebf0f4;
+ border-color: #ccd1d5;
+ border-color: rgba(31, 35, 40, 0.15);
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%23f6f8fa'/%3e%3cstop offset='90%25' stop-color='%23ebf0f4'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e");
+ background-image: -moz-linear-gradient(top, #f6f8fa, #ebf0f4 90%);
+ background-image: linear-gradient(180deg, #f6f8fa, #ebf0f4 90%);
+ filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FFF6F8FA', endColorstr='#FFEAEFF3');
+}
+:root .btn {
+ filter: none;
+}
+.btn:hover,
+.btn:focus {
+ background-color: #e9ebef;
+ background-position: 0 -0.5em;
+ border-color: #cbcdd1;
+ border-color: rgba(31, 35, 40, 0.15);
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%23f3f4f6'/%3e%3cstop offset='90%25' stop-color='%23e9ebef'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e");
+ background-image: -moz-linear-gradient(top, #f3f4f6, #e9ebef 90%);
+ background-image: linear-gradient(180deg, #f3f4f6, #e9ebef 90%);
+ filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FFF3F4F6', endColorstr='#FFE8EAEE');
+}
+:root .btn:hover,
+:root .btn:focus {
+ filter: none;
+}
+.btn:active {
+ background-color: #e5e9ed;
+ border-color: #c7cbcf;
+ border-color: rgba(31, 35, 40, 0.15);
+ background-image: none;
+ filter: none;
+}
+.social-count {
+ color: #24292f;
+ background-color: #fff;
+ border-color: #dddedf;
+ border-color: rgba(31, 35, 40, 0.15);
+}
+.social-count:hover,
+.social-count:focus {
+ color: #0969da;
+}
+.octicon-heart {
+ color: #bf3989;
+}
diff --git a/src/components/sc-github-btn.jsx b/src/components/sc-github-btn.jsx
new file mode 100644
index 00000000..e661608b
--- /dev/null
+++ b/src/components/sc-github-btn.jsx
@@ -0,0 +1,43 @@
+import React, { useEffect, useRef } from "react";
+import { FaGithub } from "react-icons/fa";
+import "./sc-github-btn.css";
+const GitHubButton = (props) => {
+ const $ = useRef(null);
+ const _ = useRef(null);
+
+ useEffect(() => {
+ const paint = async () => {
+ const _ = $.current.appendChild(document.createElement("span"));
+ const { render } = await import(/* webpackMode: "eager" */ "github-buttons");
+
+ if (_.current != null) {
+ render(_.appendChild(_.current), function (el) {
+ try {
+ _.parentNode.replaceChild(el, _);
+ } catch (_) {}
+ });
+ }
+ };
+
+ const reset = () => {
+ $.current.replaceChild(_.current, $.current.lastChild);
+ };
+
+ paint();
+
+ return () => {
+ reset();
+ };
+ }, []);
+
+ return (
+
+ );
+};
+
+export default GitHubButton;
diff --git a/src/components/sc-sidebar.jsx b/src/components/sc-sidebar.jsx
new file mode 100644
index 00000000..64f16a8e
--- /dev/null
+++ b/src/components/sc-sidebar.jsx
@@ -0,0 +1,345 @@
+import React, { useState, useRef, useEffect } from "react";
+import PropTypes from "prop-types";
+
+const CANCEL_DISTANCE_ON_SCROLL = 20;
+
+const defaultStyles = {
+ root: {
+ position: "absolute",
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ overflow: "hidden",
+ },
+ sidebar: {
+ zIndex: 2,
+ position: "absolute",
+ top: 0,
+ bottom: 0,
+ transition: "transform .3s ease-out",
+ WebkitTransition: "-webkit-transform .3s ease-out",
+ willChange: "transform",
+ overflowY: "auto",
+ },
+ content: {
+ position: "absolute",
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ overflowY: "auto",
+ WebkitOverflowScrolling: "touch",
+ transition: "left .3s ease-out, right .3s ease-out",
+ },
+ overlay: {
+ zIndex: 1,
+ position: "fixed",
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ opacity: 0,
+ visibility: "hidden",
+ transition: "opacity .3s ease-out, visibility .3s ease-out",
+ backgroundColor: "rgba(0,0,0,.3)",
+ },
+ dragHandle: {
+ zIndex: 1,
+ position: "fixed",
+ top: 0,
+ bottom: 0,
+ },
+};
+
+const Sidebar = ({
+ children,
+ styles,
+ rootClassName,
+ sidebarClassName,
+ contentClassName,
+ overlayClassName,
+ sidebar,
+ docked,
+ open,
+ transitions,
+ touch,
+ touchHandleWidth,
+ pullRight,
+ shadow,
+ dragToggleDistance,
+ onSetOpen,
+ defaultSidebarWidth,
+ rootId,
+ sidebarId,
+ contentId,
+ overlayId,
+}) => {
+ const [sidebarWidth, setSidebarWidth] = useState(defaultSidebarWidth);
+ const [touchIdentifier, setTouchIdentifier] = useState(null);
+ const [touchStartX, setTouchStartX] = useState(null);
+ const [touchCurrentX, setTouchCurrentX] = useState(null);
+ const [dragSupported, setDragSupported] = useState(false);
+
+ const sidebarRef = useRef(null);
+
+ const isTouching = () => touchIdentifier !== null;
+
+ const overlayClicked = () => {
+ if (open) {
+ onSetOpen(false);
+ }
+ };
+
+ const onTouchStart = (ev) => {
+ if (!isTouching()) {
+ const touch = ev.targetTouches[0];
+ setTouchIdentifier(touch.identifier);
+ setTouchStartX(touch.clientX);
+ setTouchCurrentX(touch.clientX);
+ }
+ };
+
+ const onTouchMove = (ev) => {
+ if (isTouching()) {
+ for (let ind = 0; ind < ev.targetTouches.length; ind++) {
+ if (ev.targetTouches[ind].identifier === touchIdentifier) {
+ setTouchCurrentX(ev.targetTouches[ind].clientX);
+ break;
+ }
+ }
+ }
+ };
+
+ const onTouchEnd = () => {
+ if (isTouching()) {
+ const touchWidth = touchSidebarWidth();
+
+ if ((open && touchWidth < sidebarWidth - dragToggleDistance) || (!open && touchWidth > dragToggleDistance)) {
+ onSetOpen(!open);
+ }
+
+ setTouchIdentifier(null);
+ setTouchStartX(null);
+ setTouchCurrentX(null);
+ }
+ };
+
+ const onScroll = () => {
+ if (isTouching() && inCancelDistanceOnScroll()) {
+ setTouchIdentifier(null);
+ setTouchStartX(null);
+ setTouchCurrentX(null);
+ }
+ };
+
+ const inCancelDistanceOnScroll = () => {
+ let cancelDistanceOnScroll;
+
+ if (pullRight) {
+ cancelDistanceOnScroll = Math.abs(touchCurrentX - touchStartX) < CANCEL_DISTANCE_ON_SCROLL;
+ } else {
+ cancelDistanceOnScroll = Math.abs(touchStartX - touchCurrentX) < CANCEL_DISTANCE_ON_SCROLL;
+ }
+ return cancelDistanceOnScroll;
+ };
+
+ const saveSidebarWidth = () => {
+ const width = sidebarRef.current.offsetWidth;
+
+ if (width !== sidebarWidth) {
+ setSidebarWidth(width);
+ }
+ };
+
+ const saveSidebarRef = (node) => {
+ sidebarRef.current = node;
+ };
+
+ const touchSidebarWidth = () => {
+ if (pullRight) {
+ if (open && window.innerWidth - touchStartX < sidebarWidth) {
+ if (touchCurrentX > touchStartX) {
+ return sidebarWidth + touchStartX - touchCurrentX;
+ }
+ return sidebarWidth;
+ }
+ return Math.min(window.innerWidth - touchCurrentX, sidebarWidth);
+ }
+
+ if (open && touchStartX < sidebarWidth) {
+ if (touchCurrentX > touchStartX) {
+ return sidebarWidth;
+ }
+ return sidebarWidth - touchStartX + touchCurrentX;
+ }
+ return Math.min(touchCurrentX, sidebarWidth);
+ };
+
+ useEffect(() => {
+ const isIos = /iPad|iPhone|iPod/.test(navigator ? navigator.userAgent : "");
+ setDragSupported(typeof window === "object" && "ontouchstart" in window && !isIos);
+ saveSidebarWidth();
+ }, []);
+
+ useEffect(() => {
+ if (!isTouching()) {
+ saveSidebarWidth();
+ }
+ }, [open]);
+
+ const sidebarStyle = {
+ ...defaultStyles.sidebar,
+ ...styles.sidebar,
+ };
+
+ const contentStyle = {
+ ...defaultStyles.content,
+ ...styles.content,
+ };
+
+ const overlayStyle = {
+ ...defaultStyles.overlay,
+ ...styles.overlay,
+ };
+
+ const useTouch = dragSupported && touch;
+
+ const hasBoxShadow = shadow && (isTouching || open || docked);
+
+ if (pullRight) {
+ sidebarStyle.right = 0;
+ sidebarStyle.transform = "translateX(100%)";
+ sidebarStyle.WebkitTransform = "translateX(100%)";
+ if (hasBoxShadow) {
+ sidebarStyle.boxShadow = "-2px 2px 4px rgba(0, 0, 0, 0.15)";
+ }
+ } else {
+ sidebarStyle.left = 0;
+ sidebarStyle.transform = "translateX(-100%)";
+ sidebarStyle.WebkitTransform = "translateX(-100%)";
+ if (hasBoxShadow) {
+ sidebarStyle.boxShadow = "2px 2px 4px rgba(0, 0, 0, 0.15)";
+ }
+ }
+
+ if (isTouching()) {
+ const percentage = touchSidebarWidth() / sidebarWidth;
+
+ if (pullRight) {
+ sidebarStyle.transform = `translateX(${(1 - percentage) * 100}%)`;
+ sidebarStyle.WebkitTransform = `translateX(${(1 - percentage) * 100}%)`;
+ } else {
+ sidebarStyle.transform = `translateX(-${(1 - percentage) * 100}%)`;
+ sidebarStyle.WebkitTransform = `translateX(-${(1 - percentage) * 100}%)`;
+ }
+
+ overlayStyle.opacity = percentage;
+ overlayStyle.visibility = "visible";
+ } else if (docked) {
+ if (sidebarWidth !== 0) {
+ sidebarStyle.transform = `translateX(0%)`;
+ sidebarStyle.WebkitTransform = `translateX(0%)`;
+ }
+
+ if (pullRight) {
+ contentStyle.right = `${sidebarWidth}px`;
+ } else {
+ contentStyle.left = `${sidebarWidth}px`;
+ }
+ } else if (open) {
+ sidebarStyle.transform = `translateX(0%)`;
+ sidebarStyle.WebkitTransform = `translateX(0%)`;
+
+ overlayStyle.opacity = 1;
+ overlayStyle.visibility = "visible";
+ }
+
+ if (isTouching() || !transitions) {
+ sidebarStyle.transition = "none";
+ sidebarStyle.WebkitTransition = "none";
+ contentStyle.transition = "none";
+ overlayStyle.transition = "none";
+ }
+
+ let dragHandle;
+
+ if (useTouch) {
+ if (open) {
+ dragHandle = ;
+ } else {
+ const dragHandleStyle = {
+ ...defaultStyles.dragHandle,
+ ...styles.dragHandle,
+ };
+ dragHandleStyle.width = touchHandleWidth;
+
+ if (pullRight) {
+ dragHandleStyle.right = 0;
+ } else {
+ dragHandleStyle.left = 0;
+ }
+
+ dragHandle = ;
+ }
+ }
+
+ return (
+
+ );
+};
+
+Sidebar.propTypes = {
+ children: PropTypes.node.isRequired,
+ styles: PropTypes.shape({
+ root: PropTypes.object,
+ sidebar: PropTypes.object,
+ content: PropTypes.object,
+ overlay: PropTypes.object,
+ dragHandle: PropTypes.object,
+ }),
+ rootClassName: PropTypes.string,
+ sidebarClassName: PropTypes.string,
+ contentClassName: PropTypes.string,
+ overlayClassName: PropTypes.string,
+ sidebar: PropTypes.node.isRequired,
+ docked: PropTypes.bool,
+ open: PropTypes.bool,
+ transitions: PropTypes.bool,
+ touch: PropTypes.bool,
+ touchHandleWidth: PropTypes.number,
+ pullRight: PropTypes.bool,
+ shadow: PropTypes.bool,
+ dragToggleDistance: PropTypes.number,
+ onSetOpen: PropTypes.func,
+ defaultSidebarWidth: PropTypes.number,
+ rootId: PropTypes.string,
+ sidebarId: PropTypes.string,
+ contentId: PropTypes.string,
+ overlayId: PropTypes.string,
+};
+
+Sidebar.defaultProps = {
+ docked: false,
+ open: false,
+ transitions: true,
+ touch: true,
+ touchHandleWidth: 20,
+ pullRight: false,
+ shadow: true,
+ dragToggleDistance: 30,
+ onSetOpen: () => {},
+ styles: {},
+ defaultSidebarWidth: 0,
+};
+
+export default Sidebar;
diff --git a/src/header/Header.jsx b/src/header/Header.jsx
index d0ef01e1..9875d130 100644
--- a/src/header/Header.jsx
+++ b/src/header/Header.jsx
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import "./Header.css";
import Search from "./Search.jsx";
@@ -8,25 +8,27 @@ import { Item as MenuItem } from "rc-menu";
import Portal from "../helpers/Portal.jsx";
const feedbackTemplate = (url, xmin, xmax, ymin, ymax, centerx, centery, scale) => `${url}/?xmin=${xmin}&xmax=${xmax}&ymin=${ymin}&ymax=${ymax}¢erx=${centerx}¢ery=${centery}&scale=${scale}`;
-class Header extends Component {
- constructor(props) {
- super(props);
- this.state = { logoImage: "" };
- // LISTEN FOR FEEDBACK
- window.emitter.addListener("feedback", () => this.onFeedbackClick());
- }
+const Header = (props) => {
+ const [logoImage, setLogoImage] = useState("");
- componentDidMount() {
+ window.emitter.addListener("feedback", () => onFeedbackClick());
+
+ // ON LOGO IMAGE CHANGE
+ useEffect(() => {
+ window.emitter.emit("headerLoaded");
+ helpers.addIsLoaded("header");
+ }, [logoImage]);
+
+ // ON LOAD
+ useEffect(() => {
helpers.waitForLoad("settings", Date.now(), 30, () => {
- this.setState({ logoImage: window.config.headerLogoImageName }, () => {
- window.emitter.emit("headerLoaded");
- helpers.addIsLoaded("header");
- });
+ setLogoImage(window.config.headerLogoImageName);
});
- }
+ }, []);
- burgerButtonHandler() {
+ // BURGER BUTTON HANDLER
+ const burgerButtonHandler = () => {
helpers.waitForLoad("map", Date.now(), 30, () => {
// EMIT A CHANGE IN THE SIDEBAR (IN OR OUT)
if (window.sidebarOpen) window.emitter.emit("setSidebarVisiblity", "CLOSE");
@@ -34,13 +36,14 @@ class Header extends Component {
helpers.addAppStat("Burger Button", "Click");
});
- }
+ };
- onDotMenuClick = (evt) => {
+ // DOT MENU HANDLER
+ const onDotMenuClick = (evt) => {
var evtClone = Object.assign({}, evt);
const menu = (
-
+
@@ -52,12 +55,14 @@ class Header extends Component {
helpers.addAppStat("Header Dot Menu", "Click");
};
- onMenuItemClick = (value) => {
+ // DOT MENU ITEM CLICK
+ const onMenuItemClick = (value) => {
helpers.showMessage("Coming Soon", "Coming Soon...");
helpers.addAppStat("Header Dot Menu", value);
};
- onFeedbackClick = () => {
+ // FEEDBACK CLICK
+ const onFeedbackClick = () => {
// APP STATS
helpers.waitForLoad("settings", Date.now(), 30, () => {
helpers.addAppStat("Feedback", "Click (Header)");
@@ -76,50 +81,46 @@ class Header extends Component {
});
};
- render() {
- return (
-
Put your components in here.
- Put your components in here.
+ Put your components in here.
- Put your components in here.
+ {option.description}
;
+ }}
+ renderInput={(params) => (
+
-
{
- if (evt.key === "Enter") {
- this.burgerButtonHandler();
- }
- }}
- >
- ![Header Logo]({require("./images/burger-button.png")})
-
+ // RENDER
+ return (
+
-
+ this.directionsClick(evt)}
+ removeMarkersClick={removeMarkersClick}
+ myMapsClick={myMapsClick}
+ shareLocationId={searchResultsRef.current[0].location_id}
+ directionsClick={(evt) => directionsClick(evt)}
/>,
"Actions"
);
}
});
}
- }
+ };
- jsonCallback(result, hidden = false, timeout = undefined) {
+ const jsonCallback = (result, hidden = false, timeout = undefined) => {
if (!hidden) {
const savedResult = Object.assign({}, result);
delete savedResult["geojson"];
- helpers.appendToStorage(this.storageKey, savedResult, 25);
+ helpers.appendToStorage(storageKey, savedResult, 25);
}
// EMTI SEARCH COMPLETE
window.emitter.emit("searchComplete", result);
- this.initsearchLayers();
+ initsearchLayers();
// CLEAR PREVIOUS SOURCE
- searchGeoLayer.getSource().clear();
- searchIconLayer.getSource().clear();
+ searchGeoLayerRef.current.getSource().clear();
+ searchIconLayerRef.current.getSource().clear();
// SET STATE CURRENT ITEM - this item is not needed for either Option for searchBarValueChangeOnClick
// if (!hidden) this.setState({ searchResults: [result] });
@@ -337,11 +392,11 @@ class Search extends Component {
is_open_data: result.is_open_data !== undefined && result.is_open_data !== null ? result.is_open_data : true,
});
- searchGeoLayer.getSource().addFeature(fullFeature);
- searchIconLayer.getSource().addFeature(pointFeature);
+ searchGeoLayerRef.current.getSource().addFeature(fullFeature);
+ searchIconLayerRef.current.getSource().addFeature(pointFeature);
- searchGeoLayer.setZIndex(300);
- searchIconLayer.setZIndex(300);
+ searchGeoLayerRef.current.setZIndex(300);
+ searchIconLayerRef.current.setZIndex(300);
} else if (hidden && timeout) {
// SET SOURCE
fullFeature.setProperties({
@@ -349,28 +404,28 @@ class Search extends Component {
name: result.name,
is_open_data: result.is_open_data !== undefined && result.is_open_data !== null ? result.is_open_data : true,
});
- searchGeoLayer.getSource().addFeature(fullFeature);
- searchGeoLayer.setZIndex(300);
+ searchGeoLayerRef.current.getSource().addFeature(fullFeature);
+ searchGeoLayerRef.current.setZIndex(300);
setTimeout(() => {
- searchGeoLayer.getSource().clear();
+ searchGeoLayerRef.current.getSource().clear();
}, timeout);
}
const zoomFactor = window.config.featureHighlitStyles && window.config.featureHighlitStyles["zoomFactor"] >= 0 ? window.config.featureHighlitStyles["zoomFactor"] : 1;
if (result.geojson.indexOf("Point") !== -1) {
- searchGeoLayer.setStyle(this.styles["point"]);
+ searchGeoLayerRef.current.setStyle(styles["point"]);
window.map.getView().fit(fullFeature.getGeometry().getExtent(), window.map.getSize(), {
duration: 1000,
});
window.map.getView().setZoom(19 - zoomFactor);
} else if (result.geojson.indexOf("Line") !== -1) {
- searchGeoLayer.setStyle(this.styles["poly"]);
+ searchGeoLayerRef.current.setStyle(styles["poly"]);
window.map.getView().fit(fullFeature.getGeometry().getExtent(), window.map.getSize(), {
duration: 1000,
});
window.map.getView().setZoom(window.map.getView().getZoom() - zoomFactor);
} else {
- searchGeoLayer.setStyle(this.styles["poly"]);
+ searchGeoLayerRef.current.setStyle(styles["poly"]);
window.map.getView().fit(fullFeature.getGeometry().getExtent(), window.map.getSize(), {
duration: 1000,
});
@@ -407,9 +462,9 @@ class Search extends Component {
} else {
let defaultStyle = drawingHelpers.getDefaultDrawStyle({
drawColor:
- window.config.featureHighlitStyles && window.config.featureHighlitStyles["stroke"] !== null && window.config.featureHighlitStyles["stroke"] !== undefined
- ? window.config.featureHighlitStyles["stroke"]
- : [255, 0, 0, 0.8],
+ window.config.featureHighlitStyles && window.config.featureHighlitStyles["stroke"] !== null && window.config.featureHighlitStyles["stroke"] !== undefined
+ ? window.config.featureHighlitStyles["stroke"]
+ : [255, 0, 0, 0.8],
isText: false,
strokeWidth: window.config.featureHighlitStyles && window.config.featureHighlitStyles["strokeWidth"] ? window.config.featureHighlitStyles["strokeWidth"] : 2,
pointType: fullFeature.getGeometry().getType(),
@@ -424,10 +479,11 @@ class Search extends Component {
);
fullFeature.setStyle(defaultStyle);
}
- }
+ };
// WHEN USER SELECTS ITEM
- onItemSelect(value, item) {
+ const onItemSelect = (selectedValue, item) => {
+ // console.log("onItemSelect", selectedValue, item);
if (item.type === "Map Layer") {
let emmiting = false;
window.emitter.emit("activeTocLayerGroup", item.layerGroup, () => {
@@ -450,21 +506,22 @@ class Search extends Component {
}
// CLEAR PREVIOUS SOURCE
- searchGeoLayer.getSource().clear();
- searchIconLayer.getSource().clear();
+ searchGeoLayerRef.current.getSource().clear();
+ searchIconLayerRef.current.getSource().clear();
// SET STATE CURRENT ITEM
const searchBarValueChangeOnClick = window.config.searchBarValueChangeOnClick;
if (searchBarValueChangeOnClick !== false) {
- this.setState({ value, searchResults: [item] });
+ setValue(selectedValue);
+ setSearchResults([item]);
}
if (item.place_id !== undefined || item.location_id == null) {
- this.initsearchLayers();
+ initsearchLayers();
// SET STATE CURRENT ITEM
- this.setState({ searchResults: [item] });
+ setSearchResults([item]);
// HANDLE OSM RESULT
let coords = [];
@@ -477,61 +534,60 @@ class Search extends Component {
feature.setProperties({ isPlaceOrGeocode: true });
// SET SOURCE
- searchIconLayer.getSource().addFeature(feature);
+ searchIconLayerRef.current.getSource().addFeature(feature);
- searchGeoLayer.setZIndex(100);
- searchIconLayer.setZIndex(100);
+ searchGeoLayerRef.current.setZIndex(100);
+ searchIconLayerRef.current.setZIndex(100);
// SET STYLE AND ZOOM
- searchGeoLayer.setStyle(this.styles["point"]);
+ searchGeoLayerRef.current.setStyle(styles["point"]);
window.map.getView().fit(feature.getGeometry().getExtent(), window.map.getSize(), {
duration: 1000,
});
window.map.getView().setZoom(18);
} else {
// CALL API TO GET LOCATION DETAILS
- helpers.getJSON(searchInfoURL(this.apiUrl, item.location_id), (result) => this.jsonCallback(result));
+ helpers.getJSON(searchInfoURL(apiUrlRef.current, item.location_id), (result) => jsonCallback(result));
}
- }
+ };
- cleanup() {
+ const cleanup = () => {
// REMOVE FEATURES
- searchGeoLayer.getSource().clear();
- searchIconLayer.getSource().clear();
+ searchGeoLayerRef.current.getSource().clear();
+ searchIconLayerRef.current.getSource().clear();
// HIDE POPUP
window.popup.hide();
- this.setState({ value: "" });
- }
+ setValue("");
+ };
- onMoreOptionsClick = (evt) => {
- this.setState(
- (prevState) => ({
- showMore: !prevState.showMore,
- }),
- async () => {
- let limit = defaultSearchLimit;
- if (this.state.showMore) limit = 50;
- await helpers.getJSONWait(searchURL(this.apiUrl, this.state.value, this.state.selectedType.value, this.state.municipality, limit), (responseJson) => {
- if (responseJson !== undefined) this.searchResultsHandler(responseJson, limit);
- else this.searchResultsHandler(responseJson, limit);
- });
- }
- );
+ useEffect(() => {
+ let limit = defaultSearchLimit;
+ if (showMore) limit = 50;
+ helpers.waitForLoad(["map", "settings"], Date.now(), 30, () => {
+ helpers.getJSON(searchURL(apiUrlRef.current, value, selectedType.value, municipality, limit), (responseJson) => {
+ if (responseJson !== undefined) searchResultsHandler(responseJson, limit);
+ });
+ });
+ }, [showMore]);
+ const onMoreOptionsClick = (evt) => {
+ setShowMore(!showMore);
helpers.addAppStat("Search More Button", "Click");
};
- searchLayers = () => {};
+ const searchLayers = () => {};
- searchResultsHandler = (results, limit) => {
+ const searchResultsHandler = (results, limit) => {
let newResults = Object.assign([], results);
- if (this.state.value.length < 2) {
- this.setState({ searchResults: [] });
+ //get a distinct item based on location_id
+ newResults = [...new Map(newResults.map((item) => [item["location_id"], item])).values()];
+ if (value.length < 2) {
+ setSearchResults([]);
return;
}
- const selectedType = this.state.selectedType.value;
+ const selectedTypeValue = selectedType.value;
// SET IMAGE NAME
newResults.forEach((layer) => {
@@ -539,7 +595,7 @@ class Search extends Component {
});
// SEARCH LAYERS
- if (selectedType === "All" || selectedType === "Map Layer") {
+ if (selectedTypeValue === "All" || selectedTypeValue === "Map Layer") {
let layers = [];
const searchResultTOC_Actions = window.config.searchResultTOC_Actions !== undefined ? window.config.searchResultTOC_Actions.toLowerCase() : "Default";
// eslint-disable-next-line
@@ -548,7 +604,7 @@ class Search extends Component {
const layerItems = row[1];
layerItems.forEach((layer) => {
if (layer.tocDisplayName !== undefined) {
- if (layer.tocDisplayName.toUpperCase().indexOf(this.state.value.toUpperCase()) >= 0) {
+ if (layer.tocDisplayName.toUpperCase().indexOf(value.toUpperCase()) >= 0) {
//console.log(layer);
layers.push({
fullName: layer.name,
@@ -566,59 +622,60 @@ class Search extends Component {
});
newResults = layers.concat(newResults);
}
+ // console.log("searchResultsHandler", window.config);
// TOOLS
- if ((selectedType === "All" || selectedType === "Tool") && window.config.mainSidebarItems !== undefined && window.config.mainSidebarItems["hideTools"] !== true) {
- let tools = [];
- // eslint-disable-next-line
- window.config.sidebarToolComponents.forEach((tool) => {
- if (tool.name.toUpperCase().indexOf(this.state.value.toUpperCase()) >= 0 && (tool.enabled === undefined || tool.enabled)) {
- tools.push({
- name: helpers.replaceAllInString(tool.name, "_", " "),
- type: "Tool",
- imageName: "tools.png",
- });
- }
- });
- newResults = tools.concat(newResults);
- }
+ if (!(window.config.mainSidebarItems && window.config.mainSidebarItems["hideTools"] !== true))
+ if ((selectedTypeValue === "All" || selectedTypeValue === "Tool") && window.config.sidebarToolComponents !== undefined) {
+ let tools = [];
+ // eslint-disable-next-line
+ window.config.sidebarToolComponents.forEach((tool) => {
+ if (tool.name.toUpperCase().indexOf(value.toUpperCase()) >= 0 && (tool.enabled === undefined || tool.enabled)) {
+ tools.push({
+ name: helpers.replaceAllInString(tool.name, "_", " "),
+ type: "Tool",
+ imageName: "tools.png",
+ });
+ }
+ });
+ newResults = tools.concat(newResults);
+ }
// THEMES
- if ((selectedType === "All" || selectedType === "Theme") && window.config.mainSidebarItems !== undefined && window.config.mainSidebarItems["hideThemes"] !== true) {
- let themes = [];
- window.config.sidebarThemeComponents.forEach((theme) => {
- if (theme.name && theme.name.toUpperCase().indexOf(this.state.value.toUpperCase()) >= 0 && (theme.enabled === undefined || theme.enabled)) {
- themes.push({
- name: helpers.replaceAllInString(theme.name, "_", " "),
- type: "Theme",
- imageName: "themes.png",
- });
- }
- });
- newResults = themes.concat(newResults);
- }
+ if (!(window.config.mainSidebarItems && window.config.mainSidebarItems["hideThemes"] !== true))
+ if ((selectedTypeValue === "All" || selectedTypeValue === "Theme") && window.config.sidebarThemeComponents !== undefined) {
+ let themes = [];
+ window.config.sidebarThemeComponents.forEach((theme) => {
+ if (theme.name && theme.name.toUpperCase().indexOf(value.toUpperCase()) >= 0 && (theme.enabled === undefined || theme.enabled)) {
+ themes.push({
+ name: helpers.replaceAllInString(theme.name, "_", " "),
+ type: "Theme",
+ imageName: "themes.png",
+ });
+ }
+ });
+ newResults = themes.concat(newResults);
+ }
- this.setState({ searchResults: newResults });
+ setSearchResults(newResults);
};
- render() {
+ useEffect(() => {
// INIT LAYER
- this.initsearchLayers();
-
- let dropDownWidth = 50;
- if (this.state.selectedType !== "") dropDownWidth = dropDownWidth + this.state.selectedType.label.length * 9;
- if (this.autoCompleteRef !== undefined) {
- const el = document.getElementById("sc-search-textbox");
- if (!this.state.hideTypeDropDown) el.setAttribute("style", "padding-left: " + (dropDownWidth + 5) + "px");
- else el.setAttribute("style", "padding-left: 5px");
- }
-
- const groupsDropDownStyles = {
+ let currentDropDownWidth = 50;
+ initsearchLayers();
+ if (selectedType !== "") currentDropDownWidth = currentDropDownWidth + selectedType.label.length * 9;
+ // if (autoCompleteRef.current !== undefined) {
+ const el = document.getElementById("sc-search-textbox-mui");
+ if (!hideTypeDropDown) el.setAttribute("style", "padding-left: " + (currentDropDownWidth + 5) + "px");
+ else el.setAttribute("style", "padding-left: 5px");
+ // }
+ groupsDropDownStyles.current = {
control: (provided) => ({
...provided,
minHeight: "38px",
// width: "150px"
- width: dropDownWidth + "px",
+ width: currentDropDownWidth + "px",
border: "none",
boxShadow: "none",
background: "transparent",
@@ -645,112 +702,179 @@ class Search extends Component {
width: "100%",
}),
};
+ });
+
+ const onChange = (event, value) => {
+ // console.log("onChange", value);
+ // CHECK FOR ILLEGAL CHARS
+ if (value.indexOf("\\") !== -1) {
+ return;
+ }
+ setValue(value);
+ };
+
+ useEffect(() => {
+ if (value !== "") {
+ setIconInitialClass("sc-search-icon-initial-hidden");
+ setIconActiveClass("sc-search-icon-active");
+ let limit = 100;
+ // let limit = defaultSearchLimit;
+ // if (showMore) limit = 50;
+ helpers.waitForLoad(["map", "settings"], Date.now(), 30, () => {
+ helpers.getJSON(searchURL(apiUrlRef.current, value, selectedType.value, municipality, limit), (responseJson) => {
+ if (responseJson !== undefined) searchResultsHandler(responseJson, limit);
+
+ // if (responseJson !== undefined) searchResultsHandler(responseJson, defaultSearchLimit);
+ });
+ });
+ } else {
+ setIconInitialClass("sc-search-icon-initial");
+ setIconActiveClass("sc-search-icon-active-hidden");
+ setSearchResults([]);
+ }
+ }, [value]);
+ const handleRenderMenu = (children) => {
return (
{
+ if (evt.key === "Enter") {
+ burgerButtonHandler();
+ }
+ }}
+ >
+
+
-
+
- ![Header Logo]({require("./images/bar-button.png")})
-
-
-
- 
+ ![dots]({require("./images/vertical-dot-menu.png")})
*/}
+
+ );
+};
export default Header;
diff --git a/src/header/Search.css b/src/header/Search.css
index f1bac250..3fa266cf 100644
--- a/src/header/Search.css
+++ b/src/header/Search.css
@@ -13,6 +13,37 @@
box-sizing: border-box;
}
+#sc-search-textbox-mui {
+ z-index: 1;
+ margin-right: 10px;
+ margin-bottom: 5px;
+ height: 41px;
+ width: 100%;
+ font-family: Verdana, Arial, sans-serif;
+ font-size: 22px;
+ width: 100%;
+ padding-left: 80px;
+ padding-top: 0px;
+ padding-bottom: 0px;
+ box-shadow: none;
+ display: table-cell;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.sc-search-textbox-mui legend {
+ display: none !important;
+}
+.sc-search-textbox-mui {
+ height: 41px;
+}
+.sc-search-textbox-mui .MuiInputBase-hiddenLabel,
+.sc-search-textbox-mui .MuiOutlinedInput-root {
+ padding: 0px !important;
+}
+.sc-search-textbox-mui:focus {
+ border: 1px solid #f9c280 !important;
+}
#sc-search-textbox:focus {
border: 1px solid #f9c280 !important;
}
@@ -27,7 +58,12 @@
.sc-search-icon-initial-hidden {
display: none;
}
-
+.MuiAutocomplete-clearIndicator,
+.MuiAutocomplete-clearIndicator button {
+ color: red;
+ background-color: red !important;
+ visibility: visible !important;
+}
.sc-search-icon-active {
position: absolute;
right: 77px;
@@ -65,6 +101,27 @@
background-color: #428bca;
font-family: Verdana, Arial, sans-serif;
}
+.sc-search-item-mui {
+ font-size: 16px;
+ width: 97%;
+ padding: 6px;
+ border-bottom: 1px solid #e5e5e5;
+ min-width: 450px;
+ cursor: pointer;
+ font-family: Verdana, Arial, sans-serif;
+}
+
+.sc-search-item-mui:hover {
+ font-size: 16px;
+ width: 97%;
+ padding: 6px;
+ border-bottom: 1px solid #e5e5e5;
+ min-width: 450px;
+ cursor: pointer;
+ border: 1px solid #f9c280 !important;
+ background-color: #428bca;
+ font-family: Verdana, Arial, sans-serif;
+}
.sc-search-menu {
position: absolute;
z-index: 99999999;
diff --git a/src/header/Search.jsx b/src/header/Search.jsx
index f3bbafe6..740f7c58 100644
--- a/src/header/Search.jsx
+++ b/src/header/Search.jsx
@@ -1,7 +1,10 @@
-import React, { Component } from "react";
+import React, { useEffect, useState, useRef } from "react";
import * as helpers from "../helpers/helpers";
import * as drawingHelpers from "../helpers/drawingHelpers";
-import Autocomplete from "react-autocomplete";
+import TextField from "@mui/material/TextField";
+
+import { Autocomplete as MUIAutocomplete } from "@mui/material";
+import { MdCancel } from "react-icons/md";
import "./Search.css";
import Highlighter from "react-highlight-words";
import { Vector as VectorLayer } from "ol/layer";
@@ -12,6 +15,7 @@ import { CopyToClipboard } from "react-copy-to-clipboard";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import Select from "react-select";
+// import { set } from "ol/transform";
// URLS
const googleDirectionsURL = (lat, long) => `https://www.google.com/maps?saddr=Current+Location&daddr=${lat},${long}`;
@@ -22,10 +26,6 @@ const searchTypesURL = (apiUrl) => `${apiUrl}public/search/types`;
// DEFAULT SEARCH LIMIT
const defaultSearchLimit = 10;
-// VECTOR LAYERS
-let searchGeoLayer = null;
-let searchIconLayer = null;
-
// LOCATION ID (FROM SEARCH)
const locationId = helpers.getURLParameter("LOCATIONID", false, true);
@@ -37,77 +37,111 @@ function importAllImages(r) {
return images;
}
-class Search extends Component {
- constructor(props) {
- super(props);
-
- // STYLES
- this.styles = {
- poly: new Style({
- stroke: new Stroke({
- width: 4,
- color: [255, 0, 0, 0.8],
- }),
+const Search = (props) => {
+ // const autoCompleteRef = useRef();
+ const [value, setValue] = useState("");
+ const [searchResults, setSearchResults] = useState([]);
+ const [iconInitialClass, setIconInitialClass] = useState("sc-search-icon-initial");
+ const [iconActiveClass, setIconActiveClass] = useState("sc-search-icon-active-hidden");
+ const [showMore, setShowMore] = useState(false);
+ const [searchTypes, setSearchTypes] = useState([]);
+ const [selectedType, setSelectedType] = useState("");
+ const [municipality, setMunicipality] = useState(undefined);
+ const [placeHolderText, setPlaceHolderText] = useState("Search...");
+ const [hideTypeDropDown, setHideTypeDropDown] = useState(false);
+ const searchResultsRef = useRef([]);
+ // VECTOR LAYERS
+ const searchGeoLayerRef = useRef(null);
+ const searchIconLayerRef = useRef(null);
+ const groupsDropDownStyles = useRef({
+ control: (provided) => ({
+ ...provided,
+ minHeight: "38px",
+ // width: "150px"
+ width: "50px",
+ border: "none",
+ boxShadow: "none",
+ background: "transparent",
+ backgroundColor: "unset",
+ }),
+ indicatorsContainer: (provided) => ({
+ ...provided,
+ height: "38px",
+ }),
+ clearIndicator: (provided) => ({
+ ...provided,
+ padding: "5px",
+ }),
+ dropdownIndicator: (provided) => ({
+ ...provided,
+ padding: "5px",
+ }),
+ menu: (provided) => ({
+ ...provided,
+ width: "200px",
+ }),
+ container: (provided) => ({
+ ...provided,
+ width: "100%",
+ }),
+ });
+ const styles = {
+ poly: new Style({
+ stroke: new Stroke({
+ width: 4,
+ color: [255, 0, 0, 0.8],
}),
- point: new Style({
- image: new Icon({
- anchor: [0.5, 1],
- src: images["map-marker.png"],
- }),
+ }),
+ point: new Style({
+ image: new Icon({
+ anchor: [0.5, 1],
+ src: images["map-marker.png"],
}),
- geocode: new Style({
- image: new CircleStyle({
- opacity: 0.5,
- radius: 7,
- fill: new Fill({ color: [236, 156, 155, 0.7] }),
- }),
+ }),
+ geocode: new Style({
+ image: new CircleStyle({
+ opacity: 0.5,
+ radius: 7,
+ fill: new Fill({ color: [236, 156, 155, 0.7] }),
}),
- };
-
- // BIND THIS TO THE CLICK FUNCTION
- this.removeMarkersClick = this.removeMarkersClick.bind(this);
- this.cleanup = this.cleanup.bind(this);
-
+ }),
+ };
+ const apiUrlRef = useRef(window.config.apiUrl);
+ const [storageKey, setStorageKey] = useState("");
+ useEffect(() => {
+ if (searchResults.length > 0) {
+ searchResultsRef.current = searchResults;
+ }
+ }, [searchResults]);
+ useEffect(() => {
// LISTEN FOR MAP TO MOUNT
- window.emitter.addListener("mapParametersComplete", () => this.onMapLoad());
-
+ const mapParametersCompleteListener = () => onMapLoad();
+ window.emitter.addListener("mapParametersComplete", mapParametersCompleteListener);
// LISTEN FOR SEARCH FROM HISTORY
- window.emitter.addListener("searchHistorySelect", (item) => this.onHistoryItemSelect(item));
-
+ const searchHistorySelectListener = (item) => onHistoryItemSelect(item);
+ window.emitter.addListener("searchHistorySelect", searchHistorySelectListener);
// LISTEN FOR INITIAL SEARCH
- window.emitter.addListener("tocLoaded", () => this.onInitialSearch());
-
+ const tocLoadedListener = () => onInitialSearch();
+ window.emitter.addListener("tocLoaded", tocLoadedListener);
// LISTEN FOR EXTERNAL COMPONENT SEARCH
- window.emitter.addListener("searchItem", (searchType, searchText, hidden = false, timeout = undefined) => this.onSearch(searchType, searchText, hidden, timeout));
-
- this.state = {
- value: "",
- searchResults: [],
- hover: false,
- iconInitialClass: "sc-search-icon-initial",
- iconActiveClass: "sc-search-icon-active-hidden",
- showMore: false,
- searchTypes: [],
- selectedType: "",
- municipality: undefined,
- placeHolderText: "Search...",
- hideTypeDropDown: false,
- };
- }
-
- requestTimer = null;
-
- onMapLoad = () => {
- helpers.waitForLoad("map", Date.now(), 30, () => {
- // HANDLE URL PARAMETER
- if (locationId !== null) {
- // CALL API TO GET LOCATION DETAILS
- helpers.getJSON(searchInfoURL(this.apiUrl, locationId), (result) => this.jsonCallback(result));
- }
- });
- };
-
- componentDidMount() {
+ const searchItemListener = (searchType, searchText, hidden = false, timeout = undefined) => onSearch(searchType, searchText, hidden, timeout);
+ window.emitter.addListener("searchItem", searchItemListener);
+ // PATCH TO CLOSE MENU WHEN MAP IS CLICKED
+ const clickEvent = document.body.addEventListener(
+ "click",
+ (evt) => {
+ if (document.activeElement.id !== "sc-search-textbox") return;
+
+ if (typeof evt.target.className === "string") {
+ evt.target.className.split(" ").forEach((className) => {
+ if (className === "ol-overlaycontainer-stopevent") {
+ document.getElementById("map").focus();
+ }
+ });
+ }
+ },
+ true
+ );
helpers.waitForLoad(["map", "settings"], Date.now(), 30, () => {
let muni = window.config.municipality;
if (!muni) {
@@ -115,14 +149,14 @@ class Search extends Component {
const urlParams = new URLSearchParams(queryString);
muni = urlParams.get("MUNI");
}
- if (muni) this.setState({ municipality: muni });
- this.apiUrl = window.config.apiUrl;
- this.storageKey = window.config.storageKeys.SearchHistory;
+ if (muni) setMunicipality(muni);
+ apiUrlRef.current = window.config.apiUrl;
+ setStorageKey(window.config.storageKeys.SearchHistory);
if (window.config.search) {
- if (window.config.search.placeHolder !== undefined) this.setState({ placeHolderText: window.config.search.placeHolder });
- if (window.config.search.hideTypes !== undefined) this.setState({ hideTypeDropDown: window.config.search.hideTypes });
+ if (window.config.search.placeHolder !== undefined) setPlaceHolderText(window.config.search.placeHolder);
+ if (window.config.search.hideTypes !== undefined) setHideTypeDropDown(window.config.search.hideTypes);
}
- helpers.getJSON(searchTypesURL(this.apiUrl), (result) => {
+ helpers.getJSON(searchTypesURL(apiUrlRef.current), (result) => {
let items = [];
items.push({ label: "All", value: "All" });
result.forEach((type) => {
@@ -133,38 +167,44 @@ class Search extends Component {
items.push({ label: "Map Layer", value: "Map Layer" });
items.push({ label: "Tool", value: "Tool" });
items.push({ label: "Theme", value: "Theme" });
- this.setState({ searchTypes: items, selectedType: items[0] });
+ setSearchTypes(items);
+ setSelectedType(items[0]);
});
-
- // PATCH TO CLOSE MENU WHEN MAP IS CLICKED
- this.clickEvent = document.body.addEventListener(
- "click",
- (evt) => {
- if (document.activeElement.id !== "sc-search-textbox") return;
-
- if (typeof evt.target.className === "string") {
- evt.target.className.split(" ").forEach((className) => {
- if (className === "ol-overlaycontainer-stopevent") {
- document.getElementById("map").focus();
- }
- });
- }
- },
- true
- );
});
- }
-
- onHistoryItemSelect = (item) => {
- let searchResults = [item];
- if (this.state.searchResults.length > 0) searchResults.push(this.state.searchResults);
- let value = item.name.length > 25 ? item.name.substring(0, 25) : item.name;
- this.setState({ value: value, searchResults: searchResults }, () => {
- this.onItemSelect(value, item);
+ return () => {
+ document.body.removeEventListener("click", clickEvent);
+ window.emitter.removeListener("mapParametersComplete", mapParametersCompleteListener);
+ window.emitter.removeListener("searchHistorySelect", searchHistorySelectListener);
+ window.emitter.removeListener("tocLoaded", tocLoadedListener);
+ window.emitter.removeListener("searchItem", searchItemListener);
+
+ // mapParametersCompleteListener.remove();
+ // searchHistorySelectListener.remove();
+ // tocLoadedListener.remove();
+ // searchItemListener.remove();
+ };
+ }, []);
+
+ const onMapLoad = () => {
+ helpers.waitForLoad(["map", "settings"], Date.now(), 30, () => {
+ // HANDLE URL PARAMETER
+ if (locationId !== null) {
+ // CALL API TO GET LOCATION DETAILS
+ helpers.getJSON(searchInfoURL(apiUrlRef.current, locationId), (result) => jsonCallback(result));
+ }
});
};
- onInitialSearch = (search_type = undefined, search = undefined) => {
+ const onHistoryItemSelect = (item) => {
+ let searchResultsHistory = [item];
+ if (searchResults.length > 0) searchResultsHistory.push(searchResults);
+ let currentValue = item.name.length > 25 ? item.name.substring(0, 25) : item.name;
+ setValue(currentValue);
+ setSearchResults(searchResultsHistory);
+ onItemSelect(currentValue, item);
+ };
+
+ const onInitialSearch = (search_type = undefined, search = undefined) => {
// GET SEARCH URL PARAMETERS
if (!search) search = helpers.getURLParameter("q", true, true);
if (!search_type) search_type = helpers.getURLParameter("qt", true, true);
@@ -172,59 +212,68 @@ class Search extends Component {
if (!search_type && search_type === null) {
search_type = "All";
}
- this.onSearch(search_type, search);
+ onSearch(search_type, search);
};
- onSearch = (search_type = undefined, search = undefined, hidden = false, timeout = undefined) => {
+ const onSearch = (search_type = undefined, search = undefined, hidden = false, timeout = undefined) => {
if (!search && search === null) return;
if (!search_type && search_type === null) {
search_type = "All";
}
- if (!hidden)
- this.setState({
- value: search,
- selectedType: { label: search_type, value: search_type },
+ if (!hidden) {
+ setValue(search);
+ setSelectedType({ label: search_type, value: search_type });
+ }
+ helpers.waitForLoad(["map", "settings"], Date.now(), 30, () => {
+ helpers.getJSON(encodeURI(searchURL(apiUrlRef.current, search, search_type, municipality, 1)), (responseJson) => {
+ if (responseJson[0] !== undefined && responseJson[0].location_id !== null && responseJson[0].location_id !== undefined) {
+ helpers.getJSON(searchInfoURL(apiUrlRef.current, responseJson[0].location_id), (result) => jsonCallback(result, hidden, timeout));
+ }
});
- helpers.getJSON(encodeURI(searchURL(this.apiUrl, search, search_type, this.state.municipality, 1)), (responseJson) => {
- if (responseJson[0] !== undefined && responseJson[0].location_id !== null && responseJson[0].location_id !== undefined) {
- helpers.getJSON(searchInfoURL(this.apiUrl, responseJson[0].location_id), (result) => this.jsonCallback(result, hidden, timeout));
- }
});
};
+ useEffect(() => {
+ let limit = 100;
- onTypeDropDownChange = (selectedType) => {
- this.setState({ selectedType: selectedType }, async () => {
- let limit = defaultSearchLimit;
- if (this.state.showMore) limit = 50;
- await helpers.getJSONWait(searchURL(this.apiUrl, this.state.value, this.state.selectedType.value, this.state.municipality, limit), (responseJson) => {
- if (responseJson !== undefined) this.setState({ searchResults: responseJson });
- else this.setState({ searchResults: [] });
+ // let limit = defaultSearchLimit;
+ // if (showMore) limit = 50;
+ helpers.waitForLoad(["map", "settings"], Date.now(), 30, () => {
+ helpers.getJSON(searchURL(apiUrlRef.current, value, selectedType.value, municipality, limit), (responseJson) => {
+ if (responseJson !== undefined) searchResultsHandler(responseJson, limit);
+ // if (responseJson !== undefined) setSearchResults(responseJson);
+ // else setSearchResults([]);
});
});
+ }, [selectedType]);
+ const onTypeDropDownChange = (selectedType) => {
+ setSelectedType(selectedType);
helpers.addAppStat("Search Type DropDown", selectedType.value);
};
- removeMarkersClick() {
- this.cleanup();
- }
+ const removeMarkersClick = () => {
+ cleanup();
+ };
- myMapsClick = (evt) => {
+ const myMapsClick = (evt) => {
helpers.waitForLoad("map", Date.now(), 30, () => {
- const result = this.state.searchResults[0];
- if (searchIconLayer.getSource().getFeatures()[0] === undefined) return;
+ const result = searchResultsRef.current[0];
+ if (searchIconLayerRef.current.getSource().getFeatures()[0] === undefined) return;
// ADD MYMAPS
- if (searchGeoLayer.getSource().getFeatures().length === 0) window.emitter.emit("addMyMapsFeature", searchIconLayer.getSource().getFeatures()[0], result.name);
- else window.emitter.emit("addMyMapsFeature", searchGeoLayer.getSource().getFeatures()[0], result.name);
+ if (searchGeoLayerRef.current.getSource().getFeatures().length === 0) window.emitter.emit("addMyMapsFeature", searchIconLayerRef.current.getSource().getFeatures()[0], result.name);
+ else window.emitter.emit("addMyMapsFeature", searchGeoLayerRef.current.getSource().getFeatures()[0], result.name);
// CLEAN UP
- this.cleanup();
+ cleanup();
});
};
- directionsClick(evt) {
+ const directionsClick = (evt) => {
// GET CURRENT FEATURE
- var coords = searchIconLayer.getSource().getFeatures()[0].getGeometry().getCoordinates();
+ var coords = undefined;
+
+ if (searchIconLayerRef.current.getSource().getFeatures()[0] === undefined) return;
+ if (searchGeoLayerRef.current.getSource().getFeatures()[0]) coords = searchIconLayerRef.current.getSource().getFeatures()[0].getGeometry().getCoordinates();
// CONVER TO LAT LONG
var latLongCoords = transform(coords, "EPSG:3857", "EPSG:4326");
@@ -232,39 +281,45 @@ class Search extends Component {
// OPEN GOOGLE DIRECTIONS
var url = googleDirectionsURL(latLongCoords[1], latLongCoords[0]);
window.open(url, "_blank");
- }
+ };
// INIT SEARCH LAYERS
- initsearchLayers() {
- if (window.map != null && searchGeoLayer == null) {
+ const initsearchLayers = () => {
+ if (window.map != null && searchGeoLayerRef.current == null) {
// HOLDS LINES AND POLYS
- searchGeoLayer = new VectorLayer({
+ searchGeoLayerRef.current = new VectorLayer({
source: new VectorSource({
features: [],
}),
zIndex: 1000,
});
- searchGeoLayer.set("name", "sc-search-geo");
- window.map.addLayer(searchGeoLayer);
+ searchGeoLayerRef.current.set("name", "sc-search-geo");
+ window.map.addLayer(searchGeoLayerRef.current);
// HOLDS CENTROID (CLICKABLE)
- searchIconLayer = new VectorLayer({
+ searchIconLayerRef.current = new VectorLayer({
source: new VectorSource({
features: [],
}),
zIndex: 1000,
});
- searchIconLayer.setStyle(this.styles["point"]);
- searchIconLayer.set("name", "sc-search-icon");
- searchIconLayer.set("disableParcelClick", true);
- window.map.addLayer(searchIconLayer);
+ searchIconLayerRef.current.setStyle(styles["point"]);
+ searchIconLayerRef.current.set("name", "sc-search-icon");
+ searchIconLayerRef.current.set("disableParcelClick", true);
+ window.map.addLayer(searchIconLayerRef.current);
window.map.on("singleclick", (evt) => {
- var feature = window.map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
- if (layer === null) return;
-
- if (layer.get("name") !== undefined && layer.get("name") === "sc-search-icon") return feature;
- });
+ var feature = window.map.forEachFeatureAtPixel(
+ evt.pixel,
+ function (feature, layer) {
+ return feature;
+ },
+ {
+ layerFilter: function (layer) {
+ return layer.get("name") === "sc-search-icon";
+ },
+ }
+ );
if (feature !== undefined) {
window.popup.show(
@@ -272,32 +327,32 @@ class Search extends Component {
+
+
+
+
+ 
+
+
+
+ {window.config.showHelpButtonInsteadOfFeedback ? (
+
+
- helpers.showURLWindow(window.config.helpUrl, false, "full")}>
+ ?
+
- 
*/}
-
- );
- }
-}
-//
+ )}
+
+ {/*
+ ![feedback]({require("./images/feedback.png")})
+ Feedback
- {window.config.showHelpButtonInsteadOfFeedback ? (
-
+ Feedback
-
- ) : (
- helpers.showURLWindow(window.config.helpUrl, false, "full")}>
- ?
-
-
-
- Feedback
-
- )}
- {/*
- Feedback
-
-
-
+
+ );
+ };
+ const handleRenderItem = (item, isHighlighted) => {
+ let type = "Unknown";
+ if (item.type === "Map Layer") type = item.layerGroupName;
+ else if (item.type === "Tool" || item.type === "Theme") type = "";
+ else type = item.municipality;
+ return (
+ 9 ? "sc-search-menu sc-search-menu-scrollable" : "sc-search-menu"}>{children}
+
+ (this.autoCompleteRef = el)}
- inputProps={{
- id: "sc-search-textbox",
- tabIndex: "1",
- placeholder: this.state.placeHolderText,
- name: "sc-search-textbox",
- onFocus: (result) => {
- helpers.disableKeyboardEvents(true);
- },
- onBlur: (result) => {
- helpers.disableKeyboardEvents(false);
- },
- }}
- className="sc-search-textbox"
- wrapperStyle={{
- position: "relative",
- display: "inline-block",
- width: "100%",
- zIndex: "100000",
- }}
- value={this.state.value}
- items={this.state.searchResults}
- getItemValue={(item) => item.name}
- onSelect={(value, item) => {
- this.onItemSelect(value, item);
- }}
- onChange={async (event, value) => {
- // CHECK FOR ILLEGAL CHARS
- if (value.indexOf("\\") !== -1) {
- return;
- }
-
- this.setState({ value });
- if (value !== "") {
- this.setState({
- iconInitialClass: "sc-search-icon-initial-hidden",
- });
- this.setState({ iconActiveClass: "sc-search-icon-active" });
-
- let limit = defaultSearchLimit;
- if (this.state.showMore) limit = 50;
- await helpers.getJSONWait(searchURL(this.apiUrl, value, this.state.selectedType.value, this.state.municipality, limit), (responseJson) => {
- if (responseJson !== undefined) this.searchResultsHandler(responseJson, defaultSearchLimit);
- });
- } else {
- this.setState({ iconInitialClass: "sc-search-icon-initial" });
- this.setState({
- iconActiveClass: "sc-search-icon-active-hidden",
- });
-
- this.setState({ searchResults: [] });
- }
- }}
- renderMenu={(children) => (
- ![search]({images["magnify.png"]})
- ![clear]({images["clear.png"]})
);
- }
-}
+ };
+ const [loading, setLoading] = useState(false);
-export default Search;
+ return (
+
+ 
+
+
+
-
- {type === "" ? item.type : " - " + type + " (" + item.type + ")"}
-
- )}
- renderItem={(item, isHighlighted) => {
- let type = "Unknown";
- if (item.type === "Map Layer") type = item.layerGroupName;
- else if (item.type === "Tool" || item.type === "Theme") type = "";
- else type = item.municipality;
- return (
- 9 ? "sc-search-menu sc-search-menu-scrollable" : "sc-search-menu"}>{children}
-
-
- );
- }}
- />
-
-
-
-
-
- {type === "" ? item.type : " - " + type + " (" + item.type + ")"}
-
-
+ {
+ // console.log("filterOptions", options);
- this.isPlaceOrGeocode = this.props.feature.get("isPlaceOrGeocode");
- }
+ return options.filter((option) => {
+ return option.name.toLowerCase().indexOf(value.toLowerCase()) > -1;
+ });
+ }}
+ disableClearable={true}
+ classes={{ root: "sc-search-textbox-mui" }}
+ noOptionsText={"No results found"}
+ loading={loading}
+ loadingText={"Searching..."}
+ value={value}
+ autoComplete={false}
+ autoHighlight={false}
+ autoSelect={false}
+ selectOnFocus={false}
+ freeSolo={true}
+ fullWidth={true}
+ disabled={props.disabled || false}
+ inputValue={value}
+ onInputChange={(e, value) => {
+ setValue(value);
+ }}
+ onChange={(e, selectedOption, reason) => {
+ switch (reason) {
+ case "selectOption":
+ // console.log("onChange", reason, e, selectedOption);
+ onItemSelect(selectedOption.name, selectedOption);
+ break;
+ case "clear":
+ // console.log("onChange", reason, e, selectedOption);
+ cleanup();
+ break;
+ case "removeOption":
+ // console.log("onChange", e, selectedOption, reason);
+ break;
+ case "createOption":
+ // console.log("onChange", e, selectedOption, reason);
+ break;
+ case "blur":
+ // console.log("onChange", e, selectedOption, reason);
+ break;
+ case "input":
+ // console.log("onChange", e, selectedOption, reason);
+ break;
+ default:
+ break;
+ }
+ }}
+ options={searchResults}
+ // isOptionEqualToValue={(option, value) => {
+ // console.log("isOptionEqualToValue", option, value, option.name.indexOf(value) > -1);
+ // return option.name === value;
+ // }}
+ getOptionLabel={(item) => {
+ let type = "Unknown";
+ if (item.type === "Map Layer") type = item.layerGroupName;
+ else if (item.type === "Tool" || item.type === "Theme") type = "";
+ else type = item.municipality;
+
+ return typeof item !== "object" ? item : `${item.name} ${type === "" ? item.type : ` - ${type} (${item.type})`}`;
+ }}
+ renderOption={(props, item) => {
+ // console.log("renderOption", props, item);
+ let type = "Unknown";
+ if (item.type === "Map Layer") type = item.layerGroupName;
+ else if (item.type === "Tool" || item.type === "Theme") type = "";
+ else type = item.municipality;
+ return (
+
+ );
+};
+
+export default Search;
- getShareURL = (value) => {
+const PopupContent = (props) => {
+ const getShareURL = (value) => {
//GET URL
var url = window.location.href;
@@ -758,43 +882,44 @@ class PopupContent extends Component {
if (url.indexOf("?") > 0) {
let newUrl = helpers.removeURLParameter(url, "LOCATIONID");
if (newUrl.indexOf("?") > 0) {
- url = newUrl + "&LOCATIONID=" + this.props.shareLocationId;
+ url = newUrl + "&LOCATIONID=" + props.shareLocationId;
} else {
- url = newUrl + "?LOCATIONID=" + this.props.shareLocationId;
+ url = newUrl + "?LOCATIONID=" + props.shareLocationId;
}
} else {
- url = url + "?LOCATIONID=" + this.props.shareLocationId;
+ url = url + "?LOCATIONID=" + props.shareLocationId;
}
return url;
};
+ const [copied, setCopied] = useState(false);
+ const [shareURL, setShareURL] = useState(getShareURL());
+ const isPlaceOrGeocode = props.feature.get("isPlaceOrGeocode");
- onShareClick = (event) => {
- this.setState({ copied: true });
+ const onShareClick = (event) => {
+ setCopied(true);
helpers.showMessage("Share", "Link has been copied to your clipboard.", "green", 2000);
};
- render() {
- return (
-
+
+
-class PopupContent extends Component {
- constructor(props) {
- super(props);
- this.state = {
- copied: false,
- shareURL: this.getShareURL(),
- };
+
+
+ );
+ }}
+ renderInput={(params) => {
+ // console.log("renderInput", params);
+ return (
+
+
+
+
+
+ {type === "" ? item.type : " - " + type + " (" + item.type + ")"}
+
+
+
-
-
-
-
-
-
+ );
+};
const MoreOptions = (props) => {
return (
diff --git a/src/helpers/FloatingMenu.jsx b/src/helpers/FloatingMenu.jsx
index b6689978..752ea046 100644
--- a/src/helpers/FloatingMenu.jsx
+++ b/src/helpers/FloatingMenu.jsx
@@ -1,163 +1,163 @@
-import React, { Component } from "react";
+import React, { useState, useEffect, useRef } from "react";
+
import Menu from "rc-menu";
import "rc-menu/assets/index.css";
import "./FloatingMenu.css";
-import * as helpers from "./helpers";
+import { waitForLoad } from "./helpers";
// PROPER USE OF THIS COMPONENT IS TO USE A PORTAL. HAVE A LOOK AT MyMapsItem FOR AN EXAMPLE.
-class FloatingMenu extends Component {
- constructor(props) {
- super(props);
- this.state = {
- isVisible: true,
- //styleMode: this.props.styleMode === undefined ? "right" : this.props.styleMode,
- style: {
- position: "absolute",
- zIndex: 10000,
- top: this.props.buttonEvent.pageY,
- left: this.props.buttonEvent.pageX,
- backgroundColor: "white",
- width: "180px",
- },
- };
- }
-
- componentDidMount() {
- helpers.waitForLoad("settings", Date.now(), 30, () => {
- this.getStyle((style) => {
- this.setState({ style: style });
- });
-
- // CLICK ANYWHERE ELSE WILL CLOSE MENU
- this.clickEvent = document.body.addEventListener(
- "click",
- (evt) => {
- if (typeof evt.target.className === "string") {
- // IGNORE CLASSNAMES
- let found = false;
- if (this.props.classNamesToIgnore !== undefined) {
- evt.target.className.split(" ").forEach((className) => {
- if (this.props.classNamesToIgnore.includes(className)) {
- found = true;
- return;
- }
- });
- }
-
- if (evt.target.className.indexOf("rc-menu") > -1 || evt.target.className.indexOf("sc-floating-menu-") > -1 || found) return;
- }
-
- if (this.container !== null && !this.container.contains(evt.target)) {
- this.setState({ isVisible: false });
- }
- },
- true
- );
- });
- }
-
- isElementInViewport(el) {
- var rect = el.getBoundingClientRect();
- return (
- rect.top >= 0 &&
- rect.left >= 0 &&
- rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) /*or $(window).height() */ &&
- rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
- );
- }
-
- getStyle = (callback) => {
- if (this.state === undefined || !this.state.isVisible) callback({ display: "none" });
-
- let yOffset = 0;
- let xOffset = 0;
- let style = null;
- window.requestAnimationFrame(() => {
- if (this.props.autoY) {
- if (this.container !== undefined && this.container !== null) {
- const isInViewport = this.isElementInViewport(this.container);
- if (!isInViewport) {
- yOffset = this.container.offsetHeight;
- }
- }
- }
-
- if (this.props.styleMode === "right") {
- xOffset = this.props.buttonEvent.pageX;
- } else if (this.props.styleMode === "left") {
- xOffset = this.props.buttonEvent.pageX - 180;
- } else if (this.props.autoX) {
- if (this.props.buttonEvent.pageX < 180) {
- xOffset = this.props.buttonEvent.pageX;
- } else {
- xOffset = this.props.buttonEvent.pageX - 180;
- }
- } else {
- xOffset = this.props.buttonEvent.pageX;
- }
-
- if (this.props.yOffset !== undefined) yOffset = this.props.yOffset;
- if (this.props.xOffset !== undefined) xOffset = this.props.xOffset;
- let width = this.props.width !== undefined ? this.props.width : "180px";
- style = {
- position: "absolute",
- zIndex: 1000,
- top: this.props.buttonEvent.pageY - yOffset,
- //left: this.state.styleMode === "right" ? this.props.buttonEvent.pageX : this.props.buttonEvent.pageX - 180,
- left: xOffset,
- backgroundColor: "white",
- width: width,
- };
-
- if (this.state.isVisible) callback(style);
- });
- };
-
- handleSelect = () => {
- this.setState({ isVisible: false });
- };
-
- handleClick = (info) => {
- this.props.onMenuItemClick(info.key);
- this.setState({ isVisible: false });
- };
-
- render() {
- if (!this.state.isVisible) {
- return null;
- }
-
- return (
- (this.container = container)}>
-
- );
- }
-}
+const FloatingMenu = (props) => {
+ const isMounted = useRef(false);
+ const [isVisible, setIsVisible] = useState(true);
+ const [style, setStyle] = useState({
+ position: "absolute",
+ zIndex: 10000,
+ top: props.buttonEvent.pageY,
+ left: props.buttonEvent.pageX,
+ backgroundColor: "white",
+ width: "180px",
+ });
+ const container = useRef(null);
+ useEffect(() => {
+ isMounted.current = true;
+ waitForLoad("settings", Date.now(), 30, () => {
+ document.body.addEventListener("click", handleClickAway, true);
+ });
+ }, []);
+ useEffect(
+ () => () => {
+ isMounted.current = false;
+ cleanup();
+ },
+ []
+ );
+ useEffect(() => {
+ if (isMounted.current === false) return;
+ getStyle((newStyle) => {
+ setStyle(newStyle);
+ });
+ }, [props.autoX, props.autoY, props.buttonEvent.pageX, props.buttonEvent.pageY, props.styleMode]);
+ const cleanup = () => {
+ document.body.removeEventListener("click", handleClickAway, true);
+ container.current = null;
+ };
+ const handleClickAway = (evt) => {
+ if (!isVisible || !isMounted.current) {
+ return;
+ }
+ if (typeof evt.target.className === "string") {
+ // IGNORE CLASSNAMES
+ let found = false;
+ if (props.classNamesToIgnore !== undefined) {
+ evt.target.className.split(" ").forEach((className) => {
+ if (props.classNamesToIgnore.includes(className)) {
+ found = true;
+ return;
+ }
+ });
+ }
+
+ if (evt.target.className.indexOf("rc-menu") > -1 || evt.target.className.indexOf("sc-floating-menu-") > -1 || found) return;
+ }
+ if (container.current !== null && !container.current.contains(evt.target)) {
+ setIsVisible(false);
+ cleanup();
+ }
+ };
+ const isElementInViewport = (el) => {
+ var rect = el.getBoundingClientRect();
+ return (
+ rect.top >= 0 &&
+ rect.left >= 0 &&
+ rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) /*or $(window).height() */ &&
+ rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
+ );
+ };
+
+ const getStyle = (callback) => {
+ let yOffset = 0;
+ let xOffset = 0;
+ let style = null;
+ window.requestAnimationFrame(() => {
+ if (props.autoY) {
+ if (container.current !== undefined && container.current !== null) {
+ const isInViewport = isElementInViewport(container.current);
+ if (!isInViewport) {
+ yOffset = container.current.offsetHeight;
+ }
+ }
+ }
+
+ if (props.styleMode === "right") {
+ xOffset = props.buttonEvent.pageX;
+ } else if (props.styleMode === "left") {
+ xOffset = props.buttonEvent.pageX - 180;
+ } else if (props.autoX) {
+ if (props.buttonEvent.pageX < 180) {
+ xOffset = props.buttonEvent.pageX;
+ } else {
+ xOffset = props.buttonEvent.pageX - 180;
+ }
+ } else {
+ xOffset = props.buttonEvent.pageX;
+ }
+
+ if (props.yOffset !== undefined) yOffset = props.yOffset;
+ if (props.xOffset !== undefined) xOffset = props.xOffset;
+ let width = props.width !== undefined ? props.width : "180px";
+ style = {
+ position: "absolute",
+ zIndex: 1000,
+ top: props.buttonEvent.pageY - yOffset,
+ //left: this.state.styleMode === "right" ? this.props.buttonEvent.pageX : this.props.buttonEvent.pageX - 180,
+ left: xOffset,
+ backgroundColor: "white",
+ width: width,
+ };
+
+ callback(style);
+ });
+ };
+
+ const handleSelect = () => {
+ setIsVisible(false);
+ };
+
+ const handleClick = (info) => {
+ props.onMenuItemClick(info.key);
+ setIsVisible(false);
+ };
+
+ return (
+
-
-
- {this.props.title}
-
-
-
-
+
+ );
+};
export default FloatingMenu;
// IMPORT ALL IMAGES
const images = importAllImages(require.context("./images", false, /\.(png|jpe?g|svg)$/));
function importAllImages(r) {
- let images = {};
- r.keys().map((item, index) => (images[item.replace("./", "")] = r(item)));
- return images;
+ let images = {};
+ r.keys().map((item, index) => (images[item.replace("./", "")] = r(item)));
+ return images;
}
export function FloatingMenuItem(props) {
- return (
-
+
+
+ {props.title}
+
+
+
+
- 
-
-
- );
+ return (
+
+
+
+
+ );
}
diff --git a/src/helpers/LoadingScreen.jsx b/src/helpers/LoadingScreen.jsx
index 1f5c48b1..93b3820d 100644
--- a/src/helpers/LoadingScreen.jsx
+++ b/src/helpers/LoadingScreen.jsx
@@ -1,110 +1,103 @@
-import React, { Component } from "react";
+import React, { useEffect, useState } from "react";
import "./LoadingScreen.css";
import * as helpers from "./helpers";
-class LoadingScreen extends Component {
- constructor(props) {
- super(props);
- this.state = {
- isVisible: false,
- containerStyle: {
- background: "rgba(0,0,0,0.35)",
- },
- spinnerStyle: {
- height: "120px",
- width: "120px",
- border: "16px solid #f3f3f3",
- borderTop: "16px solid #3498db",
- },
- messageStyle: {
- fontSize: "26px",
- color: "#3498db",
- },
- };
- }
- componentDidMount() {
- helpers.waitForLoad("settings", Date.now(), 30, () => {
- this.setState({ isVisible: this.props.visible }, () => {
- this.getStyles((styles) => {
- this.setState({
- spinnerStyle: styles.spinnerStyle,
- messageStyle: styles.messageStyle,
- containerStyle: styles.containerStyle,
- });
- });
- });
- });
- }
- //CONVERT hex to rgb
- hexToRgba(hex, alpha) {
- const hexRegex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
- const rgbaString = (r, g, b, a) => `rgba(${r},${g},${b},${a})`;
- var result = hexRegex.exec(hex);
- if (result) {
- const red = parseInt(result[1], 16);
- const green = parseInt(result[2], 16);
- const blue = parseInt(result[3], 16);
- return rgbaString(red, green, blue, alpha);
- } else {
- return "rgba(0,0,0,0.35)";
- }
- }
- getStyles = (callback) => {
- if (this.state === undefined || !this.state.isVisible)
- callback({
- containerStyle: { display: "none" },
- spinnerStyle: { display: "none" },
- messageStyle: { display: "none" },
- });
- let spinnerSize = 120;
- let spinnerBackColor = "#f3f3f3";
- let spinnerForeColor = "#3498db";
- let fontSize = "26px";
- let messageColor = "#3498db";
- let backgroundColor = "#ffffff";
- let backgroundOpacity = 0.35;
+const LoadingScreen = (props) => {
+ const [isVisible, setIsVisible] = useState(false);
+ const [containerStyle, setContainerStyle] = useState({
+ background: "rgba(0,0,0,0.35)",
+ });
+ const [spinnerStyle, setSpinnerStyle] = useState({
+ height: "120px",
+ width: "120px",
+ border: "16px solid #f3f3f3",
+ borderTop: "16px solid #3498db",
+ });
+ const [messageStyle, setMessageStyle] = useState({
+ fontSize: "26px",
+ color: "#3498db",
+ });
- if (this.props.spinnerSize !== undefined) spinnerSize = this.props.spinnerSize;
- if (this.props.spinnerBackColor !== undefined) spinnerBackColor = this.props.spinnerBackColor;
- if (this.props.spinnerForeColor !== undefined) spinnerForeColor = this.props.spinnerForeColor;
- if (this.props.fontSize !== undefined) fontSize = this.props.fontSize;
- if (this.props.messageColor !== undefined) messageColor = this.props.messageColor;
- if (this.props.backgroundColor !== undefined) backgroundColor = this.props.backgroundColor;
- if (this.props.backgroundOpacity !== undefined) backgroundOpacity = this.props.backgroundOpacity;
+ useEffect(() => {
+ helpers.waitForLoad("settings", Date.now(), 30, () => {
+ setIsVisible(props.visible);
+ getStyles((styles) => {
+ setSpinnerStyle(styles.spinnerStyle);
+ setMessageStyle(styles.messageStyle);
+ setContainerStyle(styles.containerStyle);
+ });
+ });
+ }, [props.visible]);
- let containerBackground = this.hexToRgba(backgroundColor, backgroundOpacity);
- const styles = {
- containerStyle: {
- background: containerBackground,
- },
- spinnerStyle: {
- height: spinnerSize + "px",
- width: spinnerSize + "px",
- marginTop: "-" + spinnerSize / 3 + "px",
- marginRight: "-" + spinnerSize / 2 + "px",
- border: "16px solid",
- borderColor: `${spinnerForeColor} ${spinnerBackColor} ${spinnerBackColor} ${spinnerBackColor}`,
- },
- messageStyle: {
- fontSize: fontSize,
- color: messageColor,
- marginTop: spinnerSize + 26 + "px",
- },
- };
+ const hexToRgba = (hex, alpha) => {
+ //CONVERT hex to rgb
+ const hexRegex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
+ const rgbaString = (r, g, b, a) => `rgba(${r},${g},${b},${a})`;
+ var result = hexRegex.exec(hex);
+ if (result) {
+ const red = parseInt(result[1], 16);
+ const green = parseInt(result[2], 16);
+ const blue = parseInt(result[3], 16);
+ return rgbaString(red, green, blue, alpha);
+ } else {
+ return "rgba(0,0,0,0.35)";
+ }
+ };
+ const getStyles = (callback) => {
+ if (!isVisible)
+ callback({
+ containerStyle: { display: "none" },
+ spinnerStyle: { display: "none" },
+ messageStyle: { display: "none" },
+ });
+ let spinnerSize = 120;
+ let spinnerBackColor = "#f3f3f3";
+ let spinnerForeColor = "#3498db";
+ let fontSize = "26px";
+ let messageColor = "#3498db";
+ let backgroundColor = "#ffffff";
+ let backgroundOpacity = 0.35;
- if (this.state.isVisible) callback(styles);
- };
- render() {
- if (!window.config.showLoadingScreens) return ;
+ if (props.spinnerSize !== undefined) spinnerSize = props.spinnerSize;
+ if (props.spinnerBackColor !== undefined) spinnerBackColor = props.spinnerBackColor;
+ if (props.spinnerForeColor !== undefined) spinnerForeColor = props.spinnerForeColor;
+ if (props.fontSize !== undefined) fontSize = props.fontSize;
+ if (props.messageColor !== undefined) messageColor = props.messageColor;
+ if (props.backgroundColor !== undefined) backgroundColor = props.backgroundColor;
+ if (props.backgroundOpacity !== undefined) backgroundOpacity = props.backgroundOpacity;
- return (
-
-
-
- );
- }
-}
+ let containerBackground = hexToRgba(backgroundColor, backgroundOpacity);
+ const styles = {
+ containerStyle: {
+ background: containerBackground,
+ },
+ spinnerStyle: {
+ height: spinnerSize + "px",
+ width: spinnerSize + "px",
+ marginTop: "-" + spinnerSize / 3 + "px",
+ marginRight: "-" + spinnerSize / 2 + "px",
+ border: "16px solid",
+ borderColor: `${spinnerForeColor} ${spinnerBackColor} ${spinnerBackColor} ${spinnerBackColor}`,
+ },
+ messageStyle: {
+ fontSize: fontSize,
+ color: messageColor,
+ marginTop: spinnerSize + 26 + "px",
+ },
+ };
+
+ if (isVisible) callback(styles);
+ };
+
+ if (!window.config.showLoadingScreens) return ;
+
+ return (
+
- {this.props.message}
-
-
+
+
+ );
+};
export default LoadingScreen;
diff --git a/src/helpers/OLHelpers.js b/src/helpers/OLHelpers.js
index 0eca814c..ce330ba2 100644
--- a/src/helpers/OLHelpers.js
+++ b/src/helpers/OLHelpers.js
@@ -494,8 +494,8 @@ export class LayerHelpers {
newLayer["layerConfig"] = layer;
newLayer["key"] = helpers.getUID();
layerArray.push(newLayer);
- });
- }
+ });
+ }
});
callback(layerArray);
}
diff --git a/src/helpers/ShowMessage.jsx b/src/helpers/ShowMessage.jsx
index eb5d04d0..39997a21 100644
--- a/src/helpers/ShowMessage.jsx
+++ b/src/helpers/ShowMessage.jsx
@@ -1,51 +1,53 @@
import React, { Component } from "react";
import "./ShowMessage.css";
class ShowMessage extends Component {
- constructor(props) {
- super(props);
-
- this.myRef = React.createRef();
-
- this.state = {
- hide: false,
- color: this.props.color ? this.props.color : "green",
- sidebarOpen: window.sidebarOpen,
- };
-
- this._isMounted = false;
- }
-
- componentDidMount() {
- this.sidebarEmitter = window.emitter.addListener("sidebarChanged", (isSidebarOpen) => this.setState({ sidebarOpen: isSidebarOpen }));
- this._isMounted = true;
- }
- componentWillUnmount() {
- this.sidebarEmitter.remove();
-
- this._isMounted = false;
- }
- onCloseClick = (value) => {
- if (this._isMounted) this.setState({ hide: true });
- };
-
- getClassName = () => {
- if (this.state.hide) return "sc-hidden";
- else if (this.state.sidebarOpen) return "sc-show-message-container " + this.state.color;
- else return "sc-show-message-container closed " + this.state.color;
- };
-
- render() {
- const style = this.getClassName();
- return (
-
- );
- }
+ constructor(props) {
+ super(props);
+
+ this.myRef = React.createRef();
+
+ this.state = {
+ hide: false,
+ color: this.props.color ? this.props.color : "green",
+ sidebarOpen: window.sidebarOpen,
+ };
+
+ this._isMounted = false;
+ }
+
+ componentDidMount() {
+ this.sidebarEmitter = (isSidebarOpen) => this.setState({ sidebarOpen: isSidebarOpen });
+ window.emitter.addListener("sidebarChanged", this.sidebarEmitter);
+ this._isMounted = true;
+ }
+ componentWillUnmount() {
+ window.emitter.removeListener("sidebarChanged", this.sidebarEmitter);
+ // this.sidebarEmitter.remove();
+
+ this._isMounted = false;
+ }
+ onCloseClick = (value) => {
+ if (this._isMounted) this.setState({ hide: true });
+ };
+
+ getClassName = () => {
+ if (this.state.hide) return "sc-hidden";
+ else if (this.state.sidebarOpen) return "sc-show-message-container " + this.state.color;
+ else return "sc-show-message-container closed " + this.state.color;
+ };
+
+ render() {
+ const style = this.getClassName();
+ return (
+
+ );
+ }
}
export default ShowMessage;
diff --git a/src/helpers/ShowWindow.jsx b/src/helpers/ShowWindow.jsx
index 7b4ddd4b..a3d0fa89 100644
--- a/src/helpers/ShowWindow.jsx
+++ b/src/helpers/ShowWindow.jsx
@@ -2,92 +2,94 @@ import React, { Component } from "react";
import "./ShowWindow.css";
class ShowWindow extends Component {
- constructor(props) {
- super(props);
+ constructor(props) {
+ super(props);
- this.state = {
- hide: false,
- fullScreen: false,
- style: {},
- };
- }
+ this.state = {
+ hide: false,
+ fullScreen: false,
+ style: {},
+ };
+ }
- onCloseClick = (value) => {
- this.setState({ hide: true });
- };
+ onCloseClick = (value) => {
+ this.setState({ hide: true });
+ };
- onPopoutClick = () => {
- const fullscreen = !this.state.fullScreen;
- this.setState({ fullScreen: fullscreen, style: !fullscreen && this.state.style ? this.props.style : {} });
- };
+ onPopoutClick = () => {
+ const fullscreen = !this.state.fullScreen;
+ this.setState({ fullScreen: fullscreen, style: !fullscreen && this.state.style ? this.props.style : {} });
+ };
- componentWillUnmount() {
- this.sidebarEmitter.remove();
- document.removeEventListener("keydown", this.escFunction, false);
- }
+ componentWillUnmount() {
+ window.emitter.removeListener("sidebarChanged", this.sidebarEmitter);
+ // this.sidebarEmitter.remove();
+ document.removeEventListener("keydown", this.escFunction, false);
+ }
- componentDidMount() {
- document.addEventListener("keydown", this.escFunction, false);
- if (!this.state.fullScreen && this.props.style) this.setState({ style: this.props.style });
- // LISTEN FOR SIDEPANEL CHANGES
- this.sidebarEmitter = window.emitter.addListener("sidebarChanged", (isSidebarOpen) => this.sidebarChanged(isSidebarOpen));
- }
+ componentDidMount() {
+ document.addEventListener("keydown", this.escFunction, false);
+ if (!this.state.fullScreen && this.props.style) this.setState({ style: this.props.style });
+ // LISTEN FOR SIDEPANEL CHANGES
+ this.sidebarEmitter = (isSidebarOpen) => this.sidebarChanged(isSidebarOpen);
+ window.emitter.addListener("sidebarChanged", this.sidebarEmitter);
+ }
- sidebarChanged = (isSidebarOpen) => {
- this.forceUpdate();
- };
+ sidebarChanged = (isSidebarOpen) => {
+ this.forceUpdate();
+ };
- escFunction = (event) => {
- if (event.keyCode === 27) {
- this.setState({ hide: true });
- }
- };
+ escFunction = (event) => {
+ if (event.keyCode === 27) {
+ this.setState({ hide: true });
+ }
+ };
- // GET STORAGE
- getStorage() {
- const storage = localStorage.getItem(this.storageKey);
- if (storage === null) return [];
+ // GET STORAGE
+ getStorage() {
+ const storage = localStorage.getItem(this.storageKey);
+ if (storage === null) return [];
- const data = JSON.parse(storage);
- return data;
- }
+ const data = JSON.parse(storage);
+ return data;
+ }
- render() {
- let className = "";
- if (this.state.hide) className = "sc-hidden";
- else if (this.state.fullScreen) className = "overlay";
- else if (this.props.mode === "full") className = "full";
- else if (!window.sidebarOpen) className = "full";
+ render() {
+ let className = "";
+ if (this.state.hide) className = "sc-hidden";
+ else if (this.state.fullScreen) className = "overlay";
+ else if (this.props.mode === "full") className = "full";
+ else if (!window.sidebarOpen) className = "full";
- let hideScrollClassName = "";
- if (this.props.hideScroll && !this.state.fullScreen) hideScrollClassName = "sc-show-window-content-no-scroll";
+ let hideScrollClassName = "";
+ if (this.props.hideScroll && !this.state.fullScreen) hideScrollClassName = "sc-show-window-content-no-scroll";
- return (
-
+ {props.message}
+
+
-
- );
- }
+ return (
+
-
- {this.props.title}
-
-
-
-
-
-
-
- {this.props.contents}
-
-
-
-
-
+
+ );
+ }
}
export default ShowWindow;
@@ -95,7 +97,7 @@ export default ShowWindow;
// IMPORT ALL IMAGES
const images = importAllImages(require.context("./images", false, /\.(png|jpe?g|svg|gif)$/));
function importAllImages(r) {
- let images = {};
- r.keys().map((item, index) => (images[item.replace("./", "")] = r(item)));
- return images;
+ let images = {};
+ r.keys().map((item, index) => (images[item.replace("./", "")] = r(item)));
+ return images;
}
diff --git a/src/helpers/URLWindow.jsx b/src/helpers/URLWindow.jsx
index 6b5df079..22157fa9 100644
--- a/src/helpers/URLWindow.jsx
+++ b/src/helpers/URLWindow.jsx
@@ -20,7 +20,8 @@ class URLWindow extends Component {
};
componentWillUnmount() {
- this.sidebarEmitter.remove();
+ window.emitter.removeListener("sidebarChanged", this.sidebarEmitter);
+ // this.sidebarEmitter.remove();
document.removeEventListener("keydown", this.escFunction, false);
}
@@ -42,7 +43,8 @@ class URLWindow extends Component {
document.addEventListener("keydown", this.escFunction, false);
});
// LISTEN FOR SIDEPANEL CHANGES
- this.sidebarEmitter = window.emitter.addListener("sidebarChanged", (isSidebarOpen) => this.sidebarChanged(isSidebarOpen));
+ this.sidebarEmitter = (isSidebarOpen) => this.sidebarChanged(isSidebarOpen);
+ window.emitter.addListener("sidebarChanged", this.sidebarEmitter);
}
isDontShow = () => {
diff --git a/src/helpers/api.js b/src/helpers/api.js
new file mode 100644
index 00000000..5874e57e
--- /dev/null
+++ b/src/helpers/api.js
@@ -0,0 +1,171 @@
+function getBearerToken(callback) {
+ window.instance
+ .acquireTokenSilent({
+ account: window.account,
+ })
+ .then((response) => {
+ callback(`bearer ${response.idToken}`);
+ })
+ .catch((error) => {
+ window.instance
+ .acquireTokenRedirect({
+ account: window.account,
+ })
+ .catch((error) => {
+ console.error(error);
+ callback({ error: 1 });
+ });
+ });
+}
+
+function privateFetch(url, method, headers, mode, type, body, callback) {
+ return fetch(url, {
+ method: method,
+ mode: mode,
+ headers: headers,
+ body: body,
+ })
+ .then((response) => {
+ switch (type) {
+ case "json":
+ return response.json();
+ case "text":
+ return response.text();
+ case "blob":
+ return response.blob();
+ default:
+ return response.json();
+ }
+ })
+ .then((responseValue) => {
+ // CALLBACK WITH RESULT
+ callback(responseValue);
+ })
+ .catch((error) => {
+ console.log("Error - " + url);
+ console.log(error);
+ callback({ result: { error: 1 } });
+ });
+}
+
+export function get(url, params = {}, callback) {
+ let { mode, headers, useBearerToken, type, body, redirect, referrer, xhrFields } = params;
+ const method = "GET";
+ if (!mode) mode = "cors";
+ if (!useBearerToken) useBearerToken = false;
+ if (!type) type = "json";
+ if (!headers) headers = {};
+ if (!redirect) redirect = "";
+ if (!referrer) referrer = "";
+ if (!xhrFields) xhrFields = {};
+
+ if (params.useBearerToken) {
+ getBearerToken((token) => {
+ headers = {
+ Authorization: token,
+ };
+ //console.log(url, method, headers, mode, type, body);
+ privateFetch(url, method, headers, mode, type, body, (result) => {
+ callback(result);
+ });
+ });
+ } else {
+ privateFetch(url, method, headers, mode, type, body, (result) => {
+ callback(result);
+ });
+ }
+}
+
+export function post(url, params = {}, callback) {
+ let { mode, headers, useBearerToken, type, body } = params;
+ const method = "POST";
+ if (!mode) mode = "cors";
+ if (!useBearerToken) useBearerToken = false;
+ if (!type) type = "json";
+ if (!headers) headers = { "Content-Type": "application/json" };
+
+ if (params.useBearerToken) {
+ getBearerToken((token) => {
+ headers = {
+ Authorization: token,
+ };
+ return privateFetch(url, method, headers, mode, type, body, (result) => {
+ callback(result);
+ });
+ });
+ } else {
+ return privateFetch(url, method, headers, mode, type, body, (result) => {
+ callback(result);
+ });
+ }
+}
+
+export function del(url, params = {}, callback) {
+ let { mode, headers, useBearerToken, type, body } = params;
+ const method = "DELETE";
+ if (!mode) mode = "cors";
+ if (!useBearerToken) useBearerToken = false;
+ if (!type) type = "json";
+ if (!headers) headers = {};
+
+ if (params.useBearerToken) {
+ getBearerToken((token) => {
+ headers = {
+ Authorization: token,
+ };
+ return privateFetch(url, method, headers, mode, type, body, (result) => {
+ callback(result);
+ });
+ });
+ } else {
+ return privateFetch(url, method, headers, mode, type, body, (result) => {
+ callback(result);
+ });
+ }
+}
+
+export function downloadFile(url, params = {}, callback = undefined) {
+ params["type"] = "blob";
+ params["xhrFields"] = { responseType: "blob" };
+ params["redirect"] = "follow"; // manual, *follow, error
+ params["referrer"] = "no-referrer"; // no-referrer, *client
+ getBearerToken((token) => {
+ fetch(url, {
+ method: "GET", // *GET, POST, PUT, DELETE, etc.
+ mode: "cors", // no-cors, cors, *same-origin
+ cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
+ credentials: "same-origin", // include, *same-origin, omit
+ headers: { Authorization: token },
+ redirect: "follow", // manual, *follow, error
+ referrer: "no-referrer", // no-referrer, *client
+ xhrFields: {
+ responseType: "blob",
+ },
+ })
+ .then((response) => response.blob())
+ .then((blob) => {
+ download(blob, params.fileName, { isBlob: true });
+ if (callback) callback();
+ });
+ });
+}
+
+function download(url, filename = undefined, options = undefined) {
+ if (!options) options = {};
+ try {
+ if (options.isBlob) {
+ url = window.URL.createObjectURL(url);
+ }
+ var link = document.createElement("a");
+ link.setAttribute("href", url);
+ link.setAttribute("target", "_blank");
+ link.setAttribute("rel", "noopener noreferrer");
+ if (filename) link.setAttribute("download", filename);
+
+ document.body.appendChild(link); // Required for FF
+ link.click();
+ document.body.removeChild(link); //afterwards we remove the element again
+ } catch (e) {
+ window.open(url, `_blank`);
+ }
+}
diff --git a/src/helpers/helpers.js b/src/helpers/helpers.js
index 8832da37..f6ac088e 100644
--- a/src/helpers/helpers.js
+++ b/src/helpers/helpers.js
@@ -32,7 +32,9 @@ import { fromExtent } from "ol/geom/Polygon";
//OTHER
import { parseString } from "xml2js";
-import shortid from "shortid";
+// import shortid from "shortid";
+import { v4 as uuidv4 } from "uuid";
+
import ShowMessage from "./ShowMessage.jsx";
import ShowTerms from "./ShowTerms.jsx";
import URLWindow from "./URLWindow.jsx";
@@ -120,7 +122,7 @@ export function isMobile() {
// SHOW CONTENT WINDOW
export function showWindow(contents, options = { title: "Information", showFooter: false, mode: "normal", hideScroll: false }) {
ReactDOM.render(
-
+
+ {this.props.title}
+
+
+
+
+
+
+
+ {this.props.contents}
+
+
+
+
+ Error: Layer Not Found or no URL Parameter provided.
; + returnError: Layer Not Found or no URL Parameter provided.
; const proj = this.getFormattedProjection(); let fields = []; @@ -188,7 +187,7 @@ class LayerInfoApp extends Component { //console.log(showDownload); return (
-
diff --git a/src/layerInfo/helpers.js b/src/layerInfo/helpers.js
index 41561e6f..b7d7b212 100644
--- a/src/layerInfo/helpers.js
+++ b/src/layerInfo/helpers.js
@@ -1,4 +1,5 @@
-import shortid from "shortid";
+// import shortid from "shortid";
+import { v4 as uuidv4 } from "uuid";
export async function httpGetTextWait(url, callback) {
let data = await fetch(url)
@@ -63,7 +64,7 @@ export function toTitleCase(str) {
// URL FRIENDLY STRING ID
export function getUID() {
- return shortid.generate();
+ return uuidv4();
}
export function parseESRIDescription(description) {
diff --git a/src/legend/App.js b/src/legend/App.js
index 0d6d4b1d..4852fd21 100644
--- a/src/legend/App.js
+++ b/src/legend/App.js
@@ -299,7 +299,7 @@ class LegendApp extends Component {