kenya-map-react v0.1.1

Kenya Map React

Kenya Map React is a React component that allows users to visualize data on an interactive map of Kenya. This package can be used for various types of data visualization, such as weather conditions, exam results, election results, and marketing data.

Installation

To install the package, use npm or yarn:

npm install kenya-map-react

or

yarn add kenya-map-react

Usage

Below is an example of how the package can be used in a React application:

Import Dependencies

import React, { useState } from 'react';
import KenyaMapComponent from 'kenya-map-react';
import { countiesColors_, weatherColorMapping, countyData } from './tools/constants';

Implementing the Map Component

function App() {
  const [countiesColors, setCountiesColors] = useState(countiesColors_);
  const [currentCountyName, setCurrentCountyName] = useState("");

  const handleOnCountyClick = (event, name) => {
    const sanitizedCountyName = name?.replace(" ", "").replace("'", "");
    const countyData_ = countyData[sanitizedCountyName];
    
    if(countyData_) {
      const weather = countyData_.weather.split(",")[0].toLowerCase().trim();
      let color = "gray";
      
      if (weather.includes("hot")) {
        color = weatherColorMapping.hot;
      } else if (weather.includes("warm")) {
        color = weatherColorMapping.warm;
      } else if (weather.includes("cold")) {
        color = weatherColorMapping.cold;
      } else if (weather.includes("calm")) {
        color = weatherColorMapping.calm;
      }

      setCountiesColors({
        ...countiesColors,
        [sanitizedCountyName]: color,
        [currentCountyName]: "#FFF",
      });
      setCurrentCountyName(sanitizedCountyName);
    }
  };

  const currentCounty = countyData[currentCountyName] || null;

  return (
    <div className="App">
      <div className="map-container">
        <KenyaMapComponent onCountyClick={handleOnCountyClick} countiescolors={countiesColors} />
      </div>
      {currentCounty && (
        <div className="county-info">
          <div className="header">
            <img src={currentCounty.image} alt={`${currentCounty.name} emblem`} className="county-image" />
            <h1>{currentCounty.name}</h1>
            <p><strong>Fun Fact:</strong> {currentCounty.funFact}</p>
            <p><strong>Governor:</strong> {currentCounty.governor}</p>
            <p><strong>Vision 2030:</strong> {currentCounty.vision}</p>
          </div>
          <table>
            <thead>
              <tr>
                <th>Weather</th>
                <th>Agriculture</th>
                <th>KCSE Results</th>
                <th>Election Results</th>
                <th>Population</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>{currentCounty.weather}</td>
                <td>{currentCounty.agriculture}</td>
                <td>{currentCounty.kcseResults}</td>
                <td>{currentCounty.electionResults}</td>
                <td>{currentCounty.population}</td>
              </tr>
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

export default App;

Customization

• Color Mapping: Colors for counties can be dynamically updated based on data such as weather conditions or other relevant metrics.
• Data Fetching: The example above uses dummy data, but real-time data can be fetched from an API.
• Styling: You can customize the styling of the map and county info panel using CSS or styled-components.

Example Use Cases

• Weather Visualization: Display weather conditions per county using different colors.
• Examination Results: Show KCSE results data mapped across the counties.
• Elections Data: Visualize election results by county.
• Marketing Data: Represent sales performance or customer engagement geographically.

License

This package is open-source and available under the MIT license.

This README provides a clear guide on installing, using, and customizing the kenya-map-react package for various types of data visualization.