Как построить карту погоды в реальном времени с данными и тайлами карты из OpenWeatherMap
TomTom Maps SDK позволяет создавать приложения, предоставляющие отличные актуальные карты, информацию о маршрутах и навигации. Мы можем объединить это с текущими данными о погоде и фрагментами карты из OpenWeatherMap API, чтобы создать проект, который будет ценен для водителей.
Водители, которые осведомлены о текущих погодных условиях на своем маршруте, могут более тщательно планировать и вести более безопасно. TomTom предоставляет отличную, актуальную карту и навигационную информацию. Сочетание этого с текущей информацией о погоде из API OpenWeatherMap может помочь нам создать интересный проект, который будет полезен водителям на дорогах, когда мы приближаемся к осени и зиме.
В этой статье мы кратко рассмотрим каждый из следующих пунктов:
- Использование TomTom Maps SDK for Web для поиска местоположения и отображения его карты.
- Стандарты и методы, которые позволяют TomTom интегрировать карты других поставщиков со своими.
- Использование OpenWeatherMap API для получения карт погоды в реальном времени и текстовых описаний местоположения.
- Наложение карт OpenWeatherMap на карты TomTom.
Мы добьемся этого, описав простое приложение JavaScript, демонстрирующее все эти концепции. Полный исходный код приложения можно скачать здесь.
В этой статье предполагается наличие опыта работы с базовыми CSS, HTML и JavaScript. Чтобы код работал правильно, необходимо отредактировать файл Weather.js, описанный ниже. Измените текст «YOUR_API_KEY» на фактический ключ API TomTom из вашей учетной записи разработки, а текст «YOUR_APP_ID» — на фактический идентификатор приложения OpenWeatherMap.
Поставщики фрагментов карты
Одной из проблем, с которой сталкиваются поставщики географической информации, является интеграция визуальной информации от других поставщиков в свои собственные службы. Ряд стандартов и методов упрощают эту интеграцию. В веб-приложениях наиболее распространенная визуальная проекция называется Web Mercator (или EPSG 3857). Это система отсчета координат (CRS), используемая многими поставщиками, включая TomTom и OpenWeatherMap.
Поставщики, в том числе TomTom и OpenWeatherMap, также часто используют механизм мозаичного отображения и масштабирования. В тайловой системе карта делится на тайлы одинакового размера. В этой системе для запроса конкретного тайла вам нужны три параметра: уровень масштабирования (z), координата x (x) и координата y (y). См. статью Понимание сетки тайлов карты и уровней масштабирования для более подробного обсуждения.
На следующем рисунке показано, как плитки развиваются по мере увеличения уровня масштабирования:
TomTom Maps SDK для Интернета
TomTom упрощает использование картографической и навигационной информации, предоставляя веб-разработчикам обширный SDK JavaScript. Чтобы использовать эту услугу, разработчик должен сначала сделать следующее:
- Зарегистрируйте учетную запись TomTom на https://developer.tomtom.com/member/register.
- Войдите в эту учетную запись по адресу https://developer.tomtom.com/user/login.
- Запросите оценочный ключ API на https://developer.tomtom.com/apps/myapps.
Включение необходимых файлов
Для веб-приложения мы можем включить необходимые файлы SDK через ссылку на дистрибутив CDN SDK. Это достигается путем добавления следующих строк в элемент HTML HEAD:
<link rel="stylesheet" type="text/css" href="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.36.1/maps/maps.css"> <script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.36.1/maps/maps-web.min.js"></script> <script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.36.1/services/services-web.min.js"></script>
Мы также реализуем простой SDK для доступа к OpenWeatherMap API. Чтобы включить этот локальный файл в приложение, добавьте следующую строку в том же месте:
<script src="currentWeatherData.js"></script>
Инициализация приложения
В нашем JavaScript первым шагом при использовании SDK является идентификация приложения и его версии с помощью следующего кода. Эта информация помогает TomTom собирать статистику использования.
tt.setProductInfo(applicationName, applicationVersion);
Затем мы создаем карту, предоставляя наш ключ API и связывая эту карту с элементом HTML DIV, используемым для ее отображения.
const tomTomMap;
tomTomMap = tt.map({ key: tomTomApiKey, container: htmlDivId });
Если возможно, мы также можем предоставить дополнительные параметры для центрирования и масштабирования карты до определенного места. Однако в нашем приложении мы начнем с карты всей Земли.
Поиск местоположения
Для поиска местоположения мы используем сервис TomTom Fuzzy Search следующим образом:
tt.services.fuzzySearch({ key: tomTomApikey, query: queryText })
.go()
.then(centerAndZoom)
.catch(function(error) {
alert('Could not find location (' + queryText + '). ' + error.message);
});
В функции centerAndZoom (упомянутой выше) мы центрируем карту по первому найденному местоположению (наилучшему совпадению) и устанавливаем соответствующий уровень масштабирования следующим образом:
function centerAndZoom(response) {
tomTomMap.flyTo({ center: response.results[0].position, zoom: zoomLevel });
}
Добавление слоев
На одну карту TomTom можно наложить несколько слоев информации. Каждый из этих слоев имеет источник. Некоторые из этих слоев могут исходить от самого TomTom. Другие могут быть получены от таких поставщиков, как OpenWeatherMap.
В нашем приложении мы используем OpenWeatherMap в качестве источника (поставщика тайлов) для одного такого слоя. Например, чтобы наложить карту облаков, мы добавляем источник на карту следующим образом:
tomTomMap.addSource('owm_source', {
type: 'raster',
tiles: [
'https://tile.openweathermap.org/map/clouds_new/{z}/{x}/{y}.png?appid=YOUR_APP_ID'
],
tileSize: 256,
minZoom: 0,
maxZoom: 12,
attribution: openWeatherMapAttribution
});
Обратите внимание, что мы предоставили уникальный идентификатор источника: owm_source. Значение не важно, если оно уникально. Позже мы можем использовать этот же идентификатор при добавлении слоев или когда мы хотим удалить этот источник.
Как размер плиток, так и количество поддерживаемых уровней масштабирования зависят от поставщика. Здесь мы указали, что плитки имеют размер 256x256 пикселей и что уровни масштабирования производителя варьируются от 0 до 12 (включительно). Мы также предоставили атрибуцию поставщика.
Наконец, мы предоставили формат для URL. Этот формат включает заполнители для уровня масштабирования (z), координаты x плитки (x) и координаты y плитки (y). Когда Maps SDK отправляет веб-запросы от нашего имени, он заменяет эти заполнители фактическими значениями.
После того, как мы создали источник для слоя, нам нужно связать его со слоем и добавить этот слой на карту. Мы делаем это с помощью следующего кода:
tomTomMap.addLayer({
'id': 'owm_layer',
'type': 'raster',
'source': 'owm_source',
'layout': { 'visibility': 'visible' }
});
Обратите внимание, что мы предоставили уникальный идентификатор слоя (owm_layer). Опять же, выбранное значение не важно, если оно уникально. Позже мы сможем использовать этот идентификатор, когда захотим удалить слой.
Мы указали тип источника (растр) и предоставили идентификатор созданного ранее источника (owm_source). Это связывает источник со слоем. Мы также указали, что хотим, чтобы слой был видимым.
Всплывающие окна
В нашем приложении мы отображаем всплывающее окно с текстом, описывающим погодные условия в заданном месте. Это реализовано с помощью следующего кода:
var popup;
popup = new tt.Popup({ maxWidth: 'none' })
.setLngLat(location)
.setDOMContent(htmlFragment)
.addTo(tomTomMap);
Мы указываем, что максимальной ширины нет, чтобы наш текст не был перенесен без необходимости. Мы также указываем широту и долготу, где должно отображаться всплывающее окно. Кроме того, мы предоставляем фрагмент HTML (обычно это элемент DIV), содержащий содержимое всплывающего окна. Наконец, мы добавляем всплывающее окно, которое мы создали, на карту.
Мы сохраняем всплывающее окно в переменной на случай, если позже мы захотим удалить его с карты.
API OpenWeatherMap
OpenWeatherMap предоставляет разработчикам приложений разнообразную информацию о погоде через простой в использовании API. Компания предоставляет как бесплатный контент, так и платный премиум-контент.
Чтобы использовать эту услугу, сначала получите идентификатор приложения, зарегистрировав учетную запись по следующему адресу: https://home.openweathermap.org/users/sign_up. Подробнее об использовании OpenWeatherMap API и идентификатора приложения см. в их руководстве Как начать за 3 простых шага.
В нашем примере приложения мы будем полагаться на бесплатный контент. С бесплатным контентом приложение ограничено 60 веб-запросами в минуту. При использовании карт TomTom, если колесо прокрутки используется для быстрого изменения масштаба несколько раз, это может привести к превышению этого ограничения. В этом случае учетная запись OpenWeatherMap временно блокируется от дальнейших запросов и отображается ошибка.
Текущие данные о погоде
Сервис OpenWeatherMap Текущие данные о погоде позволяет разработчикам сделать простой веб-запрос для получения текстовых описаний текущих погодных условий для определенного местоположения. URL-адрес для веб-запроса указывает широту и долготу местоположения, единицы измерения и идентификатор приложения.
Например, следующий веб-запрос позволит получить текущие погодные условия в районе Сан-Франциско (широта: 37,7749, долгота: -122,4194) с использованием имперских единиц (по Фаренгейту):
https://api.openweathermap.org/data/2.5/weather?lat=37.7749&lon=-122.4194&units=imperial&appid=YOUR_APP_ID
Ответ JSON будет выглядеть примерно так:
{
"coord": {
"lon": -122.42,
"lat": 37.77
},
"weather": [
{
"id": 500,
"main": "Rain",
"description": "light rain",
"icon": "10d"
}
],
"base": "stations",
"main": {
"temp": 50.02,
"pressure": 1019,
"humidity": 59,
"temp_min": 41,
"temp_max": 62.6
},
"visibility": 16093,
"wind": {
"speed": 6.93,
"deg": 50
},
"rain": { "1h": 0.25 },
"clouds": { "all": 1 },
"dt": 1574006215,
"sys": {
"type": 1,
"id": 4322,
"country": "US",
"sunrise": 1574002323,
"sunset": 1574038650
},
"timezone": -28800,
"id": 5391959,
"name": "San Francisco",
"cod": 200
}
Наше приложение предоставит простую функцию SDK (currentWeatherData) для отправки этого веб-запроса и анализа полученного JSON. Используя наш предыдущий пример, вызов этой функции будет выглядеть следующим образом:
currentWeatherData( {
appid: appId,
lat: 37.7749,
lon: -122.4194,
units: 'imperial'
})
.go()
.then(function(response) {
console.log(response.weather[0].description);
})
.catch(function(error) {
console.log(error);
});
Карты погоды 1.0
Сервис OpenWeatherMap Карты погоды 1.0 позволяет разработчикам сделать простой веб-запрос для получения бесплатных карт, отображающих следующие условия: облачность, осадки, атмосферное давление, температуру и ветер, которые могут оказаться полезными для водителей в этом приложении.
Формат URL-адреса, используемого для запроса изображения в формате PNG, выглядит следующим образом:
https://tile.openweathermap.org/map/layer/z/x/y.png?appid=appid
Параметры, отображаемые в URL-адресе, описаны ниже:
ParameterDescriptionlayerУказывает запрошенный слой. Это может быть любое из следующих значений: cloud_new, осадки_new, pressure_new, wind_new или temp_new.zЭто указывает уровень масштабирования для запрошенной плитки. Значение может находиться в диапазоне от 0 до 12.xЭто указывает координату x запрошенной плитки. Значение может варьироваться от 0 до максимальной координаты x для указанного уровня масштабирования (2^z — 1). y Это указывает координату y запрошенной плитки. Значение может варьироваться от 0 до максимальной координаты y для указанного уровня масштабирования (2^z — 1).appidИдентификатор приложения OpenWeatherMap.
Образец заявления
В нашем примере приложения мы позволим пользователю выбирать местоположение, отображаемый слой (например, облака) и единицы измерения. Приложение отобразит карту на основе этих выборов. Если пользователь щелкнет место на карте, появится всплывающее окно с описанием текущих погодных условий для этого места.
Приложение состоит из следующих трех файлов:
Имя файлаОписаниеweather.htmlЭто основной HTML-код приложения. Он предоставляет элементы пользовательского интерфейса и включает необходимые файлы CSS и JavaScript.weather.jsЭто основной код JavaScript для приложения. Он предоставляет всю логику для взаимодействия с пользователем и карты.
Логика взаимодействия с пользователем следующая:
- При первом запуске приложения вызывается функция инициализации. Эта функция задает имя/версию приложения TomTom, создает исходную карту и устанавливает обработчик события щелчка карты.
- Когда пользователь нажимает кнопку «Поиск», вызывается функция findLocation. Эта функция найдет место, указанное в текстовом поле «Местоположение», и отцентрирует/увеличит масштаб карты до этого места.
- Когда пользователь изменяет выбор «Слой погоды», вызывается функция updateLayer. Эта функция изменит слой OpenWeatherMap, наложенный на карту TomTom.
- Когда пользователь изменяет выбор «Единицы», вызывается функция updateUnits. Эта функция закроет любое текущее всплывающее окно и изменит единицы измерения (имперские или метрические), используемые в любом последующем всплывающем окне.
- Когда пользователь щелкает карту, вызывается функция getCurrentWeatherData. Эта функция получает текущие данные о погоде, форматирует их и отображает всплывающее окно.
Следующие шаги
С очень небольшим количеством кода мы смогли создать отзывчивое приложение, которое улучшило базовую карту TomTom, используя Maps SDK для Интернета и текущую информацию о погоде из OpenWeatherMap.
Дополнительная информация, которую мы отображали, была получена из бесплатных сервисов, предлагаемых OpenWeatherMap. За определенную плату OpenWeatherMap также предоставляет услуги премиум-класса, которые предлагают более обширную информацию и позволяют увеличить количество запросов.
Тем не менее, мы успешно доказали, что создать мощный проект можно, воспользовавшись бесплатными уровнями использования от авторитетных ресурсов в сообществе разработчиков, которые также поддерживают более масштабные усилия, и что сам проект действительно вполне доступен.
Посмотрите наш видеоурок здесь:
