{"version":3,"sources":["webpack:///./src/hooks/useGetData.js","webpack:///./src/components/rc/covenants-map/covenants-data.js","webpack:///./src/components/rc/legend/legend.js","webpack:///./src/components/rc/covenants-map/map.js","webpack:///./src/components/rc/covenants-map/index.js","webpack:///./src/components/toggle/index.js"],"names":["useGetData","endpoint","file","setFile","useState","error","useRef","status","message","useEffect","fetch","then","response","json","data","catch","e","current","errorMessage","CovenantData","pageWrapper","endpoints","showAttributes","showOverlay","showTooltip","mapEndpoint","borderEndpoint","overlayEndpoint","topo","border","ovLay","mapSection","mapRef","covenantDataPoints","feature","objects","overlayDataPoints","L","addInitHook","push","this","GestureHandling","map","gestureHandling","setView","southWest","northEast","bounds","setMaxBounds","options","minZoom","attributionControl","setPrefix","attribution","addTo","borderLayer","weight","style","color","fillOpacity","fitBounds","getBounds","scale","info","onAdd","_div","create","on","stopPropagation","update","innerHTML","undefined","reduce","previous","ListedAddress","Date","Distance","CardinalDirection1","Street1","CardinalDirection2","Street2","generateCovenantsText","overlay","select","getPanes","overlayPane","attr","svg","selectAll","overlayGroup","append","covenantPointsGroup","projection","geoTransform","point","x","y","latLngToLayerPoint","stream","path","geoPath","Tooltip","mouseover","mouseleave","mousemove","left","pageX","offsetLeft","html","target","__data__","properties","ED","pct_blc","toPrecision","pageY","features","enter","d","lflt_cl","opcty_v","long","lat","geometry","coordinates","currentTarget","react_default","a","createElement","className","id","ref","propTypes","object","array","Legend","show","backgroundColor","borderRadius","bool","Map","attributes","downloadUrl","toggle","setToggle","Fragment","components_toggle","active","setActive","labels","covenants_data","legend","type","title","onClick","document","href","body","appendChild","click","removeChild","isRequired","covenants_map_class","constructor","config","Object","assign","querySelector","ready","render","covenants_map_map","element","__webpack_require__","__webpack_exports__","Toggle","prop_types__WEBPACK_IMPORTED_MODULE_1__","react__WEBPACK_IMPORTED_MODULE_2__","react__WEBPACK_IMPORTED_MODULE_2___default","n","toggleClass","customFunc","dangerouslySetInnerHTML","__html","func"],"mappings":"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","file":"assets/js/49.js","sourcesContent":["import { useEffect, useRef, useState } from 'react';\r\n\r\nexport const useGetData = ( endpoint ) => {\r\n\r\n    const [ file, setFile ] = useState( null );\r\n    const error = useRef( { status: false, message: '' } );\r\n\r\n    useEffect( () => {\r\n\r\n        fetch( endpoint )\r\n            .then( ( response ) => response.json() )\r\n            .then( ( data ) => {\r\n\r\n                setFile( data );\r\n\r\n            } )\r\n            .catch( ( e ) => {\r\n\r\n                error.current.status = true;\r\n                error.current.message = e.errorMessage;\r\n\r\n            } );\r\n\r\n    }, [] );\r\n\r\n    return [ file, error.current ];\r\n\r\n};","import React, { useEffect, useRef } from 'react';\r\nimport { feature } from 'topojson-client';\r\nimport { selectAll, select, geoPath, geoTransform } from 'd3';\r\nimport { array, object } from 'prop-types';\r\nimport * as L from 'leaflet';\r\nimport { GestureHandling } from 'leaflet-gesture-handling';\r\nimport 'leaflet-gesture-handling/dist/leaflet-gesture-handling.css';\r\nimport { useGetData } from '../../../hooks/useGetData';\r\n\r\nconst generateCovenantsText = ( data ) => {\r\n\r\n    if ( data === undefined ) return '';\r\n\r\n    return data.reduce( ( previous, current ) => {\r\n\r\n        if ( current.ListedAddress !== '' ) {\r\n\r\n            return `${ previous }\r\n            <div class=\"covenant-point\">\r\n                <p><strong>Date:</strong> \r\n                    ${ current.Date }\r\n                </p>\r\n                <p><strong>Identifying Text:</strong>\r\n                    ${ current['Search Term'] }\r\n                </p>\r\n                <p><strong>Address:</strong>\r\n                    ${ current.ListedAddress }\r\n                </p>\r\n            </div>`;\r\n\r\n        }\r\n        else if ( current.Distance === 'Corner/Intersection' ) {\r\n\r\n            return `${ previous }\r\n                <div class=\"covenant-point\">\r\n                    <p><strong>Date:</strong> \r\n                        ${ current.Date }\r\n                    </p>\r\n                    <p><strong>Identifying Text:</strong>\r\n                        ${ current['Search Term'] }\r\n                    </p>\r\n                    <p><strong>Metes and Bounds:</strong>\r\n                        Situated on ${ current.CardinalDirection1 } side of ${ current.Street1 }\r\n                        at the ${ current.Distance } \r\n                        of the ${ current.CardinalDirection2 } side of ${ current.Street2 }\r\n                    </p>\r\n                </div>`;\r\n\r\n        }\r\n        else {\r\n\r\n            return `${ previous }\r\n            <div class=\"covenant-point\">\r\n                <p><strong>Date:</strong> \r\n                    ${ current.Date }\r\n                </p>\r\n                <p><strong>Identifying Text:</strong>\r\n                    ${ current['Search Term'] }\r\n                </p>\r\n                <p><strong>Metes and Bounds:</strong>\r\n                    Situated on ${ current.CardinalDirection1 } side of ${ current.Street1 }\r\n                    at the distance of ${ current.Distance } \r\n                    from the ${ current.CardinalDirection2 } side of ${ current.Street2 }\r\n                </p>\r\n            </div>`;\r\n\r\n        }\r\n\r\n\r\n    }, '' );\r\n\r\n};\r\n\r\nconst CovenantData = ( { pageWrapper, endpoints, showAttributes } ) => {\r\n\r\n    const { showOverlay, showTooltip } = showAttributes;\r\n\r\n    const [ mapEndpoint, borderEndpoint, overlayEndpoint ] = endpoints;\r\n\r\n    const [ topo ] = useGetData( mapEndpoint );\r\n    const [ border ] = useGetData( borderEndpoint );\r\n    const [ ovLay ] = useGetData( overlayEndpoint );\r\n\r\n    const mapSection = useRef();\r\n    const mapRef = useRef( [] );\r\n\r\n    useEffect( () => {\r\n\r\n        if ( topo === null || border === null || ovLay === null ) return;\r\n\r\n        // Circle Deed Code\r\n        const covenantDataPoints = feature( topo, topo.objects['CovenantPoints'] );\r\n\r\n        // Hexagon Percent Code\r\n        const overlayDataPoints = feature( ovLay, ovLay.objects['overlay_with_hexcodes_1920'] );\r\n\r\n        L.Map.addInitHook( function () {\r\n\r\n            // eslint-disable-next-line babel/no-invalid-this\r\n            mapRef.current.push( this );\r\n\r\n        } );\r\n        L.Map.addInitHook( 'addHandler', 'gestureHandling', GestureHandling );\r\n\r\n        const map = L.map( mapSection.current, { gestureHandling: true } )\r\n            .setView( [ 40.003133, -75.132328 ], 12 );\r\n\r\n        const southWest = L.latLng( 39.79323762437003, -75.42526245117186 ),\r\n            northEast = L.latLng( 40.21296507712467, -74.81002807617186 );\r\n        const bounds = L.latLngBounds( southWest, northEast );\r\n\r\n        map.setMaxBounds( bounds );\r\n        map.options.minZoom = 12;\r\n        map.attributionControl.setPrefix( '' );\r\n\r\n        L.tileLayer( 'https://tiles.stadiamaps.com/tiles/stamen_toner-lite/{z}/{x}/{y}.png', {\r\n            attribution: `&copy; <a href=\"https://www.stadiamaps.com/\" target=\"_blank\">Stadia Maps</a> \r\n            &copy; <a href=\"https://openmaptiles.org/\" target=\"_blank\">OpenMapTiles</a> \r\n            &copy; <a href=\"https://www.openstreetmap.org/about/\" target=\"_blank\">OpenStreetMap contributors</a> \r\n            &copy; <a href=\"https://stamen.com/\" target=\"_blank\">Stamen Design</a>`\r\n        } ).addTo( map );\r\n\r\n        const borderLayer = L.geoJson( border,\r\n            { // instantiates a new geoJson layer using built in geoJson handling\r\n                weight: 2, // Attributes of polygons including the weight of boundaries and colors of map.\r\n                style: function ( feature ) {\r\n\r\n                    return { color: '#2d3148', fillOpacity: 0.55 };\r\n\r\n                }\r\n            } )\r\n            .addTo( map ); // Adds the layer to the map.\r\n\r\n        map.fitBounds( borderLayer.getBounds() );\r\n\r\n        // Add scale\r\n        L.control.scale().addTo( map );\r\n\r\n        // Add info\r\n        const info = L.control();\r\n\r\n        info.onAdd = function ( map ) {\r\n\r\n            this._div = L.DomUtil.create( 'div', 'info' );\r\n            L.DomEvent.on( this._div, 'mousewheel', L.DomEvent.stopPropagation );\r\n            this.update();\r\n\r\n            return this._div;\r\n\r\n        };\r\n\r\n        info.update = function ( data ) {\r\n\r\n            this._div.innerHTML = `<div class=\"covenants-heading\">\r\n            <button class=\"info-close\" onclick=\"this.parentNode.parentNode.remove()\">&times;</button>    \r\n            <h3>Covenant Details</h3>\r\n                </div>\r\n                <div class=\"covenants-body\">\r\n                    ${ generateCovenantsText( data ) }\r\n                </div>`;\r\n\r\n        };\r\n\r\n        // Select the svg area and add circles:\r\n        const overlay = select( map.getPanes().overlayPane );\r\n\r\n\r\n        overlay.select( 'svg' )\r\n            .attr( 'pointer-events', 'auto' );\r\n\r\n        const svg = overlay\r\n            .selectAll( 'svg' );\r\n\r\n        const overlayGroup = svg\r\n            .append( 'g' )\r\n            .attr( 'id', 'overlayGroup' )\r\n            .style( 'display', showOverlay ? 'initial' : 'none' );\r\n\r\n        const covenantPointsGroup = svg\r\n            .append( 'g' );\r\n\r\n        function projectPoint( x, y ) {\r\n\r\n            var point = map.latLngToLayerPoint( new L.LatLng( y, x ) );\r\n\r\n            // eslint-disable-next-line babel/no-invalid-this\r\n            this.stream.point( point.x, point.y );\r\n\r\n        }\r\n\r\n        const projection = geoTransform( { point: projectPoint } );\r\n\r\n        const path = geoPath()\r\n            .projection( projection );\r\n\r\n        const Tooltip = select( '#tooltip' )\r\n            .attr( 'class', 'tooltip' )\r\n            .style( 'opacity', 1 )\r\n            .style( 'background-color', 'red' )\r\n            .style( 'border', 'solid' )\r\n            .style( 'border-width', '2px' )\r\n            .style( 'border-radius', '5px' )\r\n            .style( 'padding', '5px' )\r\n            .style( 'position', 'absolute' )\r\n            .style( 'z-index', '999999' );\r\n\r\n        const mouseover = ( e ) => {\r\n\r\n            Tooltip.style( 'opacity', 1 );\r\n\r\n        };\r\n\r\n        const mouseleave = ( e ) => {\r\n\r\n            Tooltip.style( 'opacity', 0 );\r\n\r\n        };\r\n\r\n        const mousemove = ( e ) => {\r\n\r\n            const left = e.pageX - pageWrapper.offsetLeft + 5;\r\n\r\n            console.info( pageWrapper.offsetLeft, e.pageX );\r\n            // console.info( e );\r\n\r\n            Tooltip\r\n                .html( `<p>ED: ${ e.target.__data__.properties.ED }</p>\r\n                <p>${ ( e.target.__data__.properties.pct_blc * 100 ).toPrecision( 2 ) }% black</p>` )\r\n                .style( 'left', `${ left }px` )\r\n                .style( 'top', `${ e.pageY - 250 }px` );\r\n\r\n\r\n        };\r\n\r\n        if ( showTooltip ) {\r\n\r\n            overlayGroup.selectAll( 'path' )\r\n                .data( overlayDataPoints.features )\r\n                .enter()\r\n                .append( 'path' )\r\n                .attr( 'stroke', ( d ) => d.properties.lflt_cl )\r\n                .attr( 'stroke-opacity', 0 )\r\n                .attr( 'opacity', ( d ) => d.properties.opcty_v )\r\n                .attr( 'fill', ( d ) => d.properties.lflt_cl )\r\n                .attr ( 'd', path )\r\n                .attr( 'class', 'overlay-item' )\r\n                .on( 'mouseover', mouseover )\r\n                .on( 'mousemove', mousemove )\r\n                .on( 'mouseleave', mouseleave );\r\n\r\n        }\r\n        else {\r\n\r\n            overlayGroup.selectAll( 'path' )\r\n                .data( overlayDataPoints.features )\r\n                .enter()\r\n                .append( 'path' )\r\n                .attr( 'stroke', ( d ) => d.properties.lflt_cl )\r\n                .attr( 'opacity', ( d ) => d.properties.opcty_v )\r\n                .attr( 'fill', ( d ) => d.properties.lflt_cl )\r\n                .attr ( 'd', path )\r\n                .attr( 'class', 'overlay-item' );\r\n\r\n        }\r\n\r\n        // Deed Circle Code\r\n        // Select the svg area and add circles:\r\n        covenantPointsGroup.selectAll( 'circle' )\r\n            .data( covenantDataPoints.features )\r\n            .enter()\r\n            .append( 'circle' )\r\n            .attr( 'class', 'covenants-point' )\r\n            .attr( 'cx', ( d ) => {\r\n\r\n                const [ long, lat ] = d.geometry.coordinates;\r\n\r\n                return map.latLngToLayerPoint( [ lat, long ] ).x;\r\n\r\n            } )\r\n            .attr( 'cy', ( d ) => {\r\n\r\n                const [ long, lat ] = d.geometry.coordinates;\r\n\r\n                return map.latLngToLayerPoint( [ lat, long ] ).y;\r\n\r\n            } )\r\n            .attr( 'r', 6 )\r\n            .on( 'click', ( d ) => {\r\n\r\n                select( '.selected' )\r\n                    .attr( 'class', 'covenants-point' )\r\n                    .attr( 'r', 6 );\r\n\r\n                info.addTo( map );\r\n                info.update( d.currentTarget.__data__.properties.data );\r\n\r\n                select( d.currentTarget )\r\n                    .attr( 'class', 'selected' )\r\n                    .attr( 'r', 7 );\r\n\r\n            } );\r\n\r\n        // Function that update circle position if something change\r\n        function update( e ) {\r\n\r\n            // UPDATE CIRCLES\r\n            selectAll( 'circle' )\r\n                .attr( 'cx', ( d ) => {\r\n\r\n                    const [ long, lat ] = d.geometry.coordinates;\r\n\r\n                    return map.latLngToLayerPoint( [ lat, long ] ).x;\r\n\r\n                } )\r\n                .attr( 'cy', ( d ) => {\r\n\r\n                    const [ long, lat ] = d.geometry.coordinates;\r\n\r\n                    return map.latLngToLayerPoint( [ lat, long ] ).y;\r\n\r\n                } );\r\n\r\n            // UPDATE POLYGONS\r\n\r\n            overlayGroup.selectAll( 'path' )\r\n                .attr ( 'd', path );\r\n\r\n        }\r\n\r\n        // If the user change the map (zoom or drag), I update circle position:\r\n        map.on( 'moveend', update );\r\n\r\n    }, [ topo, ovLay, border ] );\r\n\r\n    useEffect( () => {\r\n\r\n        select( '#overlayGroup' )\r\n            .style( 'display', showOverlay ? 'initial' : 'none' );\r\n\r\n    }, [ showOverlay ] );\r\n\r\n    return (\r\n\r\n        <div className='map-section'>\r\n            <div id='map' ref={ mapSection } ></div>\r\n            { showTooltip && <div id='tooltip'></div> }\r\n        </div>\r\n\r\n    );\r\n\r\n};\r\n\r\nCovenantData.propTypes = {\r\n    pageWrapper: object,\r\n    endpoints: array,\r\n    showAttributes: object\r\n};\r\n\r\nexport default CovenantData;\r\n\r\n\r\n","import './css/index.css';\r\nimport { bool } from 'prop-types';\r\nimport React from 'react';\r\n\r\nconst Legend = ( { show } ) => {\r\n\r\n    return (\r\n        <div className='map-legend'>\r\n\r\n            <div className='legend-item'>\r\n\r\n                <div className='legend-color' style={{ backgroundColor: '#CD7535', borderRadius: '100%' }} ></div>\r\n\r\n                <div className='legend-text'>Racial Covenants (1919-1932)</div>\r\n\r\n            </div>\r\n\r\n            {\r\n                show &&\r\n                <div className='legend-item'>\r\n                    <div className='legend-color' style={{ backgroundColor: 'rgb(45, 49, 72, 0.65)' }} >\r\n                        <span className='na'>NA</span>\r\n                    </div>\r\n                    <div className='legend-gradient' >\r\n                        <span className='percentage'>\r\n                            <span className='zero'>0%</span>\r\n                            <span className='hundred'>100%</span>\r\n                        </span>\r\n                    </div>\r\n                    <div className='legend-text'>Percent Black Population</div>\r\n                </div>\r\n            }\r\n\r\n        </div>\r\n    );\r\n\r\n};\r\n\r\nLegend.propTypes = {\r\n    show: bool\r\n};\r\n\r\nexport default Legend;","import React, { useState } from 'react';\r\nimport { array, object } from 'prop-types';\r\nimport CovenantData from './covenants-data';\r\nimport { Toggle } from '../../toggle/index';\r\nimport Legend from '../legend/legend';\r\n\r\nconst Map = ( { pageWrapper, attributes, endpoints } ) => {\r\n\r\n    const [ , , , downloadUrl ] = endpoints;\r\n    const showAttributes = { ...attributes };\r\n\r\n    const [ toggle, setToggle ] = useState( showAttributes.showOverlay );\r\n\r\n\r\n    showAttributes.showOverlay = toggle;\r\n\r\n    const handleDownloadClick = () => {\r\n\r\n        const a = document.createElement( 'a' );\r\n\r\n        a.href = downloadUrl;\r\n        document.body.appendChild( a );\r\n        a.click();\r\n        document.body.removeChild( a );\r\n\r\n    };\r\n\r\n\r\n    return (\r\n        <>\r\n            <div className='toggle-group'>\r\n                <div className='label'>1920 Black Population</div>\r\n\r\n                <Toggle\r\n                    active={ toggle }\r\n                    setActive={ setToggle }\r\n                    labels={ [ 'Off', 'On' ] }\r\n                />\r\n\r\n            </div>\r\n\r\n            <CovenantData\r\n                pageWrapper={ pageWrapper }\r\n                endpoints={ endpoints }\r\n                showAttributes={ showAttributes }\r\n            />\r\n\r\n            <div className='legend-download'>\r\n\r\n                <Legend show={ toggle } />\r\n\r\n                <div className={ 'download-data' }>\r\n                    <button type='button' title='Download Data' className='btn download-data-btn' onClick={ handleDownloadClick }>\r\n                        Download Data\r\n                    </button>\r\n                </div>\r\n\r\n            </div>\r\n        </>\r\n    );\r\n\r\n};\r\n\r\nMap.propTypes = {\r\n    pageWrapper: object.isRequired,\r\n    attributes: object.isRequired,\r\n    endpoints: array.isRequired\r\n};\r\n\r\nexport default Map;","import './css/index.css';\r\nimport React from 'react';\r\nimport { render } from 'react-dom';\r\nimport Map from './map';\r\n\r\nexport default class {\r\n\r\n    static name = 'covenants-data';\r\n\r\n    constructor( config ) {\r\n\r\n        Object.assign( this, config );\r\n\r\n        this.pageWrapper = document.querySelector( '.page' );\r\n\r\n    }\r\n\r\n    ready() {\r\n\r\n        render(\r\n            <Map\r\n                pageWrapper={ this.pageWrapper }\r\n                attributes={ this.attributes }\r\n                endpoints ={ this.options.endpoints }\r\n            />, this.element\r\n        );\r\n\r\n    }\r\n\r\n}\r\n","import './css/index.css';\r\nimport { array, bool, func } from 'prop-types';\r\nimport React, { useEffect } from 'react';\r\n\r\n\r\nconst toggleClass = ( status ) => {\r\n\r\n    return status ? 'toggle-on' : 'toggle-off';\r\n\r\n};\r\n\r\nconst Toggle = ( { active, setActive, labels, customFunc } ) => {\r\n\r\n\r\n    const handleClick = () => {\r\n\r\n        setActive( !active );\r\n\r\n        if ( customFunc ) {\r\n\r\n            customFunc( !active );\r\n\r\n        }\r\n\r\n    };\r\n\r\n    useEffect( () => {\r\n\r\n        if ( customFunc ) {\r\n\r\n            customFunc( active );\r\n\r\n        }\r\n\r\n    }, [] );\r\n\r\n    return (\r\n\r\n        <div className='toggle-button' onClick={ handleClick }>\r\n\r\n            <div className='toggle-container'>\r\n\r\n                <div className={ `toggle-btn ${ toggleClass( !active ) }` }\r\n                    dangerouslySetInnerHTML={{ __html: labels[0] }}\r\n                >\r\n                </div>\r\n\r\n                <div className={ `toggle-btn ${ toggleClass( active ) }` }\r\n                    dangerouslySetInnerHTML={{ __html: labels[1] }}\r\n                >\r\n                </div>\r\n\r\n            </div>\r\n\r\n        </div>\r\n\r\n    );\r\n\r\n};\r\n\r\nToggle.propTypes = {\r\n    active: bool,\r\n    setActive: func,\r\n    labels: array,\r\n    customFunc: func\r\n};\r\n\r\n\r\nexport { Toggle };"],"sourceRoot":""}