Мы прошлым летом проводили отпуск в Валенсии. Целью был более пляжный и гастрономический отпуск, нежели любование музеями и природой, потому поселились в районе, который когда-то представлял из себя рыбацкую деревню — Эль Каваньял (El Cabanyal).
Этот бывший рыбацкий квартал славится домами, украшенными азулежу — расписными глазурованными плитками. Они служили не только украшением, но и защитой стен от влаги и солнца.
Часто встречаются узоры в сине-белых тонах, растительные мотивы, геометрические орнаменты и изображения святых. Многие дома облицованы плиткой полностью или частично, создавая неповторимый колорит района. Сейчас плитки ценятся как культурное наследие, но часть зданий с ними утрачена из-за застройки.
Меня настолько эти плитки и эта традиция восхитили, что я посвятил несколько прогулок по жаре +40 только их фотографированию.
К сожалению, сфотографировать и сами дома тоже мозгов не хватило.
И так фотографии и лежали с конца июля, но я подумал, что пришло время их оформить в очередной проект!
Итак:
1. Собираем фотографии в каталоге
2. Вычленяем из них геоданные
3. Находим в интернете векторный файл пина на карте, для маски, и готовим картинки маркеров и миниатюры.
4. Выводим всё на карте используя библиотеку React Leaflet.
Ну по пути, конечно, пришлось придумать простой алгоритм, центрирующий карту по фотографиям и отсекающий выбросы. Довольно коротко получилось:
const sortedTiles = [...tiles].sort((a, b) => a.lat - b.lat || a.lng - b.lng);
const majorityStart = Math.floor(tiles.length * 0.3);
const majorityEnd = Math.ceil(tiles.length * 0.7);
const majorityTiles = sortedTiles.slice(majorityStart, majorityEnd);
Код в репозитории:
💻 https://github.com/bekharsky/el-cabanyal-tiles
Ну и сама карта, конечно же!
📌 https://bekharsky.github.io/el-cabanyal-tiles/
Кликаем на маркер, а потом перемещаемся по ним клавиатурой.
Мне дико обидно, что я заодно не сфотографировал дома (впрочем, я потом пройдусь по архиву, что-то было же точно), но мне всё равно очень нравится то, что получилось. Какой-никакой музей :)
#spain #valencia #tile #react #leaflet