From 690984a1cb43a7fbb9572c740570bbf6200484f6 Mon Sep 17 00:00:00 2001 From: Adam Doe <17502761+adamdoe@users.noreply.github.com> Date: Wed, 20 Nov 2024 10:38:33 -0800 Subject: [PATCH 01/10] [DEV-9325] use core ViewPort type --- packages/map/src/CdcMap.tsx | 4 ++-- packages/map/src/components/Legend/components/Legend.tsx | 4 ++-- packages/map/src/types/MapConfig.ts | 1 - packages/map/src/types/MapContext.ts | 5 +++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/map/src/CdcMap.tsx b/packages/map/src/CdcMap.tsx index d43b7edc5..824fa42e9 100644 --- a/packages/map/src/CdcMap.tsx +++ b/packages/map/src/CdcMap.tsx @@ -7,7 +7,7 @@ import Error from './components/EditorPanel/components/Error' import _ from 'lodash' // types -import { type ViewportSize } from './types/MapConfig' +import { type ViewPort } from '@cdc/core/types/ViewPort' import { type DimensionsType } from '@cdc/core/types/Dimensions' // IE11 @@ -116,7 +116,7 @@ const CdcMap = ({ const [isDraggingAnnotation, setIsDraggingAnnotation] = useState(false) const [loading, setLoading] = useState(true) const [displayPanel, setDisplayPanel] = useState(true) - const [currentViewport, setCurrentViewport] = useState('lg') + const [currentViewport, setCurrentViewport] = useState('lg') const [topoData, setTopoData] = useState({}) const [runtimeFilters, setRuntimeFilters] = useState([]) const [runtimeLegend, setRuntimeLegend] = useState([]) diff --git a/packages/map/src/components/Legend/components/Legend.tsx b/packages/map/src/components/Legend/components/Legend.tsx index fafcb6067..653e40d6b 100644 --- a/packages/map/src/components/Legend/components/Legend.tsx +++ b/packages/map/src/components/Legend/components/Legend.tsx @@ -10,6 +10,7 @@ import LegendShape from '@cdc/core/components/LegendShape' import LegendGradient from '@cdc/core/components/Legend/Legend.Gradient' import LegendItemHex from './LegendItem.Hex' import Button from '@cdc/core/components/elements/Button' +import type { ViewPort } from '@cdc/core/types/ViewPort' import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses' import ConfigContext from '../../../context' @@ -17,7 +18,6 @@ import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern' import { GlyphStar, GlyphTriangle, GlyphDiamond, GlyphSquare, GlyphCircle } from '@visx/glyph' import { Group } from '@visx/group' import './index.scss' -import { ViewportSize } from '@cdc/chart/src/types/ChartConfig' import { isMobileHeightViewport } from '@cdc/core/helpers/viewports' const LEGEND_PADDING = 30 @@ -26,7 +26,7 @@ type LegendProps = { skipId: string dimensions: DimensionsType containerWidthPadding: number - currentViewport: ViewportSize + currentViewport: ViewPort } const Legend = forwardRef((props, ref) => { diff --git a/packages/map/src/types/MapConfig.ts b/packages/map/src/types/MapConfig.ts index 3a89a10d0..ec0144279 100644 --- a/packages/map/src/types/MapConfig.ts +++ b/packages/map/src/types/MapConfig.ts @@ -44,7 +44,6 @@ export type PrimaryColumnProperties = Pick< EditorColumnProperties, 'dataTable' | 'label' | 'name' | 'prefix' | 'suffix' | 'tooltip' > -export type ViewportSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' export type LegendShapeItem = { column: string key: string diff --git a/packages/map/src/types/MapContext.ts b/packages/map/src/types/MapContext.ts index b381d2ced..78f298522 100644 --- a/packages/map/src/types/MapContext.ts +++ b/packages/map/src/types/MapContext.ts @@ -1,11 +1,12 @@ -import { type MapConfig, type ViewportSize } from './MapConfig' +import { type MapConfig } from './MapConfig' +import { type ViewPort } from '@cdc/core/types/ViewPort' export type MapContext = { applyLegendToRow applyTooltipsToGeo closeModal columnsInData - currentViewport: ViewportSize + currentViewport: ViewPort data displayDataAsText displayGeoName From 00e05c1ec337983d63bac226ff79fdc3cd9bc581 Mon Sep 17 00:00:00 2001 From: Adam Doe <17502761+adamdoe@users.noreply.github.com> Date: Wed, 20 Nov 2024 11:56:46 -0800 Subject: [PATCH 02/10] [DEV-9325] start work on leaflet map contributions --- packages/map/examples/example-leaflet.json | 819 ++++++++++++++++++ packages/map/index.html | 2 +- packages/map/package.json | 3 + packages/map/src/CdcMap.tsx | 2 + .../EditorPanel/components/EditorPanel.tsx | 43 +- .../LeafletMap/components/LeafletMap.tsx | 40 + .../LeafletMap/components/MarkerCluster.tsx | 60 ++ .../LeafletMap/components/leaflet.styles.css | 3 + .../map/src/components/LeafletMap/index.tsx | 3 + packages/map/src/data/initial-state.js | 3 + packages/map/src/types/MapConfig.ts | 2 +- yarn.lock | 32 + 12 files changed, 1004 insertions(+), 8 deletions(-) create mode 100644 packages/map/examples/example-leaflet.json create mode 100644 packages/map/src/components/LeafletMap/components/LeafletMap.tsx create mode 100644 packages/map/src/components/LeafletMap/components/MarkerCluster.tsx create mode 100644 packages/map/src/components/LeafletMap/components/leaflet.styles.css create mode 100644 packages/map/src/components/LeafletMap/index.tsx diff --git a/packages/map/examples/example-leaflet.json b/packages/map/examples/example-leaflet.json new file mode 100644 index 000000000..c5f06d691 --- /dev/null +++ b/packages/map/examples/example-leaflet.json @@ -0,0 +1,819 @@ +{ + "annotations": [], + "general": { + "title": "Example Data Map with Cities", + "subtext": "*: Lorem ipsum; NA: Lorem ipsum.", + "type": "data", + "geoType": "leaflet", + "headerColor": "theme-cyan", + "showSidebar": true, + "showTitle": true, + "showDownloadButton": true, + "expandDataTable": false, + "backgroundColor": "#f5f5f5", + "geoBorderColor": "darkGray", + "territoriesLabel": "Territories", + "language": "en", + "hasRegions": false, + "showDownloadMediaButton": false, + "displayAsHex": false, + "displayStateLabels": false, + "fullBorder": false, + "palette": { + "isReversed": false + }, + "allowMapZoom": true, + "hideGeoColumnInTooltip": false, + "hidePrimaryColumnInTooltip": false, + "statePicked": { + "fipsCode": "01", + "stateName": "Alabama" + }, + "showDownloadImgButton": false, + "showDownloadPdfButton": false, + "territoriesAlwaysShow": false, + "geoLabelOverride": "", + "convertFipsCodes": true, + "noStateFoundMessage": "Map Unavailable", + "annotationDropdownText": "Annotations" + }, + "type": "map", + "color": "yelloworangered", + "columns": { + "latitude": { + "name": "Latitude" + }, + "longitude": { + "name": "Longitude" + }, + "geo": { + "dataTable": true, + "label": "", + "name": "City", + "tooltip": false + }, + "primary": { + "dataTable": true, + "label": "Rate", + "name": "Value", + "prefix": "", + "suffix": "", + "tooltip": false, + "roundToPlace": 0 + }, + "navigate": { + "dataTable": false, + "name": "", + "tooltip": false + }, + "additionalColumn1": { + "label": "Latitude", + "dataTable": true, + "tooltips": false, + "prefix": "", + "suffix": "", + "name": "Latitude", + "tooltip": true + }, + "geosInRegion": { + "name": "Longitude", + "dataTable": true, + "label": "Longitude" + } + }, + "legend": { + "numberOfItems": 3, + "position": "side", + "title": "Legend Title", + "description": "Legend Text", + "type": "equalnumber", + "specialClasses": [], + "unified": false, + "singleColumn": false, + "dynamicDescription": false, + "descriptions": {}, + "singleRow": false, + "showSpecialClassesLast": false, + "verticalSorted": false, + "style": "circles", + "subStyle": "linear blocks", + "tickRotation": "", + "singleColumnLegend": false, + "hideBorder": false + }, + "filters": [], + "table": { + "showDownloadUrl": false, + "showDataTableLink": true, + "wrapColumns": false, + "label": "Data Table", + "expanded": true, + "limitHeight": false, + "height": "", + "caption": "", + "showFullGeoNameInCSV": false, + "forceDisplay": true, + "download": true, + "indexLabel": "", + "showDownloadLinkBelow": true + }, + "tooltips": { + "appearanceType": "hover", + "linkLabel": "Learn More", + "capitalizeLabels": true, + "opacity": 90 + }, + "runtime": { + "editorErrorMessage": [] + }, + "visual": { + "cityStyle": "pin", + "minBubbleSize": 1, + "maxBubbleSize": 20, + "extraBubbleBorder": false, + "showBubbleZeros": false, + "geoCodeCircleSize": 2, + "cityStyleLabel": "", + "additionalCityStyles": [] + }, + "mapPosition": { + "coordinates": [ + 0, + 30 + ], + "zoom": 1 + }, + "map": { + "layers": [], + "patterns": [] + }, + "hexMap": { + "type": "", + "shapeGroups": [ + { + "legendTitle": "", + "legendDescription": "", + "items": [ + { + "key": "", + "shape": "Arrow Up", + "column": "", + "operator": "=", + "value": "" + } + ] + } + ] + }, + "filterBehavior": "Filter Change", + "dataTable": { + "title": "Data Table", + "forceDisplay": true + }, + "sharing": { + "enabled": false, + "dataHost": "wcms-wp.cdc.gov", + "configUrl": "/wcms/4.0/cdc-wp/data-presentation/examples/city-data-map-example.json" + }, + "usingWidgetLoader": true, + "data": [ + { + "City": "Albuquerque", + "Longitude": "-106.650421", + "Latitude": "35.084385", + "Value": 1 + }, + { + "City": "Anaheim", + "Longitude": "-117.914299", + "Latitude": "33.836594", + "Value": 2 + }, + { + "City": "Anchorage", + "Longitude": "-149.900284", + "Latitude": "61.218056", + "Value": 3 + }, + { + "City": "Arlington", + "Longitude": "-97.108063", + "Latitude": "32.735687", + "Value": 4 + }, + { + "City": "Atlanta", + "Longitude": "-84.387985", + "Latitude": "33.748997", + "Value": 5 + }, + { + "City": "Aurora", + "Longitude": "-93.717979", + "Latitude": "36.97089", + "Value": 6 + }, + { + "City": "Austin", + "Longitude": "-97.743057", + "Latitude": "30.267153", + "Value": 7 + }, + { + "City": "Bakersfield", + "Longitude": "-119.018715", + "Latitude": "35.373291", + "Value": 8 + }, + { + "City": "Baltimore", + "Longitude": "-76.61219", + "Latitude": "39.290386", + "Value": 9 + }, + { + "City": "Baton Rouge", + "Longitude": "-91.187149", + "Latitude": "30.451468", + "Value": 10 + }, + { + "City": "Boise", + "Longitude": "-116.202316", + "Latitude": "43.615021", + "Value": 11 + }, + { + "City": "Boston", + "Longitude": "-71.058884", + "Latitude": "42.360081", + "Value": 12 + }, + { + "City": "Buffalo", + "Longitude": "-78.878372", + "Latitude": "42.886448", + "Value": 13 + }, + { + "City": "Chandler", + "Longitude": "-111.841248", + "Latitude": "33.30616", + "Value": 14 + }, + { + "City": "Charlotte", + "Longitude": "-80.843124", + "Latitude": "35.227085", + "Value": 15 + }, + { + "City": "Chesapeake", + "Longitude": "-76.287491", + "Latitude": "36.768208", + "Value": 16 + }, + { + "City": "Chicago", + "Longitude": "-87.629799", + "Latitude": "41.878113", + "Value": 17 + }, + { + "City": "Chula Vista", + "Longitude": "-117.084198", + "Latitude": "32.640053", + "Value": 18 + }, + { + "City": "Cincinnati", + "Longitude": "-84.512016", + "Latitude": "39.103119", + "Value": 19 + }, + { + "City": "Cleveland", + "Longitude": "-81.694359", + "Latitude": "41.499321", + "Value": 20 + }, + { + "City": "Colorado Springs", + "Longitude": "-104.821365", + "Latitude": "38.833881", + "Value": 21 + }, + { + "City": "Columbus", + "Longitude": "-82.998795", + "Latitude": "39.961178", + "Value": 22 + }, + { + "City": "Corpus Christi", + "Longitude": "-97.396378", + "Latitude": "27.800583", + "Value": 23 + }, + { + "City": "Dallas", + "Longitude": "-96.796989", + "Latitude": "32.776665", + "Value": 24 + }, + { + "City": "Denver", + "Longitude": "-104.99025", + "Latitude": "39.739235", + "Value": 25 + }, + { + "City": "Detroit", + "Longitude": "-83.045753", + "Latitude": "42.331429", + "Value": 26 + }, + { + "City": "District of Columbia", + "Longitude": "-77.036873", + "Latitude": "38.907192", + "Value": 27 + }, + { + "City": "Durham", + "Longitude": "-78.898621", + "Latitude": "35.994034", + "Value": 28 + }, + { + "City": "El Paso", + "Longitude": "-106.485023", + "Latitude": "31.761877", + "Value": 29 + }, + { + "City": "Fort Wayne", + "Longitude": "-85.139351", + "Latitude": "41.079273", + "Value": 30 + }, + { + "City": "Ft Wayne", + "Longitude": "-85.139351", + "Latitude": "41.079273", + "Value": 31 + }, + { + "City": "Fort Worth", + "Longitude": "-97.330765", + "Latitude": "32.755489", + "Value": 32 + }, + { + "City": "Fremont", + "Longitude": "-121.988571", + "Latitude": "37.548271", + "Value": 33 + }, + { + "City": "Fresno", + "Longitude": "-119.787125", + "Latitude": "36.737797", + "Value": 34 + }, + { + "City": "Garland", + "Longitude": "-96.638885", + "Latitude": "32.912624", + "Value": 35 + }, + { + "City": "Gilbert", + "Longitude": "-111.789024", + "Latitude": "33.352825", + "Value": 36 + }, + { + "City": "Glendale", + "Longitude": "-118.255074", + "Latitude": "34.142509", + "Value": 37 + }, + { + "City": "Greensboro", + "Longitude": "-79.791977", + "Latitude": "36.072636", + "Value": 38 + }, + { + "City": "Henderson", + "Longitude": "-114.98172", + "Latitude": "36.039524", + "Value": 39 + }, + { + "City": "Hialeah", + "Longitude": "-80.278107", + "Latitude": "25.857595", + "Value": 40 + }, + { + "City": "Honolulu", + "Longitude": "-157.858337", + "Latitude": "21.306944", + "Value": 41 + }, + { + "City": "Houston", + "Longitude": "-95.358421", + "Latitude": "29.749907", + "Value": 42 + }, + { + "City": "Indianapolis", + "Longitude": "-86.158066", + "Latitude": "39.768402", + "Value": 43 + }, + { + "City": "Irvine", + "Longitude": "-117.826508", + "Latitude": "33.684566", + "Value": 44 + }, + { + "City": "Irving", + "Longitude": "-96.948891", + "Latitude": "32.814018", + "Value": 45 + }, + { + "City": "Jacksonville", + "Longitude": "-81.655647", + "Latitude": "30.332184", + "Value": 46 + }, + { + "City": "Jersey City", + "Longitude": "-74.077644", + "Latitude": "40.728157", + "Value": 47 + }, + { + "City": "Kansas City", + "Longitude": "-94.578568", + "Latitude": "39.099728", + "Value": 48 + }, + { + "City": "Laredo", + "Longitude": "-99.507553", + "Latitude": "27.503561", + "Value": 49 + }, + { + "City": "Las Vegas", + "Longitude": "-115.139832", + "Latitude": "36.169941", + "Value": 50 + }, + { + "City": "Lexington", + "Longitude": "-84.503716", + "Latitude": "38.040585", + "Value": 51 + }, + { + "City": "Lincoln", + "Longitude": "-95.262955", + "Latitude": "37.346134", + "Value": 52 + }, + { + "City": "Long Beach", + "Longitude": "-118.193741", + "Latitude": "33.77005", + "Value": 53 + }, + { + "City": "Los Angeles", + "Longitude": "-118.243683", + "Latitude": "34.052235", + "Value": 54 + }, + { + "City": "Los Angeles County", + "Longitude": "-118.229362", + "Latitude": "34.058762", + "Value": 55 + }, + { + "City": "Louisville", + "Longitude": "-85.758453", + "Latitude": "38.252666", + "Value": 56 + }, + { + "City": "Lubbock", + "Longitude": "-101.855164", + "Latitude": "33.577862", + "Value": 57 + }, + { + "City": "38", + "Longitude": "-89.40123", + "Latitude": "43.073051", + "Value": 58 + }, + { + "City": "Marion County, Indiana", + "Longitude": "-86.136543", + "Latitude": "39.781029", + "Value": 59 + }, + { + "City": "Memphis", + "Longitude": "-90.048981", + "Latitude": "35.149532", + "Value": 60 + }, + { + "City": "Mesa", + "Longitude": "-111.831474", + "Latitude": "33.415184", + "Value": 61 + }, + { + "City": "Miami", + "Longitude": "-80.191788", + "Latitude": "25.761681", + "Value": 62 + }, + { + "City": "Milwaukee", + "Longitude": "-87.906471", + "Latitude": "43.038902", + "Value": 63 + }, + { + "City": "Minneapolis", + "Longitude": "-93.265015", + "Latitude": "44.977753", + "Value": 64 + }, + { + "City": "Montgomery County, Maryland", + "Longitude": "-77.199406", + "Latitude": "39.153515", + "Value": 65 + }, + { + "City": "Nashville", + "Longitude": "-86.781601", + "Latitude": "36.162663", + "Value": 66 + }, + { + "City": "New Orleans", + "Longitude": "-90.071533", + "Latitude": "29.951065", + "Value": 67 + }, + { + "City": "New York City", + "Longitude": "-74.005974", + "Latitude": "40.712776", + "Value": 68 + }, + { + "City": "Newark", + "Longitude": "-95.582733", + "Latitude": "37.443188", + "Value": 69 + }, + { + "City": "Norfolk", + "Longitude": "-76.285873", + "Latitude": "36.850769", + "Value": 70 + }, + { + "City": "North Las Vegas", + "Longitude": "-115.114571", + "Latitude": "36.19585", + "Value": 71 + }, + { + "City": "Oakland", + "Longitude": "-122.271111", + "Latitude": "37.804363", + "Value": 72 + }, + { + "City": "Oklahoma City", + "Longitude": "-97.516426", + "Latitude": "35.46756", + "Value": 73 + }, + { + "City": "Omaha", + "Longitude": "-95.934502", + "Latitude": "41.256538", + "Value": 74 + }, + { + "City": "Orlando", + "Longitude": "-81.379234", + "Latitude": "28.538336", + "Value": 75 + }, + { + "City": "Philadelphia", + "Longitude": "-75.165222", + "Latitude": "39.952583", + "Value": 76 + }, + { + "City": "Phoenix", + "Longitude": "-112.074036", + "Latitude": "33.448376", + "Value": 77 + }, + { + "City": "Pittsburgh", + "Longitude": "-79.995888", + "Latitude": "40.440624", + "Value": 78 + }, + { + "City": "Plano", + "Longitude": "-96.698883", + "Latitude": "33.019844", + "Value": 79 + }, + { + "City": "Portland", + "Longitude": "-122.658722", + "Latitude": "45.51223", + "Value": 80 + }, + { + "City": "Raleigh", + "Longitude": "-78.638176", + "Latitude": "35.779591", + "Value": 81 + }, + { + "City": "Reno", + "Longitude": "-119.813805", + "Latitude": "39.529633", + "Value": 82 + }, + { + "City": "Richmond", + "Longitude": "-77.43605", + "Latitude": "37.540726", + "Value": 83 + }, + { + "City": "Riverside", + "Longitude": "-117.375496", + "Latitude": "33.980602", + "Value": 84 + }, + { + "City": "Sacramento", + "Longitude": "-121.4944", + "Latitude": "38.581573", + "Value": 85 + }, + { + "City": "Saint Paul", + "Longitude": "-93.089958", + "Latitude": "44.953705", + "Value": 86 + }, + { + "City": "San Antonio", + "Longitude": "-98.493629", + "Latitude": "29.424122", + "Value": 87 + }, + { + "City": "San Diego", + "Longitude": "-117.161087", + "Latitude": "32.715736", + "Value": 88 + }, + { + "City": "San Francisco", + "Longitude": "-122.419418", + "Latitude": "37.774929", + "Value": 89 + }, + { + "City": "San Jose", + "Longitude": "-121.88633", + "Latitude": "37.338207", + "Value": 90 + }, + { + "City": "Santa Ana", + "Longitude": "-117.867653", + "Latitude": "33.745472", + "Value": 91 + }, + { + "City": "Scottsdale", + "Longitude": "-111.926048", + "Latitude": "33.494171", + "Value": 92 + }, + { + "City": "Seattle", + "Longitude": "-122.332069", + "Latitude": "47.606209", + "Value": 93 + }, + { + "City": "Spokane", + "Longitude": "-117.426048", + "Latitude": "47.658779", + "Value": 94 + }, + { + "City": "St. Louis", + "Longitude": "-90.199402", + "Latitude": "38.627003", + "Value": 95 + }, + { + "City": "St. Petersburg", + "Longitude": "-82.640289", + "Latitude": "27.767601", + "Value": 96 + }, + { + "City": "Stockton", + "Longitude": "-121.290779", + "Latitude": "37.957703", + "Value": 97 + }, + { + "City": "Tampa", + "Longitude": "-82.457176", + "Latitude": "27.950575", + "Value": 98 + }, + { + "City": "Toledo", + "Longitude": "-83.537865", + "Latitude": "41.652805", + "Value": 99 + }, + { + "City": "Tucson", + "Longitude": "-110.974709", + "Latitude": "32.222607", + "Value": 100 + }, + { + "City": "Tuscon", + "Longitude": "-110.974709", + "Latitude": "32.222607", + "Value": 101 + }, + { + "City": "Tulsa", + "Longitude": "-95.992775", + "Latitude": "36.15398", + "Value": 102 + }, + { + "City": "Virginia Beach", + "Longitude": "-75.977982", + "Latitude": "36.852924", + "Value": 103 + }, + { + "City": "Wichita", + "Longitude": "-97.330055", + "Latitude": "37.687176", + "Value": 104 + }, + { + "City": "Winston Salem", + "Longitude": "-80.244217", + "Latitude": "36.099861", + "Value": 105 + }, + { + "City": "Winston–Salem", + "Longitude": "-80.244217", + "Latitude": "36.099861", + "Value": 106 + } + ], + "filterStyle": "Filter Changes", + "version": "4.24.10" +} \ No newline at end of file diff --git a/packages/map/index.html b/packages/map/index.html index 5547a0f84..b74c4ea23 100644 --- a/packages/map/index.html +++ b/packages/map/index.html @@ -22,7 +22,7 @@ - +
diff --git a/packages/map/package.json b/packages/map/package.json index 31ff6e5ff..7c4aba400 100644 --- a/packages/map/package.json +++ b/packages/map/package.json @@ -38,9 +38,12 @@ "d3-zoom": "^3.0.0", "html-react-parser": "^3.0.8", "html2canvas": "^1.0.0-rc.7", + "leaflet": "^1.9.4", "lodash.debounce": "^4.0.8", "papaparse": "^5.3.0", "react-accessible-accordion": "^3.0.1", + "react-leaflet": "^4.2.1", + "react-leaflet-markercluster": "^4.1.1", "react-table": "^7.5.0", "react-tag-autocomplete": "^6.0.0", "react-tooltip": "5.8.2-beta.3", diff --git a/packages/map/src/CdcMap.tsx b/packages/map/src/CdcMap.tsx index 824fa42e9..63d42b7ff 100644 --- a/packages/map/src/CdcMap.tsx +++ b/packages/map/src/CdcMap.tsx @@ -74,6 +74,7 @@ import EditorPanel from './components/EditorPanel' // Future: Lazy import NavigationMenu from './components/NavigationMenu' // Future: Lazy import UsaMap from './components/UsaMap' // Future: Lazy import WorldMap from './components/WorldMap' // Future: Lazy +import LeafletMap from './components/LeafletMap' import useTooltip from './hooks/useTooltip' import { isSolrCsv, isSolrJson } from '@cdc/core/helpers/isSolr' import SkipTo from '@cdc/core/components/elements/SkipTo' @@ -1846,6 +1847,7 @@ const CdcMap = ({ {'us-region' === geoType && } {'us-county' === geoType && } {'world' === geoType && } + {'leaflet' === geoType && } {'data' === general.type && logo && ( )} diff --git a/packages/map/src/components/EditorPanel/components/EditorPanel.tsx b/packages/map/src/components/EditorPanel/components/EditorPanel.tsx index 132abfbe8..39a0181d7 100644 --- a/packages/map/src/components/EditorPanel/components/EditorPanel.tsx +++ b/packages/map/src/components/EditorPanel/components/EditorPanel.tsx @@ -42,6 +42,7 @@ import HexSetting from './HexShapeSettings.jsx' import ConfigContext from '../../../context.ts' import { MapContext } from '../../../types/MapContext.js' import { TextField } from './Inputs' +import { Select } from '@cdc/core/components/EditorPanel/Inputs' // Todo: move to useReducer, seperate files out. const EditorPanel = ({ columnsRequiredChecker }) => { @@ -116,7 +117,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => { categoryValuesOrder.splice(idx2, 0, movedItem) state.legend.categoryValuesOrder?.forEach(value => { - if(categoryValuesOrder.indexOf(value) === -1){ + if (categoryValuesOrder.indexOf(value) === -1) { categoryValuesOrder.push(value) } }) @@ -1503,9 +1504,11 @@ const EditorPanel = ({ columnsRequiredChecker }) => { }) const getCategoryValuesOrder = () => { - let values = runtimeLegend ? runtimeLegend.filter(item => !item.special).map(runtimeLegendItem => runtimeLegendItem.value) : [] + let values = runtimeLegend + ? runtimeLegend.filter(item => !item.special).map(runtimeLegendItem => runtimeLegendItem.value) + : [] - if(state.legend.cateogryValuesOrder){ + if (state.legend.cateogryValuesOrder) { return values.sort((a, b) => { let aVal = state.legend.cateogryValuesOrder.indexOf(a) let bVal = state.legend.cateogryValuesOrder.indexOf(b) @@ -1517,11 +1520,12 @@ const EditorPanel = ({ columnsRequiredChecker }) => { } else { return values } - } const CategoryList = () => { - return getCategoryValuesOrder().filter(item => !item.special).map((value, index) => ( + return getCategoryValuesOrder() + .filter(item => !item.special) + .map((value, index) => ( {(provided, snapshot) => (
  • @@ -1537,7 +1541,7 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
    • )}     - )) + )) } const isLoadedFromUrl = state?.dataKey?.includes('http://') || state?.dataKey?.includes('https://') @@ -3533,6 +3537,33 @@ const EditorPanel = ({ columnsRequiredChecker }) => { updateField={updateField} /> + {/* Leaflet Map Type */} + {state.general.geoType === 'leaflet' && ( + <> + { - const [mapCenter, setMapCenter] = useState([33.749, -84.388]) const { state } = useContext(ConfigContext) + const currentLayerSettings = layerSettings.find(l => l.key === state?.leaflet?.theme) + const [mapCenter, setMapCenter] = useState([33.749, -84.388]) + const [attribution, setAttribution] = useState(`${currentLayerSettings.attribution} & Leaflet`) - const tileLayerUrl = { - osm: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', - positron: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', - darkMatter: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', - toner: 'https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', - watercolor: 'https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg', - opentopomap: 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', - satellite: - 'https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/{z}/{x}/{y}?access_token=YOUR_MAPBOX_ACCESS_TOKEN', - terrain: 'https://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.jpg', - outdoors: 'https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey=YOUR_THUNDERFOREST_API_KEY', - transport: 'https://{s}.tile.thunderforest.com/transport/{z}/{x}/{y}.png?apikey=YOUR_THUNDERFOREST_API_KEY', - landscape: 'https://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey=YOUR_THUNDERFOREST_API_KEY', - esriWorldImagery: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', - esriWorldTopoMap: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', - hikeBike: 'https://tiles.wmflabs.org/hikebike/{z}/{x}/{y}.png' - } + useEffect(() => { + const newAttribution = `${currentLayerSettings.attribution} & Leaflet` + setAttribution(newAttribution) + }, [state.leaflet.theme]) return ( -
    + <> - + + -
    +

    {`${currentLayerSettings.attribution}, Leaflet`}

    + ) } diff --git a/packages/map/src/components/LeafletMap/components/layerSettings.ts b/packages/map/src/components/LeafletMap/components/layerSettings.ts new file mode 100644 index 000000000..7b700c43c --- /dev/null +++ b/packages/map/src/components/LeafletMap/components/layerSettings.ts @@ -0,0 +1,57 @@ +export const layerSettings = [ + { + key: 'osm', + name: 'OpenStreetMap', + url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', + attribution: '© OpenStreetMap contributors' + }, + { + key: 'positron', + name: 'Positron', + url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', + attribution: '© OpenStreetMap contributors © CartoDB' + }, + { + key: 'darkMatter', + name: 'Dark Matter', + url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', + attribution: '© OpenStreetMap contributors © CartoDB' + }, + { + key: 'toner', + name: 'Toner', + url: 'https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', + attribution: '© OpenStreetMap contributors © Stamen Design' + }, + { + key: 'watercolor', + name: 'Watercolor', + url: 'https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg', + attribution: '© OpenStreetMap contributors © Stamen Design' + }, + { + key: 'opentopomap', + name: 'OpenTopoMap', + url: 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', + attribution: '© OpenStreetMap contributors' + }, + { + key: 'esriWorldImagery', + name: 'Esri World Imagery', + url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', + attribution: + 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community' + }, + { + key: 'esriWorldTopoMap', + name: 'Esri World Topo Map', + url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', + attribution: 'Tiles © Esri — Source: Esri, DeLorme, NAVTEQ' + }, + { + key: 'hikeBike', + name: 'Hike & Bike', + url: 'https://tiles.wmflabs.org/hikebike/{z}/{x}/{y}.png', + attribution: '© OpenStreetMap contributors' + } +] diff --git a/packages/map/src/components/LeafletMap/components/leaflet.styles.css b/packages/map/src/components/LeafletMap/components/leaflet.styles.css index b4530afef..501d89241 100644 --- a/packages/map/src/components/LeafletMap/components/leaflet.styles.css +++ b/packages/map/src/components/LeafletMap/components/leaflet.styles.css @@ -1,3 +1,7 @@ -.leaflet-control-attribution { +.leaflet-control-attribution:last-child { display: none; } + +.map-attribution { + display: unset !important; +} From 51cd7e258ca2213182ebefe47788f667775f95d3 Mon Sep 17 00:00:00 2001 From: Adam Doe <17502761+adamdoe@users.noreply.github.com> Date: Wed, 20 Nov 2024 14:27:49 -0800 Subject: [PATCH 04/10] [DEV-9325] Continue Map API Work --- packages/map/index.html | 1 + packages/map/package.json | 2 + packages/map/src/CdcMap.tsx | 2 + .../EditorPanel/components/EditorPanel.tsx | 61 ++------ yarn.lock | 143 ++++++++++++++++-- 5 files changed, 147 insertions(+), 62 deletions(-) diff --git a/packages/map/index.html b/packages/map/index.html index b74c4ea23..3ea7089f0 100644 --- a/packages/map/index.html +++ b/packages/map/index.html @@ -22,6 +22,7 @@ +
    diff --git a/packages/map/package.json b/packages/map/package.json index 7c4aba400..a96fd02f4 100644 --- a/packages/map/package.json +++ b/packages/map/package.json @@ -28,7 +28,9 @@ "@cdc/core": "^4.24.9-1", "@emotion/core": "^10.0.28", "@emotion/react": "^11.1.5", + "@googlemaps/markerclusterer": "^2.5.3", "@hello-pangea/dnd": "^16.2.0", + "@react-google-maps/api": "^2.20.3", "@visx/geo": "^1.13.0", "chroma": "0.0.1", "chroma-js": "^2.1.0", diff --git a/packages/map/src/CdcMap.tsx b/packages/map/src/CdcMap.tsx index 63d42b7ff..6762245ad 100644 --- a/packages/map/src/CdcMap.tsx +++ b/packages/map/src/CdcMap.tsx @@ -75,6 +75,7 @@ import NavigationMenu from './components/NavigationMenu' // Future: Lazy import UsaMap from './components/UsaMap' // Future: Lazy import WorldMap from './components/WorldMap' // Future: Lazy import LeafletMap from './components/LeafletMap' +import GoogleMap from './components/GoogleMap' import useTooltip from './hooks/useTooltip' import { isSolrCsv, isSolrJson } from '@cdc/core/helpers/isSolr' import SkipTo from '@cdc/core/components/elements/SkipTo' @@ -1848,6 +1849,7 @@ const CdcMap = ({ {'us-county' === geoType && } {'world' === geoType && } {'leaflet' === geoType && } + {'google-map' === geoType && } {'data' === general.type && logo && ( )} diff --git a/packages/map/src/components/EditorPanel/components/EditorPanel.tsx b/packages/map/src/components/EditorPanel/components/EditorPanel.tsx index 51b8d1dba..9ac28815f 100644 --- a/packages/map/src/components/EditorPanel/components/EditorPanel.tsx +++ b/packages/map/src/components/EditorPanel/components/EditorPanel.tsx @@ -1588,53 +1588,20 @@ const EditorPanel = ({ columnsRequiredChecker }) => { {/* Geography */} - + + {/**/} + + {/* Select > State or County Map */} {(state.general.geoType === 'us' || state.general.geoType === 'us-county') && (