ojgarciab/gps.html

## gps.html
<!doctype html>
<html lang="es">
<head>
    <!-- Meta tags requeridos -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Pruebas de GPS</title>
</head>
<body>
    <h2 id="mensaje"></h2>
    <ul>
        <li>Longitud: <span id="longitud">?</span></li>
        <li>Latitud: <span id="latitud">?</span></li>
    </ul>
    <pre id="resultado"></pre>
    <script>
        /* Obtenemos los campos del DOM para reutilizarlos */
        let mensaje = document.getElementById('mensaje');
        let longitud = document.getElementById('longitud');
        let latitud = document.getElementById('latitud');
        let resultado = document.getElementById('resultado');
        /* Número de actualizaciones GPS recibidas */
        let actualizaciones = 0;
        /* Definimos la función que recibirá las actualizaciones
            y posteriormente enviará los datos por POST */
        let recibirDatos = posicion => {
            /* Incrementamos el número de actualizaciones recibidas */
            actualizaciones++;
            mensaje.innerText = 'Actualización Nº' + actualizaciones;
            /* Actualizamos los datos en el documento */
            longitud.innerText = posicion.coords.longitude;
            latitud.innerText = posicion.coords.latitude;
            /* Configuramos la petición que se realizará al PHP */
            var peticion = new Request('gps.php', {
                method: 'POST',
                body: JSON.stringify({
                    altitude: posicion.coords.altitude,
                    altitudeAccuracy: posicion.coords.altitudeAccuracy,
                    latitude: posicion.coords.latitude,
                    longitude: posicion.coords.longitude,
                    speed: posicion.coords.speed,
                }),
                headers: new Headers({ 'Content-Type': 'application/json' }),
            });
            /* Hacemos efectiva la petición */
            fetch(peticion).then(
                datos => datos.json().then(
                    json => resultado.innerText = JSON.stringify(json)
                )
            ).catch(console.log);
        };
        if ("geolocation" in navigator) {
            mensaje.innerText = 'Geolocalización SOPORTADA';
            mensaje.style.color = 'green';
            /* Solicitamos una primera actualización inmediata */
            navigator.geolocation.getCurrentPosition(recibirDatos);
            /* Nos suscribimos a actualizaciones periódicas de la posición */
            navigator.geolocation.watchPosition(recibirDatos);
        } else {
            mensaje.innerText = 'Geolocalización no disponible en este navegador';
            mensaje.style.color = 'red';
        }
    </script>
</body>
</html>

## gps.php
<?php
header('Content-type: application/json;charset=utf-8');
$datos = file_get_contents('php://input');
file_put_contents('log.txt', $datos . PHP_EOL, FILE_APPEND);
/* Convertimos los datos para ser usados por PHP */
$coordenadas = json_decode($datos);
/* Obtenemos los datos para tu código */
$lat = $coordenadas->latitude;
$lng = $coordenadas->longitude;
$distance = 1; // Sitios que se encuentren en un radio de 1KM
/* Código de https://gist.github.com/mpratt/3177700#file-getboundaries-php */
require_once 'getBoundaries.php';
$box = getBoundaries($lat, $lng, $distance);
$pdo = new PDO(
    'mysql:host=localhost;dbname=test;charset=utf8',
    'test',
    'test'
);
$stmt = $pdo->prepare('
    SELECT
        *
    FROM direcciones
    WHERE
        (lat BETWEEN :min_lat AND :max_lat)
        OR (lng BETWEEN :min_lng AND :max_lng)
');
$stmt->bindValue(':min_lat', $box['min_lat']);
$stmt->bindValue(':max_lat', $box['max_lat']);
$stmt->bindValue(':min_lng', $box['min_lng']);
$stmt->bindValue(':max_lng', $box['max_lng']);
if ($stmt->execute() === false) {
    die(json_encode([
        'error' => true,
        'info' => $stmt->errorInfo(),
    ]));
};
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
/* Entregamos los restaurantes encontrados */
echo json_encode([
    'error' => true,
    'info' => $rows,
]);

## gps.sql
CREATE TABLE `direcciones` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nombre` varchar(20) NOT NULL,
  `lat` float NOT NULL,
  `lng` float NOT NULL,
  ADD PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8_general_ci;

INSERT INTO `direcciones` (`id`, `nombre`, `lat`, `lng`) VALUES
(1, 'prueba', 0, 0);
	<!doctype html>
	<html lang="es">
	<head>
	<!-- Meta tags requeridos -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<title>Pruebas de GPS</title>
	</head>
	<body>
	<h2 id="mensaje"></h2>
	<ul>
	<li>Longitud: <span id="longitud">?</span></li>
	<li>Latitud: <span id="latitud">?</span></li>
	</ul>
	<pre id="resultado"></pre>
	<script>
	/* Obtenemos los campos del DOM para reutilizarlos */
	let mensaje = document.getElementById('mensaje');
	let longitud = document.getElementById('longitud');
	let latitud = document.getElementById('latitud');
	let resultado = document.getElementById('resultado');
	/* Número de actualizaciones GPS recibidas */
	let actualizaciones = 0;
	/* Definimos la función que recibirá las actualizaciones
	y posteriormente enviará los datos por POST */
	let recibirDatos = posicion => {
	/* Incrementamos el número de actualizaciones recibidas */
	actualizaciones++;
	mensaje.innerText = 'Actualización Nº' + actualizaciones;
	/* Actualizamos los datos en el documento */
	longitud.innerText = posicion.coords.longitude;
	latitud.innerText = posicion.coords.latitude;
	/* Configuramos la petición que se realizará al PHP */
	var peticion = new Request('gps.php', {
	method: 'POST',
	body: JSON.stringify({
	altitude: posicion.coords.altitude,
	altitudeAccuracy: posicion.coords.altitudeAccuracy,
	latitude: posicion.coords.latitude,
	longitude: posicion.coords.longitude,
	speed: posicion.coords.speed,
	}),
	headers: new Headers({ 'Content-Type': 'application/json' }),
	});
	/* Hacemos efectiva la petición */
	fetch(peticion).then(
	datos => datos.json().then(
	json => resultado.innerText = JSON.stringify(json)
	)
	).catch(console.log);
	};
	if ("geolocation" in navigator) {
	mensaje.innerText = 'Geolocalización SOPORTADA';
	mensaje.style.color = 'green';
	/* Solicitamos una primera actualización inmediata */
	navigator.geolocation.getCurrentPosition(recibirDatos);
	/* Nos suscribimos a actualizaciones periódicas de la posición */
	navigator.geolocation.watchPosition(recibirDatos);
	} else {
	mensaje.innerText = 'Geolocalización no disponible en este navegador';
	mensaje.style.color = 'red';
	}
	</script>
	</body>
	</html>
	<?php
	header('Content-type: application/json;charset=utf-8');
	$datos = file_get_contents('php://input');
	file_put_contents('log.txt', $datos . PHP_EOL, FILE_APPEND);
	/* Convertimos los datos para ser usados por PHP */
	$coordenadas = json_decode($datos);
	/* Obtenemos los datos para tu código */
	$lat = $coordenadas->latitude;
	$lng = $coordenadas->longitude;
	$distance = 1; // Sitios que se encuentren en un radio de 1KM
	/* Código de https://gist.github.com/mpratt/3177700#file-getboundaries-php */
	require_once 'getBoundaries.php';
	$box = getBoundaries($lat, $lng, $distance);
	$pdo = new PDO(
	'mysql:host=localhost;dbname=test;charset=utf8',
	'test',
	'test'
	);
	$stmt = $pdo->prepare('
	SELECT
	*
	FROM direcciones
	WHERE
	(lat BETWEEN :min_lat AND :max_lat)
	OR (lng BETWEEN :min_lng AND :max_lng)
	');
	$stmt->bindValue(':min_lat', $box['min_lat']);
	$stmt->bindValue(':max_lat', $box['max_lat']);
	$stmt->bindValue(':min_lng', $box['min_lng']);
	$stmt->bindValue(':max_lng', $box['max_lng']);
	if ($stmt->execute() === false) {
	die(json_encode([
	'error' => true,
	'info' => $stmt->errorInfo(),
	]));
	};
	$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
	/* Entregamos los restaurantes encontrados */
	echo json_encode([
	'error' => true,
	'info' => $rows,
	]);
	CREATE TABLE `direcciones` (
	`id` int(11) NOT NULL AUTO_INCREMENT,
	`nombre` varchar(20) NOT NULL,
	`lat` float NOT NULL,
	`lng` float NOT NULL,
	ADD PRIMARY KEY (`id`)
	) ENGINE=InnoDB DEFAULT CHARSET=utf8_general_ci;

	INSERT INTO `direcciones` (`id`, `nombre`, `lat`, `lng`) VALUES
	(1, 'prueba', 0, 0);