В интернете появилось много подобных сайтов, а так же стало популярно размещать у себя на сайте подобные карты с распространением короновируса. На самом деле такой подход можно использовать ко многим вещам, а не только болезням. Так как в графическом виде информация для большинства людей выглядит более наглядно и понятно.
Тут я не буду останавливаться на политических и моральных аспектах подобной информации на своём сайте. Меня интересует более технический подход, как всё это делается и от куда берется подобная информация.
Как разместить карту у себя на сайте
Можно конечно сделать всё с нуля, но в большинстве случаев изобретать новый велосипед просто не имеет смысла. Существует довольно много различных платформ для работы с картографической информацией. Самые популярные у нас это Google Maps и Yandex Maps. Кроме этих популярных платформ есть несколько более свободных аналогов с более простой лицензией, например OpenStreetMap. С помощью этих платформ можно создать свою карту с любой информацией, в том числе и по распространению короновируса ( COVID-19 ).
Конечно заполнить всё это информацией и поддерживать в актуальном состоянии это очень сложно и затрудненно. Поэтому проще взять и использовать уже готовую карту которой занимаются профессионалы. Актуальность и вся правдивость такой информации ложится уже на плечи её создателей.
Собственно мы подошли к вопросу о том как всё это делается. И мне видится два пути:
- Создать свою карту на основе готового движка и заниматься её поддержкой и актуальностью
- Взять уже готовую карту и разместить у себя её код.
В случае второго пути всё очень просто и остаётся только использовать готовый код у себя на сайте. Именно такой подход я покажу прям сейчас как можно реальзивать у себя на сайте.
Размещаем карту covid19 у себя на сайте
В свободном доступе я нашёл карту от Яндекса, которую легко можно скопировать и разместить у себя на сайте. Вот её код:
<div style="position:relative;overflow:hidden;"><a href="https://yandex.ru/maps?utm_medium=mapframe&utm_source=maps" style="color:#eee;font-size:12px;position:absolute;top:0px;">Яндекс.Карты</a><a href="https://yandex.ru/maps/covid19?ll=41.775580%2C54.894027&utm_medium=mapframe&utm_source=maps&z=3" style="color:#eee;font-size:12px;position:absolute;top:14px;">Яндекс.Карты</a><iframe src="https://yandex.ru/maps/covid19?embed=covid-map" width="560" height="400" frameborder="1" allowfullscreen="true" style="position:relative;"></iframe></div>
Вам остаётся только скопировать этот код к себе на сайт и в итоге вы получите что-то подобное что видите ниже:
Растянуть, поменять дизайн или изменить какую-то информацию возможно прям на лету используя JavaScript и тут хватит навыков самого начинающего программиста. Если возникают с этим трудности всегда можно обратиться на биржу фриланса и там найдется куча народу которые за минимальные деньги помогут с этим вопросом. В самом сложном случае можете написать мне.