How to Create an Interactive Map of Nigerian States with Airtime Rates

An interactive map of Nigerian states can turn a plain airtime-rate table into a useful visual tool for customers, agents, distributors, and website owners. Visitors can select a state, compare network rates, and quickly find the information they need without scrolling through long lists. For a VTU platform, the map can also support location-based promotions, reseller education, and clearer pricing communication.

The project is suitable for a Nigerian technology blog, VTU website, online store, or business dashboard. It can be built with HTML, CSS, JavaScript, and an SVG map of Nigeria, then connected to a database or API when rates need regular updates. If you are developing for an Australian client or audience, a fast, mobile-friendly experience matters just as much for users in Sydney, Melbourne, Brisbane, or Perth as it does for people browsing on a budget Android phone in Lagos or Kaduna.

Define The Airtime Rate Data

Start by deciding what each rate means. “Airtime rate” might refer to a reseller discount, the amount paid when converting airtime to cash, a promotional price, or the commission available on a VTU transaction. These figures should be labelled clearly because a customer can easily confuse a percentage discount with the final amount received.

A practical data structure can store the state, state code, network, rate, effective date, and status:

const airtimeRates = [
  {
    state: "Lagos",
    code: "LA",
    networks: {
      MTN: 92,
      Airtel: 91,
      Glo: 90,
      "9mobile": 89
    },
    updated: "2025-02-01"
  },
  {
    state: "Kaduna",
    code: "KD",
    networks: {
      MTN: 91,
      Airtel: 90,
      Glo: 89,
      "9mobile": 88
    },
    updated: "2025-02-01"
  }
];

The numbers above are sample values for development and should not be presented as live commercial rates. Real rates can vary by provider, transaction volume, customer type, payment channel, and promotion. If the platform offers airtime-to-cash, include separate fields for the percentage paid to the customer, service charges, and the estimated payout.

Use all 36 Nigerian states and the Federal Capital Territory in the finished dataset. A state code should match the ID used in the SVG map, which prevents spelling differences such as “Akwa Ibom” versus “Akwa-Ibom” from breaking the interface. Keep the rates in a central JSON file or database rather than embedding them throughout the JavaScript.

Choose A Map And Page Structure

An SVG map is usually the best option for a lightweight state-rate visualisation. Each state appears as a path with a unique ID, allowing JavaScript to change its colour and respond to clicks. SVG also scales cleanly across phone screens, tablets, and desktop monitors without becoming blurry.

You can create the map using an existing Nigeria states SVG, commission a designer, or export a properly licensed map from a vector mapping tool. Check the licence before publishing it on a commercial VTU website. The SVG should include accessible labels, consistent state IDs, and a viewBox so it resizes correctly.

A simple page structure might look like this:

<section class="rate-map">
  <div class="map-panel">
    <svg id="nigeria-map" viewBox="0 0 800 650" aria-label="Map of Nigerian states">
      <!-- State paths appear here -->
    </svg>
  </div>

  <aside class="rate-panel" aria-live="polite">
    <h2>Select a state</h2>
    <p>Choose a state to view current airtime rates.</p>
  </aside>
</section>

Place the map beside the rate card on large screens and stack them vertically on smaller devices. Australian users often browse while commuting on trains in Melbourne or waiting for a service in a Sydney shopping centre, so the first useful content should appear quickly on a mobile connection. Avoid forcing visitors to zoom, drag a large canvas, or use a desktop-only hover feature.

Add State Selection And Rate Cards

The interaction begins when a visitor clicks or taps a state. JavaScript can read the state ID, search the rate dataset, and populate a card with the selected state’s network prices. The card should display the last update date and clarify whether each value is a discount, commission, payout rate, or selling price.

const panel = document.querySelector(".rate-panel");
const statePaths = document.querySelectorAll("#nigeria-map path");

function showRates(stateCode) {
  const record = airtimeRates.find(item => item.code === stateCode);

  if (!record) {
    panel.innerHTML = "<p>Rate information is unavailable.</p>";
    return;
  }

  const networkRows = Object.entries(record.networks)
    .map(([network, rate]) => `<li><strong>${network}</strong>: ${rate}%</li>`)
    .join("");

  panel.innerHTML = `
    <h2>${record.state}</h2>
    <ul>${networkRows}</ul>
    <small>Updated: ${record.updated}</small>
  `;
}

statePaths.forEach(path => {
  path.addEventListener("click", () => showRates(path.dataset.code));
});

Use data-code attributes in the SVG, such as data-code="LA" for Lagos. Add keyboard support so a visitor can focus a state and activate it with Enter or the spacebar. Touch targets should be large enough for easy tapping, especially when users are comparing rates on smaller Android devices.

A search box and state dropdown are useful additions. Someone looking for a rate in Enugu should not have to identify its position on the map. The same data should power the map, dropdown, search results, and rate table, which keeps every part of the page consistent when an update is made.

Improve Visual Feedback And Accessibility

Colour can show rate bands, but it should not carry the entire meaning. For example, darker shades can represent higher rates, while a legend explains the scale. Add the actual percentage to the rate panel and provide a visible selected-state border. Red and green combinations should be used carefully because they can be difficult for some people with colour-vision deficiencies.

A basic CSS treatment could use clear focus states and responsive sizing:

#nigeria-map path {
  fill: #d9e8f5;
  stroke: #ffffff;
  stroke-width: 1;
  cursor: pointer;
  transition: fill 0.2s ease, transform 0.2s ease;
}

#nigeria-map path:hover,
#nigeria-map path:focus {
  fill: #1677c8;
  outline: none;
}

#nigeria-map path.selected {
  fill: #064f8c;
  stroke: #111827;
  stroke-width: 2;
}

@media (max-width: 700px) {
  .rate-map {
    display: block;
  }

  #nigeria-map {
    width: 100%;
    height: auto;
  }
}

Include a text-based rate table below or beside the visual map. This helps screen-reader users and visitors who prefer scanning rows instead of interpreting a graphic. Use meaningful headings, aria-live for updated rate content, and sufficient contrast between text and background.

Australian customers are accustomed to comparing prepaid mobile plans, NBN offers, and app-based account dashboards, so transparent labels build trust. Include a short note explaining whether rates include fees, whether they apply to all networks, and how often the figures are reviewed. If the page targets businesses in Australia that serve Nigerian customers, show currency and percentage information separately to avoid confusing an Australian dollar amount with a Nigerian transaction rate.

Connect Live Data And Promote The Tool

A static JSON file works for a demonstration, but a production VTU website should use a controlled admin workflow. An administrator can update rates in a dashboard, approve changes, and publish a new effective date. A server-side API can then return the current values to the map without requiring a developer to edit frontend code.

Protect the endpoint from unauthorised changes and validate every value before publication. Store a history of previous rates so staff can identify when a price changed. Add a fallback message when the API is unavailable, rather than displaying blank cards or outdated figures without explanation. Caching the latest approved response can keep the interface usable during a brief server or network problem.

Search engine optimisation should support the interactive element with crawlable text. Use a descriptive page title, a short explanation of airtime rates, structured headings, and a standard HTML table containing the same state information. Google may not understand every JavaScript interaction, and users arriving from searches such as “airtime rates in Lagos” should still see useful content before interacting with the map.

The tool can also support internal links to VTU website setup guides, airtime-to-cash instructions, bulk SMS resources, or a reseller registration page. A small “last updated” notice and a link to the relevant service terms make the page more credible. For an Australian digital agency, this is a practical way to demonstrate localised data visualisation to Nigerian clients while keeping hosting, performance, and maintenance manageable.

Build the map with sample figures first, test every state on mobile and desktop, then replace the placeholders with verified commercial data. Publish the interactive rate finder on your VTU website and connect it to your approved pricing source. Explore VTU Script for related website tutorials, SEO tools, courses, and digital products that can help turn the map into a useful part of a broader online business system.