MetaMap

MetaMap is a JavaScript library for creating interactive maps of countries with markers. It is built using D3.js and provides a flexible and customizable way to visualize geographic data.

Installation

You can install MetaMap via pnpm:

pnpm install @metamorfosilab/meta-map

Configuration Options

Key	Type	Default	Description
`mapPath`	string	*Required	Path to topographic map data.
`maxZoom`	number	20	Maximum zoom level for the map.
`countryStrokeWidth`	string	"0.25px"	Stroke width for country borders.
`countryFillColor`	string \| object	"#cccccc"	Color of countries. Can be a string or a gradient object.
`countryStrokeColor`	string	"#ffffff"	Color of country borders.
`accentFillColor`	string \| object	"red"	Color of selected countries. Can be a string or a gradient object.
`accentStrokeColor`	string	"#ffffff"	Color of borders for selected countries.
`groupFillColor`	string	"yellow"	Fill color for country groups.
`width`	number \| string	900	Width of the map.
`height`	number \| string	600	Height of the map.
`markers`	array: object	[]	Array of markers with longitude, latitude, and optional properties.
`markerStyle`	object	{ color: "blue", img: null, width: 20, height: 20 }	Style configuration for markers, including color, size, and image.
`countryGroups`	array: object	null	Array of country groups.
`selectedCountries`	array: string	[]	Array of selected countries.
`isZoomable`	boolean	false	Enable map zooming.
`zoomedCountries`	array: string	[]	Array of countries to zoom in after initialization.
`on`	object	{}	Object with event listeners.

Gradient Fill Color

To pass a gradient color, use an object with the following fields:

rotate: Gradient rotation angle.
startColor: Start color of the gradient (extended settings possible).
endColor: End color of the gradient (extended settings possible).

Example:

// ...config
countryFillColor: {
rotate: 65,
startColor: { color: "#061654", offset: "0%" },
endColor: { color: "#04143A", offset: "100%" },
},
accentFillColor: {
rotate: 65,
startColor: { color: "#04143A", offset: "20%" },
endColor: { color: "#E4B700", offset: "60%" },
},

Country Groups

id: Unique identifier for the group.
countryList: Array of country IDs in the group.

Methods