Как я создал Heatmap истории своих местоположений с помощью JavaScript и Google Maps
Google Location History + Google Maps API + JavaScript
Я, конечно, не первый, кто хочет получить Heatmap истории своих местоположений. Но примеров реализации мне найти не удалось, поэтому я решил создать собственную. Рабочий пример я разместил на GitHub.
С помощью различных настроек можно создать разные карты
Создайте свою собственную Heatmap
Если смартфон хранит данные о местоположениях, то можно создать Heatmap, чтобы визуализировать историю своих местоположений.
Что для этого понадобится:
1. Google Location History. Вы можете загрузить json-файл с Google Takeout. После перехода по приведенной ссылке нажмите на кнопку «Отменить выбор». Затем прокрутите страницу вниз и выберите пункт «История местоположений».
Нажмите «Далее» и начните загрузку. Чтобы Google подготовил данные, потребуется некоторое время. Готовый файл будет отправлен на вашу электронную почту.
Примечание. Если смартфон работает на базе Android, то данные должны автоматически сохраняться в Google-аккаунте. Если вы используете iPhone, нужно самостоятельно активировать эту функцию.
2. Ключ API Google Карт. Здесь можно создать ключ API. Нажмите на кнопку «Получить ключ» и выберите пункт «Создать новый проект». После того, как введете его название, выберите пункт «Создать и включить API».
3. Код - скачать код GitHub Repo можно отсюда.
Объединяя все
Когда есть все три нужных компонента, нужно собрать их вместе:
1. Откройте папку с кодом в консоли и запустите npm install. После чего будут установлены зависимости для проекта.
2. Откройте файл index.html в редакторе кода. Нас интересует строка 103:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE
&libraries=visualization&callback=initMap">Удалите YOUR_API_KEY_HERE и замените его на ключ API Google Карт! Вставьте его между = и &.
3. Найдите JSON-файл истории местоположений. Переименуйте его в location.json. После этого скопируйте файл в папку проекта.
4. Вернитесь в консоль и запустите сервер с помощью node app.js. Ваш проект будет обслуживаться на локальной машине через порт 3000.
5. Откройте в браузере адрес localhost:3000 и наслаждайтесь Heatmap.
Примечание. В зависимости от размера JSON-файла может потребоваться некоторое время для заполнения карты
Эксперименты с Heatmap
Я создал на карте несколько пользовательских элементов управления. Они расположены вверху:
- Radius - изменяет радиус от каждой точки данных. Диапазон 0-50.
- Intensity - изменяет интенсивность данных. Диапазон 0-1000.
- Opacity - изменяет непрозрачность наложения Heatmap. Диапазон: 0-1.
Рекомендую поэкспериментировать с настройками, пока не выберите оптимальную комбинацию параметров.
Ознакомьтесь с тремя Heatmaps из Бангкока, продемонстрированными ниже. Это одни и те же данные, различаются только настройки:
Код
API Google Карт предоставляет отличный код для начала работы над Heatmaps, он доступен здесь.
app.js
Этот файл используется локально на вашем компьютере. Он использует Node JS и Express JS.
index.html
В этом файле находится тело проекта. Здесь хранится код HTML и JavaScript. Рассмотрим код JavaScript подробнее:
- Функция initMap(){...} - место, где происходит магия.
- В функции initMap мы сначала создаем новую карту Google. Для нее нужно указать масштаб по умолчанию, центральные координаты и тип карты. В нашем случае - это дорожная карта:
map = newgoogle.maps.Map(document.getElementById('map'), {
zoom: 2,
center: {lat: 37.775, lng: -122.434},
mapTypeId: 'roadmap'
});
Затем получаем данные о местоположении. Это выполняется асинхронно с использованием promises. Наши promises загружают данные о местоположении и создают для каждой точки данных новый LatLng (местоположение) Google Maps:
fetch('static/location.json').then(function(response) {
response.json().then(function(result) {
letlocations = result.locations.map((val) => {
return newgoogle.maps.LatLng(val.latitudeE7 * (10 ** -7),
val.longitudeE7 * (10 ** -7));
})
Теперь нужно отобразить данные на карте. Для этого мы создаем на карте слой тепловой карты. На нем выбираем данные и устанавливаем параметры отображения:
heatmap = newgoogle.maps.visualization.HeatmapLayer({
data: locations,
map: map,
maxIntensity: maxI,
radius: rad,
opacity: opac
});
Остальная часть JavaScript-кода используется, чтобы пользователи могли взаимодействовать с Heatmap и изменять настройки визуализации: радиус и непрозрачность точек данных.
Заключение
Ознакомьтесь с моим GitHub Repo.Не стесняйтесь предлагать улучшения или создавать запросы на дополнение, если хотите внести свой вклад в этот проект.