\r\n\r\n return null;\r\n}\r\n\r\nexport { Guide }\r\n","import * as React from 'react';\r\nimport styled, { css } from 'styled-components';\r\n\r\ninterface IProps {\r\n /** @ignore */\r\n className?: string;\r\n /** @ignore */\r\n children?: React.ReactNode; \r\n \r\n top?: string;\r\n left?: string;\r\n bottom?: string;\r\n right?: string;\r\n\r\n // Fired when cancel button is clicked.\r\n onCancel: () => void;\r\n}\r\n\r\nconst GuideBoxBase = (props: IProps) => {\r\n return (\r\n \r\n \r\n \r\n \r\n {props.children}\r\n
\r\n );\r\n}\r\n\r\nconst GuideBox = styled(GuideBoxBase)`\r\n position: absolute;\r\n z-index: 1;\r\n ${p => p.left && css`left: ${p.left};`}\r\n ${p => p.right && css`right: ${p.right};`}\r\n ${p => p.top && css`top: ${p.top};`}\r\n ${p => p.bottom && css`bottom: ${p.bottom};`}\r\n\r\n width: 250px;\r\n\r\n user-select: none;\r\n font-size: 12px;\r\n\r\n background: #111;\r\n color: #fff;\r\n line-height: 18px;\r\n border-radius: 4px;\r\n padding: 16px 32px 16px 24px;\r\n\r\n h1 {\r\n font-size: 18px;\r\n margin-bottom: 6px;\r\n white-space: nowrap;\r\n line-height: 20px;\r\n color: #fff;\r\n font-weight: normal;\r\n }\r\n strong {\r\n font-weight: 500;\r\n }\r\n em {\r\n font-style: normal;\r\n color: gold;\r\n }\r\n p {\r\n margin-bottom: 6px;\r\n }\r\n`\r\n\r\nconst Cross = styled.div`\r\n position: absolute;\r\n right: 10px;\r\n top: 10px;\r\n width: 16px;\r\n height: 16px;\r\n cursor: pointer;\r\n svg {\r\n fill: #eee;\r\n width: 16px;\r\n height: 16px;\r\n }\r\n &:hover {\r\n svg { \r\n fill: #fff;\r\n }\r\n }\r\n`\r\n\r\nexport { GuideBox }\r\n","import * as React from 'react';\r\nimport styled from 'styled-components';\r\n\r\ninterface IProps {\r\n /** @ignore */\r\n className?: string;\r\n /** @ignore */\r\n children?: React.ReactNode;\r\n onClick: () => void;\r\n}\r\n\r\nconst GuideButtonBase = (props: IProps) => \r\n \r\n {props.children}\r\n \r\n\r\nconst GuideButton = styled(GuideButtonBase)`\r\n float: right;\r\n color: #37ACE3;\r\n border: solid 1px #37ACE3;\r\n border-radius: 4px;\r\n padding-left: 6px;\r\n padding-right: 6px;\r\n margin-left: 2px;\r\n margin-right: 2px;\r\n padding-top: 2px;\r\n padding-bottom: 2px;\r\n cursor: pointer;\r\n user-select: none;\r\n &:hover {\r\n background: #333;\r\n }\r\n`\r\n\r\nexport { GuideButton }\r\n","import * as React from 'react';\r\nimport styled from 'styled-components';\r\n\r\ninterface IProps {\r\n className?: string;\r\n icon: string;\r\n}\r\n\r\nconst GuideIconBase = (props: IProps) => {\r\n return (\r\n \r\n );\r\n}\r\n\r\nconst GuideIcon = styled(GuideIconBase)`\r\n width: 16px;\r\n height: 16px;\r\n fill: #fff;\r\n display: inline-block;\r\n margin-left: 3px;\r\n margin-right: 3px;\r\n`\r\n\r\nexport { GuideIcon }\r\n\r\n","import * as React from 'react';\r\nimport styled from 'styled-components';\r\n\r\ninterface IProps {\r\n /** @ignore */\r\n className?: string;\r\n /** @ignore */\r\n children?: React.ReactNode;\r\n /** Fired when GuideLink is clicked. */\r\n onClick: () => void;\r\n}\r\n\r\nconst GuideLinkBase = (props: IProps) => \r\n \r\n\r\nconst Caret = styled.div`\r\n width: 10px;\r\n height: 16px;\r\n svg {\r\n fill: #39C5FF;\r\n width: 10px;\r\n height: 16px;\r\n }\r\n`\r\n\r\nconst GuideLink = styled(GuideLinkBase)`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: 6px;\r\n margin-top: 2px;\r\n margin-bottom: 2px;\r\n\r\n a {\r\n color: #39C5FF;\r\n text-decoration: underline;\r\n cursor: pointer;\r\n }\r\n a:hover {\r\n color: #49d5FF;\r\n text-decoration: none;\r\n }\r\n`\r\n\r\nexport { GuideLink }\r\n","import * as React from 'react';\r\n\r\nimport { GuideBox } from '../elements/GuideBox';\r\nimport { GuideButton } from '../elements/GuideButton';\r\nimport { GuideIcon } from '../elements/GuideIcon';\r\n\r\ninterface IProps {\r\n onCancel: () => void;\r\n onStage: (s: string) => void;\r\n}\r\n\r\nconst FullscreenGuide = (props: IProps) => {\r\n return (\r\n \r\n Fullscreen display
\r\n The map size can be increased to fill your browser window.
\r\n Click the icon to toggle fullscreen display mode.
\r\n Press ESC to disable fullscreen mode.
\r\n props.onStage(null)}>Finish\r\n \r\n );\r\n}\r\n\r\nexport { FullscreenGuide }\r\n","import * as React from 'react';\r\n\r\nimport { GuideBox } from '../elements/GuideBox';\r\nimport { GuideButton } from '../elements/GuideButton';\r\nimport { GuideIcon } from '../elements/GuideIcon';\r\n\r\ninterface IProps {\r\n onCancel: () => void;\r\n onStage: (s: string) => void;\r\n}\r\n\r\nconst LayersGuide = (props: IProps) => {\r\n return (\r\n \r\n Map layers
\r\n The map can display different layers of aquaculture suitability.
\r\n Use the tabs on the right to toggle layers.
\r\n props.onStage(null)}>Finish\r\n \r\n );\r\n}\r\n\r\nexport { LayersGuide }\r\n","import * as React from 'react';\r\n\r\nimport { GuideBox } from '../elements/GuideBox';\r\nimport { GuideButton } from '../elements/GuideButton';\r\n\r\ninterface IProps {\r\n onCancel: () => void;\r\n onStage: (s: string) => void;\r\n}\r\n\r\nconst NavigationGuide = (props: IProps) => {\r\n return (\r\n \r\n Navigation
\r\n You can pan, zoom, rotate and tilt the map.
\r\n Click and drag them map to pan it.
\r\n props.onStage('zooming')}>Continue\r\n \r\n );\r\n}\r\n\r\nexport { NavigationGuide }\r\n","import * as React from 'react';\r\n\r\nimport { GuideBox } from '../elements/GuideBox';\r\nimport { GuideButton } from '../elements/GuideButton';\r\nimport { GuideIcon } from '../elements/GuideIcon';\r\n\r\ninterface IProps {\r\n onCancel: () => void;\r\n onStage: (s: string) => void;\r\n}\r\n\r\nconst SatelliteGuide = (props: IProps) => {\r\n return (\r\n \r\n Satellite imagery
\r\n The map can display eiter satellite imagery or vectorized landmasses.
\r\n Click the icon to toggle satellite imagery.
\r\n props.onStage(null)}>Finish\r\n \r\n );\r\n}\r\n\r\nexport { SatelliteGuide }\r\n","import * as React from 'react';\r\n\r\nimport { GuideBox } from '../elements/GuideBox';\r\nimport { GuideIcon } from '../elements/GuideIcon';\r\nimport { GuideButton } from '../elements/GuideButton';\r\n\r\ninterface IProps {\r\n onCancel: () => void;\r\n onStage: (s: string) => void;\r\n}\r\n\r\nconst TiltGuide = (props: IProps) => {\r\n return (\r\n \r\n Rotating and tilting
\r\n The map can be both rotated (changing its bearing) and tilted\r\n (changing the view's axis).
\r\n Ctrl+click and drag to rotate and tilt the map.
\r\n Click the icon to reset your view to due north.
\r\n props.onStage(null)}>Finish\r\n \r\n );\r\n}\r\n\r\nexport { TiltGuide }\r\n","import * as React from 'react';\r\n\r\nimport { GuideBox } from '../elements/GuideBox';\r\nimport { GuideLink } from '../elements/GuideLink';\r\nimport { GuideIcon } from '../elements/GuideIcon';\r\n\r\ninterface IProps {\r\n onCancel: () => void;\r\n onStage: (s: string) => void;\r\n}\r\n\r\nconst WelcomeGuide = (props: IProps) => {\r\n return (\r\n \r\n Hello!
\r\n Let us help you get started with this map.
\r\n props.onStage('navigation')}>Navigation\r\n props.onStage('satellite')}>Satellite imagery\r\n props.onStage('fullscreen')}>Fullscreen display\r\n props.onStage('layers')}>Map layers\r\n \r\n );\r\n}\r\n\r\nexport { WelcomeGuide }\r\n","import * as React from 'react';\r\n\r\nimport { GuideBox } from '../elements/GuideBox';\r\nimport { GuideIcon } from '../elements/GuideIcon';\r\nimport { GuideButton } from '../elements/GuideButton';\r\n\r\ninterface IProps {\r\n onCancel: () => void;\r\n onStage: (s: string) => void;\r\n}\r\n\r\nconst ZoomGuide = (props: IProps) => {\r\n return (\r\n \r\n Zooming
\r\n Use the and buttons to zoom in or out.
\r\n You can also double-click the map to zoom in.
\r\n props.onStage('tilting')}>Continue\r\n \r\n );\r\n}\r\n\r\nexport { ZoomGuide }\r\n","import * as React from 'react';\r\nimport { Layer } from 'react-map-gl';\r\n\r\nimport { ILayer } from '../config/Config.Type';\r\nimport { LoadableLayer } from './LoadableLayer';\r\n\r\n/**\r\n * A CustomizableLayer is a LoadableLayer that takes a layer specification.\r\n */\r\nconst CustomizableLayer = (props: ILayer & { id: string, active: boolean}) => {\r\n return (\r\n \r\n {props.fillPaint && }\r\n {props.linePaint && }\r\n \r\n )\r\n}\r\n\r\nexport { CustomizableLayer }\r\n","import * as React from 'react';\r\nimport axios from 'axios';\r\nimport { Source } from 'react-map-gl';\r\n\r\nimport { AnimatedLoader } from '@independent-software/mapbox-ext/controls/AnimatedLoader';\r\n\r\n// Loading delay is BASE + RANDOM.\r\nconst LOAD_DELAY_RANDOM = 0; // Random loading delay (ms)\r\nconst LOAD_DELAY_BASE = 0; // Base loading delay (ms)\r\n\r\ninterface IProps {\r\n /** @ignore */\r\n children?: React.ReactNode;\r\n /** GeoJSON file name. */\r\n path: string;\r\n /** Is layer currently active? */\r\n active: boolean;\r\n /** List of properties to ignore from GeoJSON data. */ \r\n ignore?: string[]\r\n}\r\n\r\n/**\r\n * Loads a geojson resource (path) from the server. onLoading is fired when\r\n * loading begins; onLoaded is fired when loading is complete. Renders a \r\n * Source which may contain Layer children.\r\n */\r\nconst LoadableLayer = (props: IProps) => {\r\n // Is the layer currently loading?\r\n const [loading, setLoading] = React.useState(false);\r\n // Layer's GeoJSON data:\r\n const [geojson, setGeojson] = React.useState(null);\r\n\r\n // Loading begins when component is first mounted.\r\n React.useEffect(() => {\r\n if(props.active) loadData();\r\n }, []);\r\n\r\n // Data is reloaded when active status changes.\r\n React.useEffect(() => {\r\n if(props.active) loadData();\r\n }, [props.active])\r\n\r\n const loadData = () => {\r\n setLoading(true);\r\n window.setTimeout(() => {\r\n axios.get(`data/${props.path}`)\r\n .then(res => {\r\n const geojson: GeoJSON.FeatureCollection = res.data;\r\n // Filter GeoJSON for ignored properties:\r\n if(props.ignore) {\r\n geojson.features.forEach(f => {\r\n f.properties = Object.keys(f.properties)\r\n .filter(key => !props.ignore.includes(key))\r\n .reduce((obj, key) => {\r\n (obj as any)[key] = f.properties[key];\r\n return obj;\r\n }, {});\r\n });\r\n }\r\n setLoading(false);\r\n setGeojson(geojson);\r\n });\r\n }, Math.random() * LOAD_DELAY_RANDOM + LOAD_DELAY_BASE);\r\n }\r\n\r\n return (\r\n <>\r\n {/* generateId creates an ID for each feature, since the source data\r\n does not have any IDs. This is required for hovering. */}\r\n \r\n {props.children}\r\n \r\n {loading && }\r\n \r\n );\r\n}\r\n\r\nexport { LoadableLayer }\r\n","import { FillPaint, LinePaint } from \"mapbox-gl\"\r\nimport { COLOR_HIGHLY_SUITABLE, COLOR_MODERATELY_SUITABLE, COLOR_NOT_SUITABLE, COLOR_SUITABLE } from \"../config/Colors\";\r\n\r\nclass PrebuiltExpressions {\r\n\r\n static FillSuitability: FillPaint = { \r\n 'fill-color': [\r\n 'step',\r\n ['get', 'suitability'],\r\n COLOR_NOT_SUITABLE,\r\n 2, COLOR_MODERATELY_SUITABLE,\r\n 3, COLOR_SUITABLE,\r\n 4, COLOR_HIGHLY_SUITABLE\r\n ],\r\n 'fill-opacity': [\r\n 'case',\r\n ['boolean', ['feature-state', 'hover'], false],\r\n 1,\r\n 0.5\r\n ]\r\n }\r\n\r\n static LineBlackGoldResponsive: LinePaint = {\r\n 'line-color': [\r\n 'case',\r\n ['boolean', ['feature-state', 'hover'], false],\r\n 'gold',\r\n 'black'\r\n ],\r\n 'line-width': [\r\n 'case',\r\n ['boolean', ['feature-state', 'hover'], false],\r\n 3,\r\n 1\r\n ]\r\n }\r\n\r\n}\r\n\r\nexport { PrebuiltExpressions }\r\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n// expose the modules object (__webpack_modules__)\n__webpack_require__.m = __webpack_modules__;\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","// The chunk loading function for additional chunks\n// Since all referenced chunks are already included\n// in this file, this function is empty here.\n__webpack_require__.e = () => (Promise.resolve());","__webpack_require__.g = (function() {\n\tif (typeof globalThis === 'object') return globalThis;\n\ttry {\n\t\treturn this || new Function('return this')();\n\t} catch (e) {\n\t\tif (typeof window === 'object') return window;\n\t}\n})();","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","// no baseURI\n\n// object to store loaded and loading chunks\n// undefined = chunk not loaded, null = chunk preloaded/prefetched\n// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded\nvar installedChunks = {\n\t143: 0\n};\n\n// no chunk on demand loading\n\n// no prefetching\n\n// no preloaded\n\n// no HMR\n\n// no HMR manifest\n\n__webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);\n\n// install a JSONP callback for chunk loading\nvar webpackJsonpCallback = (parentChunkLoadingFunction, data) => {\n\tvar [chunkIds, moreModules, runtime] = data;\n\t// add \"moreModules\" to the modules object,\n\t// then flag all \"chunkIds\" as loaded and fire callback\n\tvar moduleId, chunkId, i = 0;\n\tif(chunkIds.some((id) => (installedChunks[id] !== 0))) {\n\t\tfor(moduleId in moreModules) {\n\t\t\tif(__webpack_require__.o(moreModules, moduleId)) {\n\t\t\t\t__webpack_require__.m[moduleId] = moreModules[moduleId];\n\t\t\t}\n\t\t}\n\t\tif(runtime) var result = runtime(__webpack_require__);\n\t}\n\tif(parentChunkLoadingFunction) parentChunkLoadingFunction(data);\n\tfor(;i < chunkIds.length; i++) {\n\t\tchunkId = chunkIds[i];\n\t\tif(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {\n\t\t\tinstalledChunks[chunkId][0]();\n\t\t}\n\t\tinstalledChunks[chunkId] = 0;\n\t}\n\treturn __webpack_require__.O(result);\n}\n\nvar chunkLoadingGlobal = self[\"webpackChunkautomap\"] = self[\"webpackChunkautomap\"] || [];\nchunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));\nchunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));","__webpack_require__.nc = undefined;","// startup\n// Load entry module and return exports\n// This entry module depends on other loaded chunks and execution need to be delayed\n__webpack_require__.O(undefined, [216], () => (__webpack_require__(4828)))\nvar __webpack_exports__ = __webpack_require__.O(undefined, [216], () => (__webpack_require__(1734)))\n__webpack_exports__ = __webpack_require__.O(__webpack_exports__);\n"],"names":["deferred","leafPrototypes","getProto","Title","div","Text","Brick","props","className","src","data","image","title","colSpan","LegendBox","color","COLOR_HIGHLY_SUITABLE","Number","value","offshore","high","decimals","COLOR_SUITABLE","medium","COLOR_MODERATELY_SUITABLE","low","onshore","COLOR_NOT_SUITABLE","none","map","hovered","state","viewState","longitude","Config","latitude","zoom","minZoom","bearing","pitch","padding","top","bottom","right","left","satellite","interactiveLayerIds","hoverLatitude","hoverLongitude","hoverFeatures","popup_horizontal","popup_vertical","layers","handleLoad","e","target","setState","Object","entries","key","handlePianoKey","name","active","handleToggleSatellite","getWindowSize","window","innerWidth","document","documentElement","clientWidth","body","innerHeight","clientHeight","handleMouseMove","width","height","dx","point","x","dy","y","forEach","f","setFeatureState","hover","features","lngLat","lat","lng","getLayerTable","feature","rows","keys","properties","k","idx","push","TranslatedName","TranslatedValue","Table","getPopupContent","layerIDs","indexOf","layer","id","boxes","layerID","PopupBox","PopupTitle","find","handleMove","render","mapboxAccessToken","mapKey","style","cursor","length","logoPosition","mapStyle","satelliteStyle","greyStyle","scrollZoom","maxBounds","max_bounds","maxZoom","onLoad","onMouseMove","onMove","ScaleControl","FullscreenButton","skin","DarkSkin","hint","LayerButton","onClick","ZoomInButton","ZoomOutButton","CompassButton","visualizePitch","PianoKeyList","PianoKey","icon","CustomizableLayer","Legend","label","Guide","Popup","offset","closeButton","anchor","maxWidth","closeOnClick","PopupBalloon","horizontal","vertical","React","Component","node","getElementById","createRoot","MapView","Masonry","masonry","b","Math","ceil","p","MapButton","viewBox","xmlns","d","PianoKeyHolder","xlinkHref","Children","count","children","Panel","PanelContent","PianoKeyBase","PopupBalloonBase","css","PopupBoxBase","PopupTitleBase","fillPaint","PrebuiltExpressions","FillSuitability","linePaint","LineBlackGoldResponsive","dictionary","text","type","unit","factor","this","val","parseFloat","undefined","toLocaleString","useGrouping","minimumFractionDigits","maximumFractionDigits","attribute","display","flexDirection","alignItems","gap","getSuitabilityColor","getSuitability","useState","setActive","stage","setStage","handleCancel","handleStage","s","WelcomeGuide","onCancel","onStage","NavigationGuide","ZoomGuide","TiltGuide","SatelliteGuide","FullscreenGuide","LayersGuide","GuideBox","Cross","GuideButton","GuideIcon","Caret","GuideLink","LoadableLayer","path","Layer","layout","visibility","paint","loading","setLoading","geojson","setGeojson","useEffect","loadData","setTimeout","get","then","res","ignore","filter","includes","reduce","obj","random","Source","generateId","AnimatedLoader","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","exports","module","__webpack_modules__","call","m","O","result","chunkIds","fn","priority","notFulfilled","Infinity","i","fulfilled","j","every","splice","r","n","getter","__esModule","a","getPrototypeOf","t","mode","ns","create","def","current","getOwnPropertyNames","definition","o","defineProperty","enumerable","Promise","resolve","g","globalThis","Function","prop","prototype","hasOwnProperty","Symbol","toStringTag","installedChunks","chunkId","webpackJsonpCallback","parentChunkLoadingFunction","moreModules","runtime","some","chunkLoadingGlobal","self","bind","nc","__webpack_exports__"],"sourceRoot":""}
\r\n