Sri Lanka District Map

A lightweight, customizable TypeScript/JavaScript library for rendering interactive maps of Sri Lanka's districts.

Features

• Interactive district highlighting
• Customizable district colors
• Support for click events and tooltips
• Responsive design that works across devices
• Zero external dependencies
• TypeScript and JavaScript support

Installation

Install the package using npm:

npm install srilanka-districts-map

Or using yarn:

yarn add srilanka-districts-map

Basic Usage

JavaScript/TypeScript

import { SriLankaMap } from 'srilanka-district-map';

// Create a new map instance
const map = new SriLankaMap({
  container: 'map-container', // ID of the container element
  width: 500, // Width of the map (optional)
  height: 600, // Height of the map (optional)
  responsive: true, // Make the map responsive (optional)
});

// Render the map
map.render();

// Add click event listeners to districts
map.onDistrictClick((districtId, districtName) => {
  console.log(`Clicked on ${districtName} (${districtId})`);
});

HTML

<div id="map-container"></div>

Customization

District Colors

// Set colors for specific districts
map.setDistrictColors({
  colombo: '#ff5722',
  gampaha: '#4caf50',
  kandy: '#2196f3',
});

// Set a default color for all other districts
map.setDefaultColor('#e0e0e0');

// Set hover color
map.setHoverColor('#ffeb3b');

Highlighting Districts

// Highlight a specific district
map.highlightDistrict('colombo');

// Remove highlight
map.removeHighlight('colombo');

// Highlight multiple districts
map.highlightDistricts(['colombo', 'gampaha', 'kalutara']);

API Reference

Constructor Options

| Option | Type | Default | Description | | ------------ | ------- | --------- | -------------------------------------- | | container | string | - | ID of the container element (required) | | width | number | 800 | Width of the map in pixels | | height | number | 600 | Height of the map in pixels | | responsive | boolean | true | Make the map responsive | | defaultColor | string | '#d3d3d3' | Default color for districts | | hoverColor | string | '#a9a9a9' | Color when hovering over districts | | borderColor | string | '#ffffff' | Color for district borders | | borderWidth | number | 1 | Width of district borders |

Methods

| Method | Parameters | Return | Description | | ------------------------- | -------------------------------------------- | ------------ | ---------------------------------- | | render() | - | void | Renders the map in the container | | onDistrictClick(callback) | callback: (id: string, name: string) => void | void | Adds click event listener | | setDistrictColors(colors) | colors: Record<string, string> | void | Sets colors for specific districts | | setDefaultColor(color) | color: string | void | Sets default color for districts | | setHoverColor(color) | color: string | void | Sets hover color for districts | | highlightDistrict(id) | id: string | void | Highlights a district | | removeHighlight(id) | id: string | void | Removes highlight from a district | | highlightDistricts(ids) | ids: string[] | void | Highlights multiple districts | | getDistrictData(id) | id: string | DistrictData | Returns data for a district |

District IDs

| ID | District Name | | ------------ | ------------- | | ampara | Ampara | | anuradhapura | Anuradhapura | | badulla | Badulla | | batticaloa | Batticaloa | | colombo | Colombo | | galle | Galle | | gampaha | Gampaha | | hambantota | Hambantota | | jaffna | Jaffna | | kalutara | Kalutara | | kandy | Kandy | | kegalle | Kegalle | | kilinochchi | Kilinochchi | | kurunegala | Kurunegala | | mannar | Mannar | | matale | Matale | | matara | Matara | | monaragala | Monaragala | | mullaitivu | Mullaitivu | | nuwara-eliya | Nuwara Eliya | | polonnaruwa | Polonnaruwa | | puttalam | Puttalam | | ratnapura | Ratnapura | | trincomalee | Trincomalee | | vavuniya | Vavuniya |

Examples

Creating a Choropleth Map

import { SriLankaMap } from 'srilanka-districts-map';

// Data for each district (e.g., population density)
const districtData = {
  colombo: 3438,
  gampaha: 1711,
  kalutara: 780,
  // ... other districts
};

// Color scale function
function getColorByValue(value: number): string {
  if (value > 3000) return '#800026';
  if (value > 1500) return '#bd0026';
  if (value > 1000) return '#e31a1c';
  if (value > 500) return '#fc4e2a';
  if (value > 200) return '#fd8d3c';
  if (value > 100) return '#feb24c';
  return '#fed976';
}

// Create map
const map = new SriLankaMap({
  container: 'map-container',
  responsive: true,
});

// Set colors based on data
const colors = {};
for (const [district, value] of Object.entries(districtData)) {
  colors[district] = getColorByValue(value);
}

map.setDistrictColors(colors);
map.render();

// Add tooltips
map.onDistrictHover((id, name) => {
  const value = districtData[id] || 'No data';
  showTooltip(`${name}: ${value} people/km²`);
});

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• IE11 (with polyfills)

License

MIT License

Contributing

Contributions welcome! Please feel free to submit a Pull Request.