Amazon Location Service - Getting Started with First Map App

` em seu HTML para conter o mapa. Você pode estilizar `

` em seu CSS para definir dimensões conforme necessário para sua aplicação. Você deve baixar o arquivo CSS,`style.css`, do nosso GitHub repositório. Isso ajudará você a se concentrar na lógica de negócios. Salve os arquivos `style.css` e `index.html` na mesma pasta. Baixe o `style.css` arquivo em [GitHub](https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/style.css). ```

``` #### Adicionar detalhes da chave de API e AWS da região Adicione a chave de API que você criou [Usar chaves de API para se autenticar](using-apikeys.md) a esse arquivo, junto com a AWS região em que a chave foi criada. ``` ..... .....

``` ### Adicionar um mapa à aplicação Nesta seção, vamos adicionar recursos de mapa à aplicação. Antes de começar, seus arquivos devem estar nesta estrutura de pastas. Se ainda não tiver feito isso, baixe o `style.css` arquivo em [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] ``` #### Criar uma função para inicializar o mapa Para configurar seu mapa, crie a função `initializeMap(...)` depois da linha `//Add functions`. Escolha uma localização central inicial e um nível de zoom. Neste exemplo, definimos o centro do mapa como Vancouver, Canadá, com nível de zoom 10. Adicione controles de navegação para facilitar o 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 } ``` #### Inicializar o mapa Chame `initializeMap(...)` para inicializar o mapa. Você também pode inicializá-lo com seu estilo e esquema de cores preferidos após a função `initializeMap`. Para obter mais opções de estilo, consulte [AWS estilos e recursos do 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` em um navegador para ver o mapa em ação. #### Adicionar controle de navegação Como opção, você pode adicionar controles de navegação (zoom e rotação) ao mapa. Faça isso depois de chamar `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 ``` #### Revisar o código do mapa Parabéns\$1 Sua primeira aplicação está pronta para usar um mapa. Em um navegador, abra `index.html`. Verifique se `style.css` está na mesma pasta que `index.html`. O arquivo HTML final deve estar assim: ``` Amazon Location Service - Getting Started with First Map App

``` ### Adicionar locais à aplicação Nesta seção, vamos configurar recursos de locais à aplicação. Baixe o JavaScript arquivo em 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 começar, seus arquivos devem estar nesta estrutura de pastas: ``` |---FirstApp [Folder] |-------------- index.html [File] |-------------- style.css [File] |-------------- utils.js [File] ``` #### Criar função para criar GeoPlaces Para adicionar funcionalidades de pesquisa, inicialize a classe `GeoPlaces` usando `AuthHelper` e `AmazonLocationClient`. Adicione a função `getGeoPlaces(map)` a seguir antes da tag `` em `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 } ``` #### Criar função para adicionar a caixa de pesquisa à aplicação Adicione as funções `addSearchBox(map, geoPlaces)`, `renderPopup(feature)` e `createPopup(feature)` antes da tag `` em `index.html` para concluir a configuração da funcionalidade de pesquisa. ``` /** * 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 ` `; } /** * 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 } ``` #### Adicionar caixa de pesquisa à aplicação Crie um objeto `GeoPlaces` chamando `getGeoPlaces(map)`, conforme definido na Seção 3.1, depois chame `addSearchBox(map, geoPlaces)` para adicionar a caixa de pesquisa à aplicação. ``` // 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); ``` A pesquisa de local está pronta para ser usada. Abra `index.html` em um navegador para vê-la em ação. #### Adicionar função para mostrar pop-up quando o usuário clicar no mapa Crie uma função `addMapClick(map, geoPlaces)` para exibir um pop-up quando o usuário clicar no mapa. Adicione essa função logo antes da 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 } }); } ``` #### Chamar função para adicionar atributo de clique no mapa Para ativar a ação de clique no mapa, chame `addMapClick(map, geoPlaces)` depois da linha que contém `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); ``` #### Revisar a aplicação de Mapas e Locais Parabéns\$1 Sua primeira aplicação está pronta para usar Mapas e Locais. Em um navegador, abra `index.html`. Verifique se `style.css` e `utils.js` estão na mesma pasta com `index.html`. O arquivo HTML final deve estar assim: ``` Amazon Location Service - Getting Started with First Map App

``` ### Explorar mais Você concluiu o tutorial de início rápido e deve ter uma ideia de como o Amazon Location Service é usado para criar aplicativos. Para aproveitar melhor o Amazon Location, você pode conferir os seguintes recursos: + **Detalhes da sugestão de consulta**: estenda a classe `GeoPlaces` ou use uma abordagem semelhante a `ReverseGeocode` para obter mais detalhes sobre os resultados retornados pela API `Suggestion`. + **Escolha a API certa para as necessidades da sua empresa**: para determinar a melhor API do Amazon Location para suas necessidades, confira este recurso: [Escolher a API certa](choose-an-api.md). + **Consulte os guias de “instruções” do Amazon Location**: acesse o [Guia do desenvolvedor do Amazon Location Service](https://docs.aws.amazon.com/location/) para encontrar tutoriais e mais recursos. + **Documentação e informações sobre o produto**: para ver a documentação completa, acesse o [Guia do desenvolvedor do Amazon Location Service](https://docs.aws.amazon.com/location/). Para saber mais sobre o produto, acesse a página do [produto Amazon Location Service](https://aws.amazon.com/location).