Карты html: Тег | htmlbook.ru

Leave a Comment / Html / By /

Навигационные карты. Учебник html.

Глава 8

Мы с Вами уже говорили о том как сделать рисунок ссылкой.. в этой главе поговорим о том как сделать фрагмент, область рисунка ссылкой на тот или иной документ, а так же о том как сделать различные области одного и того же рисунка ссылками на различные документы.

Для осуществления данной задачи нам не обойтись без так называемых навигационных карт.

Предположим, у нас имеется такой рисунок:

..и нам необходимо сделать, так что бы пользователь, нажав на одну из этих «кнопок» переходил по ссылке в тот или иной документ.. что нам для этого нужно?

В первую очередь обозначим наш рисунок не как обыкновенное графическое изображение, а как навигационную карту присвоив этому рисунку своё индивидуальное имя. Делается это при помощи атрибута usemap тега <img> (я думаю Вам не стоит напоминать о том что тег <img> имеет обязательный атрибут src который указывает путь к той или иной картинке

<img src=»knopki. jpg»> )

Назовём наш рисунок/карту именем panel. Это будет выглядеть так:

<img src=»knopki.jpg» usemap=»#panel»>

Не забываем по правилам синтаксиса поставить знак #решётки перед именем..

Ну а теперь, собственно, составим навигационную карту. Она задаётся тегом <map> у которого есть атрибут name — имя.. улавливаете к чему я веду? Ну как Вы наверное уже догадались, укажем на базе какого рисунка мы будем строить нашу навигационную карту указав его имя..

<map name=»panel»>
</map>

Теперь займемся тем, что укажем браузеру области рисунка которые будут являться ссылками, а заодно пропишем пути переходов по этим ссылкам. Эту задачу берет на себя тег

<area>, закрывающего тега он не требует, и имеет следующие атрибуты, с которыми мы будем работать:

href — указывает путь к открываемому документу (точно так же как в теге <a>)
shape — форма области рисунка которая будет служить ссылкой. Может иметь одно из трёх значений:

  • rect — прямоугольная область
  • poly — область представляет собой некий многоугольник
  • circle — область заданная окружностью

coords — координаты формы

Теперь наша карта приобретает такой вид:

<map name=»panel»>
<area href=»primer1.html» shape=»rect» coords=»15,15,82,82″>


</map>

По сути теперь «зелёная» квадратная кнопка стала рабочей.

В чем Вы можете убедится нажав на неё в этом примере:

<html>
<head>
<title>Навигационная карта</title>
</head>
<body>
<center>
<img src=»karta. jpg» usemap=»#panel»>
</center>
<map name=»panel»>
<area href=»primer1.html» shape=»rect» coords=»15,15,82,82″>
</map>
</body>
</html>

смотреть пример  

Немного поспешил с примером толком не объяснив суть написанного.. Заострим внимание на атрибутах тега

<area>.

href=»primer1.html» — здесь думаю понятно, это путь к документу, который должен открыться при нажатии на «зелёную кнопку».

Так как кнопка у нас квадратная, а квадрат как известно это «правильный» прямоугольник, форму области рисунка назначаем прямоугольной shape=»rect».

А теперь самое интересное coords=»15,15,82,82″ — координаты.. Для прямоугольника они задаются двумя точками по принципу «Х1,У1,Х2,У2» Где Х1,У1- первая точка и соответственно Х2,У2 -вторая. Координаты указываются в пикселях.. Наш рисунок/карта имеет размеры 300 на 100 пикселей, её самый верхний левый пиксель имеет координаты Х=0,У=0, а самый нижний правый Х=300,У=100. Если не понятно, окунёмся в геометрию за пятый класс..

Взгляните на рисунок:

Так, выбрав прямоугольную форму

shape=»rect» для нашей области в виде квадратной кнопки мы указали координаты ёё верхнего левого и нижнего правого пикселей.. которых вполне достаточно для обозначения «рабочей» области всей кнопки.

Займёмся «жёлтой кнопкой», она у нас представлена в виде треугольника. Для того чтобы выделить её «рабочую» область из нашего рисунка, присвоим атрибуту shape значение poly — полигон, которое определит эту область как некий многоугольник, где координаты через запятую будут являться его вершинами, их может быть сколь угодно много «Х1,У1,Х2,У2,Х3,У3,Х4,У4… Х124,У124» фигура образованная этими точками вершинами углов может иметь вид любого многоугольника как правильного, так и неправильного. В нашем случае угла всего три, на то он и треугольник, следовательно его координаты будут заданы тремя парами значений «Х1,У1,Х2,У2,Х3,У3»

Значит всё вместе пишем так:

<area href=»primer2.html» shape=»poly» coords=»148,15,185,82,110,82″>

А вот рисунок который наглядно показывает откуда берутся координаты точек..

Пример:

<html>
<head>
<title>Навигационная карта</title>
</head>
<body>
<center>
<img src=»karta.jpg» usemap=»#panel»>
</center>
<map name=»panel»>
<area href=»primer1.html» shape=»rect» coords=»15,15,82,82″>
<area href=»primer2.html» shape=»poly» coords=»148,15,185,82,110,82″>
</map>
</body>
</html>

смотреть пример  

Ну и последняя «красная кнопка» она у нас круглая. . значит форма области будет круглой shape= «circle». На сей раз с координатами дело обстоит немного иначе. Нам понадобится три значения Х,У,R. Х и У это координаты центра нашей окружности, а R — это длина радиуса в пикселях.

Вот рисунок:

А вот пример:

<html>
<head>
<title>Навигационная карта</title>
</head>
<body>
<center>
<img src=»karta.jpg» usemap=»#panel»>
</center>
<map name=»panel»>
<area href=»primer1.html» shape=»rect» coords=»15,15,82,82″>
<area href=»primer2.html» shape=»poly» coords=»148,15,185,82,110,82″>
<area href=»primerk3.html»

shape=»circle»coords=»250,50,33″>
</map>
</body>
</html>

смотреть пример  

Теперь немного о том, что ещё желательно было бы сделать с нашей картой прежде чем «монтировать» её в какую либо страницу.

Определим фиксированные размеры рисунка-карты атрибутами width и height

Напишем альтернативный текст, как для всего рисунка карты, так и для её отдельных областей используя атрибут alt, а также описание элементов атрибутом title.

Избавимся от рамки бордюра.. сделаем border=»0″..(ну если Вам с бордюром больше нравится, можете этого не делать.. я не настаиваю..)

В конце должно выглядеть примерно вот так:

<html>


<head>
<title>Навигационная карта</title>
</head>
<body>
<center>
<img src=»karta.jpg» usemap=»#panel» width=»300″ border=»0″ alt=»Панель управления» title=»Панель управления»>
</center>
<map name=»panel»>
<area href=»primer1. html» shape=»rect» coords=»15,15,82,82″ alt=»Зелёная кнопка» title=»Зелёная кнопка»>
<area href=»primer2.html» shape=»poly» coords=»148,15,185,82,110,82″ alt=»Жёлтая кнопка» title=»Жёлтая кнопка»>
<area href=»primer3.html» shape=»circle»coords=»250,50,33″ alt=»Красная кнопка» title=»Красная кнопка»>
</map>
</body>

</html>

смотреть пример  

Иногда удобно формировать «рабочую» область изображения «смешивая» разные формы..

Предположим, наша очередная кнопка имеет такой вид:

Конечно, можно определить форму как многоугольник, но придется задать уйму координат для округлой части такой кнопки (ну это если нужна особая точность в навигационной карте).

А можно определить в этом примере две формы прямоугольник rect и окружность circle как показано на рисунке:

А в коде указать путь к одному и тому же документу:

Пример:

<html>
<head>
<title>Навигационная карта</title>
</head>
<body>
<center>
<img src=»karta1.

jpg» usemap=»#panel1″ border=»0″ alt=»Панель управления»>
</center>
<map name=»panel1″>
<area href=»primer4.html» shape=»circle»coords=»206,50,33″ title=»Синяя кнопка»>
<area href=»primer4.html» shape=»rect» coords=»80,17,206,83″ title=»Синяя кнопка»>
</map>
</body>
</html>

смотреть пример  

Однако стоит помнить о том, что если бы ссылки с разных форм вели к разным документам, то нажимая на область пересечения наших фигур посетитель будет переходить по той ссылке, чья область в коде указана первой.. в нашем случае это окружность.

Рассмотрим на примере.. предположим необходимо изготовить вот такую кнопку:

Как быть с отверстием в ней?

Тег <area> помимо атрибута href имеет противоположенный по значению атрибут nohref — неактивная область, то есть если пользователь нажмет на такую область, то ровным счетом ничего не произойдёт, чего нам собственно и необходимо добиться при изготовлении «отверстия» в нашей карте.

Карта будет задана двумя областями, неактивной окружностью circle и активной прямоугольной областью rect и как показано на рисунке чертеже иметь следующие координаты:

Как уже говорилось ранее, при пересечении областей наибольшим приоритетом будет пользоваться та область, которая в коде внутри тега <map> указана первой

Следовательно, пример будет иметь такой вид:

<html>
<head>
<title>Навигационная карта</title>
</head>
<body>
<center>
<img src=»karta2.jpg» usemap=»#panel2″ border=»0″ alt=»Панель управления»>
</center>
<map name=»panel2″>
<area nohref shape=»circle» coords=»76,74,35″ title=»дырка»>
<area href=»primer5.html» shape=»rect» coords=»25,22,126,124″ title=»Дырявая кнопка»>
</map>
</body>
</html>

смотреть пример  

Отрывок из справочника (атрибуты тега <img>):

usemap — изображение является навигационной картой на стороне клиента.
ismap — изображение является навигационной картой на сервере.

Непонятно? Тогда читаем..

С атрибутом usemap мы вроде бы разобрались.. Смотрите, пользователь (клиент) открыв Вашу страницу, одновременно со всем остальным содержанием, загружает «на свою сторону» как сам рисунок, так и навигационную карту к нему и всё это дело обрабатывается его браузером.

А вот атрибут ismap тега <img> говорит браузеру о том, что к данному изображению на сервере, ну там где Вы выложили или собираетесь выложить свой сайт (читаем статью: «Публикация сайта»), есть навигационная карта. И теперь, когда посетитель (клиент) кликнет по какой либо области рисунка с таким атрибутом, браузер запомнит координаты этого клика и отправит их на сервер, где специальная программка обработает эти данные и перенаправит пользователя на тот адрес который указан в карте на сервере, в соответствии с полученными от браузера клиента координатами точки.

Пишется так:

<a href=»http://www.site.ru/imagemaps/karta»><img srs=»knopki.jpg» ismap></a>

Где <a href=»http://www.site.ru/imagemaps/karta»> адрес навигационной карты на каком либо сайте.. размещённом на том или ином сервере..

Всё равно непонятно? Если да, то тогда не стоит заморачивотся по этому поводу.. используйте usemap, на мой взгляд такое решение будет лучшим в большинстве случаев при использовании навигационных карт.

  • Что бы без труда определить координаты той или иной точки на Вашей навигационной карте откройте рисунок графическим редактором тем же Paint к примеру.. там, когда будете двигать указателем по рисунку, увидите две меняющиеся цифры, это и есть координаты пикселя Х и У на данном рисунке. В Paint эта панелька расположена в нижней части экрана.

  • При создании страницы с навигационной картой тег <img> всегда должен быть выше самой карты <map> То есть писать вот так:

    <map name=»panel»>
    <area href=»primer1. html» shape=»rect» coords=»20,20,80,80″>
    </map>

    <img src=»knopki.jpg» usemap=»#panel»>

    ..можно, но не нужно.. потому что при загрузке страницы могут возникнуть проблемы, так как карта с разметкой уже загрузилась, а самого рисунка ещё нет..

  • И ещё что касается загрузки..

    <img src=»knopki.jpg» usemap=»#panel»>

    В этом месте кода может быть всё что угодно длинный текст, таблицы, графика.. но всё же лучше здесь ничего не писать

    <map name=»panel»>
    <area href=»primer1.html» shape=»rect» coords=»20,20,80,80″>
    </map>

    А писать здесь, так как во время загрузки страницы, пользователь не дождавшись её окончания, может пытаться нажимать на кнопки указанные в навигационной карте которая к этому времени еще не загрузилась..


XML и HTML карта сайта

Карта сайта представляет собой определенную интернет-страницу, которая отображает детальную структуру ресурса.


Таким образом, карта сайта — это своего рода путеводитель и «оглавление» одновременно. Она не только дает сведения о структурности сайта, но и является кратким его содержанием. Конечно, если разговор идет о какой-то персональной странице или небольшом сайте-лендинге (в одну или несколько страниц), необходимости в карте нет — поскольку вся информация наглядно представлена на главной странице, и фактически, сама эта страница и является картой сайта. Однако множество интернет ресурсов в настоящее время состоят уже не из сотен, а включают в себя тысячи страниц. В таком случае без карты сайта уже никак не обойтись.

Более того, карта сайта играет роль «компаса» как для человека, так и для поисковых систем, роботов, которые необходимы для продвижения интернет-ресурса. В последнем случае карта сайта — это то, что:

  • содержит все URL адреса, относящиеся к ресурсу;
  • распределяет приоритеты индексации страниц;
  • указывает дату последнего изменения страницы.

Разновидности карты сайта

Итак, справившись с вопросом, что же это такое — карта сайта, самое время перейти к тем нюансам, которые определяют ее формат, в зависимости от того, кто затребовал информацию, человек или поисковик. Для этого существует две разновидности карты сайта: HTML для человека и XML для поисковых систем. Большинство ресурсов современной сети и все крупные интернет-порталы рассчитаны как для человека, так и для поискового робота, потому и содержат обе карты. Если крупный интернет-ресурс вдруг окажется без карты, его позиции в выдаче, скорее всего, быстро просядут. Именно благодаря карте поисковики получают оперативную информацию обо всех обновлениях, происходящих на сайте, об изменении приоритетов индексации или появлении новых страниц, которые необходимо занести в базу поиска. Иначе интернет-ресурс быстро теряется в онлайн-пространстве со всем своим множеством давно не индексированных страниц.

Однако, если роботу важны цифры, адреса, то у человека на первом плане наглядность. Поэтому предназначение HTML карты — максимально упростить визуальное восприятие структуры сайта. От этого зависит, насколько посетитель быстро сумеет сориентироваться на конкретном интернет-ресурсе и получить необходимую ему информацию или найти нужный ему продукт. А это выливается в посещаемость ключевых страниц и, зачастую, в доходы — например, в случае интернет-магазинов.

Принцип создания XML-карты

Чтобы создать карту сайта в XML-формате, можно поступить тремя различными способами.

Первый, самый верный способ, — сделать XML карту самому. Все что для этого необходимо — свободное время и определенные навыки. Вариант абсолютно бесплатный и наиболее универсальный, если, конечно, уметь это делать.

Второй вариант, который подходит для большинства пользователей, — воспользоваться одним из бесплатных интернет-сервисов, сотни которых представлены в Сети.

И последний способ — создать XML-карту при помощи платного генератора. Этот вариант хоть и требует финансовых вложений, но является одним из наиболее надежных.

Что должен содержать файл XML-карты сайта

Основные требования, которым должна отвечать XML-карта, следующие:

  • размер не превышает 10 Мб;
  • максимум по адресам — 50000;
  • адрес карты прописан в корневом каталоге сайта «robots.txt»;
  • карта загружена в панели вебмастера Google и Yandex.

Содержимое Sitemap.xml представляет собой набор адресов ресурса и параметров, важных для их индексации. Как пример рассмотрим абстрактную страницу:

www.mypage.ru

2015-05-07

always

0.8

Первая строка — непосредственно адрес интернет страницы, вторая указывает дату ее последнего обновления. Третьим следует параметр, определяющий, как часто изменяется содержимое страницы. Он принимает значения от «always» — постоянно ­— до «never» — никогда. Последнее значение рекомендуется не использовать. И в конце списка указан приоритет индексации, диапазон значений 0–1. Для главной страницы его можно установить в 1. Параметр 0.8 является оптимальным для ключевых разделов интернет-портала.

Если интернет-ресурс настолько велик, что содержит более 50000 адресов или получающаяся карта превышает допустимый размер в 10 Мб, можно разбить XML-карту на несколько файлов.

Регистрация карты сайта

Когда XML-карта сайта готова, остается переименовать результирующий файл в «Sitemap.xml» и прописать его в корне ресурса. Чтобы облегчить работу поисковым машинам, рекомендуется добавить XML карту в панели вебмастеров таких поисковых систем, как Google и Yandex.

В случае, к примеру, с Google алгоритм будет следующим:

  • авторизоваться в «Инструментах»,
  • выбрать вкладку «Сканирование»,
  • перейти к пункту «файлы Sitemap»,
  • указать необходимый адрес и нажать «Отправить файл Sitemap».

Все, XML-карта полностью готова и активирована. Напоследок только пара рекомендаций. Первое: файл карты нужно создавать в кодировке UTF8. Второе: в XML-карте все адреса страниц определяйте в одном формате, либо используя «www», либо нет.

Создание «человеческой» HTML карты

Основные требования к HTML-карте — это простота, наглядность и информативность. Она должна помогать сайту удерживать посетителей, а не отталкивать их громоздкостью содержимого, обилием разделов и пунктов меню.

Дополнительно следует позаботиться о следующих пунктах. Необходимо запретить поисковому роботу включение страниц в базу индексов. Для этого используйте соответствующий тег <METAname=»robots» content=»noindex, follow, noarchive» />. Не используйте более 200 ссылок на странице. И последнее — не забудьте указать ссылку на карту сайта на главной странице ресурса.

Для большей наглядности, чтобы показать, как выглядит карта сайта HTML, пример приводим ниже.


Разумный подход в создании карт сайта способствует своевременной индексации ключевых страниц интернет-ресурса, что позволяет увеличить трафик. Для интернет-магазинов это дополнительный способ не только обеспечить, но и поддерживать уровень продаж на высокой отметке.

Карты для HTML — стандартизация программ просмотра карт в Интернете

Карты для HTML — стандартизация программ просмотра карт в Интернете

🔗 О группе сообщества

Группа сообщества Maps for HTML работает над стандартизацией методы определения интерактивных географических карт для Интернета.

Группа сообщества организована консорциумом W3C (World Wide Web Consortium), и открыт для всех, кто интересуется картами и веб-стандартами.

Для получения дополнительной информации проконсультируйтесь:

  • Карты для домашней страницы HTML Community Group на w3. org

    Включает в себя блог, списки действующие участники и председатели , вместе с другой информацией (большая часть которой также доступна здесь) например, ссылки на проекты отчетов группы и социальные сети.

    Самое главное из всех , здесь ты присоединяйтесь к группе сообщества Maps for HTML!

    Чтобы присоединиться к группе сообщества, вам необходимо создать учетную запись W3C , и примите Лицензионное соглашение участника сообщества W3C. Если у вас есть работодатель с правами на работу, которую вы создаете, им может потребоваться присоединиться от вашего имени.

  • Страница «О программе» для всех групп сообщества, размещенных на W3C

    С подробностями процесса и юридические/интеллектуальные требования для участия в общественной группе.

  • Архив групповой рассылки

    Содержит историю уведомлений и обсуждений. Однако большинство обсуждений происходит в репозиториях проектов GitHub.

  • Организация Maps4HTML на GitHub

    Большинство работ группы можно найти здесь (включая эту веб-страницу).

🔗 Технические характеристики и отчеты

Доклады группы и объяснители:

  • Отчет о совместном семинаре W3C-OGC по картам для Интернета

    Отчет о семинаре по веб-картографии, который был проведен W3C и OGC.

  • Варианты использования и требования к стандартизации веб-карт (репозиторий GitHub)

    Обзор того, почему HTML нужен встроенный элемент просмотра карт, который может объединять несколько слоев в интерактивный вид.

  • Предложение MapML

    Объяснение предложения MapML. Возможно, это лучшее место для начала попытки понять сущность предложения MapML.

  • Спецификация MapML (репозиторий GitHub)

    Язык разметки карт (MapML) — это предложение нового формата документа для описания карт, который может содержать смесь мозаичных изображений, векторные объекты (например, точки, линии, многоугольники), и гиперссылки на соответствующие ресурсы.

    Включает предложение о том, как можно определить вьюер карты HTML и элементы слоя. Документы MapML можно использовать в качестве слоев в просмотрщике карт HTML.

  • Матрица выполнения MapML UCR (репозиторий GitHub)

    Размещенные примеры и документы о том, как MapML и существующие популярные библиотеки веб-картографирования выполняют Варианты использования и требования к стандартизации веб-карт.

  • Инженерные отчеты MapML из инновационной программы OGC
    • Стенд 13 — ранние идеи сообщества
    • Стенд 14 — улучшенный словарный запас
    • Стенд 15 — улучшена векторная модель
    • Стенд 16 — Обзор предложения MapML Саймона Питерса
  • Дизайн MapML

    Сообщение в блоге с подробным описанием того, как предложение MapML связано с Принципы HTML-дизайна.

🔗 Программные проекты

Следующие проекты (размещено в учетной записи GitHub группы сообщества) дают возможность поэкспериментировать с предложенными спецификациями:

  • Пользовательский элемент веб-карты

    Полифил предложения MapML в виде набора пользовательских элементов HTML с использованием Leaflet. как движок рендеринга карты.

    Посмотреть размещено эксперименты и документация для полифилла MapML-viewer.

  • Браузерное расширение MapML

    Только браузеры Chromium (Manifest v3). Среди прочих функций браузер расширение отображает удаленный MapML документы в виде карт, которые в противном случае были бы непонятны браузеру без главной веб-страницы, содержащей настраиваемые элементы, реализующие словарь.

    Реализует интернационализация/локализация карты.

  • Расширение GeoServer MapML

    Расширение GeoServer, которое позволяет выводить MapML, поддерживает изображения, функции и плитки. Есть базовый документация доступно о том, как установить модуль.

  • Модуль MapServer MapML

    Проект MapServer — одна из самых ранних и зрелых реализаций. спецификации OGC WMS. MapServer реализация MapML запланирован к выпуску вместе с MapServer 8.2. В настоящее время ищет волонтер, чтобы привести проект к производству.

  • Средство проверки HTML-MapML

    Экспериментальный/незавершенный форк проекта validator.nu. который проверяет документы MapML. Цель состоит в том, чтобы проверить HTML включая разметку карты, а также независимые документы text/mapml .

  • Парсер HTML-MapML

    Экспериментальный / незавершенный форк validator.nu HTML-парсер.

    • Плагин форматирования MapML
  • pygeoapi

    Плагин форматирования MapML для пигеоапи.

  • Мапмлсервер

    Мозаичный сервлет MapML Проект Maven Java.

🔗 Рабочие демонстрации

Веб-сайты, использующие пользовательский элемент и сервер MapML, организовано Министерством природных ресурсов Канады.

  • Демонстрационные сервисы MapML

    Интерактивные просмотрщики карт, с картами на разную тематику и в разных проекциях, включая арктические виды (не поддерживается большинством систем листов веб-карт).

  • Пример вектора

    В этом документе используется прототип GeoJSON API для преобразования GeoJSON. содержимое в стилизованные векторы MapML.

🔗 События

Конференции, протоколы совещаний, презентации, семинары и другие важные мероприятия:

  1. Карты для встречи группы сообщества HTML — TPAC 2022 Гибридные протоколы совещаний
  2. Карты для встречи группы сообщества HTML — TPAC 2022 Гибридные протоколы совещаний
  3. Maps for HTML отчет сообщества протокол встречи и презентация SDWIG телеконференция.
  4. Краткая презентация серии совместных семинаров W3C/OGC по картам для Интернета и последующее обсуждение W3C TPAC , виртуальная встреча.
  5. Серия совместных семинаров W3C/OGC по картам для Интернета Виртуальный семинар W3C/OGC, организованный NRCAN . – , 2020.
  6. Нативные карты в браузере (и HTML) отправка и презентация Мероприятие WebWeWant, конференция Smashing. Нью-Йорк, штат Нью-Йорк, США. – , 2019.
  7. MapML: (новый) элемент map HTML, теперь в программе MapServer, GDAL и OGR и презентация FOSS4G . Бухарест, Румыния. .
  8. Интеграция поддержки веб-карт в браузеры повестка дня и протокол заседаний W3C TPAC . Фукуока, Япония. – , 2019.
  9. Что может принести MapML сообществу INSPIRE подчинение и презентация INSPIRE конференция. Антверпен, Бельгия. .
  10. Обсуждение MapML: протокол встречи SDWIG F2F/IRC. Амерсфорт, Нидерланды. .
  11. Презентация Расширение сети Интернет с помощью Карт Расположение и веб-семинар. Монреаль, Канада. – , 2016 г.
  12. Справочник GeoGratis API и Заметки БарКемпа — расширение сети для включения связанных геопространственных данных (рождение группы сообщества Maps for HTML!) Семинар W3C/OGC по связыванию геопространственных данных. Лондон, Англия. .

🔗 Другие ссылки

Следующие связанные проекты не контролируются и не публикуются группой сообщества, но может представлять интерес:

  • Библиотеки JavaScript с открытым исходным кодом для создания пользовательских веб-карт:
    • OpenLayers
    • Листовка
  • SVGMap

    Альтернатива MapML для стандартизации интерактивных веб-карт, опираясь на способность SVG смешивать фрагменты изображений с векторными элементами и гиперссылками.

    См. соответствующие предложения по стандартизации ключевых новых функций SVG: Модуль SVG Tiling and Layering (предложение) и предложение SVG globalView.

Исходный код этой веб-страницы размещен на GitHub. Пожалуйста, сообщите о проблеме или сделайте запрос на включение если вы нашли опечатку или неработающую ссылку, или если вы считаете, что мы должны добавить другую информацию.

Питание, физическая активность и ожирение: данные, тенденции и карты | ДНПАО

испанский | Другие языки

Питание, физическая активность и ожирение: данные, тенденции и карты

Эта интерактивная база данных предоставляет данные на национальном уровне и уровне штатов о состоянии здоровья и поведении американцев, а также об экологической или политической поддержке. Категории включают грудное вскармливание, фрукты и овощи, физическую активность, сладкие напитки, просмотр телевизора и ожирение/вес. Посетители могут использовать опцию «просмотр по», чтобы изучить данные по демографии, такой как пол и раса/этническая принадлежность. Данные поступают из нескольких источников.

Щелкните штат на карте или воспользуйтесь раскрывающимся меню. Для данных по всей стране выберите национальный в раскрывающемся меню. Вы можете исследовать категории по темам и годам.

Location   Select oneNationalAlabamaAlaskaArizonaArkansasCaliforniaColoradoConnecticutDelawareDistrict Of ColumbiaFloridaGeorgiaHawaiiIdahoIllinoisIndianaIowaKansasKentuckyLouisianaMaineMarylandMassachusettsMichiganMinnesotaMississippiMissouriMontanaNebraskaNevadaNew HampshireNew JerseyNew MexicoNew YorkNorth CarolinaNorth DakotaOhioOklahomaOregonPennsylvaniaRhode IslandSouth CarolinaSouth DakotaTennesseeTexasUtahVermontVirginiaWashingtonWest VirginiaWisconsinWyomingGuamPuerto RicoVirgin Islands 

Щелкните штат на карте или воспользуйтесь раскрывающимся меню. Для данных по всей стране выберите национальный в раскрывающемся меню. Вы можете исследовать категории по темам и годам.

Location  
Select oneNationalAlabamaAlaskaArizonaArkansasCaliforniaColoradoConnecticutDelawareDistrict Of ColumbiaFloridaGeorgiaHawaiiIdahoIllinoisIndianaIowaKansasKentuckyLouisianaMaineMarylandMassachusettsMichiganMinnesotaMississippiMissouriMontanaNebraskaNevadaNew HampshireNew JerseyNew MexicoNew YorkNorth CarolinaNorth DakotaOhioOklahomaOregonPennsylvaniaRhode IslandSouth CarolinaSouth DakotaTennesseeTexasUtahVermontVirginiaWashingtonWest VirginiaWisconsinWyomingGuamPuerto RicoVirgin Islands


Щелкните штат на карте или воспользуйтесь раскрывающимся меню. Для данных по всей стране выберите национальный в раскрывающемся меню. Вы можете исследовать категории по темам и годам.

Location   Select oneNationalAlabamaAlaskaArizonaArkansasCaliforniaColoradoConnecticutDelawareDistrict Of ColumbiaFloridaGeorgiaHawaiiIdahoIllinoisIndianaIowaKansasKentuckyLouisianaMaineMarylandMassachusettsMichiganMinnesotaMississippiMissouriMontanaNebraskaNevadaNew HampshireNew JerseyNew MexicoNew YorkNorth CarolinaNorth DakotaOhioOklahomaOregonPennsylvaniaRhode IslandSouth CarolinaSouth DakotaTennesseeTexasUtahVermontVirginiaWashingtonWest VirginiaWisconsinWyomingGuamPuerto RicoVirgin Islands 

Просмотр доступных данных для конкретных индикаторов. Сначала выберите категорию, затем выберите тему.

Категория Выберите одинОжирение / Статус весаГрудное вскармливаниеФрукты и овощиФизическая активностьСахарные напиткиПросмотр телевизора

Тема Выберите один

Сравните данные по местоположениям по всем показателям.

Нужна помощь в поиске чего-либо в Data, Trends и Maps?

Узнайте, как использовать этот инструмент

Уровни начала грудного вскармливания округа

Диагностированный диабет

Локальные тенденции при смертности от сердечных заболеваний и инсульта

Интерактивный атлас сердечно -сосудистых заболеваний и инсульта

Измерения хронических заболеваний по месту

CDC/ATSDR Social Ivenerability

.

  • Информация об источнике данных
  • Определения
  • Свяжитесь с нами

    • Глобальная обсерватория физической активности: Карточки стран

    Информационная система Всемирной организации здравоохранения по витаминам и минеральному питанию (VMNIS)

    Глобальный обмен данными по обогащению (GFDx)

    • Данные и статистика по грудному вскармливанию
    • Отдел питания, физической активности и ожирения
    • Данные о питании и статистика
    • Данные и статистика по избыточному весу и ожирению
    • Государственные и местные программы
    • Данные и статистика физической активности

    Связь с питанием, физической активностью и ожирением

    значок fb   
    значок twitter   
    значок youtube   
    значок оповещения

    Настройки конфиденциальности CDC.
    gov

    Мы серьезно относимся к вашей конфиденциальности. Ниже вы можете просмотреть и изменить способ сбора информации.

    Флажок «Эффективные файлы cookie»

    Эти файлы cookie позволяют нам подсчитывать посещения и источники трафика, чтобы мы могли измерять и улучшать производительность нашего сайта. Они помогают нам узнать, какие страницы являются наиболее и наименее популярными, и увидеть, как посетители перемещаются по сайту. Вся информация, которую собирают эти файлы cookie, является агрегированной и, следовательно, анонимной. Если вы не разрешите использование этих файлов cookie, мы не будем знать, когда вы посещали наш сайт, и не сможем отслеживать его работу.

    Флажок «Функциональные файлы cookie»

    Файлы cookie, используемые для того, чтобы сделать функциональность веб-сайта более актуальной для вас. Эти файлы cookie выполняют такие функции, как запоминание параметров или вариантов представления и, в некоторых случаях, предоставление веб-контента на основе самоопределяемой области интересов.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *