#проект дня

Мы прошлым летом проводили отпуск в Валенсии. Целью был более пляжный и гастрономический отпуск, нежели любование музеями и природой, потому поселились в районе, который когда-то представлял из себя рыбацкую деревню — Эль Каваньял (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