+ );
+};
export default ThemeBaseLayers;
diff --git a/src/sidebar/components/themes/themeComponents/ThemeContainer.jsx b/src/sidebar/components/themes/themeComponents/ThemeContainer.jsx
index 1b47bea2..1595effd 100644
--- a/src/sidebar/components/themes/themeComponents/ThemeContainer.jsx
+++ b/src/sidebar/components/themes/themeComponents/ThemeContainer.jsx
@@ -1,47 +1,51 @@
import React, { Component } from "react";
import ThemeBaseLayers from "./ThemeBaseLayers.jsx";
-import ThemeLayers from "../themeComponents/ThemeLayers.jsx";
-import ThemeData from "../themeComponents/ThemeData.jsx";
+import ThemeLayers from "./ThemeLayers.jsx";
+import ThemeData from "./ThemeData.jsx";
import "./ThemeContainer.css";
class ThemeContainer extends Component {
- state = {};
+ state = {};
- // CALLED FROM LAYERS. CALL THEME DATA THROUGH A REF TO PASS ON THE CHANGE FOR VISIBLITY
- onLayerVisibilityChange = (layer) => {
- this.data.onLayerVisibilityChange(layer);
- };
+ // CALLED FROM LAYERS. CALL THEME DATA THROUGH A REF TO PASS ON THE CHANGE FOR VISIBLITY
+ onLayerVisibilityChange = (layer) => {
+ this.data.onLayerVisibilityChange(layer);
+ };
- componentDidMount() {
- // DISABLE PARCEL CLICK
- //if (this.props.config.disableParcelClick !== undefined && this.props.config.disableParcelClick)
- //window.disableParcelClick = true;
- }
+ componentDidMount() {
+ // DISABLE PARCEL CLICK
+ if (this.props.config.disableParcelClick !== undefined && this.props.config.disableParcelClick) window.disableParcelClick = true;
+ }
- componentWillUnmount() {
- // RE-ENABLE PARCEL CLICK
- window.disableParcelClick = false;
- }
+ componentWillUnmount() {
+ // RE-ENABLE PARCEL CLICK
+ window.disableParcelClick = false;
+ }
- render() {
- return (
-
+ );
+ }
}
export default ThemeContainer;
diff --git a/src/sidebar/components/themes/themeComponents/ThemeData.jsx b/src/sidebar/components/themes/themeComponents/ThemeData.jsx
index 7b9eee2e..2cbf6373 100644
--- a/src/sidebar/components/themes/themeComponents/ThemeData.jsx
+++ b/src/sidebar/components/themes/themeComponents/ThemeData.jsx
@@ -1,56 +1,59 @@
-import React, { Component } from "react";
+import React, { Component, useState, useEffect } from "react";
import "./ThemeData.css";
import * as helpers from "../../../../helpers/helpers";
import ThemeDataList from "./ThemeDataList.jsx";
class ThemeData extends Component {
- constructor(props) {
- super(props);
+ constructor(props) {
+ super(props);
- this.state = {
- onlyFeaturesWithinMap: false,
- };
- this.layerRefs = [];
- }
+ this.state = {
+ onlyFeaturesWithinMap: false,
+ };
+ this.layerRefs = [];
+ }
- // THIS FUNCTION IS CALLED FROM PARENT THROUGH A REF
- onLayerVisibilityChange = (layer) => {
- // LET ALL THE THEMEDATALIST COMPONENTS KNOW A LAYER HAS CHANGED VISIBLITY
- this.layerRefs.forEach((dataList) => {
- if (dataList !== null) dataList.onLayerVisibilityChange(layer);
- });
- };
+ // THIS FUNCTION IS CALLED FROM PARENT THROUGH A REF
+ onLayerVisibilityChange = (layer) => {
+ // LET ALL THE THEMEDATALIST COMPONENTS KNOW A LAYER HAS CHANGED VISIBLITY
+ this.layerRefs.forEach((dataList) => {
+ if (dataList !== null) dataList.onLayerVisibilityChange(layer);
+ });
+ };
- onCheckboxChange = (evt) => {
- this.setState({ onlyFeaturesWithinMap: evt.target.checked });
- };
+ onCheckboxChange = (evt) => {
+ this.setState({ onlyFeaturesWithinMap: evt.target.checked });
+ };
- render() {
- return (
-
- );
- }
+ render() {
+ if (this.props.config.excludeDataList) {
+ return
+ );
+ }
}
export default ThemeData;
diff --git a/src/sidebar/components/themes/themeComponents/ThemeDataList.jsx b/src/sidebar/components/themes/themeComponents/ThemeDataList.jsx
index 2be322d9..fe692fff 100644
--- a/src/sidebar/components/themes/themeComponents/ThemeDataList.jsx
+++ b/src/sidebar/components/themes/themeComponents/ThemeDataList.jsx
@@ -1,117 +1,122 @@
import React, { Component } from "react";
import "./ThemeDataList.css";
import * as helpers from "../../../../helpers/helpers";
+import { get, createObjectURL } from "../../../../helpers/api";
import { InfoRowValue } from "../../../../helpers/InfoRow.jsx";
import ThemePopupContent from "./ThemePopupContent.jsx";
import { getCenter } from "ol/extent";
class ThemeDataList extends Component {
- constructor(props) {
- super(props);
+ constructor(props) {
+ super(props);
- this.state = {
- panelOpen: props.layerConfig.expanded,
- features: [],
- styleUrl: null,
- visible: props.layerConfig.visible,
- onlyFeaturesWithinMap: props.onlyFeaturesWithinMap,
- };
+ this.state = {
+ panelOpen: props.layerConfig.expanded,
+ features: [],
+ styleUrl: null,
+ visible: props.layerConfig.visible,
+ onlyFeaturesWithinMap: props.onlyFeaturesWithinMap,
+ };
- this._isMounted = false;
- }
+ this._isMounted = false;
+ }
- componentDidMount() {
- this._isMounted = true;
+ componentDidMount() {
+ this._isMounted = true;
- // GET FEATURES
- this.fetchFeatures();
+ // GET FEATURES
+ this.fetchFeatures();
- // GET LEGEND
- const styleUrlTemplate = (serverURL, layerName, styleName) =>
- `${serverURL}/wms?REQUEST=GetLegendGraphic&VERSION=1.1&FORMAT=image/png&WIDTH=30&HEIGHT=30&LAYER=${layerName}&STYLE=${styleName}&transparent=true`;
- const styleUrl = styleUrlTemplate(this.props.layerConfig.serverUrl, this.props.layerConfig.layerName, this.props.layerConfig.legendStyleName);
- this.setState({ styleUrl: styleUrl });
+ // GET LEGEND
+ const styleUrlTemplate = (serverURL, layerName, styleName) =>
+ `${serverURL}/wms?REQUEST=GetLegendGraphic&VERSION=1.1&FORMAT=image/png&WIDTH=30&HEIGHT=30&LAYER=${layerName}&STYLE=${styleName}&transparent=true`;
+ const styleUrl = styleUrlTemplate(this.props.layerConfig.serverUrl, this.props.layerConfig.layerName, this.props.layerConfig.legendStyleName);
- window.map.on("moveend", (evt) => {
- // GET FEATURES
- this.fetchFeatures();
- });
- }
+ get(styleUrl, { useBearerToken: this.props.layerConfig.secure || false, type: "blob" }, (results) => {
+ var imgData = createObjectURL(results);
+ this.setState({ styleUrl: imgData });
+ });
+ window.map.on("moveend", (evt) => {
+ // GET FEATURES
+ this.fetchFeatures();
+ });
+ }
- componentWillUnmount() {
- this._isMounted = false;
- }
+ componentWillUnmount() {
+ this._isMounted = false;
+ }
- fetchFeatures = () => {
- if (!this._isMounted) return;
+ fetchFeatures = () => {
+ if (!this._isMounted) return;
- if (this.state.onlyFeaturesWithinMap) {
- const extent = window.map.getView().calculateExtent();
- helpers.getWFSGeoJSON(
- this.props.layerConfig.serverUrl,
- this.props.layerConfig.layerName,
- (result) => {
- this.setState({ features: result });
- },
- this.props.layerConfig.displayFieldName,
- extent
- );
- } else {
- helpers.getWFSGeoJSON(
- this.props.layerConfig.serverUrl,
- this.props.layerConfig.layerName,
- (result) => {
- this.setState({ features: result });
- },
- this.props.layerConfig.displayFieldName
- );
- }
- };
+ if (this.state.onlyFeaturesWithinMap) {
+ const extent = window.map.getView().calculateExtent();
+ helpers.getWFSGeoJSON(
+ {
+ serverUrl: this.props.layerConfig.serverUrl,
+ layerName: this.props.layerConfig.layerName,
+ sortField: this.props.layerConfig.displayFieldName,
+ extent: extent,
+ secure: this.props.layerConfig.secured,
+ },
+ (result) => {
+ this.setState({ features: result });
+ }
+ );
+ } else {
+ helpers.getWFSGeoJSON(
+ { serverUrl: this.props.layerConfig.serverUrl, layerName: this.props.layerConfig.layerName, sortField: this.props.layerConfig.displayFieldName, secure: this.props.layerConfig.secured },
+ (result) => {
+ this.setState({ features: result });
+ }
+ );
+ }
+ };
- onHeaderClick = () => {
- this.setState({ panelOpen: !this.state.panelOpen });
- };
+ onHeaderClick = () => {
+ this.setState({ panelOpen: !this.state.panelOpen });
+ };
- itemClick = (feature) => {
- const extent = feature.getGeometry().getExtent();
- const center = getCenter(extent);
- const entries = Object.entries(feature.getProperties());
- window.popup.show(center,
);
- helpers.zoomToFeature(feature);
- window.map.getView().setCenter(center);
- window.map.getView().setZoom(15);
- };
+ itemClick = (feature) => {
+ const extent = feature.getGeometry().getExtent();
+ const center = getCenter(extent);
+ const entries = Object.entries(feature.getProperties());
+ window.popup.show(center,
);
+ helpers.zoomToFeature(feature);
+ window.map.getView().setCenter(center);
+ window.map.getView().setZoom(15);
+ };
- // HANDLES TOGGLE LAYER CHANGES
- onLayerVisibilityChange = (layer) => {
- if (layer.getProperties().name === this.props.layerConfig.layerName) this.setState({ visible: layer.getVisible() });
- };
+ // HANDLES TOGGLE LAYER CHANGES
+ onLayerVisibilityChange = (layer) => {
+ if (layer.getProperties().name === this.props.layerConfig.layerName) this.setState({ visible: layer.getVisible() });
+ };
- render() {
- return (
-
+ );
+ }
}
export default ThemeDataList;
@@ -119,7 +124,7 @@ export default ThemeDataList;
// 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/sidebar/components/themes/themeComponents/ThemeLayerToggler.jsx b/src/sidebar/components/themes/themeComponents/ThemeLayerToggler.jsx
index 6153f8e4..b6a827de 100644
--- a/src/sidebar/components/themes/themeComponents/ThemeLayerToggler.jsx
+++ b/src/sidebar/components/themes/themeComponents/ThemeLayerToggler.jsx
@@ -1,150 +1,171 @@
-import React, { Component } from "react";
+import React, { useState, useEffect, useRef } from "react";
import "./ThemeLayerToggler.css";
import * as helpers from "../../../../helpers/helpers";
+import { LayerHelpers, OL_DATA_TYPES } from "../../../../helpers/OLHelpers";
+
+import { get, createObjectURL } from "../../../../helpers/api";
import ThemePopupContent from "./ThemePopupContent.jsx";
-import url from "url";
import GeoJSON from "ol/format/GeoJSON.js";
import { getCenter } from "ol/extent";
import { unByKey } from "ol/Observable.js";
// LOOK AT THEME CONFIG FOR EXAMPLE OBJECT BEING PASSED HERE
-class ThemeLayerToggler extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- visible: props.layerConfig.visible,
- layer: this.initLayer(),
- styleUrl: null,
- recordCount: null,
- };
- }
-
- handleUrlParameter = () => {
- if (this.props.layerConfig.UrlParameter === undefined) return;
-
- const urlParam = helpers.getURLParameter(this.props.layerConfig.UrlParameter.parameterName);
- if (urlParam === null) return;
-
- const query = this.props.layerConfig.UrlParameter.fieldName + "=" + urlParam;
- helpers.getWFSGeoJSON(
- this.props.layerConfig.serverUrl,
- this.props.layerConfig.layerName,
- (result) => {
- if (result.length === 0) return;
-
- const feature = result[0];
- const extent = feature.getGeometry().getExtent();
- const center = getCenter(extent);
- helpers.zoomToFeature(feature);
- result.forEach((currentFeature) => {
- const entries = Object.entries(currentFeature.getProperties());
- window.popup.show(
- center,
-
,
- this.props.layerConfig.displayName
- );
- });
+const ThemeLayerToggler = (props) => {
+ const { onMapClick, config, onLayerVisiblityChange, visibleAll, children } = props;
+ const styleUrlTemplate = (serverURL, layerName, styleName) =>
+ `${serverURL}/wms?REQUEST=GetLegendGraphic&VERSION=1.1&FORMAT=image/png&WIDTH=20&HEIGHT=20&TRANSPARENT=true&LAYER=${layerName}&STYLE=${styleName === undefined ? "" : styleName}`;
+ const [visible, setVisible] = useState(props.layerConfig.visible);
+ const [styleImageUrl, setStyleImageUrl] = useState("");
+ const [recordCount, setRecordCount] = useState(0);
+ const [layerConfig, setLayerConfig] = useState(props.layerConfig);
+
+ const layerRef = useRef(null);
+ const mapClickEventRef = useRef(null);
+
+ useEffect(() => {
+ setLayerConfig(props.layerConfig);
+ }, [props.layerConfig]);
+
+ const initComponent = () => {
+ // GET LAYER
+ LayerHelpers.getLayer(
+ {
+ sourceType: OL_DATA_TYPES.ImageWMS,
+ source: "WMS",
+ layerName: layerConfig.layerName,
+ url: `${layerConfig.serverUrl}wms?layers=${layerConfig.layerName}`,
+ tiled: false,
+ name: layerConfig.layerName,
+ secured: layerConfig.secure || false,
},
- null,
- null,
- query
+ (layer) => {
+ layer.setProperties({
+ name: layerConfig.layerName,
+ tocDisplayName: layerConfig.displayName,
+ clickable: layerConfig.clickable !== undefined ? layerConfig.clickable : true,
+ disableParcelClick: layerConfig.clickable !== undefined ? layerConfig.clickable : true,
+ queryable: true,
+ });
+ if (config.toggleLayersKey) layer.setProperties({ themeKey: config.toggleLayersKey });
+ layer.setZIndex(layerConfig.zIndex);
+ layer.setVisible(layerConfig.visible);
+ window.map.addLayer(layer);
+ layerRef.current = layer;
+
+ addMapClickEvent();
+ }
);
};
-
- initLayer = () => {
- // GET LAYER
- const layer = helpers.getImageWMSLayer(url.resolve(this.props.layerConfig.serverUrl, "wms"), this.props.layerConfig.layerName, "geoserver", null, 50);
- layer.setVisible(this.props.layerConfig.visible);
- layer.setZIndex(this.props.layerConfig.zIndex);
- //layer.setProperties({ name: this.props.layerConfig.layerName, disableParcelClick: true });
- layer.setProperties({
- name: this.props.layerConfig.layerName,
- tocDisplayName: this.props.layerConfig.displayName,
- disableParcelClick: true,
- queryable: true,
- });
-
- window.map.addLayer(layer);
- return layer;
+ const addMapClickEvent = () => {
+ if (onMapClick) {
+ mapClickEventRef.current = window.map.on("click", onMapClick);
+ } else {
+ mapClickEventRef.current = window.map.on("click", (evt) => {
+ if (window.isDrawingOrEditing || !visible || window.isCoordinateToolOpen || window.isMeasuring) return;
+
+ var viewResolution = window.map.getView().getResolution();
+ var url = layerRef.current.getSource().getFeatureInfoUrl(evt.coordinate, viewResolution, "EPSG:3857", {
+ INFO_FORMAT: "application/json",
+ });
+ if (url) {
+ get(url, { useBearerToken: layerConfig.secure || false }, (result) => {
+ const features = result.features;
+ if (!features || features.length === 0) {
+ return;
+ }
+ const geoJSON = new GeoJSON().readFeatures(result);
+ geoJSON.forEach((currentFeature) => {
+ const entries = Object.entries(currentFeature.getProperties());
+ window.popup.show(
+ evt.coordinate,
+
,
+ layerConfig.displayName
+ );
+ });
+ });
+ }
+ });
+ }
};
- componentDidMount() {
+ useEffect(() => {
+ initComponent();
// GET LEGEND
- const styleUrlTemplate = (serverURL, layerName, styleName) =>
- `${serverURL}/wms?REQUEST=GetLegendGraphic&VERSION=1.1&FORMAT=image/png&WIDTH=20&HEIGHT=20&TRANSPARENT=true&LAYER=${layerName}&STYLE=${styleName === undefined ? "" : styleName}`;
- const styleUrl = styleUrlTemplate(this.props.layerConfig.serverUrl, this.props.layerConfig.layerName, this.props.layerConfig.legendStyleName);
- this.setState({ styleUrl: styleUrl });
-
- // GET RECORD COUNT
- helpers.getWFSLayerRecordCount(this.props.layerConfig.serverUrl, this.props.layerConfig.layerName, (count) => {
- this.setState({ recordCount: count });
+
+ const styleUrl = styleUrlTemplate(layerConfig.serverUrl, layerConfig.layerName, layerConfig.legendStyleName);
+ get(styleUrl, { useBearerToken: layerConfig.secure || false, type: "blob" }, (results) => {
+ var imgData = createObjectURL(results);
+ setStyleImageUrl(imgData);
});
- this.mapClickEvent = window.map.on("click", (evt) => {
- if (window.isDrawingOrEditing || !this.state.visible || window.isCoordinateToolOpen || window.isMeasuring) return;
+ helpers.getWFSLayerRecordCount({ serverUrl: layerConfig.serverUrl, layerName: layerConfig.layerName, secured: layerConfig.secure || false }, (currentCount) => {
+ setRecordCount(currentCount);
+ });
+ // URL PARAMETERS
+ handleUrlParameter();
+ return () => {
+ // CLEAN UP
+ setStyleImageUrl(null);
+ setRecordCount(null);
+ window.map.removeLayer(layerRef.current);
+ unByKey(mapClickEventRef.current);
+ };
+ }, []);
- var viewResolution = window.map.getView().getResolution();
- var url = this.state.layer.getSource().getFeatureInfoUrl(evt.coordinate, viewResolution, "EPSG:3857", {
- INFO_FORMAT: "application/json",
+ const handleUrlParameter = () => {
+ if (layerConfig.UrlParameter === undefined) return;
+
+ const urlParam = helpers.getURLParameter(layerConfig.UrlParameter.parameterName);
+ if (urlParam === null) return;
+
+ const query = layerConfig.UrlParameter.fieldName + "=" + urlParam;
+ helpers.getWFSGeoJSON({ serverUrl: layerConfig.serverUrl, layerName: layerConfig.layerName, cqlFilter: query, secured: layerConfig.secure }, (result) => {
+ if (result.length === 0) return;
+
+ const feature = result[0];
+ const extent = feature.getGeometry().getExtent();
+ const center = getCenter(extent);
+ helpers.zoomToFeature(feature);
+ result.forEach((currentFeature) => {
+ const entries = Object.entries(currentFeature.getProperties());
+ window.popup.show(
+ center,
+
,
+ props.layerConfig.displayName
+ );
});
- if (url) {
- helpers.getJSON(url, (result) => {
- const features = result.features;
- if (features.length === 0) {
- return;
- }
-
- const geoJSON = new GeoJSON().readFeatures(result);
- geoJSON.forEach((feature) => {
- console.log("ThemeLayerToggler.jsx", feature);
- const entries = Object.entries(feature.getProperties());
- window.popup.show(
- evt.coordinate,
-
,
- this.props.layerConfig.displayName
- );
- });
- });
- }
});
+ };
- // URL PARAMETERS
- this.handleUrlParameter();
- }
-
- onCheckboxChange = (evt) => {
- this.setState({ visible: evt.target.checked });
- this.state.layer.setVisible(evt.target.checked);
- this.props.onLayerVisiblityChange(this.state.layer);
+ const onCheckboxChange = (checked) => {
+ setVisible(checked);
+ layerRef.current.setVisible(checked);
+ onLayerVisiblityChange(layerRef.current);
};
- componentWillUnmount() {
- // CLEAN UP
- window.map.removeLayer(this.state.layer);
- unByKey(this.mapClickEvent);
- }
-
- render() {
- return (
-
-
-
-
-
-
-
-
-
-
{this.props.children}
+ return (
+
+
+
- );
- }
-}
+
+
+
+
+
+
{children}
+
+ );
+};
export default ThemeLayerToggler;
diff --git a/src/sidebar/components/themes/themeComponents/ThemeLayers.css b/src/sidebar/components/themes/themeComponents/ThemeLayers.css
index e69de29b..9590fadd 100644
--- a/src/sidebar/components/themes/themeComponents/ThemeLayers.css
+++ b/src/sidebar/components/themes/themeComponents/ThemeLayers.css
@@ -0,0 +1,7 @@
+.sc-theme-layers-show-all {
+ font-size: 14px;
+ color: #797979;
+ margin-top: 5px;
+ margin-bottom: 7px;
+ text-transform: uppercase;
+}
diff --git a/src/sidebar/components/themes/themeComponents/ThemeLayers.jsx b/src/sidebar/components/themes/themeComponents/ThemeLayers.jsx
index 0970e53c..c68116bd 100644
--- a/src/sidebar/components/themes/themeComponents/ThemeLayers.jsx
+++ b/src/sidebar/components/themes/themeComponents/ThemeLayers.jsx
@@ -1,19 +1,59 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
import "./ThemeLayers.css";
import * as helpers from "../../../../helpers/helpers";
import ThemeLayerToggler from "./ThemeLayerToggler.jsx";
+import ThemeServiceToggler from "./ThemeServiceToggler.jsx";
const ThemeLayers = (props) => {
- return (
-
-
THEME LAYERS
-
- {props.config.toggleLayers.map((layerConfig) => (
-
- ))}
-
-
- );
+ const [checked, setChecked] = useState(props.config.toggleVisibleAll || false);
+ const [toggleServices, setToggleServices] = useState(props.config.toggleServices || []);
+ const [toggleLayers, setToggleLayers] = useState(props.config.toggleLayers || []);
+
+ useEffect(() => {
+ setToggleServices(props.config.toggleServices || []);
+ }, [props.config.toggleServices]);
+
+ useEffect(() => {
+ setToggleLayers(props.config.toggleLayers || []);
+ }, [props.config.toggleLayers]);
+
+ const onChangeVisibleAll = (checked) => {
+ setChecked(checked);
+ };
+
+ if (props.config.excludeToggler) return
;
+
+ return (
+
+
{`${props.config.toggleLayersTitle ? props.config.toggleLayersTitle : "THEME LAYERS"}`}
+
+
+
+ onChangeVisibleAll(evt.target.checked)} /> SHOW ALL
+
+ {toggleServices.map((serviceConfig) => (
+
+ ))}
+ {toggleLayers.map((layerConfig) => (
+
+ ))}
+
+
+ );
};
export default ThemeLayers;
diff --git a/src/sidebar/components/themes/themeComponents/ThemePopupContent.css b/src/sidebar/components/themes/themeComponents/ThemePopupContent.css
index 7b4807c9..595da72a 100644
--- a/src/sidebar/components/themes/themeComponents/ThemePopupContent.css
+++ b/src/sidebar/components/themes/themeComponents/ThemePopupContent.css
@@ -1,10 +1,2 @@
-.sc-theme-popup-content-more-info {
- width: 156px;
- padding: 5px;
- margin-right: 5px;
- margin-top: 5px;
-}
-
-.sc-theme-popup-content-close {
- width: 80px;
+.sc-theme-popup-content {
}
diff --git a/src/sidebar/components/themes/themeComponents/ThemePopupContent.jsx b/src/sidebar/components/themes/themeComponents/ThemePopupContent.jsx
index c1af0124..754cc6a2 100644
--- a/src/sidebar/components/themes/themeComponents/ThemePopupContent.jsx
+++ b/src/sidebar/components/themes/themeComponents/ThemePopupContent.jsx
@@ -5,39 +5,39 @@ import { InfoRow } from "../../../../helpers/InfoRow.jsx";
// CONTENT FOR POPUP
const ThemePopupContent = (props) => {
- // HANDLE URL FIELD AND PASS IT BACK AS PARAMETER TO CLICK
- let urlField = "";
- if (props.layerConfig.moreInfoUrlFieldName !== undefined) {
- props.values.forEach((row) => {
- if (row[0] === props.layerConfig.moreInfoUrlFieldName) urlField = row[1];
- });
- }
+ // HANDLE URL FIELD AND PASS IT BACK AS PARAMETER TO CLICK
+ let urlField = "";
+ if (props.layerConfig.moreInfoUrlFieldName !== undefined) {
+ props.values.forEach((row) => {
+ if (row[0] === props.layerConfig.moreInfoUrlFieldName) urlField = row[1];
+ });
+ }
- return (
-
-
-
-
- {props.values.map((row) => {
- if (row[0] !== "geometry" && row[0].substring(0, 1) !== "_") {
- return
;
- } else return null;
- })}
-
-
-
-
-
- );
+ return (
+
+
+
+
+ {props.values.map((row) => {
+ if (row[0] !== "geometry" && row[0].substring(0, 1) !== "_") {
+ return
;
+ } else return null;
+ })}
+
+
+
+
+
+ );
};
export default ThemePopupContent;
@@ -45,7 +45,7 @@ export default ThemePopupContent;
// 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/sidebar/components/themes/themeComponents/ThemeServiceToggler.css b/src/sidebar/components/themes/themeComponents/ThemeServiceToggler.css
new file mode 100644
index 00000000..19de2fe3
--- /dev/null
+++ b/src/sidebar/components/themes/themeComponents/ThemeServiceToggler.css
@@ -0,0 +1,77 @@
+.sc-theme-service-info-container {
+ display: table-row;
+}
+.sc-theme-service-item-plus-minus-container {
+ display: inline-table;
+ vertical-align: top;
+ cursor: pointer;
+}
+.sc-theme-service-legend-container {
+ list-style: none;
+ text-align: left;
+ font-size: 10pt;
+ padding-left: 30px;
+}
+.sc-theme-service-toggler-container {
+ margin-top: 5px;
+ margin-left: 5px;
+ margin-left: 5px;
+ margin-right: 5px;
+}
+
+.sc-theme-service-container {
+ display: table;
+ margin-top: 5px;
+ margin-left: 5px;
+ width: 95%;
+}
+
+.sc-theme-service-toggler-label {
+ /* display: table-cell; */
+ font-size: 10pt;
+ width: 70%;
+}
+
+.sc-theme-service-toggler-label-with-box {
+ display: table-cell;
+ font-size: 10pt;
+ /* width: 70%; */
+ vertical-align: middle;
+ padding-left: 10px;
+}
+
+.sc-theme-service-toggler-symbol {
+ width: 5%;
+ display: table-cell;
+ vertical-align: bottom;
+ text-align: center;
+}
+
+.sc-theme-service-toggler-symbol-with-box {
+ background: rgba(0, 0, 0, 0) -webkit-linear-gradient(top, rgba(242, 245, 246, 1) 0%, rgba(230, 230, 230, 1) 100%) repeat scroll 0 0;
+ background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(242, 245, 246, 1) 0%, rgba(230, 230, 230, 1) 100%) repeat scroll 0 0;
+ border: 1px solid #ccc;
+ border-radius: 3px;
+ text-align: center;
+ vertical-align: middle;
+ width: 30px;
+ height: 30px;
+ display: table-cell;
+}
+
+.sc-theme-service-toggler-label-with-box-container {
+ display: table-cell;
+ padding-top: 7px;
+}
+.sc-theme-service-toggler-count {
+ font-size: 8pt;
+ color: #ababab;
+}
+
+.sc-theme-service-toggler-count-with-box {
+ font-size: 8pt;
+ color: #ababab;
+ display: table-cell;
+ padding-left: 8px;
+ padding-top: 2px;
+}
diff --git a/src/sidebar/components/themes/themeComponents/ThemeServiceToggler.jsx b/src/sidebar/components/themes/themeComponents/ThemeServiceToggler.jsx
new file mode 100644
index 00000000..5cd9deef
--- /dev/null
+++ b/src/sidebar/components/themes/themeComponents/ThemeServiceToggler.jsx
@@ -0,0 +1,310 @@
+import React, { useState, useEffect, useRef, Fragment } from "react";
+import "./ThemeServiceToggler.css";
+import * as helpers from "../../../../helpers/helpers";
+import { getAppAccessToken, getAccessToken } from "../../../../helpers/esriHelpers";
+
+import { get } from "../../../../helpers/api";
+
+import { LayerHelpers, OL_DATA_TYPES } from "../../../../helpers/OLHelpers";
+
+import ThemePopupContent from "./ThemePopupContent.jsx";
+import GeoJSON from "ol/format/GeoJSON.js";
+import { unByKey } from "ol/Observable.js";
+
+const ThemeServiceToggler = (props) => {
+ const [layers, setLayers] = useState([]);
+ const [token, setToken] = useState("");
+ const [showAll, setShowAll] = useState(false);
+
+ const processLayers = (capabilities) => {
+ let layerArray = [];
+ let zIndex = props.serviceConfig.zIndex || 1000;
+ if (props.serviceConfig.layers) capabilities = capabilities.filter((layer) => props.serviceConfig.layers.includes(layer.id));
+ capabilities.forEach((layer) => {
+ 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 (props.config.toggleVisibleAll) layer.defaultVisibility = props.config.toggleVisibleAll;
+ 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 queryUrl = getQueryUrl({
+ url: layer.rootUrl,
+ layerId: layer.id,
+ });
+ let wfsUrl = identifyUrl({
+ url: layer.rootUrl,
+ point: "#GEOMETRY#",
+ layerId: layer.id,
+ tolerance: "#TOLERANCE#",
+ extent: "#EXTENT#",
+ resolution: "#RESOLUTION#",
+ geometryType: "#GEOMETRYTYPE#",
+ });
+ 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}`;
+
+ zIndex++;
+ newLayer.setVisible(layer.defaultVisibility);
+ newLayer.setZIndex(zIndex);
+ newLayer.setOpacity(layer.options ? layer.options.opacity || 1 : 1);
+ newLayer.setProperties({
+ 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);
+ });
+ });
+ setLayers(layerArray);
+ };
+ useEffect(() => {
+ setShowAll(props.visibleAll);
+ }, [props.visibleAll]);
+
+ useEffect(() => {
+ if (props.serviceConfig.secure)
+ if (props.serviceConfig.tokenType === "app")
+ getAppAccessToken(props.serviceConfig.serviceUrl, (accessToken) => {
+ setToken(accessToken);
+ LayerHelpers.getCapabilities({ root_url: props.serviceConfig.serviceUrl, type: "rest", secured: props.serviceConfig.secured, token: accessToken.access_token }, (returnLayers) => {
+ //console.log(returnLayers);
+ processLayers(returnLayers);
+ });
+ });
+ else if (props.serviceConfig.tokenType === "user")
+ getAccessToken((token) => {
+ setToken(token);
+ LayerHelpers.getCapabilities({ root_url: props.serviceConfig.serviceUrl, type: "rest", secured: props.serviceConfig.secured, token: token }, (returnLayers) => {
+ //console.log(returnLayers);
+ processLayers(returnLayers);
+ });
+ });
+ else
+ LayerHelpers.getCapabilities({ root_url: props.serviceConfig.serviceUrl, type: "rest" }, (returnLayers) => {
+ processLayers(returnLayers);
+ });
+ else
+ LayerHelpers.getCapabilities({ root_url: props.serviceConfig.serviceUrl, type: "rest" }, (returnLayers) => {
+ processLayers(returnLayers);
+ });
+ }, []);
+ return (
+ <>
+ {layers.map((layer) => (
+
+ ))}
+
{props.children}
+
+ );
+};
+
+const ThemeServiceLegend = (props) => {
+ const legends = props.legend.filter((item) => item.imageData !== undefined);
+ if (legends.length === 1) {
+ return
;
+ } else if (legends.length > 1) {
+ return (
+
+ {legends
+ .filter((item) => item.imageData !== undefined)
+ .map((legend) => (
+ -
+
+
+
+ ))}
+
+ );
+ } else {
+ return null;
+ }
+};
+const ThemeServiceTogglerItem = (props) => {
+ const [visible, setVisible] = useState(true);
+ // const [layer, setLayer] = useState(props.layer);
+ const [recordCount, setRecordCount] = useState(0);
+ const [styleUrl, setStyleUrl] = useState("");
+ const [legend, setLegend] = useState([{}]);
+ const [mapClickEvent, setMapClickEvent] = useState({});
+ const [isLoading, setIsLoading] = useState(true);
+ const [showLegend, setShowLegend] = useState(false);
+ const layerRef = useRef(props.layer);
+ const init = () => {
+ setVisible(props.layerConfig.defaultVisibility);
+ if (props.layerConfig.legend) setLegend(props.layerConfig.legend.legend);
+ if (props.layerConfig.legend) setStyleUrl(`data:${props.layerConfig.legend.legend[0].contentType};base64,${props.layerConfig.legend.legend[0].imageData}`);
+ getRecordCount();
+ setupMapClick();
+ if (props.config.toggleLayersKey) layerRef.current.setProperties({ themeKey: props.config.toggleLayersKey });
+ window.map.addLayer(layerRef.current);
+ setIsLoading(false);
+ };
+
+ const setupMapClick = () => {
+ if (props.onMapClick) {
+ setMapClickEvent(window.map.on("click", props.onMapClick));
+ } else {
+ const clickEvent = (evt) => {
+ if (window.isDrawingOrEditing || !visible || window.isCoordinateToolOpen || window.isMeasuring || !layerRef.current) return;
+ var viewResolution = window.map.getView().getResolution();
+ console.log("setupMapClick", layerRef.current.getSource());
+ var url = layerRef.current.getSource().getFeatureInfoUrl(evt.coordinate, viewResolution, "EPSG:3857", {
+ INFO_FORMAT: "application/json",
+ });
+ if (url) {
+ get(url, { useBearerToken: this.props.layerConfig.secure || false }, (result) => {
+ const features = result.features;
+ if (!features) {
+ return;
+ }
+
+ const geoJSON = new GeoJSON().readFeatures(result);
+ const feature = geoJSON[0];
+
+ const entries = Object.entries(feature.getProperties());
+ window.popup.show(
+ evt.coordinate,
+
,
+ this.props.layerConfig.displayName
+ );
+ });
+ }
+ };
+ setMapClickEvent(window.map.on("click", clickEvent));
+ }
+ };
+ const getRecordCount = () => {
+ const url = layerRef.current.get("recordCountUrl");
+ helpers.getJSON(url, (result) => {
+ if (result.count) setRecordCount(result.count);
+ });
+ };
+ const onCheckboxChange = (isChecked) => {
+ setVisible(isChecked);
+ layerRef.current.setVisible(isChecked);
+ props.onLayerVisiblityChange(layerRef.current);
+ };
+ const cleanup = () => {
+ window.map.removeLayer(layerRef.current);
+ unByKey(mapClickEvent);
+ };
+
+ useEffect(() => {
+ if (!isLoading) onCheckboxChange(props.showAll);
+ }, [props.showAll]);
+ useEffect(() => {
+ layerRef.current = props.layer;
+ }, [props.layer]);
+
+ useEffect(() => {
+ // console.log(layer);
+ init();
+ return () => {
+ cleanup();
+ };
+ }, []);
+
+ const LegendToggle = (props) => {
+ const legends = props.legend.filter((item) => item.imageData !== undefined);
+ if (legends.length === 1) {
+ return
;
+ } else if (legends.length > 1) {
+ return (
+
setShowLegend(!showLegend)}>
+ {!showLegend ? "+" : "-"}
+
+
+
+ );
+ } else {
+ return null;
+ }
+ };
+ return (
+
+
+
+
+
+
+
+
+
+
+ {/*
*/}
+
+
{props.children}
+
+ );
+};
+
+export default ThemeServiceToggler;
diff --git a/src/sidebar/components/toc/TOC.jsx b/src/sidebar/components/toc/TOC.jsx
index 139a345d..9d030069 100644
--- a/src/sidebar/components/toc/TOC.jsx
+++ b/src/sidebar/components/toc/TOC.jsx
@@ -12,6 +12,7 @@ import TOCFolderView from "./toc-folder-view/TOCFolderView.jsx";
import * as helpers from "../../../helpers/helpers";
import { LayerHelpers } from "../../../helpers/OLHelpers";
import LegendApp from "../../../legend/App";
+import { get, createObjectURL } from "../../../helpers/api";
class TOC extends Component {
constructor(props) {
@@ -249,7 +250,7 @@ class TOC extends Component {
});
break;
case "GEOSERVER":
- TOCHelpers.getGroupsGC(geoserverUrl, geoserverUrlType, isReset, this.state.type, false, true, undefined, (result) => {
+ TOCHelpers.getGroupsGC(geoserverUrl, geoserverUrlType, isReset, this.state.type, false, true, (result) => {
this.loadGroups(result, isReset, callback);
});
break;
@@ -734,28 +735,34 @@ class TOC extends Component {
if (layerInfo.legendImage === null && (layerInfo.legendObj === undefined || layerInfo.legendObj === null)) {
const params = {};
- const secureKey = layerInfo.layer.get("secureKey");
- if (secureKey !== undefined) {
- params[secureKey] = "GIS";
+ const secured = layerInfo.layer.get("secured");
+ if (secured) {
+ params["useBearerToken"] = true;
}
- helpers.getBase64FromImageUrlWithParams(layerInfo.styleUrl, params, (height, imgData) => {
- const rowHeight = showLegend ? (height += 36) : 30;
- let newGroup = Object.assign({}, group);
- let newLayers = Object.assign([], group.layers);
- layerInfo.showLegend = showLegend;
- layerInfo.height = rowHeight;
- layerInfo.legendImage = imgData;
- layerInfo.legendHeight = rowHeight;
- newLayers = newLayers.map((layer2) => (layer2.name === layerInfo.name ? layerInfo : layer2));
- newGroup.layers = newLayers;
- this.setLayerGroups(
- this.state.type,
- this.getActiveLayerGroups().map((item) => (item.value === newGroup.value ? newGroup : item)),
- () => {
- if (callback !== undefined) callback();
- }
- );
+ get(layerInfo.styleUrl, { ...params, type: "blob" }, (results) => {
+ var imgData = createObjectURL(results);
+ const img = new Image();
+ img.onload = () => {
+ let height = img.height;
+ const rowHeight = showLegend ? (height += 36) : 30;
+ let newGroup = Object.assign({}, group);
+ let newLayers = Object.assign([], group.layers);
+ layerInfo.showLegend = showLegend;
+ layerInfo.height = rowHeight;
+ layerInfo.legendImage = imgData;
+ layerInfo.legendHeight = rowHeight;
+ newLayers = newLayers.map((layer2) => (layer2.name === layerInfo.name ? layerInfo : layer2));
+ newGroup.layers = newLayers;
+ this.setLayerGroups(
+ this.state.type,
+ this.getActiveLayerGroups().map((item) => (item.value === newGroup.value ? newGroup : item)),
+ () => {
+ if (callback !== undefined) callback();
+ }
+ );
+ };
+ img.src = imgData;
});
} else {
const rowHeight = showLegend ? layerInfo.legendHeight : 30;
diff --git a/src/sidebar/components/toc/common/TOCHeader.css b/src/sidebar/components/toc/common/TOCHeader.css
index d1005aeb..169d53aa 100644
--- a/src/sidebar/components/toc/common/TOCHeader.css
+++ b/src/sidebar/components/toc/common/TOCHeader.css
@@ -72,7 +72,6 @@
cursor: pointer;
z-index: 100000;
}
-
.sc-toc-header-help {
background-color: #6ea8cf;
border: 1px solid rgba(202, 202, 202, 0.69);
diff --git a/src/sidebar/components/toc/common/TOCHeader.jsx b/src/sidebar/components/toc/common/TOCHeader.jsx
index d899f499..c3e435c3 100644
--- a/src/sidebar/components/toc/common/TOCHeader.jsx
+++ b/src/sidebar/components/toc/common/TOCHeader.jsx
@@ -96,7 +96,6 @@ class TOCHeader extends Component {
this.props.onSearchChange("");
});
};
-
onSearchChange = (evt) => {
const searchText = evt.target.value;
this.setState({ searchText: searchText }, () => {
diff --git a/src/sidebar/components/toc/common/TOCHelpers.jsx b/src/sidebar/components/toc/common/TOCHelpers.jsx
index f2daab3c..bc21556c 100644
--- a/src/sidebar/components/toc/common/TOCHelpers.jsx
+++ b/src/sidebar/components/toc/common/TOCHelpers.jsx
@@ -1,6 +1,8 @@
import * as helpers from "../../../../helpers/helpers";
import * as drawingHelpers from "../../../../helpers/drawingHelpers";
import { LayerHelpers, FeatureHelpers, OL_DATA_TYPES } from "../../../../helpers/OLHelpers";
+import { get } from "../../../../helpers/api";
+import { getAppAccessToken } from "../../../../helpers/esriHelpers";
import { WMSCapabilities } from "ol/format.js";
// INDEX WHERE THE TOC LAYERS SHOULD START DRAWING AT
@@ -99,7 +101,7 @@ export async function getMap(sources, isReset, tocType, callback) {
if (source.type === undefined || source.type === null || source.type === "") source["type"] = "geoserver"; //default to geoserver
switch (source.type.toLowerCase()) {
case "geoserver":
- getGroupsGC(source.layerUrl, source.urlType !== undefined ? source.urlType : urlType, isReset, tocType, source.secure, source.primary, source.secureKey, (layerGroupConfig) => {
+ getGroupsGC(source.layerUrl, source.urlType !== undefined ? source.urlType : urlType, isReset, tocType, source.secure, source.primary, (layerGroupConfig) => {
if (source.group !== undefined) {
if (layerGroupConfig.groups[0] !== undefined) {
if (source.group.name !== undefined) layerGroupConfig.groups[0]["value"] = source.group.name;
@@ -128,46 +130,85 @@ export async function getMap(sources, isReset, tocType, callback) {
});
break;
case "arcgis":
- getGroupsESRI(
- {
- url: source.layerUrl,
- tocType: tocType,
- isReset: isReset,
- requiresToken: source.secure,
- grouped: source.grouped,
- grouped_name: source.name,
- secured: source.secure,
- open: source.open || false,
- useRedFolder: source.useRedFolder || false,
- primary: source.primary || false,
- visibleLayers: source.visibleLayers,
- },
- (layerGroupConfig) => {
- if (!layerGroupConfig.groups) {
+ if (source.appToken)
+ getAppAccessToken(source.layerUrl, (accessToken) => {
+ getGroupsESRI(
+ {
+ url: source.layerUrl,
+ tocType: tocType,
+ isReset: isReset,
+ requiresToken: source.secure,
+ grouped: source.grouped,
+ grouped_name: source.name,
+ secured: source.secure,
+ token: accessToken.access_token,
+ open: source.open || false,
+ useRedFolder: source.useRedFolder || false,
+ primary: source.primary || false,
+ visibleLayers: source.visibleLayers,
+ },
+ (layerGroupConfig) => {
+ if (!layerGroupConfig.groups) {
+ sourcesProcessed++;
+ return;
+ }
+ if (source.primary && default_group === undefined) default_group = layerGroupConfig.defaultLayerName;
+ if (layerGroups === undefined) {
+ layerGroups = layerGroupConfig.groups;
+ } else {
+ layerGroups = mergeGroups(layerGroups, layerGroupConfig.groups);
+ }
+ sourcesProcessed++;
+ if (sourcesProcessed >= sources.length) {
+ callback({
+ groups: layerGroups,
+ defaultGroupName: default_group,
+ });
+ }
+ }
+ );
+ });
+ else
+ getGroupsESRI(
+ {
+ url: source.layerUrl,
+ tocType: tocType,
+ isReset: isReset,
+ requiresToken: source.secure,
+ grouped: source.grouped,
+ grouped_name: source.name,
+ secured: source.secure,
+ appToken: source.appToken,
+ open: source.open || false,
+ useRedFolder: source.useRedFolder || false,
+ primary: source.primary || false,
+ visibleLayers: source.visibleLayers,
+ },
+ (layerGroupConfig) => {
+ if (!layerGroupConfig.groups) {
+ sourcesProcessed++;
+ return;
+ }
+ if (source.primary && default_group === undefined) default_group = layerGroupConfig.defaultLayerName;
+ if (layerGroups === undefined) {
+ layerGroups = layerGroupConfig.groups;
+ } else {
+ layerGroups = mergeGroups(layerGroups, layerGroupConfig.groups);
+ }
sourcesProcessed++;
- return;
- }
- if (source.primary && default_group === undefined) default_group = layerGroupConfig.defaultLayerName;
- if (layerGroups === undefined) {
- layerGroups = layerGroupConfig.groups;
- } else {
- layerGroups = mergeGroups(layerGroups, layerGroupConfig.groups);
- }
- sourcesProcessed++;
- if (sourcesProcessed >= sources.length) {
- callback({
- groups: layerGroups,
- defaultGroupName: default_group,
- });
+ if (sourcesProcessed >= sources.length) {
+ callback({
+ groups: layerGroups,
+ defaultGroupName: default_group,
+ });
+ }
}
- }
- );
+ );
break;
case "layer":
const layerOptions = {
url: source.layerUrl,
secure: source.secure,
- secureKey: source.secureKey,
type: source.type,
groups: source.groups,
layerType: source.layerType,
@@ -180,6 +221,7 @@ export async function getMap(sources, isReset, tocType, callback) {
projection: source.projection,
index: source.index,
};
+
getSingleLayer(layerOptions, (layerGroupConfig) => {
if (!layerGroupConfig.groups) {
sourcesProcessed++;
@@ -370,7 +412,9 @@ export function getGroupsESRI(options, callback) {
let groupsObj = {};
const isGrouped = options.grouped ? true : false;
let groupedLayer = { name: options.grouped_name, layers: [] };
- LayerHelpers.getCapabilities({ root_url: options.url, type: "rest", secured: options.secured }, (layers) => {
+ let getCapabilitiesOptions = { root_url: options.url, type: "rest", secured: options.secured };
+ if (options.token) getCapabilitiesOptions["token"] = options.token;
+ LayerHelpers.getCapabilities(getCapabilitiesOptions, (layers) => {
if (layers.length === 0) {
callback({ groups: groups, defaultGroupName: defaultGroup });
return;
@@ -564,7 +608,7 @@ export async function getSingleLayer(options, callback) {
false,
undefined,
(retLayer) => {
- if (options.secureKey !== undefined) retLayer.setProperties({ secureKey: options.secureKey });
+ if (options.secure !== undefined && retLayer.layer !== undefined) retLayer.layer.setProperties({ secured: options.secure });
newGroup.layers.push(retLayer);
groupArray.push(newGroup);
if (groupArray.length >= groups.length) callback({ groups: groupArray, defaultLayerName: groups[0] });
@@ -576,7 +620,7 @@ export async function getSingleLayer(options, callback) {
});
}
// GET GROUPS FROM GET CAPABILITIES
-export async function getGroupsGC(url, urlType, isReset, tocType, secured = false, primary = false, secureKey = undefined, callback) {
+export async function getGroupsGC(url, urlType, isReset, tocType, secured = false, primary = false, callback) {
let defaultGroup = null;
let isDefault = false;
let groups = [];
@@ -587,17 +631,13 @@ export async function getGroupsGC(url, urlType, isReset, tocType, secured = fals
const params = {};
const headers = {};
params["mode"] = "cors";
+ params["type"] = "text";
headers["Content-Type"] = "application/text";
if (secured) {
- const headers = {};
- if (secureKey !== undefined) {
- headers[secureKey] = "GIS";
- }
- params["headers"] = headers;
+ params["useBearerToken"] = true;
}
-
- helpers.httpGetTextWithParams(url, params, (result) => {
+ get(url, params, (result) => {
var parser = new WMSCapabilities();
const resultObj = parser.read(result);
let groupLayerList = urlType === "root" ? [resultObj.Capability.Layer.Layer[0]] : urlType === "group" ? resultObj.Capability.Layer.Layer[0].Layer : [resultObj.Capability.Layer.Layer[0]];
@@ -668,7 +708,7 @@ export async function getGroupsGC(url, urlType, isReset, tocType, secured = fals
const buildLayers = (layers) => {
layers.forEach((currentLayer) => {
if (!isDuplicate(layerList, currentLayer.Name)) {
- buildLayerByGroup(tmpGroupObj, currentLayer, layerIndex, tocType, secured, secureKey, (result) => {
+ buildLayerByGroup(tmpGroupObj, currentLayer, layerIndex, tocType, secured, (result) => {
layerList.push(result);
});
layerIndex--;
@@ -791,7 +831,7 @@ export function layerToJson(layer, callback) {
if (callback !== undefined) callback(returnObject);
}
-export async function buildLayerByGroup(group, layer, layerIndex, tocType, secured, secureKey = undefined, callback) {
+export async function buildLayerByGroup(group, layer, layerIndex, tocType, secured = false, callback) {
if (layer.Layer === undefined) {
const visibleLayers = group.visibleLayers === undefined ? [] : group.visibleLayers;
const geoserverPath = window.config.geoserverPath;
@@ -872,7 +912,7 @@ export async function buildLayerByGroup(group, layer, layerIndex, tocType, secur
url: serverUrl + "/wms?layers=" + layer.Name,
tiled: false,
name: displayName,
- secureKey: secureKey,
+ secured: secured,
},
(newLayer) => {
const wfsUrlTemplate = (rootUrl, layer) => `${rootUrl}/wfs?service=wfs&version=2.0.0&request=GetFeature&typeNames=${layer}&outputFormat=application/json&cql_filter=`;
@@ -895,9 +935,10 @@ export async function buildLayerByGroup(group, layer, layerIndex, tocType, secur
opaque: opaque,
minScale: minScale,
maxScale: maxScale,
+ secured: secured,
extendedProperties: { keywords: Object.assign({}, allKeywords) },
});
- if (secureKey !== undefined) newLayer.setProperties({ secureKey: secureKey });
+ if (secured) newLayer.setProperties({ secured: true });
newLayer.setZIndex(layerIndex);
window.map.addLayer(newLayer);
@@ -1045,15 +1086,12 @@ export function updateLayerIndex(layers, callback = undefined) {
export function getLayerInfo(layerInfo, callback) {
const params = {};
- const secureKey = layerInfo.layer !== undefined ? layerInfo.layer.get("secureKey") : undefined;
- if (secureKey !== undefined) {
- const headers = {};
- headers[secureKey] = "GIS";
- params["headers"] = headers;
- }
- helpers.getJSONWithParams(layerInfo.metadataUrl.replace("http:", "https:"), params, (result) => {
+ const secured = layerInfo.layer ? layerInfo.layer.get("secured") : undefined;
+ if (secured) params["useBearerToken"] = true;
+
+ get(layerInfo.metadataUrl.replace("http:", "https:"), params, (result) => {
const fullInfoUrl = result.layer.resource.href.replace("http:", "https:").split("+").join("%20");
- helpers.getJSONWithParams(fullInfoUrl, params, (fullInfoResult) => {
+ get(fullInfoUrl, params, (fullInfoResult) => {
if (fullInfoResult.featureType === undefined) fullInfoResult["featureType"] = {};
fullInfoResult.featureType.fullUrl = fullInfoUrl.replace("http:", "https:");
fullInfoResult["requestParams"] = params;
@@ -1273,7 +1311,6 @@ export async function buildESRILayer(options, callback) {
let layer = options.layer;
let layerIndex = options.layerIndex;
let secured = options.secured !== undefined ? options.secured : false;
- let secureKey = options.secureKey;
if (layer !== undefined) {
const visibleLayers = group.visibleLayers === undefined ? [] : group.visibleLayers;
@@ -1392,7 +1429,6 @@ export async function buildESRILayer(options, callback) {
attachmentUrl: hasAttachments ? attachmentUrl : null,
hasAttachments: hasAttachments,
});
- if (secureKey !== undefined) newLayer.setProperties({ secureKey: secureKey });
newLayer.setZIndex(layerIndex);
window.map.addLayer(newLayer);
let legendHeight = -1;
diff --git a/src/sidebar/components/tools/addlayer/AddLayer.jsx b/src/sidebar/components/tools/addlayer/AddLayer.jsx
index c046f89e..6500717d 100644
--- a/src/sidebar/components/tools/addlayer/AddLayer.jsx
+++ b/src/sidebar/components/tools/addlayer/AddLayer.jsx
@@ -232,7 +232,7 @@ class AddLayerForm extends Component {
layers.forEach((layer) => {
if (this.state.serverUrl.toLowerCase().indexOf("wmsserver") !== -1) {
layer["INFO_FORMAT"] = addLayerConfig.arcgis.INFO_FORMAT;
- layer["XSL_TEMPLATE"] = `${window.config.originUrl}${addLayerConfig.arcgis.XSL_TEMPLATE}`;
+ layer["XSL_TEMPLATE"] = addLayerConfig.arcgis.XSL_TEMPLATE.indexOf("http") === -1 ? `/${window.homepage}/${addLayerConfig.arcgis.XSL_TEMPLATE}` : addLayerConfig.arcgis.XSL_TEMPLATE;
}
selectLayers.push(layer);
@@ -302,7 +302,8 @@ class AddLayerForm extends Component {
if (foundLayers !== undefined && foundLayers.length > 0) {
foundLayers.forEach((layer) => {
if (selectedService.INFO_FORMAT) layer["INFO_FORMAT"] = selectedService.INFO_FORMAT;
- if (selectedService.XSL_TEMPLATE) layer["XSL_TEMPLATE"] = `${window.config.originUrl}${selectedService.XSL_TEMPLATE}`;
+ if (selectedService.XSL_TEMPLATE)
+ layer["XSL_TEMPLATE"] = selectedService.XSL_TEMPLATE.indexOf("http") === -1 ? `/${window.homepage}/${selectedService.XSL_TEMPLATE}` : selectedService.XSL_TEMPLATE;
serviceLayers.push(layer);
});
}
diff --git a/src/sidebar/components/tools/addlayer/config.json b/src/sidebar/components/tools/addlayer/config.json
index 7f430253..138b451f 100644
--- a/src/sidebar/components/tools/addlayer/config.json
+++ b/src/sidebar/components/tools/addlayer/config.json
@@ -201,7 +201,7 @@
],
"arcgis": {
"INFO_FORMAT": "text/plain",
- "XSL_TEMPLATE": "/public/xsl/esri_transform.xsl"
+ "XSL_TEMPLATE": "/xsl/esri_transform.xsl"
},
"dataTypes": [
{
@@ -264,7 +264,7 @@
"serviceUrl": "https://ws.lioservices.lrc.gov.on.ca/arcgis1071a/services",
"urlSuffix": "/MapServer/WMSServer",
"INFO_FORMAT": "text/plain",
- "XSL_TEMPLATE": "/public/xsl/esri_transform.xsl"
+ "XSL_TEMPLATE": "/xsl/esri_transform.xsl"
},
{
@@ -277,7 +277,7 @@
"serviceUrl": "https://maps.simcoe.ca/arcgis/services",
"urlSuffix": "/MapServer/WMSServer",
"INFO_FORMAT": "text/plain",
- "XSL_TEMPLATE": "/public/xsl/esri_transform.xsl",
+ "XSL_TEMPLATE": "/xsl/esri_transform.xsl",
"filterServices": ["Public/Operational_Layers_Dynamic"]
}
]
diff --git a/src/sidebar/components/tools/lotandconcession/LotAndConcession.jsx b/src/sidebar/components/tools/lotandconcession/LotAndConcession.jsx
index 9ee6fd24..ef3d26b1 100644
--- a/src/sidebar/components/tools/lotandconcession/LotAndConcession.jsx
+++ b/src/sidebar/components/tools/lotandconcession/LotAndConcession.jsx
@@ -81,15 +81,16 @@ class ToolComponent extends Component {
window.map.addLayer(this.layer);
helpers.getWFSGeoJSON(
- toolConfig.serverUrl,
- this.layerName,
+ {
+ serverUrl: toolConfig.serverUrl,
+ layerName: this.layerName,
+ cqlFilter: sql,
+ sortField: "_lot,_con",
+ count: 1000,
+ },
(result) => {
this.updateFeatures(result);
- },
- "_lot,_con",
- null,
- sql,
- 1000
+ }
);
});
};
diff --git a/src/sidebar/components/tools/print/Print.jsx b/src/sidebar/components/tools/print/Print.jsx
index 2d62a1f2..5dfb9da1 100644
--- a/src/sidebar/components/tools/print/Print.jsx
+++ b/src/sidebar/components/tools/print/Print.jsx
@@ -3,6 +3,8 @@ import Select from "react-select";
import Collapsible from "react-collapsible";
import PanelComponent from "../../../PanelComponent";
import * as helpers from "../../../../helpers/helpers";
+import { post } from "../../../../helpers/api";
+
import * as printRequest from "./printRequest/printRequest";
import printConfig from "./config.json";
import "./Print.css";
@@ -37,6 +39,7 @@ class Print extends Component {
isPrinting: false,
termsOfUse: printConfig.termsOfUse,
mapResolutionOption: "120",
+ options: this.props.options || {},
};
}
@@ -48,7 +51,11 @@ class Print extends Component {
if (globalConfig.config !== undefined) {
const defaultSizes = this.config.printSizes;
this.config = helpers.mergeObj(this.config, globalConfig.config);
- this.config.printSizes = [...new Set([...defaultSizes, ...printConfig.printSizes])];
+ if (printConfig.overwrite) this.config.printSizes = [...new Set([...printConfig.printSizes])];
+ else {
+ if (printConfig.append === undefined || printConfig.append) this.config.printSizes = [...new Set([...defaultSizes, ...printConfig.printSizes])];
+ else this.config.printSizes = [...new Set([...printConfig.printSizes, ...defaultSizes])];
+ }
}
this.setState({
printUrl: mainConfig.printUrl,
@@ -109,16 +116,14 @@ class Print extends Component {
onDownloadButtonClick = async (evt) => {
// GET VISIBLE LAYERS
const printLayers = this.getPrintLayers();
- let secureKey = undefined;
- const params = { method: "POST" };
- const headers = { "Content-Type": "application/json" };
+ let secured = false;
+ const params = {};
printLayers.forEach((layer) => {
- secureKey = layer.get("secureKey");
- if (secureKey !== undefined) {
- headers[secureKey] = "GIS";
+ secured = layer.get("secured");
+ if (secured) {
+ params["useBearerToken"] = secured;
}
});
- params["headers"] = headers;
// =======================
// SEND PRINT SERVER REQUEST HERE
@@ -172,13 +177,14 @@ class Print extends Component {
};
//post request to server and check status
params["body"] = encodedPrintRequest;
- fetch(url, params)
- .then((response) => response.json())
- .then((response) => {
+ post(url, params, (response) => {
+ if (typeof response === "string" && response.includes("ERROR"))
+ helpers.showMessage("Print Failed", `There has been a problem with your fetch operation: ${response}`, helpers.messageColors.red, 15000);
+ else {
this.setState({ isPrinting: true });
checkStatus(response);
- })
- .catch((error) => helpers.showMessage("Print Failed", `There has been a problem with your fetch operation: ${error.message}`, helpers.messageColors.red, 15000));
+ }
+ });
helpers.addAppStat("Print Button", "Click");
};
diff --git a/src/sidebar/components/tools/print/printRequest/printRequest.js b/src/sidebar/components/tools/print/printRequest/printRequest.js
index 5dd541b2..094715ae 100644
--- a/src/sidebar/components/tools/print/printRequest/printRequest.js
+++ b/src/sidebar/components/tools/print/printRequest/printRequest.js
@@ -181,8 +181,7 @@ let configureTileLayer = async (l) => {
tileUrl = layerSource.getUrls();
tileUrl = tileUrl[0].indexOf("/MapServer/WMTS/") !== -1 ? `${tileUrl[0].split("/WMTS/")[0]}` : `${tileUrl[0].split("/tile/")[0]}`;
let retLayer = {};
- const openstreetmapUrl = "openstreetmap.org";
- if (l.values_.source.key_.includes(openstreetmapUrl)) {
+ if (l.values_.source.key_.includes("openstreetmap.org")) {
retLayer = {
baseURL: l.values_.source.key_.split("\n")[0],
type: "OSM",
@@ -334,6 +333,7 @@ const switchTemplates = (options, callback = undefined) => {
const rotation = 0;
const dpi = parseInt(options.mapResolutionOption);
let printSize = options.printSizeSelectedOption.size === [] ? window.map.getSize() : options.printSizeSelectedOption.size;
+ const parameters = options.options.parameters || [];
const attributes = {
title: options.mapTitle,
@@ -344,6 +344,11 @@ const switchTemplates = (options, callback = undefined) => {
},
scale: "1 : " + currentMapScale.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","),
};
+ if (parameters !== undefined) {
+ parameters.forEach((item) => {
+ attributes[item.name] = item.value;
+ });
+ }
attributes.map.projection = mapProjection;
attributes.map.longitudeFirst = longitudeFirst;
attributes.map.rotation = rotation;
@@ -403,6 +408,8 @@ export async function printRequest(mapLayers, printSelectedOption) {
dpi: parseInt(printSelectedOption.mapResolutionOption),
compressed: true,
};
+ printRequest["parameters"] = printSelectedOption.options.parameters || [];
+
printRequest.outputFormat = printSelectedOption.printFormatSelectedOption.value;
//ensures that template configuration is executed before print request object is sent
printRequest.attributes = switchTemplates(printSelectedOption);
@@ -412,7 +419,6 @@ export async function printRequest(mapLayers, printSelectedOption) {
let overviewMap = [];
let sortedMainMap = [];
let sortedOverviewMap = [];
-
//iterate through each map layer passed in the window.map
let layerOrder = 0;
mapLayers.forEach((layer) => {
diff --git a/src/sidebar/components/tools/searchaddresses/SearchAddresses.css b/src/sidebar/components/tools/searchaddresses/SearchAddresses.css
index 366658ab..0d7bb8e6 100644
--- a/src/sidebar/components/tools/searchaddresses/SearchAddresses.css
+++ b/src/sidebar/components/tools/searchaddresses/SearchAddresses.css
@@ -10,7 +10,7 @@
font-size: 10pt;
font-family: Arial !important;
}
-#sc-theme-search-addresses-muni {
+#sc-tool-search-addresses-muni {
z-index: 2 !important;
}
#sc-tool-search-addresses-street-search::placeholder {
@@ -26,41 +26,41 @@
font-size: 9pt;
}
-.sc-theme-search-addresses-controls {
+.sc-tool-search-addresses-controls {
margin-top: 5px;
margin-bottom: 5px;
height: 145px;
}
-.sc-theme-search-addresses-control {
+.sc-tool-search-addresses-control {
display: table-cell;
}
-.sc-theme-search-addresses-control.label {
+.sc-tool-search-addresses-control.label {
width: 108px;
font-size: 10pt;
}
-.sc-theme-search-addresses-control.input {
+.sc-tool-search-addresses-control.input {
width: 238px;
font-size: 10pt;
}
-.sc-theme-search-addresses-number {
+.sc-tool-search-addresses-number {
width: 233px;
height: 24px;
}
-.sc-theme-search-addresses-control-row {
+.sc-tool-search-addresses-control-row {
display: table;
margin-top: 5px;
}
-.sc-theme-search-addresses-button-container {
+.sc-tool-search-addresses-button-container {
float: right;
height: 34px;
}
-.sc-theme-search-addresses-button {
+.sc-tool-search-addresses-button {
display: table-cell;
width: 112px;
height: 31px;
@@ -82,14 +82,14 @@
border-radius: 2px;
}
-.sc-theme-search-addresses-control legend {
+.sc-tool-search-addresses-control legend {
display: none !important;
}
-.sc-theme-search-addresses-control fieldset {
+.sc-tool-search-addresses-control fieldset {
top: 0px !important;
box-shadow: none !important;
}
-.sc-theme-search-addresses-number:focus-visible {
+.sc-tool-search-addresses-number:focus-visible {
outline-color: #337ab7 !important;
}
.sc-tool-search-addresses-street-search-menu {
diff --git a/src/sidebar/components/tools/searchaddresses/SearchAddresses.jsx b/src/sidebar/components/tools/searchaddresses/SearchAddresses.jsx
index 5bbf4c80..12bb6d2e 100644
--- a/src/sidebar/components/tools/searchaddresses/SearchAddresses.jsx
+++ b/src/sidebar/components/tools/searchaddresses/SearchAddresses.jsx
@@ -130,15 +130,16 @@ const SearchAddresses = (props) => {
}
helpers.getWFSGeoJSON(
- searchAddressConfig.serverUrl,
- searchAddressConfig.layerName,
+ {
+ serverUrl: searchAddressConfig.serverUrl,
+ layerName: searchAddressConfig.layerName,
+ sortField: "stnum,fullname",
+ cqlFilter: sql,
+ count: 1000,
+ },
(result) => {
updateFeatures(result);
- },
- "stnum,fullname",
- null,
- sql,
- 1000
+ }
);
});
};
@@ -210,22 +211,22 @@ const SearchAddresses = (props) => {
Locate civic addresses within the County using the form below.
-
-
-
-
-
+
+
-
-
-
-
+
-
-
-
+
+
+
{
/> */}
-
-
diff --git a/src/sidebar/components/tools/settings/SettingsComponents.jsx b/src/sidebar/components/tools/settings/SettingsComponents.jsx
index 5b445718..3d588d81 100644
--- a/src/sidebar/components/tools/settings/SettingsComponents.jsx
+++ b/src/sidebar/components/tools/settings/SettingsComponents.jsx
@@ -1,43 +1,43 @@
import React from "react";
export const ClearLocalStorageButtonGrouped = (props) => {
- if (!props.storageKeys || props.storageKeys.length === 0) return
;
- return (
-
-
-
-
- );
+ if (!props.storageKeys || props.storageKeys.length === 0) return
;
+ return (
+
+
+
+
+ );
};
export const ClearLocalStorageButton = (props) => {
- if (props.storageKey === undefined) return
;
- return (
-
-
-
-
- );
+ if (props.storageKey === undefined) return
;
+ return (
+
+
+
+
+ );
};
diff --git a/src/sidebar/images/lock-icon.png b/src/sidebar/images/lock-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..c12242920d4e4e4878bb924f4cde6a5d7b3a5238
GIT binary patch
literal 841
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbKJV{wqX6XVU3I`u#fXMsm#F#`j)
zFbFd;%$g$sRL~#b6XFV#oUvr_@-3T=T{wUI;`tR@Hv_p{)2FT7wR8UJRlT!j0@3
=g(`KJgH^k1RyzS-rOY{)^|*u(mrMK(v2H{Wb34f8}{x7YVVmb
zeZ}^zKrT?_j^oEB%$eOiecGxW+riwUeY0lHT(Wq|{CSHvtedrT$?RoI=K#_2Wh=LB
zow{H?P^x?S^dlF~zyJB;^o?tq_V4SSF}%#rJ%QtOYw0>=4cUOI9=jMa^FFks&
zY~u!?8-QGE2m1+a30qb-#Ajq|p6NHQH#8w5HMz9Zz}i5RpI@N6!vFAwinVJdHno)OTAI|=S=iN8vTb>8Q)}7s4GY%KFLLwo
zDQ~Esxpc|$Et`QsF=^f$AQu?aX4Y1r(a|9>F`+Th!BJ5m(b1tXF%X8fz8+A4DG!r8
zkZLUn@(X6L-1z40W}B4Xe}8=Yn<)F`hbNQAhhJLV|5H={)-M00#P@sG>hBW2kLXdtYqi0VZwtoEigO#PVrN!0d=mMrkLX#A{yrS5&6tva(
z7m0{WUBGloYgIy&uk4}g7p`2ocJb=v%a_d!Shyu5XU}MA?3`&Cap2IIOI$oUYjY1U
zZ7ci6myq!O1&dfgSz&4M_YYq_ef#*8nfnJj3ma>DOIxeEi(4b>qU5B ![close table]({images["close.png"]})
- ![Loading]({images["loading.gif"]})
+ ![Sample Button]({images["searchAddresses.png"]} "Sample Button")
{
+ helpers.showMessage("Sample Button Clicked");
+ }}
+ />
+ );
+};
+
+// 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;
+}
diff --git a/src/map/extensions/_loader.js b/src/map/extensions/_loader.js
new file mode 100644
index 00000000..e5672fe2
--- /dev/null
+++ b/src/map/extensions/_loader.js
@@ -0,0 +1,22 @@
+import config from "./config.json";
+export const fetchExtensions = (props, callback = undefined) => {
+ let allPromises = [];
+ config.extensions.forEach((ext) => {
+ const promise = new Promise((resolve, reject) => {
+ import(`./${ext.file}`)
+ .then((item) => {
+ const { fetchData, dataRows, content, arnExtension, actions } = item;
+ props.addExtension(fetchData, dataRows, content, arnExtension, actions, config.extensions.indexOf(ext), ext.type);
+ resolve();
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+ });
+ allPromises.push(promise);
+ });
+
+ Promise.all(allPromises).then(() => {
+ if (callback) callback();
+ });
+};
diff --git a/src/map/extensions/config.json b/src/map/extensions/config.json
new file mode 100644
index 00000000..98cd4a6c
--- /dev/null
+++ b/src/map/extensions/config.json
@@ -0,0 +1,3 @@
+{
+ "extensions": []
+}
diff --git a/src/map/extensions/sample.config.json b/src/map/extensions/sample.config.json
new file mode 100644
index 00000000..aa988ca7
--- /dev/null
+++ b/src/map/extensions/sample.config.json
@@ -0,0 +1,3 @@
+{
+ "extensions": [{ "file": "Sample.extension.js", "type": "property-click" }]
+}
diff --git a/src/reports/PropertyReport.css b/src/reports/PropertyReport.css
new file mode 100644
index 00000000..74803793
--- /dev/null
+++ b/src/reports/PropertyReport.css
@@ -0,0 +1,121 @@
+.sc-property-report-container {
+ bottom: 0;
+ top: 0;
+}
+
+.sc-property-report-html-title {
+ font-size: 18px;
+ color: #185b82;
+ border-bottom: 1px solid #bbbbbb;
+ padding-bottom: 7px;
+ background-color: #e6e6e6;
+ color: #4a4a4a;
+ text-align: center;
+ padding-top: 6px;
+ text-shadow: 1px 1px 0px rgba(255, 255, 255, 1);
+}
+
+.sc-property-report-html-container {
+ border-left: 1px solid #ccc;
+ border-right: 1px solid #ccc;
+ border-bottom: 1px solid #ccc;
+ margin-bottom: 10px;
+ padding: 5px;
+ border-radius: 0px 0px 3px 3px;
+ -moz-border-radius: 0px 0px 3px 3px;
+ -webkit-border-radius: 0px 0px 3px 3px;
+ /* color: #666 !important; */
+}
+
+.sc-property-report-html-heading {
+ font-size: 12px;
+ font-weight: bold;
+ color: #494949;
+ padding-top: 5px;
+ padding-left: 5px;
+ /* border-bottom: 1px solid #DDDDDD; */
+ text-transform: uppercase;
+ /* margin-bottom: 4px; */
+ background-color: #dfdfdf;
+ padding: 6px;
+ border: 1px solid #ccc;
+ border-radius: 3px 3px 0px 0px;
+ -moz-border-radius: 3px 3px 0px 0px;
+ -webkit-border-radius: 3px 3px 0px 0px;
+}
+
+.sc-property-report-html-heading.icon {
+ background-repeat: no-repeat;
+ background-position: 5px 5px;
+ padding-left: 30px;
+}
+
+.sc-property-report-html-heading.general {
+ background-image: url("../map/images/information.png");
+}
+
+.sc-property-report-html-heading.emergency {
+ background-image: url("../map/images/emergency.png");
+}
+
+.sc-property-report-html-heading.waste {
+ background-image: url("../map/images/waste.png");
+}
+
+.sc-property-report-html-heading.school {
+ background-image: url("../map/images/school.png");
+}
+
+.sc-property-report-html-heading.other {
+ background-image: url("../map/images/other.png");
+}
+
+.sc-property-report-html-heading.pdf {
+ background-image: url("../map/images/pdf.png");
+}
+
+.sc-property-report-html-label {
+ font-size: 13px;
+ font-weight: bolder;
+}
+
+.sc-property-report-html-value {
+ font-size: 12px;
+ padding-bottom: 2px;
+ padding-top: 2px;
+ padding-left: 20px;
+ background-image: url("../map/images/arrow_curve.gif");
+ background-position-y: 1px;
+ background-repeat: no-repeat;
+ color: #666 !important;
+}
+
+.sc-property-report-html-value.sub {
+ padding-left: 30px;
+ background-position-x: 10px;
+}
+.sc-property-report-html-value:hover {
+ color: #ff0000;
+}
+
+.sc-property-report-html-title-address {
+ border-bottom: 1px solid #d6d6d6;
+ padding-bottom: 5px;
+}
+
+.sc-property-report-html-title-button-container {
+ padding-top: 5px;
+ text-align: center;
+}
+
+.sc-property-report-info-container {
+ padding-left: 10px;
+ padding-right: 10px;
+ padding-top: 5px;
+}
+
+.sc-property-report-html-market {
+ font-size: 9px;
+ color: #555;
+ padding-bottom: 4px !important;
+}
diff --git a/src/map/PropertyReport.jsx b/src/reports/PropertyReport.jsx
similarity index 100%
rename from src/map/PropertyReport.jsx
rename to src/reports/PropertyReport.jsx
diff --git a/src/sidebar/MenuButton.jsx b/src/sidebar/MenuButton.jsx
index a29388a0..8a27fbd7 100644
--- a/src/sidebar/MenuButton.jsx
+++ b/src/sidebar/MenuButton.jsx
@@ -1,6 +1,8 @@
import React, { Component } from "react";
import "./MenuButton.css";
import * as helpers from "../helpers/helpers";
+import { createObjectURL } from "../helpers/api";
+
import * as htmlToImage from "html-to-image";
import { transformWithProjections } from "ol/proj";
import { ImMenu3, ImMenu4 } from "react-icons/im";
@@ -24,11 +26,11 @@ class MenuButton extends Component {
);
// LISTEN FOR MORE BUTTON
- window.emitter.addListener("openMoreMenu", () => this.setState({ isOpen: true }));
-
+ if (window.emitter.listeners("openMoreMenu").length === 0) window.emitter.addListener("openMoreMenu", () => this.setState({ isOpen: true }));
//LISTEN FOR SCREENSHOT EVENT
- window.emitter.addListener("takeScreenshot", () => this.onScreenshotClick());
- helpers.waitForLoad("settings", Date.now(), 30, () => {
+ if (window.emitter.listeners("takeScreenshot").length === 0) window.emitter.addListener("takeScreenshot", () => this.onScreenshotClick());
+
+ helpers.waitForLoad(["settings", "security"], Date.now(), 30, () => {
this.themes = this.getThemes();
this.others = this.getOthers();
this.tools = this.getTools();
@@ -40,7 +42,11 @@ class MenuButton extends Component {
let itemList = [];
itemList.push();
window.config.sidebarToolComponents.forEach((tool) => {
- if ((tool.enabled || tool.enabled === undefined) && (tool.disable === false || tool.disable === undefined))
+ if (
+ (tool.enabled || tool.enabled === undefined) &&
+ (tool.disable === false || tool.disable === undefined) &&
+ (tool.secure === undefined || tool.secure === false || (tool.secure && tool.securityKeywords && tool.securityKeywords.some((keyword) => window.security.includes(keyword))))
+ )
itemList.push(