Как я создал Heatmap истории своих местоположений с помощью JavaScript и Google Maps

2023-01-25

Google Location History + Google Maps API + JavaScript

Я, конечно, не первый, кто хочет получить Heatmap истории своих местоположений. Но примеров реализации мне найти не удалось, поэтому я решил создать собственную. Рабочий пример я разместил на GitHub.

С помощью различных настроек можно создать разные карты

Создайте свою собственную Heatmap
Объединяя все
Эксперименты с Heatmap
Код
app.js
index.html
Заключение

Создайте свою собственную 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.Не стесняйтесь предлагать улучшения или создавать запросы на дополнение, если хотите внести свой вклад в этот проект.

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