Създаването на интерактивни исторически карти е чудесен начин да визуализираме териториални промени, граници и геополитически събития по динамичен и достъпен начин. След като трасирах в шейп (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г.
Тази карта е само един от примерите как можем да комбинираме исторически източници, географска информация и съвременни уеб технологии, за да представим по интерактивен начин миналото. Сравнението на границите в различни епохи става буквално с едно кликване.
Забавлявайте се докато разглеждате картата
