@some19ice/nigeria-geo-viz

Interactive Nigeria Map Components for React - States & LGAs with Choropleth Support

Render interactive Nigeria maps in React with state and LGA boundaries, choropleth data visualization, and click/hover interactions.

Installation

npm install @some19ice/nigeria-geo-viz react
# or
pnpm add @some19ice/nigeria-geo-viz react

Quick Start

import { NigeriaMap } from '@some19ice/nigeria-geo-viz/react';

function App() {
  return (
    <NigeriaMap
      width={600}
      height={500}
      onStateClick={(stateId) => console.log('Clicked:', stateId)}
    />
  );
}

Examples

Choropleth Map (Data Visualization)

<NigeriaMap
  width={600}
  height={500}
  choroplethData={{
    lagos: 100,
    kano: 80,
    rivers: 60,
    fct: 40,
  }}
  colorScale={['#f0f9ff', '#0284c7']}
/>

LGA-Level Map

import { LGAMap } from '@some19ice/nigeria-geo-viz/react';

// Show all LGAs in Lagos State
<LGAMap
  width={400}
  height={400}
  stateId="lagos"
  onLGAClick={(lgaId) => console.log('Clicked:', lgaId)}
/>

Direct TopoJSON Access

import statesGeo from '@some19ice/nigeria-geo-viz/assets/nigeria-states.topo.json';
import lgasGeo from '@some19ice/nigeria-geo-viz/assets/nigeria-lgas.topo.json';

Components

<NigeriaMap />

| Prop | Type | Default | Description | |------|------|---------|-------------| | width | number | 600 | Map width in pixels | | height | number | 500 | Map height in pixels | | onStateClick | (stateId: string) => void | - | State click handler | | onStateHover | (stateId: string \| null) => void | - | State hover handler | | showLabels | boolean | false | Show state name labels | | choroplethData | Record<string, number> | - | Data values for coloring | | colorScale | string[] | Blues | Min/max colors for choropleth | | theme | Partial<MapTheme> | - | Custom styling |

<LGAMap />

Same props as NigeriaMap, plus:

| Prop | Type | Description | |------|------|-------------| | stateId | string | Filter to show only LGAs in this state | | onLGAClick | (lgaId: string) => void | LGA click handler | | onLGAHover | (lgaId: string \| null) => void | LGA hover handler |

Theming

<NigeriaMap
  theme={{
    backgroundColor: '#1a1a2e',
    defaultFill: '#16213e',
    strokeColor: '#0f3460',
    hoverFill: '#e94560',
    selectedFill: '#533483',
    labelColor: '#ffffff',
  }}
/>

License

MIT © Some19ice

Keywords: Nigeria map React, Nigerian states map component, Nigeria choropleth map, Nigeria SVG map, Nigerian LGA map, Nigeria data visualization, interactive Nigeria map JavaScript