Sections
MetaMap [Parcel]
17 Aug 2023
HTML
JS
<!-- Обгортка для мапи -->
<div id="map"></div>
import MetaMap from "./libs/metaMap.js";
const countryList = ["ES", "FR", "US", "GB"]; // список країн які треба підсвітити
// конфіг бібліотеки
const config = {
mapPath: "./js/json/map.geo.json", // Шлях до топографічних даних мапи
width: 1484,
height: 811,
markers: [ // Список маркерів
{
long: 6.184417,
lat: 48.692055,
},
{
long: -0.460739,
lat: 52.136436,
},
],
markerStyle: { //Стиль маркерів
img: "images/pin.svg",
width: 28,
height: 32,
},
selectedCountries: countryList,
zoomedCountries: countryList,
accentFillColor: "#266DA3",
countryFillColor: "#CBE6F1",
countryStrokeWidth: "1.5px",
};
new MetaMap("#map", config);
Getting Started
1. Завантажити архів з бібліотекою MetaMap.
2. Розпакувати його у ваш проєкт, наприклад в папку libs.
3. Встановити бібліотеку d3.js за допомогою npm/pnpm/yarn: npm i d3.
4. Розпаковуємо map.geo.json файл в папку json, або куди вам буде зручніше.
5. В файлі HTML створити обгортку для мапи.
<!-- Обгортка для мапи -->
<div id="map"></div>6. Імпортувати MetaMap в js-файл.
import MetaMap from "./libs/metaMap.js";7. Створити екземпляр мапи і передати конфіг для неї
const countryList = ["ES", "FR", "US", "GB"]; // список країн які треба підсвітити
// конфіг бібліотеки
const config = {
mapPath: "./js/json/map.geo.json", // Шлях до топографічних даних мапи
width: 1484,
height: 811,
markers: [ // Список маркерів
{
long: 6.184417,
lat: 48.692055,
},
{
long: -0.460739,
lat: 52.136436,
},
],
markerStyle: { //Стиль маркерів
img: "images/pin.svg",
width: 28,
height: 32,
},
selectedCountries: countryList,
zoomedCountries: countryList,
accentFillColor: "#266DA3",
countryFillColor: "#CBE6F1",
countryStrokeWidth: "1.5px",
};
const map = new MetaMap("#map", config);8. Якщо ви все правильно зробили мапа має працювати
API
Parameters
| selector | string | *require | Селектор елемента HTML контейнера мапи |
| config | object | *require | Об'єкт налаштувань для мапи |
Config
| mapPath | string | *require | Шлях до топографічних даних мапи |
| maxZoom | number | 20 | Максимальна кратність приближення |
| countryStrokeWidth | string | "0.25px" | Ширина кордону країни |
| countryFillColor | string | object | "#cccccc" | Колір країни |
| countryStrokeColor | string | "#ffffff" | Колір кордону країни |
| accentFillColor | string | object | "red" | Колір вибраних країн |
| accentStrokeColor | string | "#ffffff" | Колір кордону вибраних країн |
| groupFillColor | іекштп | "yellow" | Колір груп країн |
| width | number | string | 900 | Ширина мапи |
| height | number | string | 600 | Висота мапи |
| markers | array: object | [] | Масив маркерів |
| markerStyle | object | { color: "blue", img: null, width: 20, height: 20 } | Стиль маркерів |
| countryGroups | array: object | null | Масив груп країн |
| selectedCountries | array: string | [] | Масив вибраних країн |
| isZoomable | boolean | false | true - щоб дозволити зум мапи |
| zoomedCountries | array: string | Масив країн до яких буде призумлена мапа після ініціалізації | |
| on | object | Об'єкт слухачів подій |
Gradient fill color:
Для того щоб передати колір як градієнт, замість звичайного значення типу string, треба передати об'єкт з такими полями:
| rotate | 65 | Кут нахилу градієнту | |
| startColor | "#ffffff" | Стартовий колір градієнту (можна передавати розширені налаштування) | { color: "#ffffff", offset: "0%"} |
| endColor | "#000000" | Кінечний колір градієнту (можна передавати розширені налаштування) | { color: "#00000", offset: "100%"} |
Зсув градієнту також можна регулювати, треба передати об'єкт в поля statColor і endColor
Приклад:
// ...config
countryFillColor: { // буде звичайний градієнт без зсуву
rotate: 65,
startColor: '#061654',
endColor: '#04143A',
},
accentFillColor: { // градієнт із зсуву
rotate: 65,
startColor: {
color: "#04143A",
offset: "20%"
},
endColor: {
color: "#E4B700",
offset: "60%"
},
},
Country groups:
| id | "Europe" | Унікальний ідентифікатор групи |
| countryList | ["UA", "GB", "PL"] | Масив країн в групі |
Methods
| map.selectCountry(id) | Виділяє країну на мапі |
| map.selectCountryList(idList) | Виділяє масив країн на мапі |
| map.unselectCountry(id) | Прибирає виділення країни |
| map.unselectAllCountries() | Прибирає виділення усіх країн |
| map.zoomCountries(idList) | Призумлює мапу до переданих країн |
| map.moveToCountries(idList) | Переміщає карту до переданих країн |
| map.moveToCountry(id) | Переміщає карту до переданої країни |
| map.selectGroup(groupId) | Виділяє групу країн акцентним кольором |
| unselectAllGroups() | Прибирає виділення всіх груп країн |
Listeners
Події можна призначати в параметрі on при ініціалізації мапи.
// ... config
on: {
markerClick(path, data){
console.log("Marker was clicked!");
}
}
// ... config| countryClick | path, data, metaMap instance | Слухач який спрацьовує при кліку на країну |
| countryMouseEnter | path, data, metaMap instance | Слухач який спрацьовує при наведенні миші на країну |
| countryMouseLeave | path, data, metaMap instance | Слухач який спрацьовує коли миша покидає зону країни |
| markerClick | Слухач який спрацьовує при кліку на маркер | |
| markerMouseEnter | path, data, metaMap instance | Слухач який спрацьовує при наведенні миші на маркер |
| markerMouseLeave | path, data, metaMap instance | Слухач який спрацьовує коли миша покидає зону маркера |
Countries ID
Розміщаємо маркери на мапі
Для того щоб розмістити маркери на мапі треба в конфіг мапи передати масив об'єктів з широтою і довготою.
// ... config
markers: [
{
long: 6.184417,
lat: 48.692055,
},
{
long: -0.460739,
lat: 52.136436,
},
],
// ... configТакож можна передати додаткові дані в об'єкт маркеру, які будуть доступні, наприклад, при кліку на маркер.
// ... config
markers: [
{
long: 6.184417,
lat: 48.692055,
data: {text: "Some Text!"},
},
{
long: -0.460739,
lat: 52.136436,
data: {text: "Some Text 2!"},
},
],
// ... config
