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

• map.selectCountry(id): Highlight a country on the map.
• map.selectCountryList(idList): Highlight an array of countries on the map.
• map.unselectCountry(id): Remove highlighting from a country.
• map.unselectAllCountries(): Remove highlighting from all countries.
• map.zoomCountries(idList): Zoom the map to the specified countries.
• map.moveToCountries(idList): Move the map to