0.0.9 • Published 3 months ago
@metamorfosilab/meta-map v0.0.9
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-mapConfiguration 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