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.

Package detail

srilanka-districts-map

readme