Creación del HTML para su aplicación de Amazon Location - Amazon Location Service

Creación del HTML para su aplicación de Amazon Location

En este tutorial, creará una página HTML estática que incluye un mapa y permite al usuario encontrar lo que hay en una ubicación del mapa. La aplicación constará de tres archivos: un archivo HTML y un archivo CSS para la página web, y un archivo JavaScript (.js) para el código que crea el mapa y responde a las interacciones y eventos del mapa del usuario.

En primer lugar, vamos a crear el marco HTML y CSS que se utilizará para la aplicación. Será una página sencilla con un elemento <div> que contenga el contenedor del mapa y un <pre>elemento que muestre las respuestas de JSON a sus consultas.

Para crear el código HTML para su aplicación de inicio rápido

  1. Cree un nuevo archivo denominado quickstart.html.

  2. Edite el archivo en el editor de texto o el entorno que prefiera. Agregue el siguiente código HTML al archivo.

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Quick start tutorial</title>

    <!-- Styles -->
    <link href="main.css" rel="stylesheet" />
  </head>
  
  <body>
    <header>
      <h1>Quick start tutorial</h1>
    </header>
    <main>
      <div id="map"></div>
      <aside>
        <h2>JSON Response</h2>
        <pre id="response"></pre>
      </aside>
    </main>
    <footer>This is a simple Amazon Location Service app. Pan and zoom. Click to see details about entities close to a point.</footer>
    
  </body>
</html>

    Este HTML incluye un marcador al archivo CSS que crearás en el siguiente paso, algunos elementos marcadores de posición para la aplicación y un texto explicativo.

    Hay dos elementos marcadores de posición que utilizará más adelante en este tutorial. El primero es el elemento <div id="map>, que mantendrá el control del mapa. El segundo es el elemento <pre id="response">, que mostrará los resultados de la búsqueda en el mapa.

  3. Guarde el archivo.

Ahora agregue el CSS para la página web. Esto establecerá el estilo del texto y los elementos marcadores de posición de la aplicación.

Para crear el CSS para su aplicación de inicio rápido

  1. Cree un nuevo archivo llamado main.css en la misma carpeta que el archivo quickstart.html que ha creado en el procedimiento anterior.

  2. Edite el archivo en el editor que desee usar. Agregue el siguiente texto al archivo.

    * {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  margin: 0;
}

header {
  background: #000000;
  padding: 0.5rem;
}

h1 {
  margin: 0;
  text-align: center;
  font-size: 1.5rem;
  color: #ffffff;
}

main {
  display: flex;
  min-height: calc(100vh - 94px);
}

#map {
  flex: 1;
}

aside {
  overflow-y: auto;
  flex: 0 0 30%;
  max-height: calc(100vh - 94px);
  box-shadow: 0 1px 1px 0 #001c244d, 1px 1px 1px 0 #001c2426, -1px 1px 1px 0 #001c2426;
  background: #f9f9f9;
  padding: 1rem;
}

h2 {
  margin: 0;
}

pre {
  white-space: pre-wrap;
  font-family: monospace;
  color: #16191f;
}

footer {
  background: #000000;
  padding: 1rem;
  color: #ffffff;
}

    Esto configura el mapa para que ocupe el espacio que no ha sido utilizado por ninguna otra aplicación, establece el área de nuestras respuestas para que ocupe el 30 % del ancho de la aplicación y, además, establece los colores y estilos para el título y el texto explicativo.

  3. Guarde el archivo.

  4. Ahora puede ver el archivo quickstart.html en un navegador para ver el diseño de la aplicación.

    Browser window displaying a Quick start tutorial page with JSON Response section.

A continuación, agregará el control de mapa a la aplicación.