JavaScript за 60 секунд: работаем с картой (Geolocation API, Leaflet.js, Nominatim)

JavaScript за 60 секунд: работаем с картой (Geolocation API, Leaflet.js, Nominatim)

Доброго времени суток, друзья!

В этом небольшом туториале мы вместе с вами выполним три простых задания:

  • С помощью Geolocation API и Leaflet.js определим текущее местоположение пользователя и отобразим его на карте
  • Реализуем анимированный переход между городами
  • Реализуем переключение между адресами с предварительным получением названия объекта и его координат

Код проекта находится здесь.

Поиграть с кодом можно здесь:


Определяем текущее местоположение пользователя
Geolocation API позволяет пользователю предоставлять веб-приложению данные о своем местоположении. В приложении для запроса этих данных используется метод Geolocation.getCurrentPosition(). Данный метод принимает один обязательный и два опциональных параметра: success — функция обратного вызова, получающая объект Position при предоставлении разрешения, error — функция обратного вызова, получающая объект PositionError при отказе в доступе, и options — объект с настройками. Вот как это выглядит в коде:

navigator.geolocation.getCurrentPosition(success, error, {
// высокая точность
enableHighAccuracy: true
})

function success({ coords }) {
// получаем широту и долготу
const { latitude, longitude } = coords
const position = [latitude, longitude]
console.log(position) // [широта, долгота]
}

function error({ message }) {
console.log(message) // при отказе в доступе получаем PositionError: User denied Geolocation
}

Отображаем местоположение пользователя на карте
В качестве карты мы будем использовать Leaflet.js. Данный сервис является альтернативой Google Maps и OpenStreetMap, уступает им по функционалу, но подкупает простотой интерфейса. Создаем разметку, в которой подключаем стили и скрипт карты:

<head>
<!— стили карты —>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""
/>
<!— скрипт карты —>
<script
src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""
></script>
<!— наши стили —>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!— контейнер для карты —>
<div id="map"></div>
<!— кнопка для вызова функции —>
<button id="my_position">My Position</button>
<!— наш скрипт-модуль —>
<script src="script.js" type="module"></script>
</body>

Добавляем минимальные стили (style.css):

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
min-height: 100vh;
display: grid;
place-content: center;
place-items: center;
background-color: rgb(241, 241, 241);
}

#map {
width: 480px;
height: 320px;
border-radius: 4px;
box-shadow: 0 0 1px #222;
}

button {
padding: 0.25em 0.75em;
margin: 1em 0.5em;
cursor: pointer;
user-select: none;
}

Создаем модуль map.js следующего содержания:

// создаем локальные переменные для карты и маркера
// каждый модуль имеет собственное пространство имен
let map = null
let marker = null

// функция принимает позицию — массив с широтой и долготой
// и сообщение, отображаемое над маркером (tooltip)
export function getMap(position, tooltip) {
// если карта не была инициализирована
if (map === null) {
// второй аргумент, принимаемый методом setView — это масштаб (zoom)
map = L.map(‘map’).setView(position, 15)
} else return

// что-то типа рекламы
// без этого карта работать не будет
L.tileLayer(‘https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’, {
attribution:
‘© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors’
}).addTo(map)

// добавляем маркер с сообщением
L.marker(position).addTo(map).bindPopup(tooltip).openPopup()
}

Наконец, создаем script.js:

// импортируем функцию
import { getMap } from ‘./map.js’

// находим кнопку и добавляем к ней обработчик
document.getElementById(‘my_position’).onclick = () => {
navigator.geolocation.getCurrentPosition(success, error, {
enableHighAccuracy: true
})
}

function success({ coords }) {
const { latitude, longitude } = coords
const currentPosition = [latitude, longitude]
// вызываем функцию, передавая ей текущую позицию и сообщение
getMap(currentPosition, ‘You are here’)
}

function error({ message }) {
console.log(message)
}

Открываем index.html в браузере, нажимаем на кнопку, предоставляем разрешение на получение данных о местоположении, видим нашу позицию на карте.

JavaScript за 60 секунд: работаем с картой (Geolocation API, Leaflet.js, Nominatim)

Отлично. Двигаемся дальше.

Анимированный переход между городами
Предположим, что у нас имеется объект с тремя городами (Москва, Санкт-Петербург, Екатеринбург) и их координатами (db/cities.json):

{
"Moscow": {
"lat": "55.7522200",
"lon": "37.6155600"
},
"Saint-Petersburg": {
"lat": "59.9386300",
"lon": "30.3141300"
},
"Ekaterinburg": {
"lat": "56.8519000",
"lon": "60.6122000"
}
}

Нам необходимо реализовать плавное переключение между этими городами на карте.

Добавляем в разметку контейнер для городов:

<div id="cities"></div>

Переписываем script.js:

import { getMap } from ‘./map.js’

// получаем контейнер для городов
const $cities = document.getElementById(‘cities’)

;(async () => {
// получаем объект с городами
const response = await fetch(‘./db/cities.json’)
const cities = await response.json()
// перебираем города
for (const city in cities) {
// создаем кнопку
const $button = document.createElement(‘button’)

// текстовое содержимое кнопки — название города
$button.textContent = city

// получаем широту и долготу
const { lat, lon } = cities[city]

// записываем название города, широту и долготу
// в соответствующие data-атрибуты
$button.dataset.city = city
$button.dataset.lat = lat
$button.dataset.lon = lon

// добавляем кнопку в контейнер
$cities.append($button)
}
})()

// обрабатываем нажатие кнопки
$cities.addEventListener(‘click’, ({ target }) => {
// нас интересует только нажатие кнопки
if (target.tagName !== ‘BUTTON’) return

// получаем название города, широту и долготу из data-атрибутов
const { city, lat, lon } = target.dataset
const position = [lat, lon]
// вызываем функцию, передавая ей позицию и название города
getMap(position, city)
})

Также немного изменим map.js:

let map = null
let marker = null

export function getMap(position, tooltip) {
if (map === null) {
map = L.map(‘map’).setView(position, 15)
} else {
// перемещение к следующей позиции
map.flyTo(position)
}

L.tileLayer(‘https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’, {
attribution:
‘© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors’
}).addTo(map)

// удаление предыдущего маркера
if (marker) {
map.removeLayer(marker)
}
marker = new L.Marker(position).addTo(map).bindPopup(tooltip).openPopup()
}

Открываем index.html. При нажатии первой кнопки сразу получаем позицию и название города. При нажатии второй и последующих кнопок плавно перемещаемся между городами.

JavaScript за 60 секунд: работаем с картой (Geolocation API, Leaflet.js, Nominatim)

Плавное переключением между адресами
Предположим, что у нас имеются три объекта с названиями и адресами (db/addresses.json):

{
"Театр драмы": "Октябрьская площадь, 2",
"Театр оперы и балета": "Проспект Ленина, 46А",
"Коляда-Театр": "Проспект Ленина, 97"
}

Нам необходимо реализовать переключение между этими объектами на карте. Но как нам это сделать без координат? Никак. Следовательно, нам каким-то образом нужно эти координаты получить. Для этого воспользуемся сервисом Nominatim от OpenStreetMap. О том, как правильно сформировать строку запроса, смотрите здесь. Я продемонстрирую лишь один из возможных вариантов.

Итак, создаем в разметке контейнер для адресов:

<div id="addresses"></div>

Переписываем script.js:

// получаем контейнер для адресов
const $addresses = document.getElementById(‘addresses’)

;(async () => {
// названия и адреса объектов
const response = await fetch(‘./db/addresses.json’)
const addresses = await response.json()

// для каждого места
for (const place in addresses) {
// создаем кнопку
const $button = document.createElement(‘button’)

$button.textContent = place

// получаем адрес
const address = addresses[place]

// формируем строку запроса
const query = address.replace(
/([А-ЯЁа-яё]+)s([А-ЯЁа-яё]+),s([0-9А-ЯЁа-яё]+)/,
‘$3+$1+$2,+Екатеринбург’
)
// получаем, например, 2+Октябрьская+площадь,+Екатеринбург

// записываем данные в соответствующие data-атрибуты
$button.dataset.address = address
$button.dataset.query = query

$addresses.append($button)
}
})()

// обрабатываем нажатие кнопки
$addresses.addEventListener(‘click’, async ({ target }) => {
if (target.tagName !== ‘BUTTON’) return

// получаем данные из data-атрибутов
const { address, query } = target.dataset

// получаем ответ от сервиса
const response = await fetch(
`https://nominatim.openstreetmap.org/search?q=${query}&format=json&limit=1`
)
// format — формат данных, limit — количество объектов с данными

// парсим ответ, извлекая нужные сведения
const { display_name, lat, lon } = (await response.json())[0]

// редактриуем название объекта
const name = display_name.match(/[А-ЯЁа-яёs(«-»)]+/)[0]

const position = [lat, lon]

// формируем сообщение
const tooltip = `${name}<br>${address}`

// вызываем функцию
getMap(position, tooltip)
})

Открываем index.html. При нажатии первой кнопки сразу получаем позицию и название театра. При нажатии второй и последующих кнопок плавно перемещаемся между театрами.

JavaScript за 60 секунд: работаем с картой (Geolocation API, Leaflet.js, Nominatim)

Круто. Все работает, как ожидается.

На этом позвольте откланяться. Надеюсь, вы нашли для себя что-нибудь интересное. Благодарю за внимание и хорошего дня.

Рубрики: Новости
×
Обсудить проект
Заполните форму и мы с Вами свяжемся
×