Интерактивна карта на границите на България (1878–1945): Как е направена?

Създаването на интерактивни исторически карти е чудесен начин да визуализираме териториални промени, граници и геополитически събития по динамичен и достъпен начин. След като трасирах в шейп (shp) старите граници ми се искаше да им вдъхна малко живот и реално да показват промените на българската държавна територия между 1878 и 1945 г. А какъв по-добър пример, ако го правят показвайки старите имена на населените места.

Използвани технологии

• Mapbox GL JS – библиотека за интерактивни векторни карти.
• Mapbox Studio – използван за хостване на стилизирани карти и векторни слоеве.
• GeoJSON / Shapefile -> Vector Tiles – използвах геопространствени данни за граници, конвертирани във векторни слоеве с Mapbox tilesets.
• HTML, CSS и JavaScript – за изграждане на интерфейса и контролите.

Основна структура на кода

Проектът използва HTML файл, който съдържа:

1. Вграждане на Mapbox карта

var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/benkenogy/c --//-- h',
zoom: 7,
center: [24.850, 42.537]
});
Отне ми месец и половина да направя DataSet в Mapbox Studio, със старите имена на градове и села използвайки стари кари (както физически, така и от интернет), който да използвам като базова карта. Датата бе обърната в tileset и къстъмизирана в стил. Тъй като в имената има доста символи които не присъстват в повечето шрифтове, трябва доста да се внимава кой точно се ползва, иначе и Ѫ и Ѣ няма да се покажат коректно.

2. Зареждане на векторен слой със стари граници

map.addSource('old_borders_smoot-cids64', {
type: 'vector',
url: 'mapbox://benkenogy.d--//--5'
});
Това е основният геопространствен източник, който съдържа границите в различни исторически моменти. Всеки обект има уникален Id, по който филтрираме данните. Всички граници са сложени в един tileset за да мога да ги извиквам само с едно слагане на картата.

3. Добавяне на отделни слоеве за всеки исторически период
Например:

map.addLayer({
'id': 'Княжество България',
'type': 'line',
'source': 'old_borders_smoot-cids64',
'source-layer': 'old_borders_smoot-cids64',
'filter': ['==', 'Id', 1622],
'layout': {
'visibility': 'none',
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#877b59',
'line-width': 1
}
});

Този слой визуализира границите след Берлинския договор. Подобни слоеве има за Санстефанска България, Източна Румелия, Обединена България, границите след Балканските войни и Първата световна война, и т.н.

4. Създаване на интерактивно меню за включване и изключване на слоевете

var toggleableLayerIds = [ 'Сан Стефанска България', 'Княжество България', ... ];

for (var i = 0; i < toggleableLayerIds.length; i++) {
var id = toggleableLayerIds[i];

var link = document.createElement('a');
link.href = '#';
link.className = 'active';
link.textContent = id;

link.onclick = function (e) {
var clickedLayer = this.textContent;
e.preventDefault();
e.stopPropagation();

var visibility = map.getLayoutProperty(clickedLayer, 'visibility');

if (visibility === 'visible') {
map.setLayoutProperty(clickedLayer, 'visibility', 'none');
this.className = '';
} else {
this.className = 'active';
map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
}
};

var layers = document.getElementById('menu');
layers.appendChild(link);
}

Това добавя HTML меню в горния десен ъгъл, от което потребителят може да включва и изключва отделните слоеве с исторически граници. Менюто има един „недостатък“ обаче – не заменя старото извикване с новото при натискане на бутона, но в случая, това може би е предимство. Така могат да се видят няколко граници на веднъж за да се направи съпоставка.

Данни: откъде идват и къде отидоха?

Географските данни за границите са подготвени ръчно в QGIS чрез дигитализация на исторически карти. И ако за промените на границите има точни дати, то за имената е взета за образец една Пътна карта на България от 1934г.

Тази карта е само един от примерите как можем да комбинираме исторически източници, географска информация и съвременни уеб технологии, за да представим по интерактивен начин миналото. Сравнението на границите в различни епохи става буквално с едно кликване.

Забавлявайте се докато разглеждате картата

България в началото на 20 век

административни карти Кодове и инструменти Стари карти