Как реализовать такую штуку для удобного заполнения через админку?

Question

[Zombie42679]

В общем нужно, чтобы была область в клеточку пустая, а поверх неё рисуется уже здание серое, зеленые газоны и всякие иконки парковки и т.д., рисуется это всё в админке.

Я подумал, что неплохо было бы создать блок в клеточку с position: relative, и допустим для здания блок с классом house с position: absolute , и уже указывать координаты, смотря куда нужно разместить здание, если здание большое - менять width, height, либо дублировать блоки и таким образом "рисовать". Какие у кого еще есть варианты? Буду благодарен за ответы.

Answer 1

[Александр Талалаев]

Я думаю вам отлично подойдет API Яндекс карт, у них есть возможность использования и построения собственных карт в отрыве от земной поверхности.
А дальше в базе данных будете хранить id значков, id и координаты объектов, ну и прочие параметры.
Общий смысл работы такой же, как и с обычными яндекс картами.

Answer 2

[Сергей Новиков]

Может ваше решение в 2000е еще бы казалось бы нормальным, но сейчас есть и технологии и удобные библиотеки для этого. Попробуйте сделать такое на canvas, например, с помощью paper.js. Если хорошо поискать, наверняка есть хотя бы 50% решение такой задачи.

Comments

[Zombie42679]

Спасибо за ответ, но я не совсем понимаю как поможет paper.js , нужно чтоб человек в админке нарисовал рисунок каким-то образом и его уже сохранил не в формате картинки, а именно блоками на сайт и чтоб пользователь не смог его изменить.

Поэтому и считаю свой вариант неплохим, можно всё нарисовать через width, height и указать координаты.

[Сергей Новиков]

Zombie42679: Необязательно сохранять в виде картинке, сохраните в виде json, например, и с помощью той же библиотеки отобразить пользователю (которую вполне можно сделать интерактивной).

[Павел Корнилов]

Zombie42679: собственно, клеточку лучше реализовать в background, а всю карту рисовать в canvas. Можно и без библиотек - прямоугольные элементы и так легко рисуются. А сохранять нужно будет уже canvas-код.