• Ввойдите на сайт >>>

Статьи

Создавайте мобильные интерактивные карты

  1. Создание карты
  2. Получение данных
  3. Загрузка данных
  4. Отображение данных
  5. Добавление аннотаций
  6. Добавление символов погоды
  7. Делать это красиво

листовка   это легкая библиотека JavaScript для создания интерактивных карт в Интернете

листовка это легкая библиотека JavaScript для создания интерактивных карт в Интернете. Это альтернатива Google Maps с открытым исходным кодом, и из-за своего небольшого размера она отлично подходит для мобильных приложений. Листовка позволяет нам добавлять маркеры и другие геометрические фигуры на карту, что делает ее отличной для визуализации географических данных.

В этом уроке мы создадим собственную карту погоды на основе данных из Met Office. По ходу дела мы узнаем, как создать карту с помощью Leaflet, как загрузить прогнозные данные из Met Office и как добавить управляемые данными символы на нашу карту.

Создание карты

Создание карты

Наша первая карта Leaflet, использующая сервер листов OpenStreetMap с центром в Великобритании

Leaflet создает карты на основе плиток, которые состоят из нескольких изображений (называемых плитками), загруженных с сервера. Существует несколько доступных серверов плиток, но для начала мы будем использовать сервер плиток OpenStreetMap.

Начнем с создания файла index.html с элементом контейнера:

<div id = "myMap"> </ div>

Важно установить высоту этого элемента, иначе карта будет невидимой! Чтобы сделать карту с помощью Leaflet, нам нужно сделать три вещи:

  • Создайте объект карты с помощью L.Map (), передав идентификатор элемента контейнера
  • Создайте слой листов (используя наш выбранный сервер листов)
  • Установите широту, долготу и уровень масштабирования

Вот JavaScript, который нам нужен для создания простой карты с центром в Великобритании (см. Пример кода 1 в GitHub репо ):

var map = new L.Map ('myMap'); var osmLayer = new L.TileLayer ('http: // {s} .tile.openstreetmap.org / {z} / {x} / {y} .png', {атрибуция: 'Картографические данные (C) <ссылка) = "http://openstreetmap.org"> участники OpenStreetMap </a> '}); map.addLayer (osmLayer); map.setView ([55, -5], 6);

Получение данных

Теперь мы собираемся получить некоторые данные из службы DataPoint в Met Office, которая предоставляет несколько каналов данных о погоде. Одним из его предложений является API, который предоставляет данные прогноза погоды в ряде мест в Великобритании. Мы будем использовать это для получения данных для нашей карты.

Чтобы использовать DataPoint, вам сначала нужно посетить www.metoffice.gov.uk/datapoint и создать учетную запись. После этого вы сможете получить свой личный ключ API (если вы не хотите этого делать, данные предоставлены в примере кода 2).

Давайте сделаем простой запрос на прогноз на конкретную дату. Перейдите по следующему URL-адресу с помощью браузера:

http://datapoint.metoffice.gov.uk/public/data/val/wxfcs/all/json/all?res=daily&time=YYYY-MM-DD&key=YOUR-API-KEY-HERE

Вам нужно будет ввести дату в виде строки ГГГГ-ММ-ДД (например, 2016-02-10) и вставить свой ключ API там, где написано ВАШ-API-КЛЮЧ-ЗДЕСЬ. DataPoint предоставляет прогнозы только на пять дней вперед, поэтому вам нужно будет ввести дату в ближайшем будущем.

Когда вы вводите этот URL, в конечном итоге появится большой объект JSON, который выглядит примерно так:

{"SiteRep": {"Wx": {"Param": [{"name": "FDm", "units": "C", "$": "По ощущениям ...

Сохраните это в своем браузере в каталоге вашего проекта как Forecast.json.

Загрузка данных

Мы можем загрузить Forecast.json, используя функцию getJSON в jQuery. Когда я загружаю незнакомый набор данных, я часто проверяю его в консоли разработчика Chrome (пример кода 2):

$ .getJSON ('cast.json ', function (data) {console.log (data);});

Если мы развернем данные несколько раз в консоли, мы увидим Sitemap.DV.Location, который представляет собой массив местоположений. Каждый из них имеет широту и долготу, имя и дополнительный объект Period, который содержит фактические данные прогноза.

На следующем этапе мы будем перебирать этот массив и отображать маркер для каждого местоположения.

Отображение данных

Отображение данных

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

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

var sites = прогнозData.SiteRep.DV.Location; sites.forEach (function (site, i) {if (i% 20! == 0) return; // Просто показать несколько сайтов var marker = L.marker ([+ site.lat, + site.lon]); marker.addTo (карта);});

Здесь мы определили функцию, которая принимает наши прогнозные данные и проходит через массив SiteRep.DV.Location, который мы видели ранее.

Для каждого сайта мы создаем маркер с помощью L.marker, передавая широту и долготу, а затем добавляем его на карту (пример кода 3). Мы показываем только подмножество сайтов, так как Leaflet изо всех сил пытается показать все 5 974 местоположения!

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

Добавление аннотаций

Leaflet позволяет легко добавлять аннотации к каждому маркеру с помощью функции bindPopup:

marker.bindPopup ('возможен дождь' + site.Period.Rep [0] .PPd + '%');

Здесь мы определяем текст, который должен отображаться при нажатии на маркер. В этом случае мы отображаем Period.Rep [0] .PPd, который является вероятностью дождя (пример кода 4).

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

Добавление символов погоды

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

К счастью, наши данные содержат специальный код Period.Rep [0] .W, который суммирует погоду в определенном месте. Например, 1 означает, что это солнечный день, а 20 означает град. Точные детали Вот ,

Мы собираемся использовать отличный набор значков погоды, разработанный Алессио Атзени, под названием Meteocons , Давайте начнем с определения справочной таблицы, которая определяет значок для отображения для каждого типа погоды:

var weatherTypeToIcon = {0: 3, 1: 2, 2: 9 и т. д.}

Теперь мы можем построить путь iconPath к соответствующему значку Meteocon. После того, как мы это сделали, мы используем функцию значка Leaflet для создания объекта значка из нашего изображения значка и добавляем его в маркер (см. Пример кода 5):

var iconIndex = weatherTypeToIcon [site.Period.Rep [0] .W]; var iconPath = 'meteocons-icons / SVG /' + iconIndex + '.svg'; var weatherIcon = L.icon ({iconUrl: iconPath, iconSize: [30, 30]}); var marker = L.marker ([+ site.lat, + site.lon], {icon: weatherIcon});

Теперь у нас есть карта погоды, основанная на реальных данных прогноза от Met Office!

Делать это красиво

Наконец, мы сделаем пару изменений, чтобы сделать карту более привлекательной. Мы начнем с использования более нейтрального слоя плиток, чтобы символы выделялись немного лучше:

var CartoDB_Positron = L.tileLayer ('http: // {s} .basemaps.cartocdn.com / light_all / {z} / {x} / {y} .png'); map.addLayer (CartoDB_Positron);

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

Значки расположены не очень хорошо, поэтому мы можем написать некоторый код для более регулярного их размещения (см. Пример кода 6).

Псевдокод для этого:

includesSites = [] для каждого сайта: если этот сайт не близок к одному во включенных сайтах: добавьте его во включенные сайты

Так что у нас это! Мы использовали Leaflet, чтобы сделать карту погоды Великобритании, используя реальные данные прогноза из Met Office. Есть много других типов данных, которые вы, возможно, захотите визуализировать на карте, и вы можете использовать шаблон, аналогичный показанному здесь. Веселитесь и продолжайте составлять карты!

Слова : Питер Кук

Питер Кук - веб-разработчик, специализирующийся на визуализации данных. Эта статья была первоначально опубликована в выпуске 276 чистый журнал ,

Понравилось это? Прочитайте это!

Похожие

Facebook Messenger тестирует добавление неизвестных контактов
Вскоре контакты Facebook Friend могут быть добавлены без дружбы Facebook. Пока что вы должны дружить с людьми, с которыми общаетесь через Facebook Chatapp. Это может измениться в ближайшее время. Нравится Buzzfeed News сообщается Пользователи Trial Lost теперь могут общаться с людьми в мессенджере, с которыми они не дружат в Facebook.
Мгновение назад на сайте mBank было опубликовано сообщение о вредоносном ПО для пользователей смартфонов...
Мгновение назад на сайте mBank было опубликовано сообщение о вредоносном ПО для пользователей смартфонов с операционной системой Android. Из информации, предоставленной MBANK из этого следует, что на рынке Google Play было обнаружено несколько различных приложений, в том числе для проверки уровня криптовалюты, распространяющей вредоносное
Общие рецепты
Эта страница содержит ассортимент проблем и их соответствующих решений, связанных с Grav в целом. Изменить версию PHP CLI Иногда на терминале версия PHP отличается от версии PHP, используемой веб-сервером. Вы можете проверить версию PHP, запущенную в CLI, выполнив команду php -v. Если версия PHP меньше 5.5.9, Grav не будет работать, так как для этого требуется как минимум PHP 5.5.9. Как исправить? Вам нужно ввести некоторую конфигурацию
Понимание Grid-системы Bootstrap
Эта статья была обновлена ​​для работы с Bootstrap v.4.2. Bootstrap - это фреймворк для создания сайта. Это исключает необходимость создания базы для сайта. Вместо этого вы можете загрузить файлы Bootstrap на свой сервер, а затем добавить шаблон Bootstrap. Есть инструкции о том, как это сделать в нашем Настройка Bootstrap статья. Это даст вам базовый сайт. Тем не менее, что действительно
Сертифицированная программа сертификации Pool & Spa Operator® (CPO®)
CPO® Certification предоставляет людям знания, методы и навыки работы в бассейне и спа. Это обучение помогло защитить миллионы пловцов, уменьшив опасности на водных объектах. Сертификация CPO®, ведущего в мире проверяемого сертификата для бассейнов и спа, доступна в виде смешанной программы обучения. Программа сертификации CPO® также имеет право на IACET Единицы непрерывного образования (CEUs).
Кошачьи гаджеты для 21 века - ваша кошка будет в восторге! - Koty.pl
Современный мир любит современные решения, а новые технологии неуклонно проникают во все сферы нашей жизни. Умные, продвинутые устройства также созданы для владельцев кошек - их создатели утверждают, что благодаря им мы сможем заботиться о наших питомцах лучше и эффективнее. Это правда? Вы должны решить это самостоятельно - тем временем 4 креативных набора для кошек в 21 веке! 1. Веселье на расстоянии? Интерактивные устройства мониторинга Это никому не нравится
Your City Kitty Руководство по выживанию: 16 советов и подсказок для кошек
Это установленный факт, что кошки правят интернетом. И - если они у вас есть - вы знаете, что они тоже правят вашим домом. К счастью, независимо от того, насколько велики (или микроскопичны) ваши городские жилые кварталы, кошки всегда прекрасно подходят. Тем не менее, все еще есть тонны советов и игрушек, которые могут облегчить совместное проживание для всех участников. После более чем десяти лет комфортной жизни с двумя кошечками в квартире с одной спальней (и с помощью нескольких
Положение страницы в Google и ее постоянный мониторинг
Монополия хороша только для компании, чья деятельность привела к этому. Отсутствие конкуренции - это почти мечта - возможность поднять цены без ограничений, отсутствие дыхания на спине, мобилизация для улучшения операций, уверенность в высокой прибыли. К счастью, для нас, как получателей, отрасли, в которых мы
Кольца из тантала уникальны - сюрприз для него и для нее! Кольца из тантала в ювелирном магазине KRE...
Кольца из тантала уникальны - сюрприз для него и для нее! Кольца из тантала в ювелирном магазине KREMO Креатив-Модерн Рейнхард Мария Дамиш на Neutorstrasse 16 в Зальцбурге. Есть не так много колец, которые такие особенные! Кольца из тантала включены. Ювелирный КРЕМО креативно-современные украшения имеет эти кольца тантала. Размер кольца - Советы по измерениям Рейнхард Мария Дамиш
Как быстро добавить часы / минуты / секунды к дате и времени в Excel?
... добавление 23 часов, 23 минут и 34 секунд к ячейке. Но благодаря этой формуле вы не можете добавить время более 24 часов. Используйте удобный инструмент, чтобы добавить часы / минуты / секунды к дате и времени Вышеуказанный метод очень прост, но здесь я могу представить еще один более простой метод, вы хотите попробовать? Чтобы бесплатно установить Kutools для Excel , вы можете перейти к групповым шаблонам,
Как скачать торренты на iOS устройства
Торрентинг является одним из самых популярных видов деятельности интернет-пользователей во всем мире, но, несмотря на его огромные возможности, Apple решительно выступает против него, тем самым не позволяя многим популярным приложениям и услугам Torrenting показывать в своем магазине iTunes в попытке помешать пользователям заниматься этой деятельностью. рассматривает как нарушение законов об авторском праве. Тем не менее, есть еще много способов, с помощью которых вы можете скачать торренты
Uk/public/data/val/wxfcs/all/json/all?
5.5.9. Как исправить?
Это правда?
1. Веселье на расстоянии?

Новости

how-to-all.com" href="/video/2010989244-balka-v-geografii-eto/" style="font-size:9pt;align:left;"> Значение «балка»: "Словарь Ушакова", "Архитектурный словарь", "Словарь забытых и трудных слов ХVIII-ХIХ веков" и другие словари русского языка онлайн > how-to-all.com
Лексическое значение: определение Общий запас лексики (от греч. Lexikos) — это комплекс всех основных смысловых единиц одного языка. Лексическое значение слова раскрывает общепринятое представление о предмете,

Советские книги__ скачать
Объединить и скачать + 5 интубаций в головной!18+. Классификационные диффузии * немыкин. полчаса. Нездоровье воронежской области (с аморальных времён до.  абчук в а уж термометр дряхлеть читать мифы

how-to-all.com" href="/video/2010989245-amplituda-eto-v-geografii/" style="font-size:9pt;align:left;"> Значение «амплитуда»: "Словарь Ушакова", "Начала Современного Естествознания. Тезаурус", "Словарь лингвистических терминов" и другие словари русского языка онлайн > how-to-all.com
Лексическое значение: определение Общий запас лексики (от греч. Lexikos) — это комплекс всех основных смысловых единиц одного языка. Лексическое значение слова раскрывает общепринятое представление о предмете,

В какой профессии нужна география
Как это здорово и правильно, Что среди множества наук Мы изучаем географию, Чтоб стал понятен мир вокруг! География – это наука, изучающая функционирование и преобразование географической оболочки

4. МАТЕМАТИКА, АСТРОНОМИЯ, ГЕОГРАФИЯ И ДЕЯТЕЛЬНОСТЬ АЛЕКСАНДРИЙСКИХ УЧЕНЫХ
4. МАТЕМАТИКА, АСТРОНОМИЯ, ГЕОГРАФИЯ И ДЕЯТЕЛЬНОСТЬ АЛЕКСАНДРИЙСКИХ УЧЕНЫХ Уровень знаний о природе вбирал в себя результаты предшествующего развития натурфилософии в классический и эллинистический

Реферат: Городская агломерация сочинение, изложение, работа, доклад, проект по предмету География
Агломерация существует уже сейчас. Строго говоря, агломерация - скопление населенных пунктов, главным образом городских, объединенных интенсивными производственными, хозяйственными и культурными связями.

Константинова Т. | 6-й класс. Тема "Температура воздуха"
Методическое пособие для учителя 6 класс Т.В. КОНСТАНТИНОВА канд. пед. наук, старший преподаватель Калужского государственного педагогического университета им. К.Э. Циолковского

Аэрофлот
Авиакомпания “Аэрофлот” базируется в московском аэропорту Шереметьево и сегодня является лидером рынка пассажирских перевозок в России. За 2015 год Аэрофлот обслужил 26,1 млн пассажиров, став первой авиакомпанией

Австралия
Слайд №2 Австралия — государство в Южном полушарии, расположенное на материке Австралия, острове Тасмания и нескольких других островах Индийского, Тихого и Южного океанов. Единственная страна-материк.

Реферат: Великобритания - Xreferat.com - Банк рефератов, сочинений, докладов, курсовых и дипломных работ
Содержание Вступление ---------------------------------------------3 стр. Карта ---------------------------------------------------- 4 стр. Визитная карточка ------------------------------------5

Карта