¡Buen dia amigos!
En este breve tutorial, completaremos tres sencillas tareas junto con usted:
- Usando la API de geolocalización y Leaflet.js, determine la ubicación actual del usuario y muéstrela en el mapa
- Implementamos transición animada entre ciudades
- Implementamos el cambio entre direcciones con la obtención preliminar del nombre del objeto y sus coordenadas
El código del proyecto está aquí .
Puedes jugar con el código aquí:
Determinar la ubicación actual del usuario
La API de geolocalización permite al usuario proporcionar una aplicación web con sus datos de ubicación. La aplicación utiliza el método Geolocation.getCurrentPosition () para solicitar estos datos . Este método toma uno obligatorio y dos parámetros opcionales: éxito es una función de devolución de llamada que recibe un objeto de posición cuando se otorga el permiso, error es una función de devolución de llamada que recibe un objeto de error de posición cuando se deniega el acceso y opciones es un objeto de configuración. Así es como se ve en el código:
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
}
Visualización de la ubicación del usuario en el mapa
Usaremos Leaflet.js como mapa . Este servicio es una alternativa a Google Maps y OpenStreetMap, inferior a ellos en funcionalidad, pero cautivador por la simplicidad de la interfaz. Creamos un marcado en el que conectamos los estilos y el script del mapa:
<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>
Agregue estilos mínimos (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;
}
Cree un módulo map.js con el siguiente contenido:
//
//
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()
}
Finalmente, creamos 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)
}
Abra index.html en un navegador, haga clic en el botón, otorgue permiso para recibir datos de ubicación, vea nuestra posición en el mapa.
Multa. Hacia adelante.
Transición animada entre ciudades
Supongamos que tenemos un objeto con tres ciudades (Moscú, San Petersburgo, Ekaterimburgo) y sus coordenadas (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"
}
}
Necesitamos implementar cambios suaves entre estas ciudades en el mapa.
Agregue un contenedor para ciudades al marcado:
<div id="cities"></div>
Reescritura de 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)
})
También cambiemos map.js un poco:
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()
}
Abre index.html. Cuando presionas el primer botón, obtenemos inmediatamente la posición y el nombre de la ciudad. Cuando presionas el segundo botón y los siguientes, nos movemos suavemente entre ciudades.
Cambio suave entre direcciones
Supongamos que tenemos tres objetos con nombres y direcciones (db / direcciones.json):
{
" ": " , 2",
" ": " , 46",
"-": " , 97"
}
Necesitamos implementar el cambio entre estos objetos en el mapa. Pero, ¿cómo podemos hacer esto sin coordenadas? De ninguna manera. Por lo tanto, de alguna manera necesitamos obtener estas coordenadas. Para hacer esto, usaremos el servicio Nominatim de OpenStreetMap. Para obtener información sobre cómo formar correctamente una cadena de consulta, consulte aquí . Demostraré solo una de las posibles opciones.
Entonces, creamos un contenedor para direcciones en marcado:
<div id="addresses"></div>
Reescritura de 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)
})
Abre index.html. Cuando presionas el primer botón, obtenemos inmediatamente la posición y el nombre del teatro. Cuando presionas el segundo botón y los siguientes, nos movemos suavemente entre los teatros.
Frio. Todo funciona como se esperaba.
Sobre esto, déjame despedirme. Espero que hayas encontrado algo interesante para ti. Gracias por su atención y que tenga un buen día.