@undp/data-viz 1.5.8 → 1.5.9

package/dist/GeoHubCompareMaps.js.map

@@ -1 +1 @@
-{"version":3,"file":"GeoHubCompareMaps.js","sources":["../src/Components/Graphs/Maps/GeoHubMaps/CompareMaps/Graph.tsx","../src/Components/Graphs/Maps/GeoHubMaps/CompareMaps/index.tsx"],"sourcesContent":["import { useRef, useEffect, useState } from 'react';\r\nimport * as maplibreGl from 'maplibre-gl';\r\nimport * as pmtiles from 'pmtiles';\r\nimport 'maplibre-gl/dist/maplibre-gl.css';\r\nimport { select } from 'd3-selection';\r\nimport {\r\n  DndContext,\r\n  useDraggable,\r\n  useSensor,\r\n  useSensors,\r\n  PointerSensor,\r\n  DragMoveEvent,\r\n} from '@dnd-kit/core';\r\nimport { restrictToHorizontalAxis } from '@dnd-kit/modifiers';\r\nimport React from 'react';\r\n\r\nimport { ChevronLeftRight, X } from '@/Components/Icons';\r\nimport { string2HTML } from '@/Utils/string2HTML';\r\n\r\ninterface Props {\r\n  width: number;\r\n  height: number;\r\n  mapStyles: [string, string];\r\n  center: [number, number];\r\n  mapLegend?: string | React.ReactNode;\r\n  zoomLevel: number;\r\n}\r\n\r\nfunction synchronizeMap(map1: maplibreGl.Map, map2: maplibreGl.Map) {\r\n  let isSyncing = false;\r\n  function syncMap(sourceMap: maplibreGl.Map, targetMap: maplibreGl.Map) {\r\n    if (!isSyncing) {\r\n      isSyncing = true;\r\n      const center = sourceMap.getCenter();\r\n      const zoom = sourceMap.getZoom();\r\n      const bearing = sourceMap.getBearing();\r\n      const pitch = sourceMap.getPitch();\r\n      targetMap.jumpTo({\r\n        center,\r\n        zoom,\r\n        bearing,\r\n        pitch,\r\n      });\r\n      isSyncing = false;\r\n    }\r\n  }\r\n\r\n  // Event listeners for map1\r\n  map1.on('move', () => {\r\n    syncMap(map1, map2);\r\n  });\r\n\r\n  // Event listeners for map2\r\n  map2.on('move', () => {\r\n    syncMap(map2, map1);\r\n  });\r\n}\r\n\r\nexport function Graph(props: Props) {\r\n  const { height, width, mapStyles, center, zoomLevel, mapLegend } = props;\r\n  const [position, setPosition] = useState(50);\r\n  const [isDragging, setIsDragging] = useState(false);\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const [showLegend, setShowLegend] = useState(true);\r\n  const dragStartPositionRef = useRef(50);\r\n  const sliderWidthRef = useRef(0);\r\n\r\n  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 0 } }));\r\n\r\n  const handleDragStart = () => {\r\n    setIsDragging(true);\r\n    dragStartPositionRef.current = position;\r\n\r\n    if (containerRef.current) {\r\n      sliderWidthRef.current = containerRef.current.getBoundingClientRect().width;\r\n    }\r\n  };\r\n\r\n  const handleDragMove = (event: DragMoveEvent) => {\r\n    if (!containerRef.current || sliderWidthRef.current === 0) return;\r\n\r\n    // Calculate position change as percentage of width\r\n    const deltaPercentage = (event.delta.x / sliderWidthRef.current) * 100;\r\n    const newPosition = Math.max(0, Math.min(100, dragStartPositionRef.current + deltaPercentage));\r\n\r\n    setPosition(newPosition);\r\n  };\r\n\r\n  const handleDragEnd = () => {\r\n    setIsDragging(false);\r\n  };\r\n\r\n  const handleClick = (e: React.MouseEvent) => {\r\n    if (isDragging || !containerRef.current) return;\r\n\r\n    const rect = containerRef.current.getBoundingClientRect();\r\n    const clickX = e.clientX - rect.left;\r\n    const newPosition = (clickX / rect.width) * 100;\r\n\r\n    setPosition(Math.max(0, Math.min(100, newPosition)));\r\n  };\r\n  const graphDiv = useRef<HTMLDivElement>(null);\r\n  const leftMapRef = useRef<HTMLDivElement>(null);\r\n  const rightMapRef = useRef<HTMLDivElement>(null);\r\n  const mapContainer = useRef<HTMLDivElement>(null);\r\n  useEffect(() => {\r\n    if (mapContainer.current && leftMapRef.current && rightMapRef.current && width) {\r\n      const mapDiv = select(mapContainer.current);\r\n      mapDiv.selectAll('.maplibregl-compare').remove();\r\n      const leftMapDiv = select(leftMapRef.current);\r\n      leftMapDiv.selectAll('div').remove();\r\n      const rightMapDiv = select(rightMapRef.current);\r\n      rightMapDiv.selectAll('div').remove();\r\n      const protocol = new pmtiles.Protocol();\r\n      maplibreGl.addProtocol('pmtiles', protocol.tile);\r\n      const leftMap = new maplibreGl.Map({\r\n        container: leftMapRef.current,\r\n        style: mapStyles[0],\r\n        center: center || [0, 0],\r\n        zoom: zoomLevel || 4,\r\n      });\r\n\r\n      const rightMap = new maplibreGl.Map({\r\n        container: rightMapRef.current,\r\n        style: mapStyles[1],\r\n        center: center || [0, 0],\r\n        zoom: zoomLevel || 4,\r\n      });\r\n      rightMap.addControl(\r\n        new maplibreGl.NavigationControl({\r\n          visualizePitch: true,\r\n          showZoom: true,\r\n          showCompass: true,\r\n        }),\r\n        'bottom-right',\r\n      );\r\n      leftMap.addControl(new maplibreGl.ScaleControl(), 'bottom-left');\r\n      leftMap.addControl(\r\n        new maplibreGl.NavigationControl({\r\n          visualizePitch: true,\r\n          showZoom: true,\r\n          showCompass: true,\r\n        }),\r\n        'bottom-right',\r\n      );\r\n      rightMap.addControl(new maplibreGl.ScaleControl(), 'bottom-left');\r\n      synchronizeMap(leftMap, rightMap);\r\n    }\r\n  }, [width, mapStyles, center, zoomLevel]);\r\n  return (\r\n    <div\r\n      className='flex flex-col grow justify-center leading-0'\r\n      ref={graphDiv}\r\n      aria-label='Map area'\r\n    >\r\n      <div\r\n        style={{\r\n          width,\r\n          height,\r\n        }}\r\n      >\r\n        <div\r\n          ref={mapContainer}\r\n          className='map maplibre-show-control relative w-full h-full'\r\n          style={{ inset: 0 }}\r\n        >\r\n          <DndContext\r\n            sensors={sensors}\r\n            modifiers={[restrictToHorizontalAxis]}\r\n            onDragStart={handleDragStart}\r\n            onDragMove={handleDragMove}\r\n            onDragEnd={handleDragEnd}\r\n          >\r\n            <div\r\n              ref={containerRef}\r\n              style={{\r\n                position: 'relative',\r\n                width,\r\n                height,\r\n                overflow: 'hidden',\r\n                cursor: isDragging ? 'grabbing' : 'col-resize',\r\n                userSelect: 'none', // Prevent text selection during drag\r\n              }}\r\n              onClick={handleClick}\r\n            >\r\n              <div\r\n                ref={rightMapRef}\r\n                className='absolute h-full rightMap w-full'\r\n                style={{\r\n                  position: 'absolute',\r\n                  top: 0,\r\n                  left: 0,\r\n                  clipPath: `polygon(${position}% 0%, ${position}% 100%, 100% 100%, 100% 0%)`,\r\n                }}\r\n              />\r\n              <div\r\n                ref={leftMapRef}\r\n                className='absolute h-full leftMap w-full'\r\n                style={{\r\n                  position: 'absolute',\r\n                  top: 0,\r\n                  left: 0,\r\n                  inset: 0,\r\n                  clipPath: `polygon(0% 0%, ${position}% 0%, ${position}% 100%, 0% 100%)`,\r\n                }}\r\n              />\r\n\r\n              <SliderHandle position={position} />\r\n            </div>\r\n          </DndContext>\r\n        </div>\r\n      </div>\r\n      {mapLegend ? (\r\n        <div className='absolute left-[22px] bottom-13'>\r\n          {showLegend ? (\r\n            <>\r\n              <div\r\n                style={{\r\n                  backgroundColor: 'rgba(240,240,240, 0.7)',\r\n                  border: '1px solid var(--gray-400)',\r\n                  borderRadius: '999px',\r\n                  width: '24px',\r\n                  height: '24px',\r\n                  padding: '3px',\r\n                  cursor: 'pointer',\r\n                  zIndex: 10,\r\n                  position: 'absolute',\r\n                  right: '-0.75rem',\r\n                  top: '-0.75rem',\r\n                }}\r\n                onClick={() => {\r\n                  setShowLegend(false);\r\n                }}\r\n              >\r\n                <X />\r\n              </div>\r\n              <div\r\n                className='p-2'\r\n                style={{\r\n                  backgroundColor: 'rgba(240,240,240, 0.7)',\r\n                }}\r\n                dangerouslySetInnerHTML={\r\n                  typeof mapLegend === 'string' ? { __html: string2HTML(mapLegend) } : undefined\r\n                }\r\n              >\r\n                {React.isValidElement(mapLegend) ? mapLegend : null}\r\n              </div>\r\n            </>\r\n          ) : (\r\n            <button\r\n              type='button'\r\n              className='mb-0 border-0 bg-transparent p-0 self-start'\r\n              onClick={() => {\r\n                setShowLegend(true);\r\n              }}\r\n            >\r\n              <div className='items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-550 border-primary-gray-400 dark:border-primary-gray-500'>\r\n                Show Legend\r\n              </div>\r\n            </button>\r\n          )}\r\n        </div>\r\n      ) : null}\r\n    </div>\r\n  );\r\n}\r\n\r\ninterface HandleProps {\r\n  position: number;\r\n}\r\n\r\nfunction SliderHandle(props: HandleProps) {\r\n  const { position } = props;\r\n  const { attributes, listeners, setNodeRef } = useDraggable({ id: 'slider-handle' });\r\n\r\n  return (\r\n    <div\r\n      ref={setNodeRef}\r\n      style={{\r\n        position: 'absolute',\r\n        left: `${position}%`,\r\n        top: 0,\r\n        bottom: 0,\r\n        width: '40px',\r\n        transform: 'translateX(-50%)',\r\n        cursor: 'col-resize',\r\n        display: 'flex',\r\n        justifyContent: 'center',\r\n        alignItems: 'center',\r\n        zIndex: 10,\r\n        touchAction: 'none',\r\n      }}\r\n      {...listeners}\r\n      {...attributes}\r\n    >\r\n      <div\r\n        className='h-full bg-primary-blue-600 dark:bg-primary-blue-400'\r\n        style={{ width: '2px' }}\r\n      />\r\n      <div\r\n        className='flex bg-primary-blue-600 dark:bg-primary-blue-400 rounded-full absolute items-center justify-center text-primary-white font-primary-white'\r\n        style={{\r\n          boxShadow: 'inset 0 0 0 1px #fff',\r\n          width: '42px',\r\n          height: '42px',\r\n          top: 'calc(50% - 21px)',\r\n          left: '0',\r\n          cursor: 'col-resize',\r\n        }}\r\n      >\r\n        <ChevronLeftRight />\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n","import { useRef, useEffect, useState } from 'react';\r\nimport { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { Graph } from './Graph';\r\n\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport { ClassNameObject, Languages, SourcesDataType, StyleObject } from '@/Types';\r\n\r\ninterface Props {\r\n  // Titles, Labels, and Sources\r\n  /** Title of the graph */\r\n  graphTitle?: string | React.ReactNode;\r\n  /** Description of the graph */\r\n  graphDescription?: string | React.ReactNode;\r\n  /** Footnote for the graph */\r\n  footNote?: string | React.ReactNode;\r\n  /** Source data for the graph */\r\n  sources?: SourcesDataType[];\r\n  /** Accessibility label */\r\n  ariaLabel?: string;\r\n\r\n  // Colors and Styling\r\n  /** Background color of the graph */\r\n  backgroundColor?: string | boolean;\r\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\r\n  styles?: StyleObject;\r\n  /** Custom class names */\r\n  classNames?: ClassNameObject;\r\n\r\n  // Size and Spacing\r\n  /** Width of the graph */\r\n  width?: number;\r\n  /** Height of the graph */\r\n  height?: number;\r\n  /** Minimum height of the graph */\r\n  minHeight?: number;\r\n  /** Relative height scaling factor. This overwrites the height props */\r\n  relativeHeight?: number;\r\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\r\n  padding?: string;\r\n\r\n  // Graph Parameters\r\n  /** URLs for mapStyles JSON user wants to compare  */\r\n  mapStyles: [string, string];\r\n  /** Defines the legend for the map. mapLegend with type string is show as innerHTML. */\r\n  mapLegend?: string | React.ReactNode;\r\n  /** Starting center point of the map */\r\n  center?: [number, number];\r\n  /** Starting zoom level of the map */\r\n  zoomLevel?: number;\r\n\r\n  // Configuration and Options\r\n  /** Language setting  */\r\n  language?: Languages;\r\n  /** Color theme */\r\n  theme?: 'light' | 'dark';\r\n  /** Unique ID for the graph */\r\n  graphID?: string;\r\n}\r\n\r\n/** For using these maps you will have to install [`maplibre`](https://maplibre.org/maplibre-gl-js/docs/#npm), [pmtiles](https://www.npmjs.com/package/pmtiles), [dnd-kit/core](https://www.npmjs.com/package/@dnd-kit/core), and [dnd-kit/modifier](https://www.npmjs.com/package/@dnd-kit/modifiers) package to your project */\r\nexport function GeoHubCompareMaps(props: Props) {\r\n  const {\r\n    graphTitle,\r\n    height,\r\n    width,\r\n    relativeHeight,\r\n    sources,\r\n    graphDescription,\r\n    footNote,\r\n    padding,\r\n    backgroundColor = false,\r\n    graphID,\r\n    mapStyles,\r\n    center = [0, 0],\r\n    zoomLevel = 3,\r\n    language = 'en',\r\n    minHeight = 0,\r\n    theme = 'light',\r\n    ariaLabel,\r\n    styles,\r\n    classNames,\r\n    mapLegend,\r\n  } = props;\r\n  const [svgWidth, setSvgWidth] = useState(0);\r\n  const [svgHeight, setSvgHeight] = useState(0);\r\n  const graphDiv = useRef<HTMLDivElement>(null);\r\n  useEffect(() => {\r\n    const resizeObserver = new ResizeObserver(entries => {\r\n      setSvgWidth(width || entries[0].target.clientWidth || 620);\r\n      setSvgHeight(height || entries[0].target.clientHeight || 480);\r\n    });\r\n    if (graphDiv.current) {\r\n      setSvgHeight(graphDiv.current.clientHeight || 480);\r\n      setSvgWidth(graphDiv.current.clientWidth || 620);\r\n      if (!width) resizeObserver.observe(graphDiv.current);\r\n    }\r\n    return () => resizeObserver.disconnect();\r\n  }, [width, height]);\r\n  return (\r\n    <div\r\n      className={`${theme || 'light'} flex  ${width ? 'w-fit grow-0' : 'w-full grow'}`}\r\n      dir={language === 'he' || language === 'ar' ? 'rtl' : undefined}\r\n    >\r\n      <div\r\n        className={cn(\r\n          `${\r\n            !backgroundColor\r\n              ? 'bg-transparent '\r\n              : backgroundColor === true\r\n                ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n                : ''\r\n          }ml-auto mr-auto flex flex-col grow h-inherit ${language || 'en'}`,\r\n          width ? 'w-fit' : 'w-full',\r\n          classNames?.graphContainer,\r\n        )}\r\n        style={{\r\n          ...(styles?.graphContainer || {}),\r\n          ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\r\n        }}\r\n        id={graphID}\r\n        aria-label={\r\n          ariaLabel ||\r\n          `${\r\n            graphTitle ? `The graph shows ${graphTitle}. ` : ''\r\n          }This is a comparison between two maps.${graphDescription ? ` ${graphDescription}` : ''}`\r\n        }\r\n      >\r\n        <div\r\n          className='flex grow'\r\n          style={{ padding: backgroundColor ? padding || '1rem' : padding || 0 }}\r\n        >\r\n          <div className='flex flex-col w-full gap-4 grow justify-between'>\r\n            {graphTitle || graphDescription ? (\r\n              <GraphHeader\r\n                styles={{\r\n                  title: styles?.title,\r\n                  description: styles?.description,\r\n                }}\r\n                classNames={{\r\n                  title: classNames?.title,\r\n                  description: classNames?.description,\r\n                }}\r\n                graphTitle={graphTitle}\r\n                graphDescription={graphDescription}\r\n                width={width}\r\n              />\r\n            ) : null}\r\n            <div\r\n              className='flex flex-col grow justify-center leading-0'\r\n              ref={graphDiv}\r\n              aria-label='map area'\r\n            >\r\n              {(width || svgWidth) && (height || svgHeight) ? (\r\n                <Graph\r\n                  width={width || svgWidth}\r\n                  height={Math.max(\r\n                    minHeight,\r\n                    height ||\r\n                      (relativeHeight\r\n                        ? minHeight\r\n                          ? (width || svgWidth) * relativeHeight > minHeight\r\n                            ? (width || svgWidth) * relativeHeight\r\n                            : minHeight\r\n                          : (width || svgWidth) * relativeHeight\r\n                        : svgHeight),\r\n                  )}\r\n                  mapStyles={mapStyles}\r\n                  center={center}\r\n                  zoomLevel={zoomLevel}\r\n                  mapLegend={mapLegend}\r\n                />\r\n              ) : null}\r\n            </div>\r\n            {sources || footNote ? (\r\n              <GraphFooter\r\n                styles={{ footnote: styles?.footnote, source: styles?.source }}\r\n                classNames={{\r\n                  footnote: classNames?.footnote,\r\n                  source: classNames?.source,\r\n                }}\r\n                sources={sources}\r\n                footNote={footNote}\r\n                width={width}\r\n              />\r\n            ) : null}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["synchronizeMap","map1","map2","isSyncing","syncMap","sourceMap","targetMap","center","zoom","bearing","pitch","Graph","props","height","width","mapStyles","zoomLevel","mapLegend","position","setPosition","useState","isDragging","setIsDragging","containerRef","useRef","showLegend","setShowLegend","dragStartPositionRef","sliderWidthRef","sensors","useSensors","useSensor","PointerSensor","handleDragStart","handleDragMove","event","deltaPercentage","newPosition","handleDragEnd","handleClick","e","rect","graphDiv","leftMapRef","rightMapRef","mapContainer","useEffect","select","protocol","pmtiles","maplibreGl","leftMap","rightMap","jsxs","jsx","DndContext","restrictToHorizontalAxis","SliderHandle","Fragment","X","string2HTML","React","attributes","listeners","setNodeRef","useDraggable","ChevronLeftRight","GeoHubCompareMaps","graphTitle","relativeHeight","sources","graphDescription","footNote","padding","backgroundColor","graphID","language","minHeight","theme","ariaLabel","styles","classNames","svgWidth","setSvgWidth","svgHeight","setSvgHeight","resizeObserver","entries","cn","GraphHeader","GraphFooter"],"mappings":"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"}
+{"version":3,"file":"GeoHubCompareMaps.js","sources":["../src/Components/Graphs/Maps/GeoHubMaps/CompareMaps/Graph.tsx","../src/Components/Graphs/Maps/GeoHubMaps/CompareMaps/index.tsx"],"sourcesContent":["import { useRef, useEffect, useState } from 'react';\r\nimport * as maplibreGl from 'maplibre-gl';\r\nimport * as pmtiles from 'pmtiles';\r\nimport 'maplibre-gl/dist/maplibre-gl.css';\r\nimport { select } from 'd3-selection';\r\nimport {\r\n  DndContext,\r\n  useDraggable,\r\n  useSensor,\r\n  useSensors,\r\n  PointerSensor,\r\n  DragMoveEvent,\r\n} from '@dnd-kit/core';\r\nimport { restrictToHorizontalAxis } from '@dnd-kit/modifiers';\r\nimport React from 'react';\r\n\r\nimport { ChevronLeftRight, X } from '@/Components/Icons';\r\nimport { string2HTML } from '@/Utils/string2HTML';\r\n\r\ninterface Props {\r\n  width: number;\r\n  height: number;\r\n  mapStyles: [string, string];\r\n  center: [number, number];\r\n  mapLegend?: string | React.ReactNode;\r\n  zoomLevel: number;\r\n}\r\n\r\nfunction synchronizeMap(map1: maplibreGl.Map, map2: maplibreGl.Map) {\r\n  let isSyncing = false;\r\n  function syncMap(sourceMap: maplibreGl.Map, targetMap: maplibreGl.Map) {\r\n    if (!isSyncing) {\r\n      isSyncing = true;\r\n      const center = sourceMap.getCenter();\r\n      const zoom = sourceMap.getZoom();\r\n      const bearing = sourceMap.getBearing();\r\n      const pitch = sourceMap.getPitch();\r\n      targetMap.jumpTo({\r\n        center,\r\n        zoom,\r\n        bearing,\r\n        pitch,\r\n      });\r\n      isSyncing = false;\r\n    }\r\n  }\r\n\r\n  // Event listeners for map1\r\n  map1.on('move', () => {\r\n    syncMap(map1, map2);\r\n  });\r\n\r\n  // Event listeners for map2\r\n  map2.on('move', () => {\r\n    syncMap(map2, map1);\r\n  });\r\n}\r\n\r\nexport function Graph(props: Props) {\r\n  const { height, width, mapStyles, center, zoomLevel, mapLegend } = props;\r\n  const [position, setPosition] = useState(50);\r\n  const [isDragging, setIsDragging] = useState(false);\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const [showLegend, setShowLegend] = useState(true);\r\n  const dragStartPositionRef = useRef(50);\r\n  const sliderWidthRef = useRef(0);\r\n\r\n  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 0 } }));\r\n\r\n  const handleDragStart = () => {\r\n    setIsDragging(true);\r\n    dragStartPositionRef.current = position;\r\n\r\n    if (containerRef.current) {\r\n      sliderWidthRef.current = containerRef.current.getBoundingClientRect().width;\r\n    }\r\n  };\r\n\r\n  const handleDragMove = (event: DragMoveEvent) => {\r\n    if (!containerRef.current || sliderWidthRef.current === 0) return;\r\n\r\n    // Calculate position change as percentage of width\r\n    const deltaPercentage = (event.delta.x / sliderWidthRef.current) * 100;\r\n    const newPosition = Math.max(0, Math.min(100, dragStartPositionRef.current + deltaPercentage));\r\n\r\n    setPosition(newPosition);\r\n  };\r\n\r\n  const handleDragEnd = () => {\r\n    setIsDragging(false);\r\n  };\r\n\r\n  const handleClick = (e: React.MouseEvent) => {\r\n    if (isDragging || !containerRef.current) return;\r\n\r\n    const rect = containerRef.current.getBoundingClientRect();\r\n    const clickX = e.clientX - rect.left;\r\n    const newPosition = (clickX / rect.width) * 100;\r\n\r\n    setPosition(Math.max(0, Math.min(100, newPosition)));\r\n  };\r\n  const graphDiv = useRef<HTMLDivElement>(null);\r\n  const leftMapRef = useRef<HTMLDivElement>(null);\r\n  const rightMapRef = useRef<HTMLDivElement>(null);\r\n  const mapContainer = useRef<HTMLDivElement>(null);\r\n  useEffect(() => {\r\n    if (mapContainer.current && leftMapRef.current && rightMapRef.current && width) {\r\n      const mapDiv = select(mapContainer.current);\r\n      mapDiv.selectAll('.maplibregl-compare').remove();\r\n      const leftMapDiv = select(leftMapRef.current);\r\n      leftMapDiv.selectAll('div').remove();\r\n      const rightMapDiv = select(rightMapRef.current);\r\n      rightMapDiv.selectAll('div').remove();\r\n      const protocol = new pmtiles.Protocol();\r\n      maplibreGl.addProtocol('pmtiles', protocol.tile);\r\n      const leftMap = new maplibreGl.Map({\r\n        container: leftMapRef.current,\r\n        style: mapStyles[0],\r\n        center: center || [0, 0],\r\n        zoom: zoomLevel || 4,\r\n      });\r\n\r\n      const rightMap = new maplibreGl.Map({\r\n        container: rightMapRef.current,\r\n        style: mapStyles[1],\r\n        center: center || [0, 0],\r\n        zoom: zoomLevel || 4,\r\n      });\r\n      rightMap.addControl(\r\n        new maplibreGl.NavigationControl({\r\n          visualizePitch: true,\r\n          showZoom: true,\r\n          showCompass: true,\r\n        }),\r\n        'bottom-right',\r\n      );\r\n      leftMap.addControl(new maplibreGl.ScaleControl(), 'bottom-left');\r\n      leftMap.addControl(\r\n        new maplibreGl.NavigationControl({\r\n          visualizePitch: true,\r\n          showZoom: true,\r\n          showCompass: true,\r\n        }),\r\n        'bottom-right',\r\n      );\r\n      rightMap.addControl(new maplibreGl.ScaleControl(), 'bottom-left');\r\n      synchronizeMap(leftMap, rightMap);\r\n    }\r\n  }, [width, mapStyles, center, zoomLevel]);\r\n  return (\r\n    <div\r\n      className='flex flex-col grow justify-center leading-0'\r\n      ref={graphDiv}\r\n      aria-label='Map area'\r\n    >\r\n      <div\r\n        style={{\r\n          width,\r\n          height,\r\n        }}\r\n      >\r\n        <div\r\n          ref={mapContainer}\r\n          className='map maplibre-show-control relative w-full h-full'\r\n          style={{ inset: 0 }}\r\n        >\r\n          <DndContext\r\n            sensors={sensors}\r\n            modifiers={[restrictToHorizontalAxis]}\r\n            onDragStart={handleDragStart}\r\n            onDragMove={handleDragMove}\r\n            onDragEnd={handleDragEnd}\r\n          >\r\n            <div\r\n              ref={containerRef}\r\n              style={{\r\n                position: 'relative',\r\n                width,\r\n                height,\r\n                overflow: 'hidden',\r\n                cursor: isDragging ? 'grabbing' : 'col-resize',\r\n                userSelect: 'none', // Prevent text selection during drag\r\n              }}\r\n              onClick={handleClick}\r\n            >\r\n              <div\r\n                ref={rightMapRef}\r\n                className='absolute h-full rightMap w-full'\r\n                style={{\r\n                  position: 'absolute',\r\n                  top: 0,\r\n                  left: 0,\r\n                  clipPath: `polygon(${position}% 0%, ${position}% 100%, 100% 100%, 100% 0%)`,\r\n                }}\r\n              />\r\n              <div\r\n                ref={leftMapRef}\r\n                className='absolute h-full leftMap w-full'\r\n                style={{\r\n                  position: 'absolute',\r\n                  top: 0,\r\n                  left: 0,\r\n                  inset: 0,\r\n                  clipPath: `polygon(0% 0%, ${position}% 0%, ${position}% 100%, 0% 100%)`,\r\n                }}\r\n              />\r\n\r\n              <SliderHandle position={position} />\r\n            </div>\r\n          </DndContext>\r\n        </div>\r\n      </div>\r\n      {mapLegend ? (\r\n        <div className='absolute left-[22px] bottom-13'>\r\n          {showLegend ? (\r\n            <>\r\n              <div\r\n                className='color-legend-close-button bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)] border border-[var(--gray-400)] rounded-full w-6 h-6 p-[3px] cursor-pointer z-10 absolute right-[-0.75rem] top-[-0.75rem]'\r\n                onClick={() => {\r\n                  setShowLegend(false);\r\n                }}\r\n              >\r\n                <X />\r\n              </div>\r\n              <div\r\n                className='color-legend-box p-2 bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)]'\r\n                dangerouslySetInnerHTML={\r\n                  typeof mapLegend === 'string' ? { __html: string2HTML(mapLegend) } : undefined\r\n                }\r\n              >\r\n                {React.isValidElement(mapLegend) ? mapLegend : null}\r\n              </div>\r\n            </>\r\n          ) : (\r\n            <button\r\n              type='button'\r\n              className='mb-0 border-0 bg-transparent p-0 self-start'\r\n              onClick={() => {\r\n                setShowLegend(true);\r\n              }}\r\n            >\r\n              <div className='show-color-legend-button items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-600 border-primary-gray-400 dark:border-primary-gray-500'>\r\n                Show Legend\r\n              </div>\r\n            </button>\r\n          )}\r\n        </div>\r\n      ) : null}\r\n    </div>\r\n  );\r\n}\r\n\r\ninterface HandleProps {\r\n  position: number;\r\n}\r\n\r\nfunction SliderHandle(props: HandleProps) {\r\n  const { position } = props;\r\n  const { attributes, listeners, setNodeRef } = useDraggable({ id: 'slider-handle' });\r\n\r\n  return (\r\n    <div\r\n      ref={setNodeRef}\r\n      style={{\r\n        position: 'absolute',\r\n        left: `${position}%`,\r\n        top: 0,\r\n        bottom: 0,\r\n        width: '40px',\r\n        transform: 'translateX(-50%)',\r\n        cursor: 'col-resize',\r\n        display: 'flex',\r\n        justifyContent: 'center',\r\n        alignItems: 'center',\r\n        zIndex: 10,\r\n        touchAction: 'none',\r\n      }}\r\n      {...listeners}\r\n      {...attributes}\r\n    >\r\n      <div\r\n        className='h-full bg-primary-blue-600 dark:bg-primary-blue-400'\r\n        style={{ width: '2px' }}\r\n      />\r\n      <div\r\n        className='flex bg-primary-blue-600 dark:bg-primary-blue-400 rounded-full absolute items-center justify-center text-primary-white font-primary-white'\r\n        style={{\r\n          boxShadow: 'inset 0 0 0 1px #fff',\r\n          width: '42px',\r\n          height: '42px',\r\n          top: 'calc(50% - 21px)',\r\n          left: '0',\r\n          cursor: 'col-resize',\r\n        }}\r\n      >\r\n        <ChevronLeftRight />\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n","import { useRef, useEffect, useState } from 'react';\r\nimport { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { Graph } from './Graph';\r\n\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport { ClassNameObject, Languages, SourcesDataType, StyleObject } from '@/Types';\r\n\r\ninterface Props {\r\n  // Titles, Labels, and Sources\r\n  /** Title of the graph */\r\n  graphTitle?: string | React.ReactNode;\r\n  /** Description of the graph */\r\n  graphDescription?: string | React.ReactNode;\r\n  /** Footnote for the graph */\r\n  footNote?: string | React.ReactNode;\r\n  /** Source data for the graph */\r\n  sources?: SourcesDataType[];\r\n  /** Accessibility label */\r\n  ariaLabel?: string;\r\n\r\n  // Colors and Styling\r\n  /** Background color of the graph */\r\n  backgroundColor?: string | boolean;\r\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\r\n  styles?: StyleObject;\r\n  /** Custom class names */\r\n  classNames?: ClassNameObject;\r\n\r\n  // Size and Spacing\r\n  /** Width of the graph */\r\n  width?: number;\r\n  /** Height of the graph */\r\n  height?: number;\r\n  /** Minimum height of the graph */\r\n  minHeight?: number;\r\n  /** Relative height scaling factor. This overwrites the height props */\r\n  relativeHeight?: number;\r\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\r\n  padding?: string;\r\n\r\n  // Graph Parameters\r\n  /** URLs for mapStyles JSON user wants to compare  */\r\n  mapStyles: [string, string];\r\n  /** Defines the legend for the map. mapLegend with type string is show as innerHTML. */\r\n  mapLegend?: string | React.ReactNode;\r\n  /** Starting center point of the map */\r\n  center?: [number, number];\r\n  /** Starting zoom level of the map */\r\n  zoomLevel?: number;\r\n\r\n  // Configuration and Options\r\n  /** Language setting  */\r\n  language?: Languages;\r\n  /** Color theme */\r\n  theme?: 'light' | 'dark';\r\n  /** Unique ID for the graph */\r\n  graphID?: string;\r\n}\r\n\r\n/** For using these maps you will have to install [`maplibre`](https://maplibre.org/maplibre-gl-js/docs/#npm), [pmtiles](https://www.npmjs.com/package/pmtiles), [dnd-kit/core](https://www.npmjs.com/package/@dnd-kit/core), and [dnd-kit/modifier](https://www.npmjs.com/package/@dnd-kit/modifiers) package to your project */\r\nexport function GeoHubCompareMaps(props: Props) {\r\n  const {\r\n    graphTitle,\r\n    height,\r\n    width,\r\n    relativeHeight,\r\n    sources,\r\n    graphDescription,\r\n    footNote,\r\n    padding,\r\n    backgroundColor = false,\r\n    graphID,\r\n    mapStyles,\r\n    center = [0, 0],\r\n    zoomLevel = 3,\r\n    language = 'en',\r\n    minHeight = 0,\r\n    theme = 'light',\r\n    ariaLabel,\r\n    styles,\r\n    classNames,\r\n    mapLegend,\r\n  } = props;\r\n  const [svgWidth, setSvgWidth] = useState(0);\r\n  const [svgHeight, setSvgHeight] = useState(0);\r\n  const graphDiv = useRef<HTMLDivElement>(null);\r\n  useEffect(() => {\r\n    const resizeObserver = new ResizeObserver(entries => {\r\n      setSvgWidth(width || entries[0].target.clientWidth || 620);\r\n      setSvgHeight(height || entries[0].target.clientHeight || 480);\r\n    });\r\n    if (graphDiv.current) {\r\n      setSvgHeight(graphDiv.current.clientHeight || 480);\r\n      setSvgWidth(graphDiv.current.clientWidth || 620);\r\n      if (!width) resizeObserver.observe(graphDiv.current);\r\n    }\r\n    return () => resizeObserver.disconnect();\r\n  }, [width, height]);\r\n  return (\r\n    <div\r\n      className={`${theme || 'light'} flex  ${width ? 'w-fit grow-0' : 'w-full grow'}`}\r\n      dir={language === 'he' || language === 'ar' ? 'rtl' : undefined}\r\n    >\r\n      <div\r\n        className={cn(\r\n          `${\r\n            !backgroundColor\r\n              ? 'bg-transparent '\r\n              : backgroundColor === true\r\n                ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n                : ''\r\n          }ml-auto mr-auto flex flex-col grow h-inherit ${language || 'en'}`,\r\n          width ? 'w-fit' : 'w-full',\r\n          classNames?.graphContainer,\r\n        )}\r\n        style={{\r\n          ...(styles?.graphContainer || {}),\r\n          ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\r\n        }}\r\n        id={graphID}\r\n        aria-label={\r\n          ariaLabel ||\r\n          `${\r\n            graphTitle ? `The graph shows ${graphTitle}. ` : ''\r\n          }This is a comparison between two maps.${graphDescription ? ` ${graphDescription}` : ''}`\r\n        }\r\n      >\r\n        <div\r\n          className='flex grow'\r\n          style={{ padding: backgroundColor ? padding || '1rem' : padding || 0 }}\r\n        >\r\n          <div className='flex flex-col w-full gap-4 grow justify-between'>\r\n            {graphTitle || graphDescription ? (\r\n              <GraphHeader\r\n                styles={{\r\n                  title: styles?.title,\r\n                  description: styles?.description,\r\n                }}\r\n                classNames={{\r\n                  title: classNames?.title,\r\n                  description: classNames?.description,\r\n                }}\r\n                graphTitle={graphTitle}\r\n                graphDescription={graphDescription}\r\n                width={width}\r\n              />\r\n            ) : null}\r\n            <div\r\n              className='flex flex-col grow justify-center leading-0'\r\n              ref={graphDiv}\r\n              aria-label='map area'\r\n            >\r\n              {(width || svgWidth) && (height || svgHeight) ? (\r\n                <Graph\r\n                  width={width || svgWidth}\r\n                  height={Math.max(\r\n                    minHeight,\r\n                    height ||\r\n                      (relativeHeight\r\n                        ? minHeight\r\n                          ? (width || svgWidth) * relativeHeight > minHeight\r\n                            ? (width || svgWidth) * relativeHeight\r\n                            : minHeight\r\n                          : (width || svgWidth) * relativeHeight\r\n                        : svgHeight),\r\n                  )}\r\n                  mapStyles={mapStyles}\r\n                  center={center}\r\n                  zoomLevel={zoomLevel}\r\n                  mapLegend={mapLegend}\r\n                />\r\n              ) : null}\r\n            </div>\r\n            {sources || footNote ? (\r\n              <GraphFooter\r\n                styles={{ footnote: styles?.footnote, source: styles?.source }}\r\n                classNames={{\r\n                  footnote: classNames?.footnote,\r\n                  source: classNames?.source,\r\n                }}\r\n                sources={sources}\r\n                footNote={footNote}\r\n                width={width}\r\n              />\r\n            ) : null}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["synchronizeMap","map1","map2","isSyncing","syncMap","sourceMap","targetMap","center","zoom","bearing","pitch","Graph","props","height","width","mapStyles","zoomLevel","mapLegend","position","setPosition","useState","isDragging","setIsDragging","containerRef","useRef","showLegend","setShowLegend","dragStartPositionRef","sliderWidthRef","sensors","useSensors","useSensor","PointerSensor","handleDragStart","handleDragMove","event","deltaPercentage","newPosition","handleDragEnd","handleClick","e","rect","graphDiv","leftMapRef","rightMapRef","mapContainer","useEffect","select","protocol","pmtiles","maplibreGl","leftMap","rightMap","jsxs","jsx","DndContext","restrictToHorizontalAxis","SliderHandle","Fragment","X","string2HTML","React","attributes","listeners","setNodeRef","useDraggable","ChevronLeftRight","GeoHubCompareMaps","graphTitle","relativeHeight","sources","graphDescription","footNote","padding","backgroundColor","graphID","language","minHeight","theme","ariaLabel","styles","classNames","svgWidth","setSvgWidth","svgHeight","setSvgHeight","resizeObserver","entries","cn","GraphHeader","GraphFooter"],"mappings":"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"}

package/dist/GeoHubMap.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CHPV5EwG-DDoeWRVt.cjs"),s=require("react"),O=require("./DropdownSelect-DBDM64B5.cjs"),R=require("maplibre-gl"),T=require("pmtiles");;/* empty css                       */const N=require("./fetchAndParseData-Ba-_CgxS.cjs"),L=require("./filterData-BoYadk0l.cjs"),D=require("./index-BW_-wD2k.cjs"),z=require("./string2HTML-z7CwHXcx.cjs"),P=require("./select-Bnfk0lJx.cjs"),W=require("./GraphHeader.cjs"),$=require("./GraphFooter.cjs");function A(h){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const n in h)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(h,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:()=>h[n]})}}return t.default=h,Object.freeze(t)}const q=A(T);function _(h){const{mapStyle:t,height:n,width:r,relativeHeight:a,center:b,zoomLevel:j,minHeight:u,includeLayers:p,excludeLayers:g,mapLegend:i}=h,[o,w]=s.useState(0),[E,f]=s.useState(0),[H,S]=s.useState(!0),d=s.useRef(null),x=s.useRef(null),l=s.useRef(null);return s.useEffect(()=>{const c=new ResizeObserver(m=>{w(r||m[0].target.clientWidth||620),f(n||m[0].target.clientHeight||480)});return d.current&&(f(d.current.clientHeight||480),w(d.current.clientWidth||620),r||c.observe(d.current)),()=>c.disconnect()},[r,n]),s.useEffect(()=>{x.current&&o&&!l.current&&N.fetchAndParseJSON(t).then(c=>{P.select(x.current).selectAll("div").remove();const y=new q.Protocol;R.addProtocol("pmtiles",y.tile);const v={container:x.current,style:p.length===0&&g.length===0?c:{...c,layers:L.filterData(c.layers,[{column:"id",includeValues:p,excludeValues:g}])},attributionControl:!0};b&&(v.center=b),j&&(v.zoom=j),l.current=new R.Map(v),l.current.addControl(new R.NavigationControl({visualizePitch:!0,showZoom:!0,showCompass:!0}),"bottom-right"),l.current.addControl(new R.ScaleControl,"bottom-left")})},[o,b,j,p,g,t]),s.useEffect(()=>{l.current&&N.fetchAndParseJSON(t).then(c=>{const m={...c,layers:L.filterData(c.layers,[{column:"id",includeValues:p,excludeValues:g}])};l.current.setStyle(m)})},[g,p,t]),e.jsxRuntimeExports.jsx("div",{className:"flex flex-col grow justify-center leading-0",ref:d,"aria-label":"Map area",children:(r||o)&&(n||E)?e.jsxRuntimeExports.jsxs("div",{style:{width:r||o,height:Math.max(u,n||(a?u?(r||o)*a>u?(r||o)*a:u:(r||o)*a:E))},children:[e.jsxRuntimeExports.jsx("div",{ref:x,className:"map maplibre-show-control",style:{width:"100%",height:"100%"}}),i?e.jsxRuntimeExports.jsx("div",{className:"absolute left-[22px] bottom-13",children:H?e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx("div",{style:{backgroundColor:"rgba(240,240,240, 0.7)",border:"1px solid var(--gray-400)",borderRadius:"999px",width:"24px",height:"24px",padding:"3px",cursor:"pointer",zIndex:10,position:"absolute",right:"-0.75rem",top:"-0.75rem"},onClick:()=>{S(!1)},children:e.jsxRuntimeExports.jsx(D.X,{})}),e.jsxRuntimeExports.jsx("div",{className:"p-2",style:{backgroundColor:"rgba(240,240,240, 0.7)"},dangerouslySetInnerHTML:typeof i=="string"?{__html:z.string2HTML(i)}:void 0,children:s.isValidElement(i)?i:null})]}):e.jsxRuntimeExports.jsx("button",{type:"button",className:"mb-0 border-0 bg-transparent p-0 self-start",onClick:()=>{S(!0)},children:e.jsxRuntimeExports.jsx("div",{className:"items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-550 border-primary-gray-400 dark:border-primary-gray-500",children:"Show Legend"})})}):null]}):null})}function I(h){const{mapStyle:t,height:n,width:r,relativeHeight:a,center:b,zoomLevel:j,minHeight:u,includeLayers:p,excludeLayers:g,mapLegend:i}=h,[o,w]=s.useState(0),[E,f]=s.useState(0),[H,S]=s.useState(!0),d=s.useRef(null),x=s.useRef(null);return s.useEffect(()=>{const l=new ResizeObserver(c=>{w(r||c[0].target.clientWidth||620),f(n||c[0].target.clientHeight||480)});return d.current&&(f(d.current.clientHeight||480),w(d.current.clientWidth||620),r||l.observe(d.current)),()=>l.disconnect()},[r,n]),s.useEffect(()=>{x.current&&o&&N.fetchAndParseJSON(t).then(l=>{P.select(x.current).selectAll("div").remove();const m=new q.Protocol;R.addProtocol("pmtiles",m.tile);const y={container:x.current,style:p.length===0&&g.length===0?l:{...l,layers:L.filterData(l.layers,[{column:"id",includeValues:p,excludeValues:g}])},attributionControl:!0};b&&(y.center=b),j&&(y.zoom=j);const v=new R.Map(y);v.addControl(new R.NavigationControl({visualizePitch:!0,showZoom:!0,showCompass:!0}),"bottom-right"),v.addControl(new R.ScaleControl,"bottom-left")})},[o,t,b,j,p,g]),e.jsxRuntimeExports.jsx("div",{className:"flex flex-col grow justify-center leading-0",ref:d,"aria-label":"Map area",children:(r||o)&&(n||E)?e.jsxRuntimeExports.jsxs("div",{style:{width:r||o,height:Math.max(u,n||(a?u?(r||o)*a>u?(r||o)*a:u:(r||o)*a:E))},children:[e.jsxRuntimeExports.jsx("div",{ref:x,className:"map maplibre-show-control",style:{width:"100%",height:"100%"}}),i?e.jsxRuntimeExports.jsx("div",{className:"absolute left-[22px] bottom-13",children:H?e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx("div",{style:{backgroundColor:"rgba(240,240,240, 0.7)",border:"1px solid var(--gray-400)",borderRadius:"999px",width:"24px",height:"24px",padding:"3px",cursor:"pointer",zIndex:10,position:"absolute",right:"-0.75rem",top:"-0.75rem"},onClick:()=>{S(!1)},children:e.jsxRuntimeExports.jsx(D.X,{})}),e.jsxRuntimeExports.jsx("div",{className:"p-2",style:{backgroundColor:"rgba(240,240,240, 0.7)"},dangerouslySetInnerHTML:typeof i=="string"?{__html:z.string2HTML(i)}:void 0,children:s.isValidElement(i)?i:null})]}):e.jsxRuntimeExports.jsx("button",{type:"button",className:"mb-0 border-0 bg-transparent p-0 self-start",onClick:()=>{S(!0)},children:e.jsxRuntimeExports.jsx("div",{className:"items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-550 border-primary-gray-400 dark:border-primary-gray-500",children:"Show Legend"})})}):null]}):null})}function F(h){const{mapStyle:t,graphTitle:n,height:r,width:a,relativeHeight:b,sources:j,graphDescription:u,footNote:p,padding:g,backgroundColor:i=!1,center:o,zoomLevel:w,graphID:E,language:f="en",minHeight:H=0,theme:S="light",includeLayers:d=[],excludeLayers:x=[],ariaLabel:l,uiMode:c="normal",styles:m,classNames:y,mapLegend:v}=h,[M,k]=s.useState(typeof t=="string"?t:t[0].style);s.useEffect(()=>{k(typeof t=="string"?t:t[0].style)},[t]);const V=s.useMemo(()=>({ignoreCase:!0,ignoreAccents:!0,trim:!0}),[]);return e.jsxRuntimeExports.jsx("div",{className:`${S||"light"} flex  ${a?"w-fit grow-0":"w-full grow"}`,dir:f==="he"||f==="ar"?"rtl":void 0,children:e.jsxRuntimeExports.jsx("div",{className:e.mo(`${i?i===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${f||"en"}`,a?"w-fit":"w-full",y?.graphContainer),style:{...m?.graphContainer||{},...i&&i!==!0?{backgroundColor:i}:{}},id:E,"aria-label":l||`${n?`The graph shows ${n}. `:""}This is a map.${u?` ${u}`:""}`,children:e.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:i?g||"1rem":g||0},children:e.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[n||u?e.jsxRuntimeExports.jsx(W.GraphHeader,{styles:{title:m?.title,description:m?.description},classNames:{title:y?.title,description:y?.description},graphTitle:n,graphDescription:u,width:a}):null,typeof t=="string"?null:e.jsxRuntimeExports.jsx(O.Za,{options:t.map(C=>({label:C.name,value:C.style})),isClearable:!1,size:"sm",variant:c,isRtl:f==="he"||f==="ar",isSearchable:!0,filterOption:O.Hu(V),defaultValue:{label:t[0].name,value:t[0].style},controlShouldRenderValue:!0,onChange:C=>{C&&k(C.value)}}),typeof t=="string"?e.jsxRuntimeExports.jsx(I,{mapStyle:t,center:o,zoomLevel:w,width:a,height:r,relativeHeight:b,minHeight:H,includeLayers:d,excludeLayers:x,mapLegend:v}):e.jsxRuntimeExports.jsx(_,{mapStyle:M,center:o,zoomLevel:w,width:a,height:r,relativeHeight:b,minHeight:H,includeLayers:d,excludeLayers:x,mapLegend:(v||[]).find(C=>C.mapStyleName===t.find(G=>G.style===M)?.name)?.legend}),j||p?e.jsxRuntimeExports.jsx($.GraphFooter,{styles:{footnote:m?.footnote,source:m?.source},classNames:{footnote:y?.footnote,source:y?.source},sources:j,footNote:p,width:a}):null]})})})})}exports.GeoHubMap=F;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CHPV5EwG-DjM48pIC.cjs"),s=require("react"),O=require("./DropdownSelect-vt8yiB-g.cjs"),R=require("maplibre-gl"),T=require("pmtiles");;/* empty css                       */const C=require("./fetchAndParseData-Ba-_CgxS.cjs"),L=require("./filterData-BoYadk0l.cjs"),D=require("./index-C0bpbS4F.cjs"),z=require("./string2HTML-z7CwHXcx.cjs"),P=require("./select-Bnfk0lJx.cjs"),W=require("./GraphHeader.cjs"),$=require("./GraphFooter.cjs");function A(x){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(x){for(const n in x)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(x,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:()=>x[n]})}}return t.default=x,Object.freeze(t)}const q=A(T);function _(x){const{mapStyle:t,height:n,width:r,relativeHeight:l,center:y,zoomLevel:j,minHeight:u,includeLayers:p,excludeLayers:g,mapLegend:o}=x,[i,w]=s.useState(0),[E,f]=s.useState(0),[H,S]=s.useState(!0),d=s.useRef(null),h=s.useRef(null),a=s.useRef(null);return s.useEffect(()=>{const c=new ResizeObserver(m=>{w(r||m[0].target.clientWidth||620),f(n||m[0].target.clientHeight||480)});return d.current&&(f(d.current.clientHeight||480),w(d.current.clientWidth||620),r||c.observe(d.current)),()=>c.disconnect()},[r,n]),s.useEffect(()=>{h.current&&i&&!a.current&&C.fetchAndParseJSON(t).then(c=>{P.select(h.current).selectAll("div").remove();const b=new q.Protocol;R.addProtocol("pmtiles",b.tile);const v={container:h.current,style:p.length===0&&g.length===0?c:{...c,layers:L.filterData(c.layers,[{column:"id",includeValues:p,excludeValues:g}])},attributionControl:!0};y&&(v.center=y),j&&(v.zoom=j),a.current=new R.Map(v),a.current.addControl(new R.NavigationControl({visualizePitch:!0,showZoom:!0,showCompass:!0}),"bottom-right"),a.current.addControl(new R.ScaleControl,"bottom-left")})},[i,y,j,p,g,t]),s.useEffect(()=>{a.current&&C.fetchAndParseJSON(t).then(c=>{const m={...c,layers:L.filterData(c.layers,[{column:"id",includeValues:p,excludeValues:g}])};a.current.setStyle(m)})},[g,p,t]),e.jsxRuntimeExports.jsx("div",{className:"flex flex-col grow justify-center leading-0",ref:d,"aria-label":"Map area",children:(r||i)&&(n||E)?e.jsxRuntimeExports.jsxs("div",{style:{width:r||i,height:Math.max(u,n||(l?u?(r||i)*l>u?(r||i)*l:u:(r||i)*l:E))},children:[e.jsxRuntimeExports.jsx("div",{ref:h,className:"map maplibre-show-control",style:{width:"100%",height:"100%"}}),o?e.jsxRuntimeExports.jsx("div",{className:"absolute left-[22px] bottom-13",children:H?e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx("div",{className:"color-legend-close-button bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)] border border-[var(--gray-400)] rounded-full w-6 h-6 p-[3px] cursor-pointer z-10 absolute right-[-0.75rem] top-[-0.75rem]",onClick:()=>{S(!1)},children:e.jsxRuntimeExports.jsx(D.X,{})}),e.jsxRuntimeExports.jsx("div",{className:"color-legend-box p-2 bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)]",dangerouslySetInnerHTML:typeof o=="string"?{__html:z.string2HTML(o)}:void 0,children:s.isValidElement(o)?o:null})]}):e.jsxRuntimeExports.jsx("button",{type:"button",className:"mb-0 border-0 bg-transparent p-0 self-start",onClick:()=>{S(!0)},children:e.jsxRuntimeExports.jsx("div",{className:"show-color-legend-button items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-600 border-primary-gray-400 dark:border-primary-gray-500",children:"Show Legend"})})}):null]}):null})}function F(x){const{mapStyle:t,height:n,width:r,relativeHeight:l,center:y,zoomLevel:j,minHeight:u,includeLayers:p,excludeLayers:g,mapLegend:o}=x,[i,w]=s.useState(0),[E,f]=s.useState(0),[H,S]=s.useState(!0),d=s.useRef(null),h=s.useRef(null);return s.useEffect(()=>{const a=new ResizeObserver(c=>{w(r||c[0].target.clientWidth||620),f(n||c[0].target.clientHeight||480)});return d.current&&(f(d.current.clientHeight||480),w(d.current.clientWidth||620),r||a.observe(d.current)),()=>a.disconnect()},[r,n]),s.useEffect(()=>{h.current&&i&&C.fetchAndParseJSON(t).then(a=>{P.select(h.current).selectAll("div").remove();const m=new q.Protocol;R.addProtocol("pmtiles",m.tile);const b={container:h.current,style:p.length===0&&g.length===0?a:{...a,layers:L.filterData(a.layers,[{column:"id",includeValues:p,excludeValues:g}])},attributionControl:!0};y&&(b.center=y),j&&(b.zoom=j);const v=new R.Map(b);v.addControl(new R.NavigationControl({visualizePitch:!0,showZoom:!0,showCompass:!0}),"bottom-right"),v.addControl(new R.ScaleControl,"bottom-left")})},[i,t,y,j,p,g]),e.jsxRuntimeExports.jsx("div",{className:"flex flex-col grow justify-center leading-0",ref:d,"aria-label":"Map area",children:(r||i)&&(n||E)?e.jsxRuntimeExports.jsxs("div",{style:{width:r||i,height:Math.max(u,n||(l?u?(r||i)*l>u?(r||i)*l:u:(r||i)*l:E))},children:[e.jsxRuntimeExports.jsx("div",{ref:h,className:"map maplibre-show-control",style:{width:"100%",height:"100%"}}),o?e.jsxRuntimeExports.jsx("div",{className:"absolute left-[22px] bottom-13",children:H?e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx("div",{className:"color-legend-close-button bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)] border border-[var(--gray-400)] rounded-full w-6 h-6 p-[3px] cursor-pointer z-10 absolute right-[-0.75rem] top-[-0.75rem]",onClick:()=>{S(!1)},children:e.jsxRuntimeExports.jsx(D.X,{})}),e.jsxRuntimeExports.jsx("div",{className:"color-legend-box p-2 bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)]",dangerouslySetInnerHTML:typeof o=="string"?{__html:z.string2HTML(o)}:void 0,children:s.isValidElement(o)?o:null})]}):e.jsxRuntimeExports.jsx("button",{type:"button",className:"mb-0 border-0 bg-transparent p-0 self-start",onClick:()=>{S(!0)},children:e.jsxRuntimeExports.jsx("div",{className:"show-color-legend-button items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-600 border-primary-gray-400 dark:border-primary-gray-500",children:"Show Legend"})})}):null]}):null})}function I(x){const{mapStyle:t,graphTitle:n,height:r,width:l,relativeHeight:y,sources:j,graphDescription:u,footNote:p,padding:g,backgroundColor:o=!1,center:i,zoomLevel:w,graphID:E,language:f="en",minHeight:H=0,theme:S="light",includeLayers:d=[],excludeLayers:h=[],ariaLabel:a,uiMode:c="normal",styles:m,classNames:b,mapLegend:v}=x,[M,k]=s.useState(typeof t=="string"?t:t[0].style);s.useEffect(()=>{k(typeof t=="string"?t:t[0].style)},[t]);const V=s.useMemo(()=>({ignoreCase:!0,ignoreAccents:!0,trim:!0}),[]);return e.jsxRuntimeExports.jsx("div",{className:`${S||"light"} flex  ${l?"w-fit grow-0":"w-full grow"}`,dir:f==="he"||f==="ar"?"rtl":void 0,children:e.jsxRuntimeExports.jsx("div",{className:e.mo(`${o?o===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${f||"en"}`,l?"w-fit":"w-full",b?.graphContainer),style:{...m?.graphContainer||{},...o&&o!==!0?{backgroundColor:o}:{}},id:E,"aria-label":a||`${n?`The graph shows ${n}. `:""}This is a map.${u?` ${u}`:""}`,children:e.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:o?g||"1rem":g||0},children:e.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[n||u?e.jsxRuntimeExports.jsx(W.GraphHeader,{styles:{title:m?.title,description:m?.description},classNames:{title:b?.title,description:b?.description},graphTitle:n,graphDescription:u,width:l}):null,typeof t=="string"?null:e.jsxRuntimeExports.jsx(O.Za,{options:t.map(N=>({label:N.name,value:N.style})),isClearable:!1,size:"sm",variant:c,isRtl:f==="he"||f==="ar",isSearchable:!0,filterOption:O.Hu(V),defaultValue:{label:t[0].name,value:t[0].style},controlShouldRenderValue:!0,onChange:N=>{N&&k(N.value)}}),typeof t=="string"?e.jsxRuntimeExports.jsx(F,{mapStyle:t,center:i,zoomLevel:w,width:l,height:r,relativeHeight:y,minHeight:H,includeLayers:d,excludeLayers:h,mapLegend:v}):e.jsxRuntimeExports.jsx(_,{mapStyle:M,center:i,zoomLevel:w,width:l,height:r,relativeHeight:y,minHeight:H,includeLayers:d,excludeLayers:h,mapLegend:(v||[]).find(N=>N.mapStyleName===t.find(G=>G.style===M)?.name)?.legend}),j||p?e.jsxRuntimeExports.jsx($.GraphFooter,{styles:{footnote:m?.footnote,source:m?.source},classNames:{footnote:b?.footnote,source:b?.source},sources:j,footNote:p,width:l}):null]})})})})}exports.GeoHubMap=I;
 //# sourceMappingURL=GeoHubMap.cjs.map

package/dist/GeoHubMap.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GeoHubMap.cjs","sources":["../src/Components/Graphs/Maps/GeoHubMaps/SimpleMap/GeoHubMultipleMap.tsx","../src/Components/Graphs/Maps/GeoHubMaps/SimpleMap/GeoHubSingleMap.tsx","../src/Components/Graphs/Maps/GeoHubMaps/SimpleMap/index.tsx"],"sourcesContent":["import { useRef, useEffect, useState } from 'react';\r\nimport maplibreGl from 'maplibre-gl';\r\nimport * as pmtiles from 'pmtiles';\r\nimport 'maplibre-gl/dist/maplibre-gl.css';\r\nimport { select } from 'd3-selection';\r\nimport React from 'react';\r\n\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\nimport { filterData } from '@/Utils/transformData/filterData';\r\nimport { X } from '@/Components/Icons';\r\nimport { string2HTML } from '@/Utils/string2HTML';\r\n\r\ninterface Props {\r\n  mapStyle: string;\r\n  center?: [number, number];\r\n  zoomLevel?: number;\r\n  width?: number;\r\n  height?: number;\r\n  relativeHeight?: number;\r\n  minHeight: number;\r\n  includeLayers: string[];\r\n  excludeLayers: string[];\r\n  mapLegend?: string | React.ReactNode;\r\n}\r\n\r\nexport function GeoHubMultipleMap(props: Props) {\r\n  const {\r\n    mapStyle,\r\n    height,\r\n    width,\r\n    relativeHeight,\r\n    center,\r\n    zoomLevel,\r\n    minHeight,\r\n    includeLayers,\r\n    excludeLayers,\r\n    mapLegend,\r\n  } = props;\r\n\r\n  const [svgWidth, setSvgWidth] = useState(0);\r\n  const [svgHeight, setSvgHeight] = useState(0);\r\n  const [showLegend, setShowLegend] = useState(true);\r\n  const graphDiv = useRef<HTMLDivElement>(null);\r\n  const mapContainer = useRef<HTMLDivElement>(null);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const mapRef = useRef<any>(null);\r\n  useEffect(() => {\r\n    const resizeObserver = new ResizeObserver(entries => {\r\n      setSvgWidth(width || entries[0].target.clientWidth || 620);\r\n      setSvgHeight(height || entries[0].target.clientHeight || 480);\r\n    });\r\n    if (graphDiv.current) {\r\n      setSvgHeight(graphDiv.current.clientHeight || 480);\r\n      setSvgWidth(graphDiv.current.clientWidth || 620);\r\n      if (!width) resizeObserver.observe(graphDiv.current);\r\n    }\r\n    return () => resizeObserver.disconnect();\r\n  }, [width, height]);\r\n  useEffect(() => {\r\n    if (mapContainer.current && svgWidth && !mapRef.current) {\r\n      fetchAndParseJSON(mapStyle).then(d => {\r\n        const mapDiv = select(mapContainer.current);\r\n        mapDiv.selectAll('div').remove();\r\n        const protocol = new pmtiles.Protocol();\r\n        maplibreGl.addProtocol('pmtiles', protocol.tile);\r\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n        const mapObj: any = {\r\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n          container: mapContainer.current as any,\r\n          style:\r\n            includeLayers.length === 0 && excludeLayers.length === 0\r\n              ? d\r\n              : {\r\n                  ...d,\r\n                  layers: filterData(d.layers, [\r\n                    {\r\n                      column: 'id',\r\n                      includeValues: includeLayers,\r\n                      excludeValues: excludeLayers,\r\n                    },\r\n                  ]),\r\n                },\r\n          attributionControl: true,\r\n        };\r\n        if (center) {\r\n          mapObj.center = center;\r\n        }\r\n        if (zoomLevel) {\r\n          mapObj.zoom = zoomLevel;\r\n        }\r\n        mapRef.current = new maplibreGl.Map(mapObj);\r\n        mapRef.current.addControl(\r\n          new maplibreGl.NavigationControl({\r\n            visualizePitch: true,\r\n            showZoom: true,\r\n            showCompass: true,\r\n          }),\r\n          'bottom-right',\r\n        );\r\n        mapRef.current.addControl(new maplibreGl.ScaleControl(), 'bottom-left');\r\n      });\r\n    }\r\n  }, [svgWidth, center, zoomLevel, includeLayers, excludeLayers, mapStyle]);\r\n  useEffect(() => {\r\n    if (mapRef.current) {\r\n      fetchAndParseJSON(mapStyle).then(d => {\r\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n        const mapStyleObj: any = {\r\n          ...d,\r\n          layers: filterData(d.layers, [\r\n            {\r\n              column: 'id',\r\n              includeValues: includeLayers,\r\n              excludeValues: excludeLayers,\r\n            },\r\n          ]),\r\n        };\r\n        mapRef.current.setStyle(mapStyleObj);\r\n      });\r\n    }\r\n  }, [excludeLayers, includeLayers, mapStyle]);\r\n  return (\r\n    <div\r\n      className='flex flex-col grow justify-center leading-0'\r\n      ref={graphDiv}\r\n      aria-label='Map area'\r\n    >\r\n      {(width || svgWidth) && (height || svgHeight) ? (\r\n        <div\r\n          style={{\r\n            width: width || svgWidth,\r\n            height: Math.max(\r\n              minHeight,\r\n              height ||\r\n                (relativeHeight\r\n                  ? minHeight\r\n                    ? (width || svgWidth) * relativeHeight > minHeight\r\n                      ? (width || svgWidth) * relativeHeight\r\n                      : minHeight\r\n                    : (width || svgWidth) * relativeHeight\r\n                  : svgHeight),\r\n            ),\r\n          }}\r\n        >\r\n          <div\r\n            ref={mapContainer}\r\n            className='map maplibre-show-control'\r\n            style={{ width: '100%', height: '100%' }}\r\n          />\r\n          {mapLegend ? (\r\n            <div className='absolute left-[22px] bottom-13'>\r\n              {showLegend ? (\r\n                <>\r\n                  <div\r\n                    style={{\r\n                      backgroundColor: 'rgba(240,240,240, 0.7)',\r\n                      border: '1px solid var(--gray-400)',\r\n                      borderRadius: '999px',\r\n                      width: '24px',\r\n                      height: '24px',\r\n                      padding: '3px',\r\n                      cursor: 'pointer',\r\n                      zIndex: 10,\r\n                      position: 'absolute',\r\n                      right: '-0.75rem',\r\n                      top: '-0.75rem',\r\n                    }}\r\n                    onClick={() => {\r\n                      setShowLegend(false);\r\n                    }}\r\n                  >\r\n                    <X />\r\n                  </div>\r\n                  <div\r\n                    className='p-2'\r\n                    style={{\r\n                      backgroundColor: 'rgba(240,240,240, 0.7)',\r\n                    }}\r\n                    dangerouslySetInnerHTML={\r\n                      typeof mapLegend === 'string' ? { __html: string2HTML(mapLegend) } : undefined\r\n                    }\r\n                  >\r\n                    {React.isValidElement(mapLegend) ? mapLegend : null}\r\n                  </div>\r\n                </>\r\n              ) : (\r\n                <button\r\n                  type='button'\r\n                  className='mb-0 border-0 bg-transparent p-0 self-start'\r\n                  onClick={() => {\r\n                    setShowLegend(true);\r\n                  }}\r\n                >\r\n                  <div className='items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-550 border-primary-gray-400 dark:border-primary-gray-500'>\r\n                    Show Legend\r\n                  </div>\r\n                </button>\r\n              )}\r\n            </div>\r\n          ) : null}\r\n        </div>\r\n      ) : null}\r\n    </div>\r\n  );\r\n}\r\n","import { useRef, useEffect, useState } from 'react';\r\nimport maplibreGl from 'maplibre-gl';\r\nimport * as pmtiles from 'pmtiles';\r\nimport 'maplibre-gl/dist/maplibre-gl.css';\r\nimport { select } from 'd3-selection';\r\nimport React from 'react';\r\n\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\nimport { filterData } from '@/Utils/transformData/filterData';\r\nimport { X } from '@/Components/Icons';\r\nimport { string2HTML } from '@/Utils/string2HTML';\r\n\r\ninterface Props {\r\n  mapStyle: string;\r\n  center?: [number, number];\r\n  zoomLevel?: number;\r\n  width?: number;\r\n  height?: number;\r\n  relativeHeight?: number;\r\n  minHeight: number;\r\n  mapLegend?: string | React.ReactNode;\r\n  includeLayers: string[];\r\n  excludeLayers: string[];\r\n}\r\n\r\nexport function GeoHubSingleMap(props: Props) {\r\n  const {\r\n    mapStyle,\r\n    height,\r\n    width,\r\n    relativeHeight,\r\n    center,\r\n    zoomLevel,\r\n    minHeight,\r\n    includeLayers,\r\n    excludeLayers,\r\n    mapLegend,\r\n  } = props;\r\n  const [svgWidth, setSvgWidth] = useState(0);\r\n  const [svgHeight, setSvgHeight] = useState(0);\r\n  const [showLegend, setShowLegend] = useState(true);\r\n  const graphDiv = useRef<HTMLDivElement>(null);\r\n  const mapContainer = useRef<HTMLDivElement>(null);\r\n  useEffect(() => {\r\n    const resizeObserver = new ResizeObserver(entries => {\r\n      setSvgWidth(width || entries[0].target.clientWidth || 620);\r\n      setSvgHeight(height || entries[0].target.clientHeight || 480);\r\n    });\r\n    if (graphDiv.current) {\r\n      setSvgHeight(graphDiv.current.clientHeight || 480);\r\n      setSvgWidth(graphDiv.current.clientWidth || 620);\r\n      if (!width) resizeObserver.observe(graphDiv.current);\r\n    }\r\n    return () => resizeObserver.disconnect();\r\n  }, [width, height]);\r\n  useEffect(() => {\r\n    if (mapContainer.current && svgWidth) {\r\n      fetchAndParseJSON(mapStyle).then(d => {\r\n        const mapDiv = select(mapContainer.current);\r\n        mapDiv.selectAll('div').remove();\r\n        const protocol = new pmtiles.Protocol();\r\n        maplibreGl.addProtocol('pmtiles', protocol.tile);\r\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n        const mapObj: any = {\r\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n          container: mapContainer.current as any,\r\n          style:\r\n            includeLayers.length === 0 && excludeLayers.length === 0\r\n              ? d\r\n              : {\r\n                  ...d,\r\n                  layers: filterData(d.layers, [\r\n                    {\r\n                      column: 'id',\r\n                      includeValues: includeLayers,\r\n                      excludeValues: excludeLayers,\r\n                    },\r\n                  ]),\r\n                },\r\n          attributionControl: true,\r\n        };\r\n        if (center) {\r\n          mapObj.center = center;\r\n        }\r\n        if (zoomLevel) {\r\n          mapObj.zoom = zoomLevel;\r\n        }\r\n        const map = new maplibreGl.Map(mapObj);\r\n        map.addControl(\r\n          new maplibreGl.NavigationControl({\r\n            visualizePitch: true,\r\n            showZoom: true,\r\n            showCompass: true,\r\n          }),\r\n          'bottom-right',\r\n        );\r\n        map.addControl(new maplibreGl.ScaleControl(), 'bottom-left');\r\n      });\r\n    }\r\n  }, [svgWidth, mapStyle, center, zoomLevel, includeLayers, excludeLayers]);\r\n  return (\r\n    <div\r\n      className='flex flex-col grow justify-center leading-0'\r\n      ref={graphDiv}\r\n      aria-label='Map area'\r\n    >\r\n      {(width || svgWidth) && (height || svgHeight) ? (\r\n        <div\r\n          style={{\r\n            width: width || svgWidth,\r\n            height: Math.max(\r\n              minHeight,\r\n              height ||\r\n                (relativeHeight\r\n                  ? minHeight\r\n                    ? (width || svgWidth) * relativeHeight > minHeight\r\n                      ? (width || svgWidth) * relativeHeight\r\n                      : minHeight\r\n                    : (width || svgWidth) * relativeHeight\r\n                  : svgHeight),\r\n            ),\r\n          }}\r\n        >\r\n          <div\r\n            ref={mapContainer}\r\n            className='map maplibre-show-control'\r\n            style={{ width: '100%', height: '100%' }}\r\n          />\r\n          {mapLegend ? (\r\n            <div className='absolute left-[22px] bottom-13'>\r\n              {showLegend ? (\r\n                <>\r\n                  <div\r\n                    style={{\r\n                      backgroundColor: 'rgba(240,240,240, 0.7)',\r\n                      border: '1px solid var(--gray-400)',\r\n                      borderRadius: '999px',\r\n                      width: '24px',\r\n                      height: '24px',\r\n                      padding: '3px',\r\n                      cursor: 'pointer',\r\n                      zIndex: 10,\r\n                      position: 'absolute',\r\n                      right: '-0.75rem',\r\n                      top: '-0.75rem',\r\n                    }}\r\n                    onClick={() => {\r\n                      setShowLegend(false);\r\n                    }}\r\n                  >\r\n                    <X />\r\n                  </div>\r\n                  <div\r\n                    className='p-2'\r\n                    style={{\r\n                      backgroundColor: 'rgba(240,240,240, 0.7)',\r\n                    }}\r\n                    dangerouslySetInnerHTML={\r\n                      typeof mapLegend === 'string' ? { __html: string2HTML(mapLegend) } : undefined\r\n                    }\r\n                  >\r\n                    {React.isValidElement(mapLegend) ? mapLegend : null}\r\n                  </div>\r\n                </>\r\n              ) : (\r\n                <button\r\n                  type='button'\r\n                  className='mb-0 border-0 bg-transparent p-0 self-start'\r\n                  onClick={() => {\r\n                    setShowLegend(true);\r\n                  }}\r\n                >\r\n                  <div className='items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-550 border-primary-gray-400 dark:border-primary-gray-500'>\r\n                    Show Legend\r\n                  </div>\r\n                </button>\r\n              )}\r\n            </div>\r\n          ) : null}\r\n        </div>\r\n      ) : null}\r\n    </div>\r\n  );\r\n}\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\nimport { DropdownSelect, createFilter } from '@undp/design-system-react/DropdownSelect';\r\nimport { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { GeoHubMultipleMap } from './GeoHubMultipleMap';\r\nimport { GeoHubSingleMap } from './GeoHubSingleMap';\r\n\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport {\r\n  ClassNameObject,\r\n  Languages,\r\n  MapLegendDataType,\r\n  SourcesDataType,\r\n  StyleObject,\r\n} from '@/Types';\r\n\r\ninterface Props {\r\n  // Titles, Labels, and Sources\r\n  /** Title of the graph */\r\n  graphTitle?: string | React.ReactNode;\r\n  /** Description of the graph */\r\n  graphDescription?: string | React.ReactNode;\r\n  /** Footnote for the graph */\r\n  footNote?: string | React.ReactNode;\r\n  /** Source data for the graph */\r\n  sources?: SourcesDataType[];\r\n  /** Accessibility label */\r\n  ariaLabel?: string;\r\n\r\n  // Colors and Styling\r\n  /** Background color of the graph */\r\n  backgroundColor?: string | boolean;\r\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\r\n  styles?: StyleObject;\r\n  /** Custom class names */\r\n  classNames?: ClassNameObject;\r\n\r\n  // Size and Spacing\r\n  /** Width of the graph */\r\n  width?: number;\r\n  /** Height of the graph */\r\n  height?: number;\r\n  /** Minimum height of the graph */\r\n  minHeight?: number;\r\n  /** Relative height scaling factor. This overwrites the height props */\r\n  relativeHeight?: number;\r\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\r\n  padding?: string;\r\n\r\n  // Graph Parameters\r\n  /** URL for mapStyle JSON. If the type is string, otherwise it creates and dropdown and provide end user to select the map style they would like to  */\r\n  mapStyle: string | { style: string; name: string }[];\r\n  /** Defines the legend for the map. If the mapStyle is string, mapLegend can be string or ReactNode. mapLegend with type string is show as innerHTML. If the mapStyle is not string, mapLegend is of type { mapStyleName: string; legend: string | React.ReactNode }[] where mapStyleName corresponds to the each name in the mapStyle. */\r\n  mapLegend?: string | React.ReactNode | MapLegendDataType[];\r\n  /** Starting center point of the map */\r\n  center?: [number, number];\r\n  /** Starting zoom level of the map */\r\n  zoomLevel?: number;\r\n  /** List of layer IDs to be included in the visualization. If this is present only these layers are included. */\r\n  includeLayers?: string[];\r\n  /** List of layer IDs to be excluded from the visualization */\r\n  excludeLayers?: string[];\r\n\r\n  // Configuration and Options\r\n  /** Language setting  */\r\n  language?: Languages;\r\n  /** Color theme */\r\n  theme?: 'light' | 'dark';\r\n  /** Theme for the UI elements */\r\n  uiMode?: 'light' | 'normal';\r\n  /** Unique ID for the graph */\r\n  graphID?: string;\r\n}\r\n\r\n/** For using these maps you will have to install [`maplibre`](https://maplibre.org/maplibre-gl-js/docs/#npm) and [pmtiles](https://www.npmjs.com/package/pmtiles) package to your project */\r\nexport function GeoHubMap(props: Props) {\r\n  const {\r\n    mapStyle,\r\n    graphTitle,\r\n    height,\r\n    width,\r\n    relativeHeight,\r\n    sources,\r\n    graphDescription,\r\n    footNote,\r\n    padding,\r\n    backgroundColor = false,\r\n    center,\r\n    zoomLevel,\r\n    graphID,\r\n    language = 'en',\r\n    minHeight = 0,\r\n    theme = 'light',\r\n    includeLayers = [],\r\n    excludeLayers = [],\r\n    ariaLabel,\r\n    uiMode = 'normal',\r\n    styles,\r\n    classNames,\r\n    mapLegend,\r\n  } = props;\r\n\r\n  const [selectedMapStyle, setSelectedMapStyle] = useState(\r\n    typeof mapStyle === 'string' ? mapStyle : mapStyle[0].style,\r\n  );\r\n\r\n  useEffect(() => {\r\n    setSelectedMapStyle(typeof mapStyle === 'string' ? mapStyle : mapStyle[0].style);\r\n  }, [mapStyle]);\r\n\r\n  const filterConfig = useMemo(\r\n    () => ({\r\n      ignoreCase: true,\r\n      ignoreAccents: true,\r\n      trim: true,\r\n    }),\r\n    [],\r\n  );\r\n  return (\r\n    <div\r\n      className={`${theme || 'light'} flex  ${width ? 'w-fit grow-0' : 'w-full grow'}`}\r\n      dir={language === 'he' || language === 'ar' ? 'rtl' : undefined}\r\n    >\r\n      <div\r\n        className={cn(\r\n          `${\r\n            !backgroundColor\r\n              ? 'bg-transparent '\r\n              : backgroundColor === true\r\n                ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n                : ''\r\n          }ml-auto mr-auto flex flex-col grow h-inherit ${language || 'en'}`,\r\n          width ? 'w-fit' : 'w-full',\r\n          classNames?.graphContainer,\r\n        )}\r\n        style={{\r\n          ...(styles?.graphContainer || {}),\r\n          ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\r\n        }}\r\n        id={graphID}\r\n        aria-label={\r\n          ariaLabel ||\r\n          `${\r\n            graphTitle ? `The graph shows ${graphTitle}. ` : ''\r\n          }This is a map.${graphDescription ? ` ${graphDescription}` : ''}`\r\n        }\r\n      >\r\n        <div\r\n          className='flex grow'\r\n          style={{ padding: backgroundColor ? padding || '1rem' : padding || 0 }}\r\n        >\r\n          <div className='flex flex-col w-full gap-4 grow justify-between'>\r\n            {graphTitle || graphDescription ? (\r\n              <GraphHeader\r\n                styles={{\r\n                  title: styles?.title,\r\n                  description: styles?.description,\r\n                }}\r\n                classNames={{\r\n                  title: classNames?.title,\r\n                  description: classNames?.description,\r\n                }}\r\n                graphTitle={graphTitle}\r\n                graphDescription={graphDescription}\r\n                width={width}\r\n              />\r\n            ) : null}\r\n            {typeof mapStyle === 'string' ? null : (\r\n              <DropdownSelect\r\n                options={mapStyle.map(d => ({ label: d.name, value: d.style }))}\r\n                isClearable={false}\r\n                size='sm'\r\n                variant={uiMode}\r\n                isRtl={language === 'he' || language === 'ar'}\r\n                isSearchable\r\n                filterOption={createFilter(filterConfig)}\r\n                defaultValue={{\r\n                  label: mapStyle[0].name,\r\n                  value: mapStyle[0].style,\r\n                }}\r\n                controlShouldRenderValue\r\n                // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n                onChange={(el: any) => {\r\n                  if (el) setSelectedMapStyle(el.value);\r\n                }}\r\n              />\r\n            )}\r\n            {typeof mapStyle === 'string' ? (\r\n              <GeoHubSingleMap\r\n                mapStyle={mapStyle}\r\n                center={center}\r\n                zoomLevel={zoomLevel}\r\n                width={width}\r\n                height={height}\r\n                relativeHeight={relativeHeight}\r\n                minHeight={minHeight}\r\n                includeLayers={includeLayers}\r\n                excludeLayers={excludeLayers}\r\n                mapLegend={mapLegend as string | React.ReactNode | undefined}\r\n              />\r\n            ) : (\r\n              <GeoHubMultipleMap\r\n                mapStyle={selectedMapStyle}\r\n                center={center}\r\n                zoomLevel={zoomLevel}\r\n                width={width}\r\n                height={height}\r\n                relativeHeight={relativeHeight}\r\n                minHeight={minHeight}\r\n                includeLayers={includeLayers}\r\n                excludeLayers={excludeLayers}\r\n                mapLegend={\r\n                  ((mapLegend || []) as MapLegendDataType[]).find(\r\n                    d =>\r\n                      d.mapStyleName === mapStyle.find(el => el.style === selectedMapStyle)?.name,\r\n                  )?.legend\r\n                }\r\n              />\r\n            )}\r\n            {sources || footNote ? (\r\n              <GraphFooter\r\n                styles={{ footnote: styles?.footnote, source: styles?.source }}\r\n                classNames={{\r\n                  footnote: classNames?.footnote,\r\n                  source: classNames?.source,\r\n                }}\r\n                sources={sources}\r\n                footNote={footNote}\r\n                width={width}\r\n              />\r\n            ) : null}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["GeoHubMultipleMap","props","mapStyle","height","width","relativeHeight","center","zoomLevel","minHeight","includeLayers","excludeLayers","mapLegend","svgWidth","setSvgWidth","useState","svgHeight","setSvgHeight","showLegend","setShowLegend","graphDiv","useRef","mapContainer","mapRef","useEffect","resizeObserver","entries","fetchAndParseJSON","d","select","protocol","pmtiles","maplibreGl","mapObj","filterData","mapStyleObj","jsx","jsxs","Fragment","X","string2HTML","React","GeoHubSingleMap","map","GeoHubMap","graphTitle","sources","graphDescription","footNote","padding","backgroundColor","graphID","language","theme","ariaLabel","uiMode","styles","classNames","selectedMapStyle","setSelectedMapStyle","filterConfig","useMemo","cn","GraphHeader","DropdownSelect","createFilter","el","GraphFooter"],"mappings":"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"}
+{"version":3,"file":"GeoHubMap.cjs","sources":["../src/Components/Graphs/Maps/GeoHubMaps/SimpleMap/GeoHubMultipleMap.tsx","../src/Components/Graphs/Maps/GeoHubMaps/SimpleMap/GeoHubSingleMap.tsx","../src/Components/Graphs/Maps/GeoHubMaps/SimpleMap/index.tsx"],"sourcesContent":["import { useRef, useEffect, useState } from 'react';\r\nimport maplibreGl from 'maplibre-gl';\r\nimport * as pmtiles from 'pmtiles';\r\nimport 'maplibre-gl/dist/maplibre-gl.css';\r\nimport { select } from 'd3-selection';\r\nimport React from 'react';\r\n\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\nimport { filterData } from '@/Utils/transformData/filterData';\r\nimport { X } from '@/Components/Icons';\r\nimport { string2HTML } from '@/Utils/string2HTML';\r\n\r\ninterface Props {\r\n  mapStyle: string;\r\n  center?: [number, number];\r\n  zoomLevel?: number;\r\n  width?: number;\r\n  height?: number;\r\n  relativeHeight?: number;\r\n  minHeight: number;\r\n  includeLayers: string[];\r\n  excludeLayers: string[];\r\n  mapLegend?: string | React.ReactNode;\r\n}\r\n\r\nexport function GeoHubMultipleMap(props: Props) {\r\n  const {\r\n    mapStyle,\r\n    height,\r\n    width,\r\n    relativeHeight,\r\n    center,\r\n    zoomLevel,\r\n    minHeight,\r\n    includeLayers,\r\n    excludeLayers,\r\n    mapLegend,\r\n  } = props;\r\n\r\n  const [svgWidth, setSvgWidth] = useState(0);\r\n  const [svgHeight, setSvgHeight] = useState(0);\r\n  const [showLegend, setShowLegend] = useState(true);\r\n  const graphDiv = useRef<HTMLDivElement>(null);\r\n  const mapContainer = useRef<HTMLDivElement>(null);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const mapRef = useRef<any>(null);\r\n  useEffect(() => {\r\n    const resizeObserver = new ResizeObserver(entries => {\r\n      setSvgWidth(width || entries[0].target.clientWidth || 620);\r\n      setSvgHeight(height || entries[0].target.clientHeight || 480);\r\n    });\r\n    if (graphDiv.current) {\r\n      setSvgHeight(graphDiv.current.clientHeight || 480);\r\n      setSvgWidth(graphDiv.current.clientWidth || 620);\r\n      if (!width) resizeObserver.observe(graphDiv.current);\r\n    }\r\n    return () => resizeObserver.disconnect();\r\n  }, [width, height]);\r\n  useEffect(() => {\r\n    if (mapContainer.current && svgWidth && !mapRef.current) {\r\n      fetchAndParseJSON(mapStyle).then(d => {\r\n        const mapDiv = select(mapContainer.current);\r\n        mapDiv.selectAll('div').remove();\r\n        const protocol = new pmtiles.Protocol();\r\n        maplibreGl.addProtocol('pmtiles', protocol.tile);\r\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n        const mapObj: any = {\r\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n          container: mapContainer.current as any,\r\n          style:\r\n            includeLayers.length === 0 && excludeLayers.length === 0\r\n              ? d\r\n              : {\r\n                  ...d,\r\n                  layers: filterData(d.layers, [\r\n                    {\r\n                      column: 'id',\r\n                      includeValues: includeLayers,\r\n                      excludeValues: excludeLayers,\r\n                    },\r\n                  ]),\r\n                },\r\n          attributionControl: true,\r\n        };\r\n        if (center) {\r\n          mapObj.center = center;\r\n        }\r\n        if (zoomLevel) {\r\n          mapObj.zoom = zoomLevel;\r\n        }\r\n        mapRef.current = new maplibreGl.Map(mapObj);\r\n        mapRef.current.addControl(\r\n          new maplibreGl.NavigationControl({\r\n            visualizePitch: true,\r\n            showZoom: true,\r\n            showCompass: true,\r\n          }),\r\n          'bottom-right',\r\n        );\r\n        mapRef.current.addControl(new maplibreGl.ScaleControl(), 'bottom-left');\r\n      });\r\n    }\r\n  }, [svgWidth, center, zoomLevel, includeLayers, excludeLayers, mapStyle]);\r\n  useEffect(() => {\r\n    if (mapRef.current) {\r\n      fetchAndParseJSON(mapStyle).then(d => {\r\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n        const mapStyleObj: any = {\r\n          ...d,\r\n          layers: filterData(d.layers, [\r\n            {\r\n              column: 'id',\r\n              includeValues: includeLayers,\r\n              excludeValues: excludeLayers,\r\n            },\r\n          ]),\r\n        };\r\n        mapRef.current.setStyle(mapStyleObj);\r\n      });\r\n    }\r\n  }, [excludeLayers, includeLayers, mapStyle]);\r\n  return (\r\n    <div\r\n      className='flex flex-col grow justify-center leading-0'\r\n      ref={graphDiv}\r\n      aria-label='Map area'\r\n    >\r\n      {(width || svgWidth) && (height || svgHeight) ? (\r\n        <div\r\n          style={{\r\n            width: width || svgWidth,\r\n            height: Math.max(\r\n              minHeight,\r\n              height ||\r\n                (relativeHeight\r\n                  ? minHeight\r\n                    ? (width || svgWidth) * relativeHeight > minHeight\r\n                      ? (width || svgWidth) * relativeHeight\r\n                      : minHeight\r\n                    : (width || svgWidth) * relativeHeight\r\n                  : svgHeight),\r\n            ),\r\n          }}\r\n        >\r\n          <div\r\n            ref={mapContainer}\r\n            className='map maplibre-show-control'\r\n            style={{ width: '100%', height: '100%' }}\r\n          />\r\n          {mapLegend ? (\r\n            <div className='absolute left-[22px] bottom-13'>\r\n              {showLegend ? (\r\n                <>\r\n                  <div\r\n                    className='color-legend-close-button bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)] border border-[var(--gray-400)] rounded-full w-6 h-6 p-[3px] cursor-pointer z-10 absolute right-[-0.75rem] top-[-0.75rem]'\r\n                    onClick={() => {\r\n                      setShowLegend(false);\r\n                    }}\r\n                  >\r\n                    <X />\r\n                  </div>\r\n                  <div\r\n                    className='color-legend-box p-2 bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)]'\r\n                    dangerouslySetInnerHTML={\r\n                      typeof mapLegend === 'string' ? { __html: string2HTML(mapLegend) } : undefined\r\n                    }\r\n                  >\r\n                    {React.isValidElement(mapLegend) ? mapLegend : null}\r\n                  </div>\r\n                </>\r\n              ) : (\r\n                <button\r\n                  type='button'\r\n                  className='mb-0 border-0 bg-transparent p-0 self-start'\r\n                  onClick={() => {\r\n                    setShowLegend(true);\r\n                  }}\r\n                >\r\n                  <div className='show-color-legend-button items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-600 border-primary-gray-400 dark:border-primary-gray-500'>\r\n                    Show Legend\r\n                  </div>\r\n                </button>\r\n              )}\r\n            </div>\r\n          ) : null}\r\n        </div>\r\n      ) : null}\r\n    </div>\r\n  );\r\n}\r\n","import { useRef, useEffect, useState } from 'react';\r\nimport maplibreGl from 'maplibre-gl';\r\nimport * as pmtiles from 'pmtiles';\r\nimport 'maplibre-gl/dist/maplibre-gl.css';\r\nimport { select } from 'd3-selection';\r\nimport React from 'react';\r\n\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\nimport { filterData } from '@/Utils/transformData/filterData';\r\nimport { X } from '@/Components/Icons';\r\nimport { string2HTML } from '@/Utils/string2HTML';\r\n\r\ninterface Props {\r\n  mapStyle: string;\r\n  center?: [number, number];\r\n  zoomLevel?: number;\r\n  width?: number;\r\n  height?: number;\r\n  relativeHeight?: number;\r\n  minHeight: number;\r\n  mapLegend?: string | React.ReactNode;\r\n  includeLayers: string[];\r\n  excludeLayers: string[];\r\n}\r\n\r\nexport function GeoHubSingleMap(props: Props) {\r\n  const {\r\n    mapStyle,\r\n    height,\r\n    width,\r\n    relativeHeight,\r\n    center,\r\n    zoomLevel,\r\n    minHeight,\r\n    includeLayers,\r\n    excludeLayers,\r\n    mapLegend,\r\n  } = props;\r\n  const [svgWidth, setSvgWidth] = useState(0);\r\n  const [svgHeight, setSvgHeight] = useState(0);\r\n  const [showLegend, setShowLegend] = useState(true);\r\n  const graphDiv = useRef<HTMLDivElement>(null);\r\n  const mapContainer = useRef<HTMLDivElement>(null);\r\n  useEffect(() => {\r\n    const resizeObserver = new ResizeObserver(entries => {\r\n      setSvgWidth(width || entries[0].target.clientWidth || 620);\r\n      setSvgHeight(height || entries[0].target.clientHeight || 480);\r\n    });\r\n    if (graphDiv.current) {\r\n      setSvgHeight(graphDiv.current.clientHeight || 480);\r\n      setSvgWidth(graphDiv.current.clientWidth || 620);\r\n      if (!width) resizeObserver.observe(graphDiv.current);\r\n    }\r\n    return () => resizeObserver.disconnect();\r\n  }, [width, height]);\r\n  useEffect(() => {\r\n    if (mapContainer.current && svgWidth) {\r\n      fetchAndParseJSON(mapStyle).then(d => {\r\n        const mapDiv = select(mapContainer.current);\r\n        mapDiv.selectAll('div').remove();\r\n        const protocol = new pmtiles.Protocol();\r\n        maplibreGl.addProtocol('pmtiles', protocol.tile);\r\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n        const mapObj: any = {\r\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n          container: mapContainer.current as any,\r\n          style:\r\n            includeLayers.length === 0 && excludeLayers.length === 0\r\n              ? d\r\n              : {\r\n                  ...d,\r\n                  layers: filterData(d.layers, [\r\n                    {\r\n                      column: 'id',\r\n                      includeValues: includeLayers,\r\n                      excludeValues: excludeLayers,\r\n                    },\r\n                  ]),\r\n                },\r\n          attributionControl: true,\r\n        };\r\n        if (center) {\r\n          mapObj.center = center;\r\n        }\r\n        if (zoomLevel) {\r\n          mapObj.zoom = zoomLevel;\r\n        }\r\n        const map = new maplibreGl.Map(mapObj);\r\n        map.addControl(\r\n          new maplibreGl.NavigationControl({\r\n            visualizePitch: true,\r\n            showZoom: true,\r\n            showCompass: true,\r\n          }),\r\n          'bottom-right',\r\n        );\r\n        map.addControl(new maplibreGl.ScaleControl(), 'bottom-left');\r\n      });\r\n    }\r\n  }, [svgWidth, mapStyle, center, zoomLevel, includeLayers, excludeLayers]);\r\n  return (\r\n    <div\r\n      className='flex flex-col grow justify-center leading-0'\r\n      ref={graphDiv}\r\n      aria-label='Map area'\r\n    >\r\n      {(width || svgWidth) && (height || svgHeight) ? (\r\n        <div\r\n          style={{\r\n            width: width || svgWidth,\r\n            height: Math.max(\r\n              minHeight,\r\n              height ||\r\n                (relativeHeight\r\n                  ? minHeight\r\n                    ? (width || svgWidth) * relativeHeight > minHeight\r\n                      ? (width || svgWidth) * relativeHeight\r\n                      : minHeight\r\n                    : (width || svgWidth) * relativeHeight\r\n                  : svgHeight),\r\n            ),\r\n          }}\r\n        >\r\n          <div\r\n            ref={mapContainer}\r\n            className='map maplibre-show-control'\r\n            style={{ width: '100%', height: '100%' }}\r\n          />\r\n          {mapLegend ? (\r\n            <div className='absolute left-[22px] bottom-13'>\r\n              {showLegend ? (\r\n                <>\r\n                  <div\r\n                    className='color-legend-close-button bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)] border border-[var(--gray-400)] rounded-full w-6 h-6 p-[3px] cursor-pointer z-10 absolute right-[-0.75rem] top-[-0.75rem]'\r\n                    onClick={() => {\r\n                      setShowLegend(false);\r\n                    }}\r\n                  >\r\n                    <X />\r\n                  </div>\r\n                  <div\r\n                    className='color-legend-box p-2 bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)]'\r\n                    dangerouslySetInnerHTML={\r\n                      typeof mapLegend === 'string' ? { __html: string2HTML(mapLegend) } : undefined\r\n                    }\r\n                  >\r\n                    {React.isValidElement(mapLegend) ? mapLegend : null}\r\n                  </div>\r\n                </>\r\n              ) : (\r\n                <button\r\n                  type='button'\r\n                  className='mb-0 border-0 bg-transparent p-0 self-start'\r\n                  onClick={() => {\r\n                    setShowLegend(true);\r\n                  }}\r\n                >\r\n                  <div className='show-color-legend-button items-start text-sm font-medium cursor-pointer p-2 mb-0 flex text-primary-black dark:text-primary-gray-300 bg-primary-gray-300 dark:bg-primary-gray-600 border-primary-gray-400 dark:border-primary-gray-500'>\r\n                    Show Legend\r\n                  </div>\r\n                </button>\r\n              )}\r\n            </div>\r\n          ) : null}\r\n        </div>\r\n      ) : null}\r\n    </div>\r\n  );\r\n}\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\nimport { DropdownSelect, createFilter } from '@undp/design-system-react/DropdownSelect';\r\nimport { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { GeoHubMultipleMap } from './GeoHubMultipleMap';\r\nimport { GeoHubSingleMap } from './GeoHubSingleMap';\r\n\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport {\r\n  ClassNameObject,\r\n  Languages,\r\n  MapLegendDataType,\r\n  SourcesDataType,\r\n  StyleObject,\r\n} from '@/Types';\r\n\r\ninterface Props {\r\n  // Titles, Labels, and Sources\r\n  /** Title of the graph */\r\n  graphTitle?: string | React.ReactNode;\r\n  /** Description of the graph */\r\n  graphDescription?: string | React.ReactNode;\r\n  /** Footnote for the graph */\r\n  footNote?: string | React.ReactNode;\r\n  /** Source data for the graph */\r\n  sources?: SourcesDataType[];\r\n  /** Accessibility label */\r\n  ariaLabel?: string;\r\n\r\n  // Colors and Styling\r\n  /** Background color of the graph */\r\n  backgroundColor?: string | boolean;\r\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\r\n  styles?: StyleObject;\r\n  /** Custom class names */\r\n  classNames?: ClassNameObject;\r\n\r\n  // Size and Spacing\r\n  /** Width of the graph */\r\n  width?: number;\r\n  /** Height of the graph */\r\n  height?: number;\r\n  /** Minimum height of the graph */\r\n  minHeight?: number;\r\n  /** Relative height scaling factor. This overwrites the height props */\r\n  relativeHeight?: number;\r\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\r\n  padding?: string;\r\n\r\n  // Graph Parameters\r\n  /** URL for mapStyle JSON. If the type is string, otherwise it creates and dropdown and provide end user to select the map style they would like to  */\r\n  mapStyle: string | { style: string; name: string }[];\r\n  /** Defines the legend for the map. If the mapStyle is string, mapLegend can be string or ReactNode. mapLegend with type string is show as innerHTML. If the mapStyle is not string, mapLegend is of type { mapStyleName: string; legend: string | React.ReactNode }[] where mapStyleName corresponds to the each name in the mapStyle. */\r\n  mapLegend?: string | React.ReactNode | MapLegendDataType[];\r\n  /** Starting center point of the map */\r\n  center?: [number, number];\r\n  /** Starting zoom level of the map */\r\n  zoomLevel?: number;\r\n  /** List of layer IDs to be included in the visualization. If this is present only these layers are included. */\r\n  includeLayers?: string[];\r\n  /** List of layer IDs to be excluded from the visualization */\r\n  excludeLayers?: string[];\r\n\r\n  // Configuration and Options\r\n  /** Language setting  */\r\n  language?: Languages;\r\n  /** Color theme */\r\n  theme?: 'light' | 'dark';\r\n  /** Theme for the UI elements */\r\n  uiMode?: 'light' | 'normal';\r\n  /** Unique ID for the graph */\r\n  graphID?: string;\r\n}\r\n\r\n/** For using these maps you will have to install [`maplibre`](https://maplibre.org/maplibre-gl-js/docs/#npm) and [pmtiles](https://www.npmjs.com/package/pmtiles) package to your project */\r\nexport function GeoHubMap(props: Props) {\r\n  const {\r\n    mapStyle,\r\n    graphTitle,\r\n    height,\r\n    width,\r\n    relativeHeight,\r\n    sources,\r\n    graphDescription,\r\n    footNote,\r\n    padding,\r\n    backgroundColor = false,\r\n    center,\r\n    zoomLevel,\r\n    graphID,\r\n    language = 'en',\r\n    minHeight = 0,\r\n    theme = 'light',\r\n    includeLayers = [],\r\n    excludeLayers = [],\r\n    ariaLabel,\r\n    uiMode = 'normal',\r\n    styles,\r\n    classNames,\r\n    mapLegend,\r\n  } = props;\r\n\r\n  const [selectedMapStyle, setSelectedMapStyle] = useState(\r\n    typeof mapStyle === 'string' ? mapStyle : mapStyle[0].style,\r\n  );\r\n\r\n  useEffect(() => {\r\n    setSelectedMapStyle(typeof mapStyle === 'string' ? mapStyle : mapStyle[0].style);\r\n  }, [mapStyle]);\r\n\r\n  const filterConfig = useMemo(\r\n    () => ({\r\n      ignoreCase: true,\r\n      ignoreAccents: true,\r\n      trim: true,\r\n    }),\r\n    [],\r\n  );\r\n  return (\r\n    <div\r\n      className={`${theme || 'light'} flex  ${width ? 'w-fit grow-0' : 'w-full grow'}`}\r\n      dir={language === 'he' || language === 'ar' ? 'rtl' : undefined}\r\n    >\r\n      <div\r\n        className={cn(\r\n          `${\r\n            !backgroundColor\r\n              ? 'bg-transparent '\r\n              : backgroundColor === true\r\n                ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n                : ''\r\n          }ml-auto mr-auto flex flex-col grow h-inherit ${language || 'en'}`,\r\n          width ? 'w-fit' : 'w-full',\r\n          classNames?.graphContainer,\r\n        )}\r\n        style={{\r\n          ...(styles?.graphContainer || {}),\r\n          ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\r\n        }}\r\n        id={graphID}\r\n        aria-label={\r\n          ariaLabel ||\r\n          `${\r\n            graphTitle ? `The graph shows ${graphTitle}. ` : ''\r\n          }This is a map.${graphDescription ? ` ${graphDescription}` : ''}`\r\n        }\r\n      >\r\n        <div\r\n          className='flex grow'\r\n          style={{ padding: backgroundColor ? padding || '1rem' : padding || 0 }}\r\n        >\r\n          <div className='flex flex-col w-full gap-4 grow justify-between'>\r\n            {graphTitle || graphDescription ? (\r\n              <GraphHeader\r\n                styles={{\r\n                  title: styles?.title,\r\n                  description: styles?.description,\r\n                }}\r\n                classNames={{\r\n                  title: classNames?.title,\r\n                  description: classNames?.description,\r\n                }}\r\n                graphTitle={graphTitle}\r\n                graphDescription={graphDescription}\r\n                width={width}\r\n              />\r\n            ) : null}\r\n            {typeof mapStyle === 'string' ? null : (\r\n              <DropdownSelect\r\n                options={mapStyle.map(d => ({ label: d.name, value: d.style }))}\r\n                isClearable={false}\r\n                size='sm'\r\n                variant={uiMode}\r\n                isRtl={language === 'he' || language === 'ar'}\r\n                isSearchable\r\n                filterOption={createFilter(filterConfig)}\r\n                defaultValue={{\r\n                  label: mapStyle[0].name,\r\n                  value: mapStyle[0].style,\r\n                }}\r\n                controlShouldRenderValue\r\n                // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n                onChange={(el: any) => {\r\n                  if (el) setSelectedMapStyle(el.value);\r\n                }}\r\n              />\r\n            )}\r\n            {typeof mapStyle === 'string' ? (\r\n              <GeoHubSingleMap\r\n                mapStyle={mapStyle}\r\n                center={center}\r\n                zoomLevel={zoomLevel}\r\n                width={width}\r\n                height={height}\r\n                relativeHeight={relativeHeight}\r\n                minHeight={minHeight}\r\n                includeLayers={includeLayers}\r\n                excludeLayers={excludeLayers}\r\n                mapLegend={mapLegend as string | React.ReactNode | undefined}\r\n              />\r\n            ) : (\r\n              <GeoHubMultipleMap\r\n                mapStyle={selectedMapStyle}\r\n                center={center}\r\n                zoomLevel={zoomLevel}\r\n                width={width}\r\n                height={height}\r\n                relativeHeight={relativeHeight}\r\n                minHeight={minHeight}\r\n                includeLayers={includeLayers}\r\n                excludeLayers={excludeLayers}\r\n                mapLegend={\r\n                  ((mapLegend || []) as MapLegendDataType[]).find(\r\n                    d =>\r\n                      d.mapStyleName === mapStyle.find(el => el.style === selectedMapStyle)?.name,\r\n                  )?.legend\r\n                }\r\n              />\r\n            )}\r\n            {sources || footNote ? (\r\n              <GraphFooter\r\n                styles={{ footnote: styles?.footnote, source: styles?.source }}\r\n                classNames={{\r\n                  footnote: classNames?.footnote,\r\n                  source: classNames?.source,\r\n                }}\r\n                sources={sources}\r\n                footNote={footNote}\r\n                width={width}\r\n              />\r\n            ) : null}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["GeoHubMultipleMap","props","mapStyle","height","width","relativeHeight","center","zoomLevel","minHeight","includeLayers","excludeLayers","mapLegend","svgWidth","setSvgWidth","useState","svgHeight","setSvgHeight","showLegend","setShowLegend","graphDiv","useRef","mapContainer","mapRef","useEffect","resizeObserver","entries","fetchAndParseJSON","d","select","protocol","pmtiles","maplibreGl","mapObj","filterData","mapStyleObj","jsx","jsxs","Fragment","X","string2HTML","React","GeoHubSingleMap","map","GeoHubMap","graphTitle","sources","graphDescription","footNote","padding","backgroundColor","graphID","language","theme","ariaLabel","uiMode","styles","classNames","selectedMapStyle","setSelectedMapStyle","filterConfig","useMemo","cn","GraphHeader","DropdownSelect","createFilter","el","GraphFooter"],"mappings":"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"}