Sistema propio de seguimiento en vivo (GPS Tracker)

Tiempo estimado de lectura: 6 min.

Hace un tiempo encontré en GitHub un proyecto GPL v3 llamado Self-Hosted-GPS-Tracker con el que, como su nombre indica, se puede montar un sistema propio de localización en tiempo real (RTLS) para hacer lo que viene siendo un seguimiento en vivo (o livetracking… que quizá así dicho aún suene más “cool”).

El proyecto original sigue funcionando igual de bien que el primer día, pero he creído conveniente darle una vuelta de tuerca más (a la parte web, el cliente Android lo he dejado tal cual) y lo he integrado con OpenStreetMap.org, ya que como algunos sabréis, la API de Google Maps tiene un límite de 25.000 impresiones diarias, entre otras cosas, frente a su alternativa libre OpenStreetMap.org.

Y como una imagen vale más que mil palabras, he aquí de lo que estamos hablando:

Previsualización del sistema de seguimiento en vivo (GPS Tracker)
Previsualización del sistema de seguimiento en vivo (GPS Tracker)

Así que si tú también te estás planteando para qué limitarte y tienes ganas de implementar un sistema de este tipo, te invito a que sigas leyendo este artículo y te enseñaré, no sólo cómo funciona, si no los cambios que le he hecho y cómo implementarlo todo para que tú también puedas tener tu propio sistema de localización :-).

Nota: No te preocupes por ir construyendo el ejemplo conforme vayas leyendo, al final del artículo tienes el .zip con el proyecto al completo.

¡Adelante, pues!

Cómo funciona

Parte Móvil: A través del GPS del móvil junto con el programa Self-Hosted GPS Tracker para Android, se envían las últimas coordenadas recibidas (latitud y longitud) al servidor que tú le indiques en la propia aplicación.

Parte Servidor: Mediante PHP se procesan y almacenan esos datos, y se construye una página web en la que la parte del mapa se interpreta en el lado del cliente (en el navegador de quien esté visualizando esa información).

Parte Cliente: Se recibe un HTML con JavaScript y se muestra el mapa con los marcadores.

Esto es a grosso modo el sistema de seguimiento, pero vamos a diseccionarlo más en detalle.

Estos son los ficheros que vas a necesitar:

  • json.php: Construye una respuesta JSON a partir de unos valores que le pases.
  • mapview.php: Realiza una consulta al servidor para saber cuáles son las últimas localizaciones y, en base a eso, construye un mapa y posiciona los marcadores en su respectiva localización.
  • gps_data_reader.php: Lee los datos de las localizaciones.
  • gps.php: Recibe las coordenadas GPS desde la aplicación móvil y guarda los valores en un fichero de texto plano.
  • gps-position.txt: Fichero de texto plano con los valores de las coordenadas y la fecha y hora del último registro.
  • commons.js y prototype.js: Librerías necesarias para realizar la parte de AJAX del cliente con la que se efectúa, periódicamente, una consulta a las nuevas coordenadas recibidas sin necesidad de recargar la página nuevamente.

Partamos de lo básico. Se reciben unas coordenadas desde el móvil. Bien, ¿cómo son procesadas?

Para eso tenemos el fichero gps.php:


<?php

$file = "gps-position.txt";

if ( isset($_GET["lat"]) && preg_match("/^-?\d+.\d+$/", $_GET["lat"])
    && isset($_GET["lon"]) && preg_match("/^-?\d+.\d+$/", $_GET["lon"]) ) {
    $f = fopen($file,"w");
    //fwrite($f, date("Y-m-d H:i:s")."_".$_GET["lat"]."_".$_GET["lon"]);
    fputs($f,date("Y-m-d H:i:s")."_".$_GET["lat"]."_".$_GET["lon"]);
    fclose($f);
    echo "OK";
} else {
    echo 'Please type this URL in the <a href="https://play.google.com/store/apps/details?id=fr.herverenault.selfhostedgpstracker">Self-Hosted GPS Tracker</a> Android app on your phone.';
}

Esto crea un fichero de texto con las coordenadas recibidas desde el móvil.

Puedes crear tantos ficheros como necesites si quieres dibujar varios marcadores simultáneamente.

Más adelante, el fichero gps_data_reader.php  guardará los valores de latitud y longitud (por cada marcador existente) dentro de un array y generará una respuesta json ,utilizando para éllo el fichero json.php.

Perfecto, ya hemos visto como guardar las posiciones y como generar una respuesta JSON para que se recojan esos datos. ¿Te parece que veamos la última parte?

En el fichero mapview.php, en la parte HTML, se define dentro del tag body una función llamada init() para cuando carge la página:


<body onLoad="init()">

Dentro del tag head se definen los JavaScripts que vamos a utilizar:

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="prototype.js" type="text/javascript"></script>
<script src="common.js" type="text/javascript"></script>

Y dentro de la función init() usaremos un método que inicializa recursivamente la carga del fichero gps_data_reader.php, para obtener así los datos cada 10 segundos:

function init()
{
    screen = new Ajax.PeriodicalUpdater('', 'gps_data_reader.php', {
        method: 'get', frequency: 10.0,onSuccess: function(t) {
            var data = t.responseText.evalJSON();
            team1Data = data[0].toString().split("_");
            team2Data = data[1].toString().split("_");

            if (typeof(map) === "undefined") {
                initalizeMap();
            }

            updateMarkers();
        }
    });
}

Una vez recibidos los datos, inicializamos el objeto mapa si es la primera vez y nunca ha sido creado, y acto seguido actualizamos las localizaciones de los marcadores.

Podría dejar a tu curiosidad e interés el hecho de descargar el proyecto y estudiar por tu cuenta cómo crear un mapa y actualizar sus objetos, pero aprovechando esta entrada (aunque en la página de OpenLayers encontrarás multitud de ejemplos) me voy a aventurar a dejarlo aquí por escrito. No cuesta nada y puede que a alguien le venga bien.

Necesitarás un div bien en el head de la página o bien en el body identificado por un nombre:

<div id="mapcanvas" style="width: 800px; height: 600px" />

Ahora, dentro de JavaScript, definimos las variables map y zoom y creamos el mapa:

var map, zoom=15;

map = new OpenLayers.Map ("mapcanvas", {
    controls:[
        new OpenLayers.Control.Navigation(),
        new OpenLayers.Control.PanZoomBar(),
        new OpenLayers.Control.LayerSwitcher(),
        new OpenLayers.Control.Attribution()
    ],
    maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
    maxResolution: 156543.0399,
    numZoomLevels: 18,
    units: 'm',
    projection: new OpenLayers.Projection("EPSG:900913"),
    displayProjection: new OpenLayers.Projection("EPSG:4326")
} );

Añadimos dos capas, una con el tipo de renderización del mapa que queremos mostrar y la otra como contenedora de los marcadores:

layerMapnik = new OpenLayers.Layer.OSM();
map.addLayer(layerMapnik);
layerMarkers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(layerMarkers);

Centramos el mapa sobre unas coordenadas concretas:

var initLonLat = new OpenLayers.LonLat(-1.988316, 43.320236).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
map.setCenter (initLonLat, zoom);

Obtenemos las últimas coordenadas para nuestros marcadores (como ejemplo voy a crear dos):

var team1LonLat = new OpenLayers.LonLat(team1Data[1], team1Data[0]).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
var team2LonLat = new OpenLayers.LonLat(team2Data[1], team2Data[0]).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());

Le damos un tamaño a las imágenes que harán de marcadores y las guardamos en variables:

var size = new OpenLayers.Size(21,25);
var icon = new OpenLayers.Icon('http://www.saulcintero.com/gpstracker/img/marker1.png',size,offset);
var icon2 = new OpenLayers.Icon('http://www.saulcintero.com/gpstracker/img/marker2.png',size,offset);

Y creamos el marcador junto con su ventana emergente (pop-up) que se mostrará al poner el cursor encima:

team1Marker =new OpenLayers.Marker(team1LonLat,icon);
team1Popup = new OpenLayers.Popup("Equipo1", team1LonLat, new OpenLayers.Size(145,52), "Equipo 1 Lon: "+Math.round(team1Data[1] * 10000) / 10000+", Lat: "+Math.round(team1Data[0] * 10000) / 10000);
map.addPopup(team1Popup);
team1Popup.hide();
team1Popup.opacity=0.5;
team1Marker.events.register('mouseover', team1Marker, function (e) {
    team1Popup.toggle();OpenLayers.Event.stop (evt);
} );
layerMarkers.addMarker(team1Marker);

team2Marker =new OpenLayers.Marker(team2LonLat,icon2);
team2Popup = new OpenLayers.Popup("Equipo2", team2LonLat, new OpenLayers.Size(145,52), "Equipo 2 Lon: "+Math.round(team2Data[1] * 10000) / 10000+", Lat: "+Math.round(team2Data[0] * 10000) / 10000);
map.addPopup(team2Popup);
team2Popup.hide();
team2Popup.opacity=0.5;
team2Marker.events.register('mouseover', team2Marker, function (e) {
    team2Popup.toggle();OpenLayers.Event.stop (evt);
} );
layerMarkers.addMarker(team2Marker);

Bien, si ahora ejecutases esto, verías una página web con un mapa y dos marcadores a los que, al pasar el ratón por encima, te sacarían un mensaje con el número de equipo y su latitud y longitud.

¿Cómo actualizar y mover tanto los pop-up’s como los markers ya creados?

En la función updateMarkers tendrías que hacer lo siguiente:

var newPx1 = map.getLayerPxFromViewPortPx(map.getPixelFromLonLat(new OpenLayers.LonLat(team1Data[1], team1Data[0]).transform(map.displayProjection, map.projection)));
team1Marker.moveTo(newPx1);
team1Popup.moveTo(newPx1);
team1Popup.setContentHTML("Equipo 1 Lon: "+Math.round(team1Data[1] * 10000) / 10000+", Lat: "+Math.round(team1Data[0] * 10000) / 10000);

var newPx2 = map.getLayerPxFromViewPortPx(map.getPixelFromLonLat(new OpenLayers.LonLat(team2Data[1], team2Data[0]).transform(map.displayProjection, map.projection)));
team2Marker.moveTo(newPx2);
team2Popup.moveTo(newPx2);
team2Popup.setContentHTML("Equipo 2 Lon: "+Math.round(team2Data[1] * 10000) / 10000+", Lat: "+Math.round(team2Data[0] * 10000) / 10000);

Como ves, se calcula, a partir de unas coordenadas dadas, una conversión al pixel que correspondería dentro de la pantalla, se mueve el objeto junto con el popup y se actualiza el valor del popup.

Aquí te dejo el link de descarga del proyecto: http://www.saulcintero.com/gpstracker/gpstracker.zip
Y aquí una demo: http://www.saulcintero.com/gpstracker/mapview.php

¡Que lo disfrutes! ¡Yeah! 🙂

Saúl Cintero

Publicado por

Saúl Cintero

Saúl Cintero

Soy feliz diseñando y desarrollando soluciones para cada necesidad.En los últimos tiempos he centrado mi atención en Java y disfruto desarrollando productos tanto para escritorio como para dispositivos móviles.

72 comentarios en “Sistema propio de seguimiento en vivo (GPS Tracker)”

      1. Buenas, he comprobado y tengo el PHP bien instalado, pero el fichero mapview.php no me abre nada, ni el OpenLayers.
        Que puedo hacer?
        Gracias

        1. Hola, MUY BUEN APORTE, Pero no carga el grafico igual que a los demas, porque no nos colaboras con detalle ya que por mas que leo la respuesta y el link que dejaste quedo en las mismas. Muchas gracias.

          1. Buenas Andrés,

            El ejemplo que os he subido lo he extraído, tal cual está, tanto en un IIS bajo Windows Server como en un Apache bajo Linux, y ha funcionado sin tener que hacer nada más.

            He eliminado el include del fichero gps_data_reader.php para todos aquellos que estáis teniendo el mismo problema, y he resubido el ejemplo de nuevo. Descárgalo y pruébalo nuevamente.

            Déjame decirte que, si no te funciona, es un problema de tu configuración. Pero eso no es precisamente de lo que estamos hablando en esta entrada…

            Lo que no tengo muy claro es eso que mencionas sobre que te quedas igual después de ver mis respuestas y el enlace que cito, ya que simplemente explico el problema y hago referencia a la propia documentación de php en la que, precisamente, se trata ese tema.

            Además el código está a tú disposición, no es algo de lo que dependas de mí para nada, y siempre tienes la posibilidad de revisar el fichero gps_data_reader.php (o cualquier otro) para saber qué hace, o para reescribirlo si prefieres, y hacerlo funcionar a tú manera. Es la parte más sencilla del sistema live-tracking y en el artículo hablo un poco sobre éllo.

            La idea de ese fichero es generar un array de latitudes y longitudes por cada marcador, salvarlo sobre la variable $latlon[] y codificarlo como JSON.

            Saludos.

  1. Hola que tal! estaba siguiendo estos pasos, y logre guardar el dato del celular en el gps-position-team1.txt pero cuando abro el “mapview.php” en mi servidor local, no me muestra nada, la pagina queda en blanco, que estare haciendo mal? Desde ya muchas gracias!

    1. Hola Nicolás! El ejemplo está montado y testeado para que únicamente lo descomprimas y funcione.

      Has comprobado que tengas PHP bien instalado y funcionando? Crea un fichero phpinfo.php con el siguiente contenido:


      < ?phpphpinfo();?>

      Invócalo y comprueba que te muestra la página de información de PHP. Saludos.

  2. Hola, una pregunta, lo descomprimi talcual esta, y no lo pude hacer andar. Estoy viendo que en el archivo gps_data_reader.php haces una llamada al archivo include “config.php”;
    yo a ese archivo (config.php) no lo tengo por ningun lado. Podria ser ese el problema por el cual no me grafica, ni me agrega las posiciones? y de ser eso, como puedo solucionarlo?
    Agradecería tu respuesta, veo muy interesante tu trabajo.
    Un saludo cordial, Lisandro

    1. Hola Lisandro,

      Config.php no está dentro del fichero comprimido adjunto porque es una librería que deberías tener instalada. Lo que te está ocurriendo es simplemente un tema de configuración.

      Para solucionarlo, debes localizar el fichero config.php (podría estar en /var/www/public_html/config.php) y, después, pon la ruta que contiene config.php en tu “include path” de php. Más información en esta URL: http://www.php.net/manual/en/ini.core.php#ini.include-path

    1. Permíteme que te copie y pegue la respuesta que he dado sobre otro comentario anterior:

      Config.php no está dentro del fichero comprimido adjunto porque es una librería que deberías tener instalada. Lo que te está ocurriendo es simplemente un tema de configuración.

      Para solucionarlo, debes localizar el fichero config.php (podría estar en /var/www/public_html/config.php) y, después, pon la ruta que contiene config.php en tu “include path” de php. Más información en esta URL: http://www.php.net/manual/en/ini.core.php#ini.include-path

  3. estimado, estoy trabajando en algo parecido pero con gps tracker, en el ejemplo tuyo la aplicacion android se preocupa de enviar la informacion, por casualidad sabras como enviar datos desde estos dispositivos (colocados en vehiculos) al servidor?
    exelente tu aporte
    y gracias por cualquieer ayuda

    1. Si es Android, usando la app. “Self-Hosted GPS Tracker” del Google Play. En caso contrario, siempre puedes hacerte tu propia aplicación, el proceso de cómo funciona está bien explicado.

  4. Me parece muy bueno pero al igual que otros no me muestra nada en el mapview.php asi mismo cual es el archivo config.php porque al parecer hace falta. porque es en esa linea donde marca un error.

    1. Permíteme que te copie y pegue la respuesta que he dado sobre otro comentario anterior:

      Config.php no está dentro del fichero comprimido adjunto porque es una librería que deberías tener instalada. Lo que te está ocurriendo es simplemente un tema de configuración.

      Para solucionarlo, debes localizar el fichero config.php (podría estar en /var/www/public_html/config.php) y, después, pon la ruta que contiene config.php en tu “include path” de php. Más información en esta URL: http://www.php.net/manual/en/ini.core.php#ini.include-path

  5. Hola que tal, muchas gracias por este aporte es muy bueno e interesante. Lo mismo que los comentarios anteriores, no me carga ningun gráfico al cargar mapview.php que se puede hacer? y como puedo enviar o recibir datos de gps de otros dispositivos como los que se encuentran en los vehiculos. Muchas gracias.

    1. Hola Henry,

      Tienes más información si lees mis respuestas a lo comentarios previos. Echa un vistazo y gracias por tus comentarios.

  6. Buen dia, Saúl Cintero muy interesante tu aporte, pero te recomiendo que al menos leas los comentarios ya que todos tienen el mismo problema, NO carga ningun gráfico al cargar mapview.php y si a todos nos pasa debe ser que se te paso algo por explicar o tu codigo tiene algun error. Te recomiendo dar al menos alguna respuesta o mejor quita los comentarios y listo.

    1. Hola Juan Carlos, gracias por tus comentarios.

      Primeramente decirte que me he tomado la molestia de explicarlo en los comentarios previos al tuyo, puedes leer mis respuestas y espero que te ayuden.

      En segundo lugar, no necesito que nadie me diga si debo o no debo quitar los comentarios en la web. No tengo ninguna obligación para con nadie, y yo decido si quiero contestar a algo o no. Al margen de eso, puede venir alguien antes que yo y responder dando una solución a alguna de las dudas, esto es una herramienta que puede ser usada por y para todos.

      Por otro lado, das por hecho que no he leído los comentarios. Decirte que yo lo leo todo, pero no siempre tengo tiempo para contestar a todo lo que me gustaría. Mi tiempo es bastante limitado.

      Siento mi respuesta, pero aunque no lo parezca te lo digo de buen rollo. Espero que lo entiendas, saludos.

  7. Hola Saúl Cintero, es el mejor tutorial que he visto hasta la fecha, gracias por compartir tus conocimientos, hice todos los pasos que indicas y todo sale a la perfeccion. Pero tengo una pregunta haber si me puede ayudar, el sistema me envia las coordenadas a mi web pero al momento de ver el mapa siempre me sale el Mapa que esta en la foto tuya, como yo se donde esta el marcado lo busco manualmente y lo encuentro. La pregunta es como hago para que el mapa salga de una de las marcaciones que me hace el Gps. Cuando hago la prueba deberia abrirse el mapa en Bogota Colombia. porque alli hago las pruebas. Otra pregunta, este mapa no tiene limite como el de google que es de 25.000? Gracias por tu respuesta.

    1. Hola Carlos,

      Efectivamente, no tiene las limitaciones por impresión, siéntete libre de darle la carga de trabajo que necesites a los mapas de OpenStreetMap.

      El código donde centro el mapa es en esta línea:


      var initLonLat = new OpenLayers.LonLat(-1.988316, 43.320236).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());

      Puedes cambiarlo por esto otro y quedaría solucionado:


      var initLonLat = new OpenLayers.LonLat(4,5980478, -74,0760867).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());

      Y dentro de la método “init()”, si te fijas, hago una llamada a “updateMarkers();”, que se encarga de mover los marcadores.

      Se me ocurre que podrías crear un método llamado “centerMap()” y llamarlo justo después de “updateMarkers()” para centrar el mapa sobre la posición recibida del marcador. Eso si lo que buscas es que el mapa también se vaya moviendo.

      Un saludo.

  8. que tal Saul, tengo una pregunta cuano le hago zoom para aumentar lo hace pero luego le hago para disminuirlo no lo hace, como se erregla eso, y otra preguntica yo quiero que inicie viendo todo el mundo y que se ven todos los marcadores imagina que tengo un marcado en espana otro en venezuela la idea es verlos todos en una sola pantalla. Y yo hacer zoom en el marcador que quiera. como se hace?
    Gracias por tu respuesta.

    1. Hola Ana María,

      El porqué no te funciona el botón de disminuir zoom, por desgracia, no tiene una respuesta sencilla. El caso es que pueden ser mil cosas.

      Te recomiendo que instales la extensión Firebug de Firefox, eso te ayudará a localizar el problema. La puedes encontrar aquí: Firebug

      Por otro lado, para hacer lo que comentas, si simplemente quieres ver el mundo al completo y después hacer zoom al marcador que tú elijas, sólo debes cambiar el valor del zoom del mapa a “1”. Lo encontrarás en esta línea:

      var map, zoom=15;

      También puedes buscar manualmente un punto intermedio y un nivel de zoom en el que se vean los dos países y, cuando lo tengas claro, codificarlo. Esa solución es rápida, sencilla y serviría para lo que necesitas con el inconveniente de tener el mapa en modo estático.

      Si lo que buscas es que la coordenada central se auto-calcule y el mapa se centre automáticamente, deberías crear un método dentro de “init()” y, antes de ejecutar “updateMarkers()”, hacer una lectura de los dos marcadores y realizar un cálculo del punto central y del nivel de zoom necesario para visualizarlos.

      Espero haberte ayudado.

  9. Hola Saul, buen aporte, en donde puedo cambiar para ver diferentes tipos de mapa, y que el mapa me ocupe toda la pantalla, gracias por tu respuesta.

  10. hola SAUL ! gran aporte ! sabes que pude subir todos los ficheros pero no logro que se envie desde mi celular al servidor los datos. Estoy usando 000webhost y puse 777 en chmod a todos los ficheros y carpetas. Alguna idea de que podra ser ? gracias 🙂

  11. Hola Saúl excelente tu trabajo yo tengo una consulta en cuanto a los terminales. Sabes cuanto consumen de datos al momento de hacer la transición de la información de posicionamiento al servidor es decir para calcular una cuota de uso de datos al dia por ejemplo o no usa el plan de datos del móvil??

    Gracias y felicidades

    1. Hola Ricardo,

      Si el servidor lo tienes dentro de tu red local y los terminales móviles están en el mismo rango IP, no hace falta ningún plan móvil.

      En caso contrario necesitas un plan de datos. Con lo más básico te servirá, ya que si no me equivoco cada petición consumía unos 500 bytes más o menos.

      Teniendo en cuenta que, por defecto, la aplicación móvil hace una actualización cada 30 segundos (se puede cambiar), 8 horas laborales vendrían a ser unos 500KB’s (medio MB) por terminal.

  12. Hola Saúl Cintero, como estas?

    Gracias por compartir, contribuir, y facilitar el código.
    te comento que estoy por encarar un proyecto de rastreo de autos por web y android, entiendo que este paquete seria el adecuado. Me gustaría probarlo, de donde lo puedo descargar?

    Saludos

    Atte, Claudio.

    1. Hola Claudio,

      Ten presente que esto en un sistema no-profesional y sin ningún tipo de soporte, tú debes valorar si te sirve o no.

      El link de descarga del proyecto al completo lo tienes al final del post ;-). ¡Que lo disfrutes!

    1. Buenas Claudio,

      Yo lo he hecho funcionar, tal y como está en el .zip, tanto en servidor apache como en un IIS (y PHP en ambos casos, claro), por tanto no deberías tener mayor problema por usarlo con el paquete xampp.

      ¡Suerte!

  13. Hola Saúl, primero que nada muchas gracias por todas las explicaciones, tengo una duda, sabes como se haría para el caso de que el equipo móvil pierda la conexión a internet para que guarde las posiciones cada x tiempo en el mismo dispositivo y que cuando encuentre conexión envíe todas las coordenadas?

    Saludos!!
    Claudio Vera

    1. Hola Claudio!

      No sé si tiene mucho sentido que almacenes todas las coordenadas, ya que el proyecto originalmente sólo cambia la posición sobre la última localización enviada, el resto no se guardan. Creo que sólo en el caso de dibujar el recorrido tendría algo de sentido lo que estás tratando de hacer.

      Dejando eso a un lado y respondiendo a tu pregunta, debes descargar el código del proyecto Android “Self-Hosted-GPS-Tracker” desde aquí: https://github.com/herverenault/Self-Hosted-GPS-Tracker

      En la clase “SelfHostedGPSTrackerService.java”, en el método “onLocationChanged”, si te fijas hay una línea que pone lo siguiente:

      new SelfHostedGPSTrackerRequest().execute(urlText + "lat=" + location.getLatitude() + "&lon=" + location.getLongitude());

      Esto tiene la pega de que sólo se ejecuta cada vez que cambies de localización.

      Lo que yo haría es crear un “handler” que vaya almacenando un array de double’s con los valores de location.getLatitude() y location.getLongitude(), y quitar la sentencia de envío de la URL en el método onLocationChanged.

      Cada vez que se ejecute, si hay conexión a Internet, recorrer el array con las localizaciones, ejecutar la sentencia de envío por cada valor del array y, al terminar el bucle, vaciarlo. Por último, en caso de no tener conexión, seguir almacenando valores.

      ¡Espero haberme explicado! Suerte.

  14. Hola Saúl C.:
    El proyecto que describes a mi me funciona perfectamente, tanto a nivel local como en red. Es un aporte magnífico. Únicamente me gustaría saber qué debo de hacer para ampliar el número de “jugadores” o “equipos”, para poder hacer participar por ejemplo a 50 a la vez en lugar de la actual limitación de 7. He intentado replicar el código existente ampliando a 10 y sigue con su limitación de 7.
    Muchas gracias, un saludo!!
    David. A.

    1. Hola David,

      No hay ninguna limitación, yo he armado un ejemplo con 7 marcadores pero siempre podrás crear los que tú quieras.

      Primeramente debes crear ficheros de texto plano (.txt) vacíos para cada uno de los marcadores. Fíjate que en el ejemplo existen 7 por cada marcador: “gps-position-team1.txt”, “gps-position-team2.txt”, “gps-position-team3.txt”, etc.

      Por otro lado, verás que hay varios ficheros del tipo “gps1.php”, “gps2.php”, “gps3.php”… donde cada uno de éllos gestiona la información recibida de cada dispositivo android e intenta guardarla en el fichero .txt asociado en su código. Cópiate uno de éllos y ve modificándolo por cada marcador nuevo, sólo deberías cambiar la siguiente línea sustituyendo el nombre del fichero a enlazar:
      $file = "gps-position-team1.txt";

      A partir de aquí, fíjate que en la carpeta “img” están las imágenes asociadas a cada marcador. Puedes reutilizarlas o crear más. En mi caso, para el ejemplo hice uno diferente para cada marcador.

      Ya casi para acabar, debes abrir el fichero “gps_data_reader.php” y mirarte su código. Debes añadir, manteniendo la misma estructura, nuevas líneas para cada marcador.

      Y por último, abre el fichero “mapview.php” y, como has hecho antes, mantén la estructura de código pero añade nuevas líneas para que tus marcadores se representen en la vista de mapa. A la hora de indicarle qué marcador elegir de la carpeta de imágenes, aquí es donde puedes decidir reutilizar los mismos recursos o indicarle que use nuevos.

      Suerte!

  15. hola gracias por tu sistema me funciona bien pero tengo una duda tengo comprado un dominio pero no se hacer para que mi donimio reciba los datos de mi android no se que url ponerle a la aplicacion para que reciba las coordenadas

  16. Antes que nada felicidades, por este grandiosos aporte,es sublime.
    Unicamente para hacerlo funcionar tuve que modificar el archivo gps_data_reader con las variables lon?, ya que mandaba error, falta ba el signo de $ antes de cada variable.

    Gracias.

  17. Cordial saludo sr Saul, me ha servido de mucho tu codigo, funciona a la perfección, y es de facil adaptación para dispositivos gps instalados en vehiculos no solo para smartphone, lo unico que debes realizar un script en un servidor aparte que te escuche el dispostivo constantemente y este enviando esas coordenadas que obviamente el script debe decodificar a la web donde instalas este desarrollo y va de maravilla. Muchas gracias.

  18. Excelente post,me has quitado dolores de cabeza. Pero surge una pregunta,tengo dispositivos(gps) tracker supongo que sirve igual no? A estos se les configura una ip y un puerto,funciona igual?
    De no ser asi? De que manera podria sacar la información que recibe la ip y el puerto. Gracias amigo

  19. Hola Saul, he creado una web empleando el sistema Self-Hosted-GPS-Tracker original y pienso utilizarlo solamente con openstreetmaps para realizar una serie de seguimientos. Me gustaría saber si es posible añadir capas .kmz personalizadas a openlayers o si tienes idea sobre como se hace. Gracias y un saludo, muy buen aporte.

  20. Vale, muchísimas gracias Saúl. Y por curiosidad… ¿no tendrás idea de si se podría calcular el tiempo de llegada hasta “x” marcador? Por ejemplo se me ocurre que podría marcar un punto en el mapa (supuesta parada de autobús) y de algún modo calcular la distancia entre el último punto geolocalizado y la velocidad de este. Luego podría aplicar una fórmula matemática para calcular el tiempo estimado de llegada utilizando dichas variables. ¿qué opinas?

    Saludos nuevamente 🙂

  21. Amigo he intentado de todo jajaja sigo sin poder ejecutar el mapview (lo muestra en blanco) según veo por aquí hay muchos que tienen el mismo problema y no se si alguien halla podido solucionarlo mi instalación de php es muy reciente, debe ser alguna extensión que esta desabilitada o algo, pero no consigo hacerla funcionar, en todo caso es muy bueno el aporte ojala antes de terminar mi tesis pudiera hacerlo funcionar. Muy buen aporte 🙂

    1. acabo de subir el proyecto a un hosting pensando que podría ser mi configuración de servidor, pero aun así no muestra el mapview, no se que puede ser 🙁

      1. Vuelvo una vez más, espero que me puedas ayudar, el problema se origina en el archivo gps_data_reader.php cuando se eliminar estas lineas:
        if ($date_lat_lon1) {
        list($date1, $lat1, $lon1) = explode(“_”, $date_lat_lon1);
        }
        if ($date_lat_lon2) {
        list($date2, $lat2, $lon2) = explode(“_”, $date_lat_lon2);
        }
        if ($date_lat_lon3) {
        list($date3, $lat3, $lon3) = explode(“_”, $date_lat_lon3);
        }
        if ($date_lat_lon4) {
        list($date4, $lat4, $lon4) = explode(“_”, $date_lat_lon4);
        }
        if ($date_lat_lon5) {
        list($date5, $lat5, $lon5) = explode(“_”, $date_lat_lon5);
        }
        if ($date_lat_lon6) {
        list($date6, $lat6, $lon6) = explode(“_”, $date_lat_lon6);
        }
        if ($date_lat_lon7) {
        list($date7, $lat7, $lon7) = explode(“_”, $date_lat_lon7);
        }

        El archivo mapview.php se visualiza sin ningún problema, es ahí donde se origina el error que no muestra el mapa, no sabes que puede ser?

  22. Hola Saul muy bueno tu sistema. tu sistema trabaja con un celular que tiene un app para que mande las coordenadas, tengo un gps que me manda las coordenadas en un sms, ¿como o con que tipo de hardware tengo que trabajar para poder pasar las coordenadas al sistema?

  23. La solución es muy sencilla, el problema no es de servidores ni nada por el estilo, lo que pasa es que en uno de los archivos fue editado con una mala practica donde se declara una variable como constante es por eso el error, solución editar el archivo gps_data_reader en las lineas ($lat1 && lon1 ) por ($lat1 && ‘lon1’) y solucionado, gracias pero muchas gracias por tu excelente amigo, excelente trabajo don Saúl Cintero…

  24. Saludos Saul, y a su vez felicitandote por tu aporte, si es verdad el mapa no se muetra, el comenario anterior aportó la corrección. Mi pregunta es la siguiente cual es el link que debo colocar en la aplicación android para que me envíe los datos a este sistema?, gracias de antemano, soy nuevoen esto y apenas hago mis primeras pruebas.

  25. Me parece excelente este tema, a proposito quisiera conocer como manejar la ubicacion digamos de un vehiculo en tiempo real para proyectarla en mi aplicacion o pagina web, necesito de algun permiso del proveedor del servicio GPS? Gracias

  26. Un saludo saul…extraordinario tu trabajo. Quisiera saber por favor como implementar este mismo sistema pero con google maps, y también como haria para guardar y leer los datos no de un archivo plano sino de una base de datos mysql, agradezco a quien me pueda brindar documentación o un ejemplo de un sistema como este pero usando google maps.. Muchas Gracias!!!

  27. Estimado, felicidades por su proyecto. he estado probando con su proyecto y con otros. haciendo pruebas, etc.
    usted me podria ayudar?
    mi idea es pasar los datos de mysql a json y mostrar las marcas en el mapa.

  28. hola. mi gps envia primero la longitud y despues la latitud asi:
    06 20.5804-75 34.1228 y asi no me funciona bien… como deberia hacer y como seria el formato para yo hacerle el envio por gprs?

    1. Andrés, claro que sí. Pero para éllo debes retocar los php que almacenan los datos y el app Android que envía los datos.

      En su momento no consideré necesario ese dato, por eso no está implementado.

      Saludos.

  29. Buenos días, me parece excelente esta aplicación de openstreet que has generado, quisiera preguntarte algo quizás salido del caso , hace muy poco vengo incursionando en html y sus temas relacionados, ya que estoy en proceso de desarrollar una plataforma para comunicar diferentes tipos de dispositivos y quisiera agregar un sistema como este a mi plataforma que me permita usar los mapas de openstreetmaps, por esta razon quisiera saber con que parte del código llamas los mapas a tu web. muchas gracias .

  30. Muchas gracias Saul, funciona de diez.

    Te hago una consulta, quiero pasar el codigo a c# .net, y lo que me esta faltando es obtener las coordenadas, ya que el $_GET no existe en c#.

    Sabras por donde debo investigar?

    Gracias y saludos

    Gonzalo

  31. HOLA AMIGO POR FAVOR RESPONDE MI MENSAJE, NECESITO AYUDA, DEBO CREAR UNA APP QUE POR EJEMPLO TENIENDO EL GPS TRAKER O EL TK103 POR EJEMPLO EN VARIOS VEHICULOS, DIGAMOS BUSES URBANOS, TE LLEGUE UNA NOTIFICACION A TU TELEFONO CUANDO ESTOS ESTAN CERCA. ENTONCES TENDRE VARIOS RASTREADORES EN LOS VEHICULOS QUE QUISIERA QUE ENVIEN SU UBICACION A UN SERVIDOR, UNA APP QUE RECIBA DEL SERVIDOR LA UBICACION DE LOS VEHICULOS Y QUE RECIBA LA UBICACION DEL DISPOSITIVO ANDROID, PARA QUE CALCULANDO CIERTA DISTANCIA, ESTE TE ENVIE UNA NOTIFICACION, ESTUVE LEYENDO SU ARTICULO SEGUIMIENTO EN VIVO GPS TRACKER Y ME PARECIO INTERESANTE… PERO QUIERO ADAPTARLO A ESAS NECESIDADES.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Time limit is exhausted. Please reload CAPTCHA.