feat: update default view to map and adjust map zoom/projection
This commit is contained in:
@@ -13,7 +13,7 @@ interface LocationProps {
|
|||||||
type Tab = 'map' | 'countries' | 'cities'
|
type Tab = 'map' | 'countries' | 'cities'
|
||||||
|
|
||||||
export default function Locations({ countries, cities }: LocationProps) {
|
export default function Locations({ countries, cities }: LocationProps) {
|
||||||
const [activeTab, setActiveTab] = useState<Tab>('countries')
|
const [activeTab, setActiveTab] = useState<Tab>('map')
|
||||||
|
|
||||||
const getFlagComponent = (countryCode: string) => {
|
const getFlagComponent = (countryCode: string) => {
|
||||||
if (!countryCode || countryCode === 'Unknown') return null
|
if (!countryCode || countryCode === 'Unknown') return null
|
||||||
|
|||||||
@@ -45,11 +45,13 @@ const WorldMap = ({ data }: WorldMapProps) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative w-full h-[300px] bg-neutral-50 dark:bg-neutral-900/50 rounded-lg overflow-hidden border border-neutral-100 dark:border-neutral-800">
|
<div className="relative w-full h-[300px] bg-neutral-50 dark:bg-neutral-900/50 rounded-lg overflow-hidden border border-neutral-100 dark:border-neutral-800">
|
||||||
<ComposableMap projectionConfig={{ rotate: [-10, 0, 0], scale: 147 }}>
|
<ComposableMap projectionConfig={{ rotate: [-10, 0, 0], scale: 160, center: [0, 15] }}>
|
||||||
<ZoomableGroup>
|
<ZoomableGroup maxZoom={1}>
|
||||||
<Geographies geography={geoUrl}>
|
<Geographies geography={geoUrl}>
|
||||||
{({ geographies }) =>
|
{({ geographies }) =>
|
||||||
geographies.map((geo) => {
|
geographies
|
||||||
|
.filter(geo => geo.id !== "010") // Remove Antarctica
|
||||||
|
.map((geo) => {
|
||||||
// Ensure ID is padded to 3 digits as standard ISO numeric
|
// Ensure ID is padded to 3 digits as standard ISO numeric
|
||||||
const id = String(geo.id).padStart(3, '0')
|
const id = String(geo.id).padStart(3, '0')
|
||||||
const count = processedData.map.get(id) || 0
|
const count = processedData.map.get(id) || 0
|
||||||
|
|||||||
Reference in New Issue
Block a user