Asistente de telemetría que te ayuda a encontrar cualquier recurso físico de la Universidad de la Amazonia

Buscar recursos fisicos

Buscar cualquier recurso fisico

Mide la distancia actual

Geolocalizacion y rastreo automático para detección de coordenadas y calculo de distancias

Visualización en el mapa

Uso de la API de Google para la visualización de los recursos fisicos en el mapa

Buscar Sedes

Obtén toda la información necesaria acerca de las sedes

Foro chat

Comparte e Interactúa al instante con toda la comunidad estudiantil de la Uniamazonia

Crear archivo .html y luego se crea un elemento div con el nombre “map” para que contenga el mapa

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body { 
        height: 100%; 
        margin: 0; 
        padding: 0; 
      }
      #map { 
        height: 100%;
      }
    </style>
  </head>
  <body>

    <div id="map"></div>

  </body>
</html>

Se define una función JavasScript que crea un mapa en el elemento div

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body { height: 100%; margin: 0; padding: 0; }
      #map { height: 100%; }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript">

    var map;
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
      });
    }

    </script>
  </body>
</html>
var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

Se carga JavaScript de Maps API con una etiqueta script

  <body>
    <div id="map"></div>
    <script type="text/javascript">

    var map;
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
      });
    }

    </script>
    <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>
<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

App Hybrid

  • Angular 2 rc.0
  • Typescript
  • NodeJS

https://developers.google.com/maps/documentation/javascript/tutorial?hl=es-419

https://github.com/juliandavidmr/StarkMap_API

Repositorio Backend:

API REST

Postgis

NodeJS

https://github.com/juliandavidmr/AppHackatonIndigo

Repositorio App:

TypeScript

Angular 2

NodeJS

 this.http.get('Aqui la url de tu API')
  .map(res => res.json())
  .subscribe(data => {
    // we've got back the raw data, now generate the core schedule data
    // and save the data for later reference

    ...

    this.data = data;
    resolve(this.data);
  });

Provider

AppHackatonIndigo/app/providers/servicios/

  loadData() {
    this.servicios.load().then((data) => {
      console.log('Data: ', data);
      this.listServicios = data;
    }).catch(err => { });
  }

Pagina

AppHackatonIndigo/app/pages/servicios/servicios.ts

deck

By anlijudavid

Made with Slides.com

deck

  • 412

More from anlijudavid