Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.
# Creación de la primera aplicación de mapas y lugares de Amazon Location
En esta sección, creará su primera aplicación con mapas y lugares.
**Requisito previo:**
Si ya ha creado una clave de API en los pasos de [Uso de la consola de Amazon Location Service para autenticación](set-up-auth.md), comencemos.
Si aún no ha creado una clave de API, siga [Uso de la consola de Amazon Location Service para autenticación](set-up-auth.md) antes de continuar con la creación de la aplicación. Si tiene alguna duda, consulte [Uso de claves de la API para autenticación](using-apikeys.md) y [Regiones admitidas de Amazon Location](location-regions.md) para obtener más información.
## Web
Aquí tienes un step-by-step tutorial para crear una aplicación de mapas de Amazon Location Service con MapLibre GL JS. Esta guía le explicará cómo configurar el mapa, agregar opciones de estilo y habilitar la funcionalidad de búsqueda de lugares.
### Configuración de la página inicial
En esta sección, configuraremos la estructura inicial de páginas y carpetas.
#### Agregación de las bibliotecas y hojas de estilo necesarias
Cree un archivo `index.html`. Para renderizar el mapa, necesitas MapLibre GL JS y MapLibre GL Geocoder. Añadirá las hojas de estilo MapLibre y los scripts de Geocoder. JavaScript
Copie y pegue el siguiente código en el archivo `index.html`.
```
Amazon Location Service - Getting Started with First Map App
```
#### Creación del contenedor de mapas
En el elemento `` del archivo HTML, cree un elemento `
` en su HTML para contener el mapa. Puede darle un estilo a esto `
` en su CSS para establecer las dimensiones que necesite para la aplicación. Debe descargar el archivo CSS,, `style.css` de nuestro repositorio. GitHub Esto le ayudará a centrarse en la lógica empresarial.
Guarde los archivos `style.css` y `index.html` en la misma carpeta.
Descarga el `style.css` archivo desde [GitHub](https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/style.css).
```
```
#### Agregue la clave de API y los detalles de AWS la región
Agrega la clave de API que creaste [Uso de claves de la API para autenticación](using-apikeys.md) a este archivo, junto con la AWS región en la que se creó la clave.
```
.....
.....
```
### Agregación de un mapa a la aplicación
En esta sección, agregaremos las capacidades de mapas a la aplicación. Antes de empezar, los archivos deben estar en esta estructura de carpetas.
Si aún no lo ha hecho, descargue el `style.css` archivo desde [GitHub](https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/style.css).
```
|---FirstApp [Folder]
|-------------- index.html [File]
|-------------- style.css [File]
```
#### Creación de una función para inicializar el mapa
Para configurar el mapa, cree la siguiente función, `initializeMap(...)`, después de `//Add functions` de la línea.
Elija una ubicación central y un nivel de zoom iniciales. En este ejemplo, establecemos el centro del mapa en Vancouver, Canadá, con un nivel de zoom de 10. Agregue controles de navegación para facilitar el zoom.
```
/**
* Initializes the map with the specified style and color scheme.
*/
function initializeMap(mapStyle = "Standard", colorScheme = "Dark") {
const styleUrl = `https://maps.geo.${AWS_REGION}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${API_KEY}&color-scheme=${colorScheme}`;
const map = new maplibregl.Map({
container: 'map', // The ID of the map container
style: styleUrl, // The style URL for the map
center: [-123.116226, 49.246292], // Starting center coordinates
zoom: 10, // Initial zoom level
validateStyle: false // Disable style validation
});
return map; // Return the initialized map
}
```
#### Inicialización del mapa
Llame a `initializeMap(...)` para inicializar el mapa. Otra opción, puede inicializarlo con el estilo y la combinación de colores que prefiera después de la función `initializeMap`. Para obtener más opciones de estilo, consulte [AWS estilos y características del mapa](map-styles.md).
```
// Step 1: Setup API Key and AWS Region
const API_KEY = "Your_API_Key";
const AWS_REGION = "Region_where_you_created_API_Key";
// Step 2.1 Add maps to application
// Step 2.2 initialize the map
const map = initializeMap("Standard","Light");
// Step 3: Add places features to application
```
Abra `index.html` en un navegador para ver el mapa en acción.
#### Agregación de control de navegación
Otra opción, puede agregar controles de navegación (zoom y rotación) al mapa. Esto debe hacerse después de llamar a `initializeMap(...)`.
```
// Step 2.1 initialize the map
const map = initializeMap("Standard","Light");
// Step 2.2 Add navigation controls to the map
map.addControl(new maplibregl.NavigationControl());
// Step 3: Add places features to application
```
#### Revisión del código del mapa
¡Enhorabuena\$1 Su primera aplicación está lista para usar un mapa. Abra `index.html` en un navegador. Asegúrese de que `style.css` esté en la misma carpeta que `index.html`.
El HTML final debe tener un aspecto similar al siguiente:
```
Amazon Location Service - Getting Started with First Map App
```
### Agregación de lugares a la aplicación
En esta sección, configuraremos cómo agregar capacidades de lugares a la aplicación. Descarga el JavaScript archivo desde GitHub, [https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/utils.js](https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/utils.js).
Antes de empezar, los archivos deben estar en esta estructura de carpetas:
```
|---FirstApp [Folder]
|-------------- index.html [File]
|-------------- style.css [File]
|-------------- utils.js [File]
```
#### Crear función para crear GeoPlaces
Para agregar una funcionalidad de búsqueda, inicialice la clase de `GeoPlaces` con `AuthHelper` y `AmazonLocationClient`. Agregue la función `getGeoPlaces(map)` siguiente antes de la etiqueta `` en `index.html`.
```
/**
* Gets a GeoPlaces instance for Places operations.
*/
function getGeoPlaces(map) {
const authHelper = amazonLocationClient.withAPIKey(API_KEY, AWS_REGION); // Authenticate using the API key and AWS region
const locationClient = new amazonLocationClient.GeoPlacesClient(authHelper.getClientConfig()); // Create a GeoPlaces client
const geoPlaces = new GeoPlaces(locationClient, map); // Create GeoPlaces instance
return geoPlaces; // Return the GeoPlaces instance
}
```
#### Creación de una función para agregar un cuadro de búsqueda a la aplicación
Agregue las funciones `addSearchBox(map, geoPlaces)`, `renderPopup(feature)` y `createPopup(feature)` siguientes antes de la etiqueta `` en `index.html` para completar la configuración de la funcionalidad de búsqueda.
```
/**
* Adds search box to the map.
*/
function addSearchBox(map, geoPlaces) {
const searchBox = new MaplibreGeocoder(geoPlaces, {
maplibregl,
showResultsWhileTyping: true, // Show results while typing
debounceSearch: 300, // Debounce search requests
limit: 30, // Limit number of results
popuprender: renderPopup, // Function to render popup
reverseGeocode: true, // Enable reverse geocoding
zoom: 14, // Zoom level on result selection
placeholder: "Search text or nearby (lat,long)" // Placeholder text for search box.
});
// Add the search box to the map
map.addControl(searchBox, 'top-left');
// Event listener for when a search result is selected
searchBox.on('result', async (event) => {
const { id, result_type } = event.result; // Get result ID and type
if (result_type === "Place") { // Check if the result is a place
const placeResults = await geoPlaces.searchByPlaceId(id); // Fetch details for the selected place
if (placeResults.features.length) {
createPopup(placeResults.features[0]).addTo(map); // Create and add popup for the place
}
}
});
}
/**
* Renders the popup content for a given feature.
*/
function renderPopup(feature) {
return `
${feature.place_type}
${feature.place_name}
`;
}
/**
* Creates a popup for a given feature and sets its position.
*/
function createPopup(feature) {
return new maplibregl.Popup({ offset: 30 }) // Create a new popup
.setLngLat(feature.geometry.coordinates) // Set the popup position
.setHTML(renderPopup(feature)); // Set the popup content
}
```
#### Agregación de un cuadro de búsqueda a la aplicación
Cree un objeto de `GeoPlaces` llamando a `getGeoPlaces(map)` como se define en la sección 3.1 y, a continuación, llame a `addSearchBox(map, geoPlaces)` para agregar el cuadro de búsqueda a la aplicación.
```
// Step 2: Add maps to application
// Step 2.1 initialize the map
const map = initializeMap("Standard","Light");
// Step 2.2 Add navigation controls to the map
map.addControl(new maplibregl.NavigationControl());
// Step 3: Add places feature to application
// Step 3.1: Get GeoPlaces instance. It will be used for adding search box and map click functionality
const geoPlaces = getGeoPlaces(map);
// Step 3.2: Add search box to the map
addSearchBox(map, geoPlaces);
```
La búsqueda de lugares está lista para usarse. Abra `index.html` en un navegador para verlo en acción.
#### Agregue una función para mostrar una ventana emergente cuando el usuario haga clic en el mapa
Cree una función `addMapClick(map, geoPlaces)` para mostrar una ventana emergente cuando el usuario haga clic en el mapa. Agregue esta función justo antes de la etiqueta ``.
```
/**
* Sets up reverse geocoding on map click events.
*/
function addMapClick(map, geoPlaces) {
map.on('click', async ({ lngLat }) => { // Listen for click events on the map
const response = await geoPlaces.reverseGeocode({ query: [lngLat.lng, lngLat.lat], limit: 1, click: true }); // Perform reverse geocoding
if (response.features.length) { // If there are results
const clickMarker = new maplibregl.Marker({ color: "orange" }); // Create a marker
const feature = response.features[0]; // Get the clicked feature
const clickedPopup = createPopup(feature); // Create popup for the clicked feature
clickMarker.setLngLat(feature.geometry.coordinates) // Set marker position
.setPopup(clickedPopup) // Attach popup to marker
.addTo(map); // Add marker to the map
clickedPopup.on('close', () => clickMarker.remove()).addTo(map); // Remove marker when popup is closed
}
});
}
```
#### Función de llamada para agregar la característica de hacer clic en el mapa
Para habilitar la acción de hacer clic en el mapa, llame a `addMapClick(map, geoPlaces)` después de la línea que contiene `addSearchBox(map, geoPlaces)`.
```
// Step 3: Add places feature to application
// Step 3.1: Get GeoPlaces instance. It will be used for adding search box and map click functionality
const geoPlaces = getGeoPlaces(map);
// Step 3.2: Add search box to the map
addSearchBox(map, geoPlaces);
// Step 3.3: Setup map click functionality
addMapClick(map, geoPlaces);
```
#### Revisión de la aplicación de mapas y lugares
¡Enhorabuena\$1 La primera aplicación está lista para usar mapas y lugares. Abra `index.html` en un navegador. Asegúrese de que `style.css` y `utils.js` estén en la misma carpeta que `index.html`.
El HTML final debe tener un aspecto similar al siguiente:
```
Amazon Location Service - Getting Started with First Map App
```
### Explorar más
Ha completado el tutorial de inicio rápido y debería entender, más o menos, cómo se utiliza Amazon Location Service para crear aplicaciones. Para sacar más provecho de Amazon Location, puede consultar los siguientes recursos:
+ **Detalles de las sugerencias de consulta**: considere la posibilidad de ampliar la clase de `GeoPlaces` o utilizar un enfoque similar a `ReverseGeocode` para obtener más detalles sobre los resultados devueltos por la API de `Suggestion`.
+ **Elija la API adecuada para las necesidades de su empresa**: para determinar la mejor API de Amazon Location para sus necesidades, consulte este recurso: [Elección de la API correcta](choose-an-api.md).
+ **Consulte las guías de aprendizaje de Amazon Location**: consulte la [guía para desarrolladores de Amazon Location Service](https://docs.aws.amazon.com/location/) para ver tutoriales y más recursos.
+ **Documentación e información del producto**: para obtener la documentación completa, consulta la [Guía para desarrolladores de Amazon Location Service](https://docs.aws.amazon.com/location/). Para obtener más información sobre el producto, vaya a la página del [producto de Amazon Location Service](https://aws.amazon.com/location).