Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.
# Créez votre première application Amazon Location Maps and Places
Dans cette section, vous allez créer votre première application avec Maps and Places.
**Prérequis :**
Si vous avez déjà créé une clé d'API au cours des [Utilisez la console Amazon Location Service pour vous authentifier](set-up-auth.md) étapes, commençons.
Si vous n'avez pas encore créé de clé d'API, [Utilisez la console Amazon Location Service pour vous authentifier](set-up-auth.md) suivez-la avant de continuer à créer l'application. Si vous avez des questions, consultez [Utiliser des clés d'API pour s'authentifier](using-apikeys.md) et [Régions prises en charge par Amazon Location](location-regions.md) pour plus d'informations.
## Web
Voici un step-by-step didacticiel pour créer une application cartographique Amazon Location Service avec MapLibre GL JS. Ce guide vous expliquera comment configurer la carte, ajouter des options de style et activer la fonctionnalité de recherche de lieux.
### Configuration de la page initiale
Dans cette section, nous allons configurer la structure initiale des pages et des dossiers.
#### Ajouter les bibliothèques et les feuilles de style requises
Créez un fichier `index.html`. Pour afficher la carte, vous avez besoin de MapLibre GL JS et de MapLibre GL Geocoder. Vous allez ajouter les feuilles de style MapLibre et les scripts et Geocoder. JavaScript
Copiez et collez le code suivant dans votre `index.html` fichier.
```
Amazon Location Service - Getting Started with First Map App
```
#### Création du conteneur de cartes
Sous l'``élément du fichier HTML, créez un `
` élément dans votre code HTML pour contenir la carte. Vous pouvez le styliser `
` dans votre CSS pour définir les dimensions selon les besoins de votre application. Vous devez télécharger le fichier CSS depuis notre GitHub dépôt. `style.css` Cela vous aidera à vous concentrer sur la logique métier.
Enregistrez les `index.html` fichiers `style.css` et dans le même dossier.
Téléchargez le `style.css` fichier depuis [GitHub](https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/style.css).
```
```
#### Ajouter une clé d'API et des détails sur AWS la région
Ajoutez la clé d'API que vous avez créée dans [Utiliser des clés d'API pour s'authentifier](using-apikeys.md) ce fichier, ainsi que la AWS région dans laquelle la clé a été créée.
```
.....
.....
```
### Ajoutez une carte à votre application
Dans cette section, nous allons ajouter des fonctionnalités cartographiques à l'application. Avant de commencer, vos fichiers doivent se trouver dans cette structure de dossiers.
Si ce n'est pas déjà fait, veuillez télécharger le `style.css` fichier depuis [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]
```
#### Création d'une fonction pour initialiser la carte
Pour configurer votre carte, créez la fonction suivante`initializeMap(...)`, après la ligne`//Add functions`.
Choisissez un emplacement central initial et un niveau de zoom. Dans cet exemple, nous avons placé le centre de la carte sur Vancouver, au Canada, avec un niveau de zoom de 10. Ajoutez des commandes de navigation pour zoomer facilement.
```
/**
* 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
}
```
#### Initialisation de la carte
Appelez `initializeMap(...)` pour initialiser la carte. Vous pouvez éventuellement l'initialiser avec votre style et votre palette de couleurs préférés après la `initializeMap` fonction. Pour plus d'options de style, voir[AWS styles et fonctionnalités de carte](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
```
Ouvrez `index.html` dans un navigateur pour voir la carte en action.
#### Ajouter un contrôle de navigation
Vous pouvez éventuellement ajouter des commandes de navigation (zoom et rotation) à la carte. Cela doit être fait après avoir appelé`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
```
#### Vérifiez le code de la carte
Félicitations \$1 Votre première application est prête à utiliser une carte. Ouvrez `index.html` dans un navigateur. Assurez-vous qu'`style.css`il se trouve dans le même dossier que`index.html`.
Votre code HTML final devrait ressembler à ceci :
```
Amazon Location Service - Getting Started with First Map App
```
### Ajoutez des lieux à votre application
Dans cette section, nous allons configurer les fonctionnalités d'ajout de places à l'application. Téléchargez le JavaScript fichier depuis 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).
Avant de commencer, vos fichiers doivent se trouver dans cette structure de dossiers :
```
|---FirstApp [Folder]
|-------------- index.html [File]
|-------------- style.css [File]
|-------------- utils.js [File]
```
#### Créer une fonction pour créer GeoPlaces
Pour ajouter une fonctionnalité de recherche, initialisez la `GeoPlaces` classe à l'aide de `AuthHelper` et`AmazonLocationClient`. Ajoutez la `getGeoPlaces(map)` fonction suivante avant le `` tag`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
}
```
#### Créer une fonction pour ajouter un champ de recherche à l'application
Ajoutez ce qui suit `addSearchBox(map, geoPlaces)` et `renderPopup(feature)` les `createPopup(feature)` fonctions avant le `` tag `index.html` pour terminer la configuration de la fonctionnalité de recherche.
```
/**
* 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
}
```
#### Ajouter un champ de recherche à l'application
Créez un `GeoPlaces` objet en appelant `getGeoPlaces(map)` comme défini dans la section 3.1, puis appelez `addSearchBox(map, geoPlaces)` pour ajouter le champ de recherche à l'application.
```
// 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);
```
Votre recherche de lieux est prête à être utilisée. `index.html`Ouvrez-le dans un navigateur pour le voir en action.
#### Ajouter une fonction pour afficher une fenêtre contextuelle lorsque l'utilisateur clique sur la carte
Créez une fonction `addMapClick(map, geoPlaces)` pour afficher une fenêtre contextuelle lorsque l'utilisateur clique sur la carte. Ajoutez cette fonction juste avant le `` tag.
```
/**
* 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
}
});
}
```
#### Fonction d'appel pour ajouter une fonction Map Click
Pour activer l'action de clic sur la carte, appelez `addMapClick(map, geoPlaces)` après la ligne contenant`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);
```
#### Consultez l'application Maps and Places
Félicitations \$1 Votre première application est prête à utiliser Maps and Places. Ouvrez `index.html` dans un navigateur. Assurez-vous que vous `style.css` `utils.js` êtes dans le même dossier que`index.html`.
Votre code HTML final devrait ressembler à ceci :
```
Amazon Location Service - Getting Started with First Map App
```
### En savoir plus
Vous avez terminé le didacticiel de démarrage rapide et vous devriez avoir une idée de la façon dont Amazon Location Service est utilisé pour créer des applications. Pour tirer le meilleur parti d'Amazon Location, vous pouvez consulter les ressources suivantes :
+ **Détails de la suggestion de requête** : envisagez d'étendre la `GeoPlaces` classe ou d'utiliser une approche similaire `ReverseGeocode` pour obtenir plus de détails sur les résultats renvoyés par l'`Suggestion`API.
+ **Choisissez l'API adaptée aux besoins de votre entreprise** - Pour déterminer l'API Amazon Location la mieux adaptée à vos besoins, consultez cette ressource :[Choisissez la bonne API](choose-an-api.md).
+ **Consultez les guides pratiques d'Amazon Location. Consultez le guide** du [développeur d'Amazon Location Service](https://docs.aws.amazon.com/location/) pour accéder à des didacticiels et à d'autres ressources.
+ **Documentation et informations sur le produit** - Pour obtenir une documentation complète, consultez le [guide du développeur Amazon Location Service](https://docs.aws.amazon.com/location/). Pour en savoir plus sur le produit, rendez-vous sur la page [produit d'Amazon Location Service](https://aws.amazon.com/location).