{info.Location}
\r\n );\r\n if (type === 'route' && info[typeProperty] === 'Existing Trail')\r\n return (\r\nBikes Allowed: {info.Bikes_Allo}
\r\n );\r\n },\r\n [type, info]\r\n );\r\n return (\r\n\r\n
\r\n );\r\n};\r\n\r\nFeatureInfo.propTypes = {\r\n type: PropTypes.string.isRequired,\r\n info: PropTypes.shape({\r\n Name: PropTypes.string,\r\n Location: PropTypes.string,\r\n Website: PropTypes.string,\r\n Bikes_Allo: PropTypes.string,\r\n type_2021: PropTypes.string,\r\n }).isRequired,\r\n};\r\n\r\nexport default FeatureInfo;","export default __webpack_public_path__ + \"static/media/logo.3d93fbe4.png\";","export const getViewPort = () => {\r\n const { innerWidth: width, innerHeight: height } = window;\r\n return { width, height };\r\n};","/**\r\n * @param {string} layer - layer to focus\r\n */\r\nexport const setFocusedLayer = (layer) => {\r\n return {\r\n type: setFocusedLayer,\r\n value: layer\r\n };\r\n};\r\n/**\r\n */\r\nexport const clearFocusedLayer = () => {\r\n return {\r\n type: clearFocusedLayer\r\n };\r\n};\r\n/**\r\n */\r\nexport const showSidebar = () => {\r\n return {\r\n type: showSidebar\r\n };\r\n};\r\n\r\n/**\r\n */\r\nexport const hideSidebar = () => {\r\n return {\r\n type: hideSidebar\r\n };\r\n};\r\n\r\n/**\r\n */\r\nexport const toggleSidebar = () => {\r\n return {\r\n type: toggleSidebar\r\n };\r\n};","import { setFocusedLayer, clearFocusedLayer, showSidebar, hideSidebar, toggleSidebar } from './actions';\r\n\r\nexport default (state, {type, value}) => {\r\n switch (type) {\r\n case setFocusedLayer:\r\n return { ...state, focusedLayer: value };\r\n case clearFocusedLayer:\r\n return { ...state, focusedLayer: undefined };\r\n case showSidebar:\r\n return {...state, showSidebar: true};\r\n case hideSidebar:\r\n return {...state, showSidebar: false};\r\n case toggleSidebar:\r\n return {...state, showSidebar: !state.showSidebar};\r\n }\r\n};\r\n","import PropTypes from 'prop-types';\r\nimport { createContext, useContext, useReducer } from 'react';\r\nimport { getViewPort } from '../../util/window';\r\nimport reducer from './reducer';\r\n\r\nconst { width } = getViewPort();\r\n\r\nconst initialState = {\r\n showSidebar: width > 600,\r\n focusedLayer: 'class1',\r\n};\r\n\r\nconst GlobalContext = createContext(initialState);\r\n\r\nexport * from './actions';\r\n\r\nexport const GlobalProvider = ({children}) => {\r\n const [globalState, dispatch] = useReducer(reducer, initialState);\r\n\r\n return (\r\n {icon}{info[typeProperty]}
\r\n {\r\n info.Name &&\r\n\r\n
\r\n }\r\n {body}\r\n {info.Name}
\r\n {link}\r\n\r\n
\r\n \r\n \r\n {\r\n description && \r\n \r\n {header}\r\n {\r\n description &&\r\n \r\n \r\n }\r\n
\r\n }\r\n {children}\r\n \r\n);\r\n\r\nLayerToggleGroup.propTypes = {\r\n header: PropTypes.string,\r\n description: PropTypes.string,\r\n children: PropTypes.any,\r\n};\r\n\r\nexport default LayerToggleGroup;","import PropTypes from 'prop-types';\r\nimport { CONNECTORS, ICONS, ROUTES, PCB } from '../../config/layers';\r\nimport logo from '../../images/logo.png';\r\nimport LayerToggle from '../LayerToggle';\r\nimport LayerToggleGroup from '../LayerToggleGroup';\r\nimport styles from './style.module.css';\r\n\r\nconst Sidebar = ({show}) => {\r\n const layerToggleGroups = [\r\n {\r\n details:ROUTES.details,\r\n header: 'Existing Bike Routes',\r\n toggleType: 'line'\r\n },\r\n {\r\n details:ICONS.details,\r\n },\r\n {\r\n details:CONNECTORS.details,\r\n header: 'Connector Routes',\r\n description: 'These dashed lines are streets that bicyclists often use, but do not yet have dedicated bicycle infrastructure.',\r\n toggleType: 'line'\r\n },\r\n {\r\n details:PCB.details,\r\n header: 'Pacific Coast Bike Route',\r\n toggleType: 'line'\r\n },\r\n ];\r\n\r\n return (\r\n <>\r\n \r\n \r\n {\r\n Object.entries(details)\r\n .map(([layerId, details]) => (\r\n
\r\n \r\n );\r\n};\r\n\r\nSidebar.propTypes = {\r\n show: PropTypes.bool\r\n};\r\n\r\nexport default Sidebar;\r\n","import { useMemo } from 'react';\r\nimport { LAYER_WEIGHTS, calculateLineWidth } from '../config/layers';\r\n\r\nconst LAYER_FOCUS_WEIGHTS = {\r\n symbol: LAYER_WEIGHTS.symbol * 1.5,\r\n line: LAYER_WEIGHTS.line * 2,\r\n};\r\n\r\nexport const filterVisibleLayers = (\r\n layers,\r\n layerVisibility,\r\n focusedLayerId,\r\n baseLayerId\r\n) => {\r\n const visibleLayers = useMemo(\r\n () => layers.filter((layer) => layerVisibility[layer.id]),\r\n [layers, layerVisibility]\r\n );\r\n const layersOrderedByFocus = useMemo(\r\n () => visibleLayers.map((layer, i) => [i, layer])\r\n .sort(([ai, a], [bi, b]) => {\r\n if (a.id == focusedLayerId) return -1;\r\n if (b.id == focusedLayerId) return 1;\r\n return ai - bi;\r\n })\r\n .map(([,layer]) => layer),\r\n [visibleLayers, focusedLayerId]\r\n );\r\n return Array.from(\r\n useMemo(\r\n () => layersOrderedByFocus.map((layer, i, layers) => ({\r\n ...layer,\r\n before: layers[i - 1]?.id ?? baseLayerId\r\n })),\r\n [layersOrderedByFocus, baseLayerId]\r\n )\r\n );\r\n};\r\nexport const applyFocusStyleToLayer = (layer) => {\r\n switch (layer.type) {\r\n case 'symbol':\r\n return { \r\n ...layer,\r\n layout:{\r\n ...layer.layout,\r\n 'icon-size': LAYER_FOCUS_WEIGHTS.symbol\r\n },\r\n };\r\n case 'line':\r\n return { \r\n ...layer,\r\n paint: {\r\n ...layer.paint,\r\n 'line-width': calculateLineWidth(LAYER_FOCUS_WEIGHTS.line),\r\n }\r\n };\r\n }\r\n};\r\n","export default {\r\n LARGE: 992\r\n};","import PropTypes from 'prop-types';\r\nimport { createContext, useContext, useEffect, useState } from 'react';\r\nimport { getViewPort } from '../../util/window';\r\n\r\nconst ViewPortContext = createContext(getViewPort());\r\n\r\nexport const ViewPortProvider = ({children}) => {\r\n const [viewPort, setViewPort] = useState(getViewPort());\r\n\r\n useEffect(() => {\r\n const onResize = () => {\r\n setViewPort(getViewPort());\r\n };\r\n window.addEventListener('resize', onResize);\r\n return () => window.removeEventListener('resize', onResize);\r\n }, [viewPort]);\r\n\r\n return (\r\n \r\n 
\r\n
\r\n \r\n
\r\n {\r\n layerToggleGroups.map(({\r\n header,\r\n description,\r\n details,\r\n toggleType\r\n }, i) => (\r\n \r\n Humboldt County offers incredible biking opportunities \r\n for visitors and residents alike. \r\n Find a new way to commute to work, explore the countryside, \r\n take an adventurous mountain bike ride, and more!\r\n
\r\n\r\n To learn more about Humboldt County Bike Routes click\r\n here.\r\n
\r\n\r\n
\r\n Public Transit Routes
\r\nNote that several bus lines are equipped with bike racks. \r\n Plan your connection here.
\r\n\r\n
\r\n );\r\n};\r\n\r\nexport default SidebarControl;","import React, { useCallback, useState, useEffect } from 'react';\r\nimport MapGL, { GeolocateControl, Layer, NavigationControl, Popup, Source, AttributionControl } from '@urbica/react-map-gl';\r\n\r\nimport FeatureInfo from './components/FeatureInfo';\r\nimport Sidebar from './components/Sidebar';\r\n\r\nimport { MAP_DEFAULTS } from './config/map';\r\nimport { ICONS, ROUTES, CONNECTORS, PCB } from './config/layers.js';\r\n\r\nimport { useGlobals } from './contexts/GlobalContext';\r\nimport { useLayerVisibility } from './contexts/LayerVisibilityContext';\r\n\r\nimport { applyFocusStyleToLayer, filterVisibleLayers } from './util/layers';\r\n\r\nimport './App.css';\r\nimport SidebarControl from './components/SidebarControl';\r\n\r\n// mayStyle choices\r\nconst styles = {\r\n light: 'mapbox://styles/hcaog/ckr3qf0ot95xh17linukv86ts'\r\n};\r\n\r\nconst App = () => {\r\n const [globals] = useGlobals();\r\n const [ layerVisibility ] = useLayerVisibility();\r\n\r\n const [cursorStyle, setCursorStyle] = useState();\r\n const [viewport, setViewport] = useState(MAP_DEFAULTS.viewport);\r\n \r\n const [selectedFeature, setSelectedFeature] = useState();\r\n\r\n const clearSelectedFeature = () => setSelectedFeature(() => null);\r\n\r\n const onFeatureClick = (type) => useCallback(({features, lngLat}) => {\r\n setSelectedFeature(() => ({\r\n type,\r\n ...lngLat,\r\n info: features[0]?.properties,\r\n }));\r\n }, [type]);\r\n\r\n const onRouteFeatureClick = onFeatureClick('route');\r\n const onConnectorFeatureClick = onFeatureClick('connector');\r\n const onIconFeatureClick = onFeatureClick('icon');\r\n const onPCBFeatureClick = onFeatureClick('pcb');\r\n\r\n const resetCursor = () => setCursorStyle(null);\r\n const setPointerCursor = () => setCursorStyle('pointer');\r\n\r\n const mapLayerSources = [\r\n {\r\n ...ROUTES.source,\r\n layers: filterVisibleLayers(\r\n ROUTES.layers,\r\n layerVisibility,\r\n globals.focusedLayer,\r\n ICONS.layers.slice(-1)[0]?.id\r\n ),\r\n onLayerClick: onRouteFeatureClick\r\n },\r\n {\r\n ...CONNECTORS.source,\r\n layers: filterVisibleLayers(\r\n CONNECTORS.layers,\r\n layerVisibility,\r\n globals.focusedLayer\r\n ),\r\n onLayerClick: onConnectorFeatureClick\r\n },\r\n {\r\n ...PCB.source,\r\n layers: filterVisibleLayers(\r\n PCB.layers,\r\n layerVisibility,\r\n globals.focusedLayer\r\n ),\r\n onLayerClick: onPCBFeatureClick\r\n },\r\n {\r\n ...ICONS.source,\r\n layers: filterVisibleLayers(\r\n ICONS.layers,\r\n layerVisibility,\r\n globals.focusedLayer\r\n ),\r\n onLayerClick: onIconFeatureClick\r\n },\r\n ];\r\n\r\n useEffect(clearSelectedFeature, [layerVisibility]);\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n {\r\n mapLayerSources.map(({layers, onLayerClick, ...source}) => {\r\n const filteredLayers = layers\r\n .map(layer =>\r\n globals.focusedLayer === layer.id\r\n ? applyFocusStyleToLayer(layer)\r\n : layer\r\n )\r\n .map((layer) => (\r\n \r\n { filteredLayers }\r\n \r\n );\r\n }).filter(source => source)\r\n \r\n }\r\n \r\n {\r\n selectedFeature && (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default App;\r\n","const reportWebVitals = onPerfEntry => {\r\n if (onPerfEntry && onPerfEntry instanceof Function) {\r\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\r\n getCLS(onPerfEntry);\r\n getFID(onPerfEntry);\r\n getFCP(onPerfEntry);\r\n getLCP(onPerfEntry);\r\n getTTFB(onPerfEntry);\r\n });\r\n }\r\n};\r\n\r\nexport default reportWebVitals;\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\n\r\nimport '@fortawesome/fontawesome-svg-core/attribution';\r\nimport { library } from '@fortawesome/fontawesome-svg-core';\r\nimport {faInfoCircle, faExternalLinkAlt, faChevronRight, faChevronLeft, faDollarSign, faBicycle, faWrench, faStoreAlt} from '@fortawesome/free-solid-svg-icons';\r\n\r\nimport App from './App';\r\n\r\nimport { GlobalProvider } from './contexts/GlobalContext';\r\nimport { LayerVisibilityContextProvider } from './contexts/LayerVisibilityContext';\r\nimport ViewPortProvider from './contexts/ViewPortContext';\r\n\r\nimport reportWebVitals from './reportWebVitals';\r\n\r\nimport './index.css';\r\n\r\nlibrary.add(\r\n faInfoCircle,\r\n faExternalLinkAlt,\r\n faChevronRight,\r\n faChevronLeft,\r\n faDollarSign,\r\n faBicycle,\r\n faWrench,\r\n faStoreAlt\r\n);\r\n\r\nReactDOM.render(\r\n