{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) {
+ 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] });
@@ -331,36 +392,46 @@ 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({
+ label: result.alias ? result.alias : result.name,
+ name: result.name,
+ is_open_data: result.is_open_data !== undefined && result.is_open_data !== null ? result.is_open_data : true,
+ });
+ searchGeoLayerRef.current.getSource().addFeature(fullFeature);
+ searchGeoLayerRef.current.setZIndex(300);
+ setTimeout(() => {
+ 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,
});
window.map.getView().setZoom(window.map.getView().getZoom() - zoomFactor);
}
- //fullFeature.setStyle(myMapsHelpers.getDefaultDrawStyle([255, 0, 0, 0.8], false, 2, fullFeature.getGeometry().getType()));
- //fullFeature.setStyle(defaultStyle);
if (result.geojson.indexOf("Point") !== -1) {
const pointStyle = new Style({
image: new CircleStyle({
@@ -389,15 +460,15 @@ class Search extends Component {
fullFeature.setStyle(pointStyle);
} else {
- let defaultStyle = drawingHelpers.getDefaultDrawStyle(
- window.config.featureHighlitStyles && window.config.featureHighlitStyles["stroke"] !== null && window.config.featureHighlitStyles["stroke"] !== undefined
- ? window.config.featureHighlitStyles["stroke"]
- : [255, 0, 0, 0.8],
- false,
- window.config.featureHighlitStyles && window.config.featureHighlitStyles["strokeWidth"] ? window.config.featureHighlitStyles["strokeWidth"] : 2,
-
- fullFeature.getGeometry().getType()
- );
+ 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],
+ isText: false,
+ strokeWidth: window.config.featureHighlitStyles && window.config.featureHighlitStyles["strokeWidth"] ? window.config.featureHighlitStyles["strokeWidth"] : 2,
+ pointType: fullFeature.getGeometry().getType(),
+ });
defaultStyle.setFill(
new Fill({
color:
@@ -408,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, () => {
@@ -434,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 = [];
@@ -461,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) => {
@@ -523,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
@@ -532,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,
@@ -550,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",
@@ -629,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 14c50fe0..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,20 +15,17 @@ 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}`;
-const searchURL = (apiUrl, searchText, type, muni, limit) => `${apiUrl}public/search/?q=${searchText}&type=${type}&muni=${muni}&limit=${limit}`;
+const searchURL = (apiUrl, searchText, type, muni, limit) => `${apiUrl}public/search?q=${searchText}&type=${type}&muni=${muni}&limit=${limit}`;
const searchInfoURL = (apiUrl, locationID) => `${apiUrl}public/search/${locationID}`;
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,86 +37,126 @@ 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) => this.onSearch(searchType, searchText, hidden));
-
- 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, () => {
- if (window.config.municipality !== undefined) this.setState({ municipality: window.config.municipality });
- this.apiUrl = window.config.apiUrl;
- this.storageKey = window.config.storageKeys.SearchHistory;
+ let muni = window.config.municipality;
+ if (!muni) {
+ const queryString = window.location.search;
+ const urlParams = new URLSearchParams(queryString);
+ muni = urlParams.get("MUNI");
+ }
+ 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) => {
@@ -127,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);
@@ -166,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) => {
+ 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));
- }
});
};
+ 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");
@@ -226,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(
@@ -266,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 (
+
+ );
+};
- getShareURL = (value) => {
+export default Search;
+
+const PopupContent = (props) => {
+ const getShareURL = (value) => {
//GET URL
var url = window.location.href;
@@ -742,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/FloatingImageSlider.jsx b/src/helpers/FloatingImageSlider.jsx
index 3e8f147f..3fac9e36 100644
--- a/src/helpers/FloatingImageSlider.jsx
+++ b/src/helpers/FloatingImageSlider.jsx
@@ -79,41 +79,43 @@ class FloatingImageSlider extends Component {
let nextIndex = this.state.featureIndex + 1;
if (nextIndex > this.state.features.length - 1) nextIndex = 0;
const currentFeature = this.state.features[nextIndex];
+ const geom = currentFeature.getGeometry();
+ if (geom)
+ this.setState(
+ {
+ featureIndex: nextIndex,
+ currentFeature,
+ },
+ () => {
+ var feature = new Feature({
+ geometry: fromExtent(buffer(geom.getExtent(), 100)),
+ });
+ if (zoom) helpers.zoomToFeature(feature, false);
- this.setState(
- {
- featureIndex: nextIndex,
- currentFeature,
- },
- () => {
- var feature = new Feature({
- geometry: fromExtent(buffer(this.state.currentFeature.getGeometry().getExtent(), 100)),
- });
- if (zoom) helpers.zoomToFeature(feature, false);
-
- this.onFeatureChange(currentFeature);
- }
- );
+ this.onFeatureChange(currentFeature);
+ }
+ );
};
- onPreviousFeature = (zoom) => {
+ onPreviousFeature = (zoom = false) => {
let previousIndex = this.state.featureIndex - 1;
if (previousIndex < 0) previousIndex = this.state.features.length - 1;
const currentFeature = this.state.features[previousIndex];
-
- this.setState(
- {
- featureIndex: previousIndex,
- currentFeature,
- },
- () => {
- var feature = new Feature({
- geometry: fromExtent(buffer(this.state.currentFeature.getGeometry().getExtent(), 100)),
- });
- helpers.zoomToFeature(feature, false);
- this.onFeatureChange(currentFeature);
- }
- );
+ const geom = currentFeature.getGeometry();
+ if (geom)
+ this.setState(
+ {
+ featureIndex: previousIndex,
+ currentFeature,
+ },
+ () => {
+ var feature = new Feature({
+ geometry: fromExtent(buffer(geom.getExtent(), 100)),
+ });
+ helpers.zoomToFeature(feature, false);
+ this.onFeatureChange(currentFeature);
+ }
+ );
};
onResize = (e, direction, ref, d) => {
@@ -218,8 +220,8 @@ class FloatingImageSlider extends Component {
src={this.state.currentFeature.get(this.state.callerObj.imageUrlField)}
alt="property"
onError={(e) => {
- console.log("auto next");
- this.onNextFeature(false);
+ // console.log("auto next");
+ // this.onNextFeature(false);
e.target.onerror = null;
e.target.src = images["noPhoto.png"];
}}
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/InfoRow.jsx b/src/helpers/InfoRow.jsx
index e9326c9a..693f7119 100644
--- a/src/helpers/InfoRow.jsx
+++ b/src/helpers/InfoRow.jsx
@@ -1,13 +1,18 @@
import React from "react";
import moment from "moment";
import * as helpers from "../helpers/helpers";
+import Attachments from "../map/Attachments";
export const InfoRow = (props) => {
// CONVERT URL'S TO LINKS
+ let label = props.label;
let value = props.value;
var formats = [moment.ISO_8601, "YYYY-MM-DDZ"];
const infoRowStyle = window.config.infoRowStyle !== undefined ? window.config.infoRowStyle.toLowerCase() : "Default";
- if (props.value != null && props.value.toString().substring(0, 4).toUpperCase() === "HTTP") {
+ if (props.value != null && props.value.toString().substring(0, 4).toUpperCase() === "HTTP" && label === "Attachment Url") {
+ label = "Attachments";
+ value =
-
{props.label}
+ {label}
{value}
{props.children}
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 4f4dcd31..bb9d0eba 100644
--- a/src/helpers/OLHelpers.js
+++ b/src/helpers/OLHelpers.js
@@ -21,7 +21,7 @@ import TileGrid from "ol/tilegrid/TileGrid.js";
//import { Circle, Fill, Stroke, Style,Icon,Text } from "ol/style.js";
//OTHER
-import { parseString } from "xml2js";
+import { XMLParser } from "fast-xml-parser";
export const OL_LAYER_TYPES = {
Image: "Image",
@@ -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);
}
});
@@ -356,16 +380,21 @@ export class LayerHelpers {
}
break;
default:
- parseString(responseText, function (err, result) {
- result["wfs:WFS_Capabilities"].FeatureTypeList[0].FeatureType.forEach((layer) => {
- var layerTitle = layer.Title[0];
- var layerName = layer.Name[0];
- if (layerTitle === undefined || layerTitle === "") layerTitle = layerName;
- layers.push({
- label: layerTitle,
- value: helpers.getUID(),
- layer_name: layerName,
- });
+ const options = {
+ ignoreAttributes: false, // Ignore the XML attributes
+ attributeNamePrefix: "", // Default is an underscore. Set to null to disable it
+ attributesGroupName: "$", // XML node attributes group name prefix
+ };
+ const parser = new XMLParser(options);
+ let result = parser.parse(responseText);
+ result["wfs:WFS_Capabilities"].FeatureTypeList[0].FeatureType.forEach((layer) => {
+ var layerTitle = layer.Title[0];
+ var layerName = layer.Name[0];
+ if (layerTitle === undefined || layerTitle === "") layerTitle = layerName;
+ layers.push({
+ label: layerTitle,
+ value: helpers.getUID(),
+ layer_name: layerName,
});
});
//fix to get react-select box to update on the fly
@@ -377,8 +406,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 +644,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 +952,6 @@ export class LayerHelpers {
declutter: true,
tilePixelRatio: 8,
background: background,
-
source: new VectorTileSource({
name: name,
format: new MVT(),
@@ -907,17 +1033,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/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 02399bf8..22157fa9 100644
--- a/src/helpers/URLWindow.jsx
+++ b/src/helpers/URLWindow.jsx
@@ -3,140 +3,142 @@ 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 (
-
+
+ {this.props.title}
+
+
+
+
+
+
+
+ {this.props.contents}
+
+
+
+
+
-
- );
- }
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ hide: false,
+ };
+ }
+
+ onCloseClick = (value) => {
+ this.setState({ hide: true });
+ };
+
+ onPopoutClick = () => {
+ window.open(this.props.url, "_blank");
+ };
+
+ componentWillUnmount() {
+ window.emitter.removeListener("sidebarChanged", this.sidebarEmitter);
+ // 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 = (isSidebarOpen) => this.sidebarChanged(isSidebarOpen);
+ window.emitter.addListener("sidebarChanged", this.sidebarEmitter);
+ }
+
+ 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 +146,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/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/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..a0ca5760 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";
@@ -32,8 +31,10 @@ import { Polygon } from "ol/geom.js";
import { fromExtent } from "ol/geom/Polygon";
//OTHER
-import { parseString } from "xml2js";
-import shortid from "shortid";
+import { XMLParser } from "fast-xml-parser";
+// 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";
@@ -121,7 +122,7 @@ export function isMobile() {
// SHOW CONTENT WINDOW
export function showWindow(contents, options = { title: "Information", showFooter: false, mode: "normal", hideScroll: false }) {
ReactDOM.render(
-
+
+ Information
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{keys.map((keyName, i) => {
@@ -1376,22 +1390,30 @@ export function removeMapControl(map, controlType) {
}, this);
}
-export function addMapControl(map, controlType) {
+export function addMapControl(map, controlType, newControl = undefined) {
const add = (control) => {
if (!hasMapControl(map, controlType)) map.addControl(control);
};
switch (controlType) {
case "rotate":
- add(new Rotate());
+ if (newControl !== undefined) {
+ add(newControl);
+ } else add(new Rotate());
break;
case "zoom":
- add(new Zoom());
+ if (newControl !== undefined) {
+ add(newControl);
+ } else add(new Zoom());
break;
case "fullscreen":
- add(new FullScreen());
+ if (newControl !== undefined) {
+ add(newControl);
+ } else add(new FullScreen());
break;
case "scaleLine":
- add(new ScaleLine({ minWidth: 100 }));
+ if (newControl !== undefined) {
+ add(newControl);
+ } else add(new ScaleLine({ minWidth: 100 }));
break;
default:
break;
@@ -1694,12 +1716,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 +1819,43 @@ 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];
+}
+
+export const roundTime = (date) => {
+ var coeff = 1000 * 60 * 10;
+ var rounded = new Date(Math.round(date.getTime() / coeff) * coeff);
+ return rounded;
+};
+
+export const arrayMoveMutable = (array, fromIndex, toIndex) => {
+ const startIndex = fromIndex < 0 ? array.length + fromIndex : fromIndex;
+
+ if (startIndex >= 0 && startIndex < array.length) {
+ const endIndex = toIndex < 0 ? array.length + toIndex : toIndex;
+
+ const [item] = array.splice(fromIndex, 1);
+ array.splice(endIndex, 0, item);
+ }
+};
+export const arrayMoveImmutable = (array, fromIndex, toIndex) => {
+ const newArray = [...array];
+ arrayMoveMutable(newArray, fromIndex, toIndex);
+ return newArray;
+};
diff --git a/src/helpers/images/email-icon.png b/src/helpers/images/email-icon.png
new file mode 100644
index 00000000..7725dbd7
Binary files /dev/null and b/src/helpers/images/email-icon.png differ
diff --git a/src/helpers/images/information.png b/src/helpers/images/information.png
new file mode 100644
index 00000000..12cd1aef
Binary files /dev/null and b/src/helpers/images/information.png differ
diff --git a/src/helpers/images/notebook.png b/src/helpers/images/notebook.png
new file mode 100644
index 00000000..779ad58e
Binary files /dev/null and b/src/helpers/images/notebook.png differ
diff --git a/src/helpers/react.js b/src/helpers/react.js
new file mode 100644
index 00000000..c502459b
--- /dev/null
+++ b/src/helpers/react.js
@@ -0,0 +1,11 @@
+import { v4 as uuidv4 } from "uuid";
+
+export function generateKey(obj) {
+ var hash = require("object-hash");
+ return hash(obj);
+}
+
+// URL FRIENDLY STRING ID
+export function getUID() {
+ return uuidv4();
+}
diff --git a/src/index.js b/src/index.js
index a717cc74..8866d376 100644
--- a/src/index.js
+++ b/src/index.js
@@ -7,12 +7,13 @@ import App from "./App";
import "alertifyjs/build/css/alertify.css";
import "alertifyjs/build/css/themes/default.min.css";
-const { EventEmitter } = require("fbemitter");
+const EventEmitter = require("events");
// GLOBAL VARIABLES
window.map = null; // MAIN MAP OBJECT
window.sidebarOpen = null; // SIDEBAR OPEN BOOLEAN
window.emitter = new EventEmitter(); // USE THIS TO LISTEN/BROADCAST EVENTS (e.g. sidebarChange)
+window.emitter.setMaxListeners(100);
window.popup = null; // ONE POPUP FOR ALL
window.disableParcelClick = false; // PROPERTY PARCEL CLICK. USE THIS TO DISABLE
window.isDrawingOrEditing = false;
@@ -21,6 +22,7 @@ window.isMeasuring = false;
window.loaded = [];
window.config = {};
ReactDOM.render(
Error: Layer Not Found or no URL Parameter provided.
; + returnError: Layer Not Found or no URL Parameter provided.
; const proj = this.getFormattedProjection(); let fields = []; @@ -187,7 +187,7 @@ class LayerInfoApp extends Component { //console.log(showDownload); return (
-
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/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 7806b657..ee2565de 100644
--- a/src/legend/App.js
+++ b/src/legend/App.js
@@ -13,9 +13,10 @@ import Select from "react-select";
import cx from "classnames";
import mainConfig from "./config.json";
import ReactGA from "react-ga4";
-import xml2js from "xml2js";
+import { XMLParser } from "fast-xml-parser";
-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 });
}
@@ -97,10 +98,15 @@ class LegendApp extends Component {
};
helpers.httpGetText(url, (result) => {
- var parser = new xml2js.Parser();
-
- // PARSE TO JSON
- parser.parseString(result, (err, result) => {
+ const options = {
+ ignoreAttributes: false, // Ignore the XML attributes
+ attributeNamePrefix: "", // Default is an underscore. Set to null to disable it
+ attributesGroupName: "$", // XML node attributes group name prefix
+ };
+ const parser = new XMLParser(options);
+ result = parser.parse(result);
+ if (result) {
+ // PARSE TO JSON
let groupLayerList =
urlType === "root"
? result.WMS_Capabilities.Capability[0].Layer[0].Layer
@@ -167,7 +173,7 @@ class LegendApp extends Component {
}
}
});
- });
+ }
if (defaultGroup === undefined || defaultGroup === null) defaultGroup = groups[0];
callback([groups, defaultGroup]);
@@ -298,7 +304,7 @@ class LegendApp extends Component {