cicloon · UlisesGascon · Oct 15, 2015 · Oct 15, 2015 · Oct 15, 2015 · Oct 15, 2015
diff --git a/ejemplos/README.md b/ejemplos/README.md
@@ -0,0 +1,44 @@
+# Ejemplos
+
+Los ejemplos están listos para funcionar, no es necesario realizar ajustes.
+
+
+### Geolocalización
+
+En [este ejemplo](nearest.html) la idea principal es poder usar [Geolocation de html5](http://www.w3schools.com/html/html5_geolocation.asp) para saber donde estamos y posterior mente hacer una petición a la API con esos datos.
+
+La respuesta de la API se muestra en un [Google Map](https://developers.google.com/maps/). La [chincheta](img/pin.png) representa el usurio, y las [bicicletas](img/bike.png) las diversas estaciones. *Nota: al pinchar en los iconos podemos ver los detalles (lon, lat, nombre, calle, distancia relativa, bicis libres...)*
+
+La precisión varia según el sistema usado por el cliente.  Las conexiones más precisas por orden de precisión son GPS, Wifi, Ethernet...
+
+**Imágenes**
+
+Los iconos utilizados en la aplicación son de Freepick.
+
+- [Bicicleta](http://www.flaticon.com/free-icon/bike-zone-signal_34665)
+- [Chincheta](http://www.flaticon.com/free-icon/push-pin_69667#term=pin&page=1&position=45)
+
+**Dependencias**
+
+- [Google Maps](https://developers.google.com/maps/documentation/javascript/)
+- [Geolocation HTML5 (Compatibilidad)](http://caniuse.com/#feat=geolocation)
+
+**Capturas**
+
+![usuario detalles](img/gmaps_bicimad_geolocation.png)
+
+![estación detalles](img/gmaps_bicimad_station.png)
+
+
+### Detalles de las estaciones
+
+En [este ejemplo](locations.html) la idea principal es poder usar [dataTables](http://datatables.net/) para poder jugar con los datos ofrecidos por la API.
+
+**Dependencias**
+
+- [Jquery](https://jquery.com/)
+- [DataTables](http://datatables.net/)
+
+**Capturas**
+
+![dataTables detalles](img/dataTable_locations.png)
diff --git a/ejemplos/img/bike.png b/ejemplos/img/bike.png
diff --git a/ejemplos/img/dataTable_locations.png b/ejemplos/img/dataTable_locations.png
diff --git a/ejemplos/img/gmaps_bicimad_geolocation.png b/ejemplos/img/gmaps_bicimad_geolocation.png
diff --git a/ejemplos/img/gmaps_bicimad_station.png b/ejemplos/img/gmaps_bicimad_station.png
diff --git a/ejemplos/img/pin.png b/ejemplos/img/pin.png
diff --git a/ejemplos/locations.html b/ejemplos/locations.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8" />
+    <title>BICIMAD - Localizaciones</title>
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
+</head>
+<body>
+    <div id="locations">
+        <h1>Cargando...</h1>
+    </div>
+    <table id="locations-table" class="display" width="100%"></table>
+    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
+    <script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
+    <script type="text/javascript">
+        $.ajax({
+                dataType: "json",
+                url: 'http://bicimad-api.herokuapp.com/api-v1/locations/',
+            })
+            .done(function(datos, textStatus, jqXHR) {
+
+                var dataSet = [];
+                datos = datos.locations;
+
+                for (var i = 0; i < datos.length; i++) {
+                    dataSet.push([parseInt(datos[i].idestacion, 10), datos[i].nombre, datos[i].direccion, parseInt(datos[i].libres, 10), parseFloat(datos[i].longitud, 10), parseFloat(datos[i].latitud, 10)]);
+                }
+
+                $('#locations').hide();
+                $('#locations-table').DataTable({
+                    data: dataSet,
+                    columns: [{
+                        title: "ID."
+                    }, {
+                        title: "Nombre"
+                    }, {
+                        title: "Dirección"
+                    }, {
+                        title: "Libres"
+                    }, {
+                        title: "Lon"
+                    }, {
+                        title: "Lat"
+                    }]
+                });
+            })
+            .fail(function(jqXHR, textStatus, errorThrown) {
+                $('#locations').html("<h1>La solicitud a fallado</h1>");
+            });
+    </script>
+</body>
+</html>
diff --git a/ejemplos/nearest.html b/ejemplos/nearest.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <title>Demo BICIMAD-API: Geolocalización</title>
+    <meta charset="utf-8" />
+    <style type="text/css">
+        body,
+        html {
+            height: 100%;
+            width: 100%;
+        }
+        #mapa {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+</head>
+<body>
+    <div id="mapa"></div>
+    <script type='text/javascript' src="http://maps.googleapis.com/maps/api/js?extension=.js&output=embed&key=<<<<<--------YOUR_API_KEY------>>>>>"></script>
+    <script type="text/javascript">
+        (function() {
+            if (navigator.geolocation) {
+                navigator.geolocation.getCurrentPosition(function(position) {
+
+                    var xmlHttp = new XMLHttpRequest(),
+
+                        cURL = 'http://bicimad-api.herokuapp.com/api-v1/locations/nearest/?',
+                        cParams = 'lat=' + position.coords.latitude,
+                        cParamsMore = '&long=' + position.coords.longitude + '&distance=' + 1000000000;
+
+                    xmlHttp.onreadystatechange = function() {
+                        var datos = {};
+                        if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
+                            datos = JSON.parse(xmlHttp.responseText);
+                            // Estaciones Info
+                            var puntos = [];
+                            var infoPuntos = [];
+
+                            datos = datos.locations;
+                            // Posición usuario
+                            puntos.push(["usuario", position.coords.longitude, position.coords.latitude, 0]);
+                            infoPuntos.push(['<div class="info_content">' +
+                                '<h3>Aqui estás!</h3>' +
+                                '<p>Precisión: ' + position.coords.accuracy + 'm' +
+                                '<br>Longitud: ' + position.coords.longitude +
+                                '<br>Latitud: ' + position.coords.latitude + '</p>' +
+                                '</div>'
+                            ]);
+                            // Posición usuario (fIN)                         
+                            for (var i = 1; i < datos.length; i++) {
+
+                                var distancia = parseInt(datos[i].dis, 10).toFixed(0);
+                                var longitud = parseInt(datos[i].longitud, 10).toFixed(4);
+                                var latitud = parseInt(datos[i].latitud, 10).toFixed(4);
+
+                                puntos.push([datos[i].nombre, parseFloat(datos[i].longitud, 10), parseFloat(datos[i].latitud, 10), i]);
+                                infoPuntos.push(['<div class="info_content">' +
+                                    '<h3>' + datos[i].nombre + '</h3>' +
+                                    '<p>Dirección: ' + datos[i].direccion +
+                                    '<br>Libres: ' + datos[i].libres +
+                                    '<br>Distancia: ' + distancia + 'm' +
+                                    '<br>ID Estación: ' + datos[i].idestacion +
+                                    '<br>Longitud: ' + longitud +
+                                    '<br>Latitud: ' + latitud + '</p>' +
+                                    '</div>'
+                                ]);
+                            }
+                            // Estaciones Info (Fin)
+                            // GMaps
+                            var map = new google.maps.Map(document.getElementById('mapa'), {
+                                zoom: 15,
+                                center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
+                                mapTypeId: google.maps.MapTypeId.ROADMAP
+                            });
+                            var infowindow = new google.maps.InfoWindow();
+                            var marker, i;
+                            // Gmap usuario  
+                            marker = new google.maps.Marker({
+                                position: new google.maps.LatLng(puntos[0][2], puntos[0][1]),
+                                map: map,
+                                icon: "img/pin.png"
+                            });
+                            google.maps.event.addListener(marker, 'click', (function(marker, i) {
+                                return function() {
+                                    infowindow.setContent(infoPuntos[0][0]);
+                                    infowindow.open(map, marker);
+                                }
+                            })(marker, i));
+                            // Gmap usuario  (fin)
+                            for (i = 1; i < puntos.length; i++) {
+                                marker = new google.maps.Marker({
+                                    position: new google.maps.LatLng(puntos[i][2], puntos[i][1]),
+                                    map: map,
+                                    icon: "img/bike.png"
+                                });
+                                google.maps.event.addListener(marker, 'click', (function(marker, i) {
+                                    return function() {
+                                        infowindow.setContent(infoPuntos[i][0]);
+                                        infowindow.open(map, marker);
+                                    }
+                                })(marker, i));
+                            }
+                            // GMaps (Fin)
+                        } else if (xmlHttp.readyState === 4 && xmlHttp.status === 404) {
+                            datos = JSON.parse(xmlHttp.responseText);
+                            document.getElementById('mapa').innerHTML('<h1>Error 404 al conectar con la API.</h1>');
+                        }
+                    };
+                    xmlHttp.open("GET", cURL + cParams + cParamsMore, true);
+                    xmlHttp.send();
+                }, function() {
+                    document.getElementById('mapa').innerHTML('<h1>Error: El Servicio de Geolocalización esta fallando.</h1>');
+                });
+            } else {
+                document.getElementById('mapa').innerHTML('<h1>Error: Tu navegador no soporta la Geolocalización.</h1>');
+            }
+        })();
+    </script>
+</body>
+</html>