Display a map

``` ------ #### [ style.css ] ``` body { margin: 0; } #map { height: 100vh; } ``` ------ #### [ main.js ] ``` async function getStyleWithPreferredLanguage(preferredLanguage) { const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`; return fetch(styleUrl) .then(response => { if (!response.ok) { throw new Error('Network response was not ok ' + response.statusText); } return response.json(); }) .then(styleObject => { if (preferredLanguage !== "en") { styleObject = setPreferredLanguage(styleObject, preferredLanguage); } return styleObject; }) .catch(error => { console.error('Error fetching style:', error); }); } const setPreferredLanguage = (style, language) => { let nextStyle = { ...style }; nextStyle.layers = nextStyle.layers.map(l => { if (l.type !== 'symbol' || !l?.layout?.['text-field']) return l; return updateLayer(l, /^name:([A-Za-z\-\_]+)$/g, `name:${language}`); }); return nextStyle; }; const updateLayer = (layer, prevPropertyRegex, nextProperty) => { const nextLayer = { ...layer, layout: { ...layer.layout, 'text-field': recurseExpression( layer.layout['text-field'], prevPropertyRegex, nextProperty ) } }; return nextLayer; }; const recurseExpression = (exp, prevPropertyRegex, nextProperty) => { if (!Array.isArray(exp)) return exp; if (exp[0] !== 'coalesce') return exp.map(v => recurseExpression(v, prevPropertyRegex, nextProperty) ); const first = exp[1]; const second = exp[2]; let isMatch = Array.isArray(first) && first[0] === 'get' && !!first[1].match(prevPropertyRegex)?.[0]; isMatch = isMatch && Array.isArray(second) && second[0] === 'get'; isMatch = isMatch && !exp?.[4]; if (!isMatch) return exp.map(v => recurseExpression(v, prevPropertyRegex, nextProperty) ); return [ 'coalesce', ['get', nextProperty], ['get', 'name:en'], ['get', 'name'] ]; }; ``` ------ ## Defina o idioma preferido com base no idioma do navegador do usuário final Neste exemplo, você definirá o estilo de atualização para mostrar os rótulos do mapa no idioma do dispositivo do usuário. ### Defina o idioma preferido com base no exemplo de idioma do navegador ------ #### [ index.html ] ```

``` ------ #### [ style.css ] ``` body { margin: 0; } #map { height: 100vh; } ``` ------ #### [ main.js ] ``` async function getStyleWithPreferredLanguage(preferredLanguage) { const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`; return fetch(styleUrl) .then(response => { if (!response.ok) { throw new Error('Network response was not ok ' + response.statusText); } return response.json(); }) .then(styleObject => { if (preferredLanguage !== "en") { styleObject = setPreferredLanguage(styleObject, preferredLanguage); } return styleObject; }) .catch(error => { console.error('Error fetching style:', error); }); } const setPreferredLanguage = (style, language) => { let nextStyle = { ...style }; nextStyle.layers = nextStyle.layers.map(l => { if (l.type !== 'symbol' || !l?.layout?.['text-field']) return l; return updateLayer(l, /^name:([A-Za-z\-\_]+)$/g, `name:${language}`); }); return nextStyle; }; const updateLayer = (layer, prevPropertyRegex, nextProperty) => { const nextLayer = { ...layer, layout: { ...layer.layout, 'text-field': recurseExpression( layer.layout['text-field'], prevPropertyRegex, nextProperty ) } }; return nextLayer; }; const recurseExpression = (exp, prevPropertyRegex, nextProperty) => { if (!Array.isArray(exp)) return exp; if (exp[0] !== 'coalesce') return exp.map(v => recurseExpression(v, prevPropertyRegex, nextProperty) ); const first = exp[1]; const second = exp[2]; let isMatch = Array.isArray(first) && first[0] === 'get' && !!first[1].match(prevPropertyRegex)?.[0]; isMatch = isMatch && Array.isArray(second) && second[0] === 'get'; isMatch = isMatch && !exp?.[4]; if (!isMatch) return exp.map(v => recurseExpression(v, prevPropertyRegex, nextProperty) ); return [ 'coalesce', ['get', nextProperty], ['get', 'name:en'], ['get', 'name'] ]; }; ``` ------ # Como definir a visão política de um mapa O Amazon Location Service permite que você defina a visão política para garantir que sua inscrição esteja em conformidade com as leis locais. Você pode definir uma visão política e comparar mapas de diferentes perspectivas políticas. **nota** Para obter mais informações, consulte [Localização e internacionalização](maps-localization-internationalization.md). ## Defina a visão política e compare com a perspectiva internacional Neste exemplo, você criará e comparará mapas de duas visões políticas diferentes: uma perspectiva internacional e a visão da Turquia sobre Chipre. ### Exemplo de comparação de visões políticas ------ #### [ index.html ] ``` Display a map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } html, body { height: 100%; } #internationalView, #turkeyView { height: 100%; width: 100%; } .maps { display: flex; width: 100%; height: 100%; } ``` ------ # Como filtrar o POI no mapa O Amazon Location Service permite que você selecione as categorias de POI (point-of-interest) relevantes para seu caso de uso. Saiba mais sobre o estilo de mapa padrão, [POI completo](https://docs.aws.amazon.com/location/latest/developerguide/standard-map-style.html#rich-poi) ## Filtrar o POI Neste exemplo, você exibe um mapa interativo que permite aos usuários filtrar por categorias de POI. ------ #### [ Index.html ] ``` POI demo

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } html, body, #map { height: 100%; } #buttons { display: flex; flex-direction: column; justify-content: space-between; position: absolute; top: 0; min-width: 100px; max-height: calc(100% - 2rem); overflow: auto; padding: 1rem; background-color: white; margin: 0; } .button { display: inline-block; cursor: pointer; padding: 8px; border-radius: 3px; margin-top: 10px; font-size: 12px; text-align: center; color: #fff; background: #8a8a8a; font-family: sans-serif; font-weight: bold; } .button:first-child { margin-top: 0; } .active { background: #ee8a65; } ``` ------ # Como criar mapas topográficos O Amazon Location Service permite que você crie mapas topográficos usando recursos de densidade de terreno e contorno para visualizar mudanças de elevação e características geográficas. ## Mostrar Hillshade O recurso Terrain permite que você visualize Hillshade, mudanças de elevação e características geográficas relacionadas. ### Exemplo de Hillshade ------ #### [ index.html ] ``` Terrain Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } html, body, #map { height: 100%; } ``` ------ ## Mostrar elevação com linhas de densidade de contorno O Amazon Location Service permite que você adicione recursos de densidade de contorno ao seu mapa. Isso fornece a visualização da inclinação geográfica e das mudanças de elevação. ### Exemplo de densidade de contorno ------ #### [ index.html ] ``` Contour Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } html, body, #map { height: 100%; } ``` ------ ## Mostrar as linhas Hillshade e Contour Density Com o Amazon Location Service, você pode combinar os recursos Hillshade e Contour Density em seu mapa para uma visualização abrangente do terreno. Isso proporciona uma percepção aprimorada da profundidade e uma compreensão completa das variações topográficas e das características do terreno. ### Exemplo de Hillshade com densidade de contorno ------ #### [ index.html ] ``` Hillshade and Contour Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } html, body, #map { height: 100%; } ``` ------ # Como mostrar o tráfego em tempo real em um mapa Usando o Amazon Location Service, você pode adicionar recursos de tráfego ao seu mapa. Isso fornece dados de tráfego em tempo real para mostrar as condições atuais do tráfego, como congestionamento rodoviário atual, construção e incidentes, ajudando você a fazer escolhas de rota. ## Faça um mapa com tráfego em tempo real Este exemplo mostra como criar um mapa com dados de tráfego em tempo real. ### Exemplo de tráfego em tempo real ------ #### [ index.html ] ``` Traffic Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # Como criar um mapa logístico O TravelModes recurso permite criar mapas logísticos usando o Amazon Location Service. TravelModes exibe informações de roteamento relevantes para navegação de caminhões com restrições rodoviárias relacionadas. Use o [Transit TravelMode](https://docs.aws.amazon.com/location/latest/developerguide/how-to-show-transit-details-map.html) para mostrar detalhes do transporte público. ## Crie um mapa com Truck TravelMode Este exemplo mostra como criar um mapa com `Truck` `TravelMode` roteamento logístico. ### Exemplo de caminhão ------ #### [ index.html ] ``` Truck Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # Como mostrar detalhes do transporte público em um mapa O Amazon Location Service permite que você adicione recursos de transporte público aos mapas. `Transit``TravelMode`Exibe informações de roteamento para transporte público, como linhas de trem codificadas por cores. Veja também como configurar a [logística TravelMode](https://docs.aws.amazon.com/location/latest/developerguide/how-to-create-logistic-map.html) para opções adicionais. ## Crie um mapa com detalhes do trânsito Este exemplo mostra como criar um mapa com detalhes do transporte público com o Transit TravelMode for public transport. ### Exemplo de trânsito ------ #### [ index.html ] ``` Transit Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # Como criar um mapa 3D O Amazon Location Service permite adicionar recursos tridimensionais aos mapas, como `Terrain3D` exibir dados de elevação como uma superfície tridimensional ou `Buildings3D` exibir estruturas urbanas com altura e volume. ## Crie um mapa com detalhes tridimensionais do terreno Este exemplo mostra como criar um mapa com `Terrain3D` parâmetros. ### Exemplo de Terrain3D ------ #### [ index.html ] ``` 3D Terrain

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ ## Crie um mapa com detalhes tridimensionais de edifícios Este exemplo mostra como criar um mapa com `Buildings3D` parâmetros. ### Exemplo de edifícios 3D ------ #### [ index.html ] ``` 3D Buildings

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ ## Ativar/desativar a visualização do globo Este exemplo mostra como ativar ou desativar a projeção da vista do globo. Por padrão, a visualização do globo está ativada. ### Exemplo de visualização do globo ------ #### [ index.html ] ``` Globe View

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # Como usar mapas estáticos Estes tópicos de instruções oferecem orientação passo a passo para personalizar mapas estáticos com sobreposições e elementos visuais, utilizando os recursos de mapeamento do Amazon Location Service. Cada guia orienta você pelas principais tarefas, como ajustar as dimensões do mapa, escolher entre zoom ou raio e adicionar vários elementos geoespaciais, como marcadores, polígonos, linhas e círculos de proximidade. Esses guias usam formatos compactos e GeoJSON para garantir flexibilidade no estilo e na configuração. Se você está otimizando mapas para aplicativos voltados para o cliente ou realizando análises geoespaciais, esses tópicos fornecem instruções claras sobre como personalizar seus mapas estáticos para atender a requisitos específicos. Seguindo os exemplos detalhados, você aprenderá como aprimorar as apresentações de mapas e gerenciar com eficiência os dados geográficos para uma variedade de necessidades comerciais. **Topics** + [Como obter um mapa estático de uma posição específica](get-static-map-specific-position.md) + [Como obter um mapa estático de uma dimensão específica](get-static-map-specific-dimension.md) + [Como decidir entre raio e zoom para um mapa estático](choose-radius-vs-zoom.md) + [Como adicionar escala para um mapa estático](add-scale-static-map.md) + [Como adicionar um marcador a um mapa estático](add-marker-static-map.md) + [Como adicionar uma linha a um mapa estático](how-to-add-line-static.md) + [Como adicionar uma rota a um mapa estático](how-to-add-route.md) + [Como adicionar um polígono a um mapa estático](how-to-add-polygon-static.md) + [Como definir o idioma para mapas estáticos](set-language-static-map.md) + [Como adicionar um círculo de proximidade a um mapa estático](how-to-add-proximity-circle.md) # Como obter um mapa estático de uma posição específica Neste tópico, você aprenderá a recuperar mapas estáticos do Amazon Location Service com base em parâmetros específicos. Você aprenderá a gerar um mapa estático para uma posição central, uma caixa delimitadora e um conjunto de posições limitadas. Os exemplos fornecidos ajudarão você a personalizar a largura, a altura e o estilo do mapa. **nota** Você deve passar `map` ou `map@2x` ao gerar um mapa estático. ## Obter imagem do mapa para uma posição central Neste exemplo, você criará uma imagem de mapa com largura `1024` e altura `1024` com as coordenadas centrais definidas em `-123.1143,49.2763`, em que `longitude=-123.1143` e `latitude=49.2763`, e um nível de zoom de `15`. ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&zoom=15¢er=-123.1156126,49.2767046&key=API_KEY ``` ------ #### [ Response image ] ![\[Aerial view of a coastal city with dense urban layout, harbor, and large stadium visible.\]](http://docs.aws.amazon.com/pt_br/location/latest/developerguide/images/static-center.png) ------ ## Obter imagem do mapa para a caixa delimitadora Neste exemplo, você gerará uma imagem de mapa do Sudeste Asiático definindo a caixa delimitadora da área. O formato de `bbox` é `{southwest_longitude},{southwest_latitude},{northeast_longitude},{northeast_latitude}`. ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&bounding-box=90.00,-21.94,146.25,31.95&key=API_KEY ``` ------ #### [ Response image ] ![\[Satellite view of Southeast Asia, showing mainland, islands, and surrounding waters.\]](http://docs.aws.amazon.com/pt_br/location/latest/developerguide/images/static-bounding-box.png) ------ ## Obter imagem do mapa para posições limitadas Neste exemplo, você gerará um mapa que abrange vários lugares imperdíveis em Paris, cada um especificado por suas coordenadas (longitude, latitude). As posições delimitadas incluem: Torre Eiffel, Museu do Louvre, Catedral de Notre-Dame, Champs-Élysées, Arco do Triunfo, Basílica do Sagrado Coração, Jardins de Luxemburgo, Musée d'Orsay, Place de la Concorde e Palais Garnier. O formato para posições delimitadoras é `{longitude1},{latitude1},{longitude2},{latitude2} ... {longitudeN},{latitudeN}`. ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&bounded-positions=2.2945,48.8584,2.3376,48.8606,2.3500,48.8529,2.3076,48.8698,2.2950,48.8738,2.3431,48.8867,2.3372,48.8462,2.3266,48.8600,2.3212,48.8656,2.3317,48.8719&key=API_KEY ``` ------ #### [ Response image ] ![\[Aerial view of Paris showing dense urban layout, Seine River, and iconic landmarks.\]](http://docs.aws.amazon.com/pt_br/location/latest/developerguide/images/static-bounding-position.png) ------ # Como obter um mapa estático de uma dimensão específica Neste tópico, você aprenderá a definir as dimensões (altura e largura) para mapas estáticos usando o Amazon Location Service. A personalização das dimensões de uma imagem de mapa permite equilibrar desempenho, qualidade visual e usabilidade. Os valores máximos para `width` e `height` são 1400 pixels, enquanto os valores mínimos são 64 pixels. O tamanho máximo do resultado é 6 MB. Além disso, você pode usar os parâmetros `bbox` e `bounds` com `padding` para garantir que os atributos importantes do mapa próximos às bordas estejam totalmente visíveis e não sejam cortados. ## Obter imagem do mapa com altura e largura específicas Neste exemplo, você criará uma imagem de mapa de baixa e média resoluções de Helsinque, Finlândia. ------ #### [ Request URL for low-resolution thumbnail ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=200&height=200&zoom=11.5¢er=24.9460,60.1690&key=API_KEY ``` ------ #### [ Response (Thumbnail 200x200) ] ![\[Aerial view of a coastal city with intricate waterways, islands, and urban development.\]](http://docs.aws.amazon.com/pt_br/location/latest/developerguide/images/static-specific-dimension-low.png) ------ #### [ Request URL for mid-resolution image ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=700&height=700&zoom=13¢er=24.9460,60.1690&key=API_KEY ``` ------ #### [ Response image (700x700) ] ![\[Aerial view of a coastal city with dense urban development, harbors, and surrounding waters.\]](http://docs.aws.amazon.com/pt_br/location/latest/developerguide/images/static-specific-dimension-mid.png) ------ ## Obter imagem do mapa com preenchimento em todos os lados Neste exemplo, você gerará um mapa usando vários lugares imperdíveis em Helsinque, Finlândia, com suas coordenadas (longitude, latitude), com e sem preenchimento. ------ #### [ Request URL with padding ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=150&bounded-positions=24.9526,60.1692,24.9850,60.1465,24.9270,60.1725,24.9226,60.1826,24.9509,60.1675,24.9566,60.1685,24.9457,60.1674,24.9397,60.1719,24.9414,60.1715,24.9387,60.1720&key=API_KEY ``` ------ #### [ Response image (with padding) ] ![\[Aerial view of a coastal city with dense urban areas, harbors, and surrounding islands.\]](http://docs.aws.amazon.com/pt_br/location/latest/developerguide/images/static-specific-dimension-padding.png) ------ #### [ Request URL without padding ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&bounded-positions=24.9526,60.1692,24.9850,60.1465,24.9270,60.1725,24.9226,60.1826,24.9509,60.1675,24.9566,60.1685,24.9457,60.1674,24.9397,60.1719,24.9414,60.1715,24.9387,60.1720&key=API_KEY ``` ------ #### [ Response image (without padding) ] ![\[Aerial view of a coastal city with dense urban areas, harbors, and small islands.\]](http://docs.aws.amazon.com/pt_br/location/latest/developerguide/images/static-specific-dimension-no-padding.png) ------ # Como decidir entre raio e zoom para um mapa estático Neste tópico, você aprenderá a escolher entre usar `radius` ou `zoom` ao gerar mapas estáticos com o Amazon Location Service. O parâmetro `radius` fornece um controle mais preciso sobre a área de cobertura, tornando-o ideal para aplicações voltadas para o cliente em que você conhece a área de cobertura exata. O parâmetro `zoom` é mais adequado para análise geoespacial quando você deseja ajustar o nível de detalhe exibido. ## Com raio Neste exemplo, você criará uma imagem de mapa do Sri Lanka usando o parâmetro `radius` com uma localização central. ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=700&height=700¢er=80.60596,7.76671&radius=235000&scale-unit=KilometersMiles&key=API_KEY ``` ------ #### [ Response image ] ![\[Satellite view of Sri Lanka, showing the teardrop-shaped island nation surrounded by ocean.\]](http://docs.aws.amazon.com/pt_br/location/latest/developerguide/images/static-radius.png) ------ ## Com zoom Neste exemplo, você criará uma imagem de mapa do Sri Lanka usando o parâmetro `zoom` com uma localização central. ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=700&height=700&zoom=8¢er=80.60596,7.76671&scale-unit=KilometersMiles&key=API_KEY ``` ------ #### [ Response image ] ![\[Satellite view of Sri Lanka, showing the teardrop-shaped island nation surrounded by ocean.\]](http://docs.aws.amazon.com/pt_br/location/latest/developerguide/images/static-zoom.png) ------ # Como adicionar escala para um mapa estático Neste tópico, você aprenderá a exibir uma escala no canto inferior direito de um mapa estático gerado com o Amazon Location Service. A escala pode mostrar uma única unidade, como `Miles` ou `Kilometers`, ou as duas unidades, como `KilometersMiles` ou `MilesKilometers`, em que uma unidade é exibida na parte superior e a outra, na parte inferior. ## Adicionar escala com uma única unidade Neste exemplo, você exibirá um mapa de Helsinque, Finlândia, com a escala definida em `Kilometers` no canto inferior direito. ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&zoom=13.5¢er=24.9189564,60.1645772&scale-unit=Kilometers&key=API_KEY ``` ------ #### [ Response image ] ![\[Aerial view of a coastal city with dense urban areas, waterways, and islands.\]](http://docs.aws.amazon.com/pt_br/location/latest/developerguide/images/static-scale-single.png) ------ ## Adicionar escala com as duas unidades Neste exemplo, você exibirá um mapa de Helsinque, Finlândia, tanto em `Kilometers` como em `Miles`, que aparecem no canto inferior direito da escala, com uma unidade exibida acima da outra. ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&zoom=14¢er=24.9189564,60.1645772&scale-unit=KilometersMiles&key=API_KEY ``` ------ #### [ Response image ] ![\[Aerial view of a coastal city with dense urban areas, harbors, and islands surrounded by water.\]](http://docs.aws.amazon.com/pt_br/location/latest/developerguide/images/static-scale-both.png) ------ # Como adicionar um marcador a um mapa estático Neste tópico, você aprenderá a adicionar marcadores aos mapas estáticos gerados com o Amazon Location Service. Você pode personalizar o ícone, o rótulo, o tamanho, a cor e outras opções de estilo do marcador. Isso permite que você destaque locais específicos com dicas visuais que se alinham com a finalidade do seu mapa. ## Estilos de marcador | Name | Tipo | Padrão | Descrição | | --- | --- | --- | --- | | `style` | String | `marker` | O estilo da geometria de pontos. Para criar um marcador, defina o valor como `marker` ou não inclua o atributo `style` no objeto de propriedades do GeoJSON. | | `icon` | String | `pin` | O tipo de ícone do marcador. Os valores disponíveis incluem: `cp` (círculo de proximidade), `diamond`, `pin`, `poi`, `square`, `triangle`, `bubble`. | | `label` | String | `` | O texto a ser exibido nas coordenadas. Para definir rótulos automáticos, use os seguintes valores: `$alpha` (alfabeto latino) ou `$num` (algarismos arábicos). | | `color` | Cor | Dependente do estilo | A cor do ícone. | | `outline-color` | Cor | Dependente do estilo | A cor de contorno do ícone. | | `text-color` | Cor | Dependente do estilo | A cor do texto do rótulo. | | `text-outline-color` | Cor | Dependente do estilo | A cor de contorno do texto. | | `outline-width` | Inteiro | `0` (desativado) | A largura do contorno do texto. | | `size` | String | `medium` | O tamanho do rótulo e do ícone. Valores disponíveis: `small`, `medium`, `large`. | ## Adicionar um marcador a uma imagem do mapa Neste exemplo, você colocará um marcador com rótulo na imagem do mapa de BC Place, Vancouver. `Geo JSON`: ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -123.11210, 49.2767875 ] }, "properties": { "color":"#EE4B2B", "size":"large", "label":"BC Place, Vancouver", "text-color":"#0000FF" } } ] } ``` `Compact`: ``` point: -123.11210,49.27678; label=BC Place, Vancouver; size=large; text-color=#0000FF; color=#EE4B2B ``` ------ #### [ Request URL ] Com a sobreposição GeoJSON ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&zoom=15&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22properties%22%3A%7B%22color%22%3A%22%23EE4B2B%22,%22size%22%3A%22large%22,%22label%22%3A%22BC%20Place,%20Vancouver%22,%22text-color%22%3A%22%230000FF%22%7D,%22geometry%22%3A%7B%22coordinates%22%3A%5B-123.11210974152168,49.27678753813112%5D,%22type%22%3A%22Point%22%7D%7D%5D%7D&key=API_KEY ``` ------ #### [ Response image ] ![\[Aerial view of Vancouver's downtown and harbor, with BC Place stadium marked.\]](http://docs.aws.amazon.com/pt_br/location/latest/developerguide/images/static-add-marker.png) ------ ## Adicionar vários marcadores a uma imagem do mapa Neste exemplo, você adicionará marcadores para lugares imperdíveis em Helsinque, Finlândia, usando suas coordenadas (longitude, latitude). Você também pode aplicar preenchimento para garantir que o mapa acomode todos os marcadores adequadamente. **nota** O tipo de ícone de marcador disponível inclui: `cp` para círculo de proximidade, `diamond, pin, poi, square, triangle, bubble`. `Geo JSON`: ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "MultiPoint", "coordinates": [ [24.9526, 60.1692], [24.9270, 60.1725], [24.9226, 60.1826], [24.9509, 60.1675], [24.9566, 60.1685], [24.9457, 60.1674], [24.9397, 60.1719], [24.9414, 60.1715], [24.9387, 60.1720] ] }, "properties": { "icon":"diamond", "label":"$num", "size":"large", "text-color":"%23972E2B", "text-outline-color":"%23FFF", "text-outline-width":2 } } ] } ``` ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=150&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22MultiPoint%22,%22coordinates%22%3A%5B%5B24.9526,60.1692%5D,%5B24.927,60.1725%5D,%5B24.9226,60.1826%5D,%5B24.9509,60.1675%5D,%5B24.9566,60.1685%5D,%5B24.9457,60.1674%5D,%5B24.9397,60.1719%5D,%5B24.9414,60.1715%5D,%5B24.9387,60.172%5D%5D%7D,%22properties%22%3A%7B%22icon%22%3A%22diamond%22,%22label%22%3A%22%24num%22,%22size%22%3A%22large%22,%22text-color%22%3A%22%23972E2B%22,%22text-outline-color%22%3A%22%23FFF%22,%22text-outline-width%22%3A2%7D%7D%5D%7D&key=API_KEY ``` ------ #### [ Response image ] ![\[Aerial view of a city with lakes, buildings, roads, and numbered markers indicating points of interest.\]](http://docs.aws.amazon.com/pt_br/location/latest/developerguide/images/static-add-multi-markers.png) ------ ## Alterar a cor do marcador em uma imagem do mapa Neste exemplo, você usará marcadores de bolhas de cores diferentes para representar cidades em todo o mundo. Você pode personalizar a cor, o rótulo e outras propriedades do marcador de acordo com o contexto do mapa. `Geo JSON`: ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [85.1376, 25.5941] }, "properties": { "label": "Patna", "icon": "bubble", "color": "#FF5722", "outline-color": "#D74D3D", "text-color": "#FFFFFF" } }, .....redacted..... { "type": "Feature", "geometry": { "type": "Point", "coordinates": [2.3522, 48.8566] }, "properties": { "label": "Paris, France", "icon": "bubble", "color": "#FF9800", "outline-color": "#D76B0B", "text-color": "#FFFFFF" } } ] } ``` ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1400&height=1024&padding=150&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B85.1376,25.5941%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Patna%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%23FF5722%22,%22outline-color%22%3A%22%23D74D3D%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B105.8542,21.0285%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Hanoi,%20Vietnam%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%232196F3%22,%22outline-color%22%3A%22%231A78C2%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B116.4074,39.9042%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Beijing,%20China%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%23FF9800%22,%22outline-color%22%3A%22%23D76B0B%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B106.9101,47.918%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Ulaanbaatar,%20Mongolia%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%239C27B0%22,%22outline-color%22%3A%22%237B1FA2%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B151.2093,-33.8688%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Sydney,%20Australia%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%234CAF50%22,%22outline-color%22%3A%22%23388E3C%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B174.7633,-41.2865%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Wellington,%20New%20Zealand%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%23FFC107%22,%22outline-color%22%3A%22%23FFA000%22,%22text-color%22%3A%22%23000000%22%7D%7D%5D%7D&key=API_KEY ``` ------ #### [ Response image ] ![\[World map showing locations of major cities across continents with colored labels.\]](http://docs.aws.amazon.com/pt_br/location/latest/developerguide/images/static-change-marker-color.png) ------ # Como adicionar uma linha a um mapa estático Neste tópico, você aprenderá a adicionar uma linha a um mapa estático usando o Amazon Location Service. Vamos abordar as opções de estilo aceitas, como definir uma linha usando GeoJSON e aplicar estilos personalizados, como cor, largura e contorno. Também vamos explorar como usar diferentes unidades de medida para propriedades como a largura da linha. ## Estilos permitidos | Name | Tipo | Padrão | Descrição | | --- | --- | --- | --- | | `color` | Cor | dependente do estilo | A cor da linha. | | `width` | Inteiro/string | 2 | A largura da linha. Para obter mais informações, consulte [Como adicionar uma linha a um mapa estático](#how-to-add-line-static). | | `outline-color` | Cor | dependente do estilo | A cor de contorno da linha. | | `outline-width` | Inteiro/string | 0 (desativado) | A largura do contorno. Para obter mais informações, consulte [Como adicionar uma linha a um mapa estático](#how-to-add-line-static). | ## Unidade permitida | Unidade | Descrição | | --- | --- | | Inteiro, por exemplo, `5` | Pixels | | String sem unidade, por exemplo, `"5"` | Pixels | | `"px"` | Pixels | | `"m"` | Metros | | `"km"` | Quilômetros | | `"mi"` | Milhas | | `"ft"` | Pés | | `"yd"` | Jardas | | `"%"` | A porcentagem do valor padrão de uma propriedade específica, em pixels. Por exemplo, se o valor padrão para `width` for `2` pixels, então `200%` será `4` pixels. `%` é um caractere sensível, que deve ser codificado na URL da solicitação como `%25`. | ## Adicionar uma linha Neste exemplo, você adicionará uma linha de um lugar em Vancouver até o Stanley Park. A linha é criada usando um formato GeoJSON com coordenadas definidas. ------ #### [ Request ] ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "LineString", "coordinates": [ [-123.11813, 49.28246], [-123.11967, 49.28347], [-123.12108, 49.28439], [-123.12216, 49.28507], [-123.12688, 49.28812], [-123.1292, 49.28964], [-123.13216, 49.2916], [-123.13424, 49.29291], [-123.13649, 49.2944], [-123.13678, 49.29477], [-123.13649, 49.29569], [-123.13657, 49.29649], [-123.13701, 49.29715], [-123.13584, 49.29847], [-123.13579, 49.29935], [-123.13576, 49.30018], [-123.13574, 49.30097] ] }, "properties": { "name": "To Stanley Park", "description": "An evening walk to Stanley Park." } } ] } ``` ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=200&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22LineString%22,%22coordinates%22%3A%5B%5B-123.11813,49.28246%5D,%5B-123.11967,49.28347%5D,%5B-123.12108,49.28439%5D,%5B-123.12216,49.28507%5D,%5B-123.12688,49.28812%5D,%5B-123.1292,49.28964%5D,%5B-123.13216,49.2916%5D,%5B-123.13424,49.29291%5D,%5B-123.13649,49.2944%5D,%5B-123.13678,49.29477%5D,%5B-123.13649,49.29569%5D,%5B-123.13657,49.29649%5D,%5B-123.13701,49.29715%5D,%5B-123.13584,49.29847%5D,%5B-123.13579,49.29935%5D,%5B-123.13576,49.30018%5D,%5B-123.13574,49.30097%5D%5D%7D,%22properties%22%3A%7B%22name%22%3A%22To%20Stanley%20Park%22,%22description%22%3A%22An%20evening%20walk%20to%20Stanley%20Park.%22%7D%7D%5D%7D&key=API_KEY ``` ------ #### [ Response image ] ![\[Aerial view of coastal city with dense urban area, marina, and surrounding forests.\]](http://docs.aws.amazon.com/pt_br/location/latest/developerguide/images/static-add-line.png) ------ ## Adicionar estilo à linha Neste exemplo, você vai inserir estilo na linha adicionada do exemplo anterior. Isso inclui definir a cor, a largura, a cor do contorno e a largura do contorno da linha para personalizar a aparência visual da linha no mapa. ------ #### [ Request ] ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "LineString", "coordinates": [ [-123.11813, 49.28246], [-123.11967, 49.28347], [-123.12108, 49.28439], [-123.12216, 49.28507], [-123.12688, 49.28812], [-123.1292, 49.28964], [-123.13216, 49.2916], [-123.13424, 49.29291], [-123.13649, 49.2944], [-123.13678, 49.29477], [-123.13649, 49.29569], [-123.13657, 49.29649], [-123.13701, 49.29715], [-123.13584, 49.29847], [-123.13579, 49.29935], [-123.13576, 49.30018], [-123.13574, 49.30097] ] }, "properties": { "color": "#6d34b3", "width": "9m", "outline-color": "#a8b9cc", "outline-width": "2px" } } ] } ``` ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=200&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%22LineString%22,%22coordinates%22%3A%5B%5B-123.11813,49.28246%5D,%5B-123.11967,49.28347%5D,%5B-123.12108,49.28439%5D,%5B-123.12216,49.28507%5D,%5B-123.12688,49.28812%5D,%5B-123.1292,49.28964%5D,%5B-123.13216,49.2916%5D,%5B-123.13424,49.29291%5D,%5B-123.13649,49.2944%5D,%5B-123.13678,49.29477%5D,%5B-123.13649,49.29569%5D,%5B-123.13657,49.29649%5D,%5B-123.13701,49.29715%5D,%5B-123.13584,49.29847%5D,%5B-123.13579,49.29935%5D,%5B-123.13576,49.30018%5D,%5B-123.13574,49.30097%5D%5D%7D,%22properties%22%3A%7B%22color%22%3A%22%236d34b3%22,%22width%22%3A%229m%22,%22outline-color%22%3A%22%23a8b9cc%22,%22outline-width%22%3A%222px%22%7D%7D%5D%7D&key=API_KEY ``` ------ #### [ Response image ] ![\[Aerial view of coastal city with dense urban area, marina, and surrounding forests.\]](http://docs.aws.amazon.com/pt_br/location/latest/developerguide/images/static-add-line-styling.png) ------ # Como adicionar uma rota a um mapa estático Neste tópico, você aprenderá a adicionar uma rota a um mapa estático usando o Amazon Location Service. Você seguirá as etapas para obter uma rota usando a API CalculateRoutes e, em seguida, visualizá-la em um mapa estático usando GeoJSON e um estilo personalizado para pontos e linhas. ## Etapas para adicionar uma rota 1. Obtenha rotas da API `CalculateRoutes`. Remova as coordenadas que estão na mesma linha reta para otimizar o LineString, impedindo que a string de consulta chegue ao limite. 1. Crie um objeto GeoJSON com base no conjunto otimizado de coordenadas. 1. Use o primeiro e o último pontos de LineString e adicione geometrias de pontos para marcar os locais de início e término. 1. Aplique estilo nos pontos e em LineString de acordo com suas necessidades, ajustando propriedades como cor, tamanho e rótulos. ## Adicionar uma rota usando um estilo compacto Neste exemplo, você adicionará uma rota com pontos de início e término à linha criada em [Como adicionar uma linha a um mapa estático](how-to-add-line-static.md). A rota será definida com um estilo personalizado, incluindo cor, tamanho e rótulos para os pontos de início e término. ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "LineString", "coordinates": [ [-123.11813, 49.28246], [-123.11967, 49.28347], [-123.12108, 49.28439], [-123.12216, 49.28507], [-123.12688, 49.28812], [-123.1292, 49.28964], [-123.13216, 49.2916], [-123.13424, 49.29291], [-123.13649, 49.2944], [-123.13678, 49.29477], [-123.13649, 49.29569], [-123.13657, 49.29649], [-123.13701, 49.29715], [-123.13584, 49.29847], [-123.13579, 49.29935], [-123.13576, 49.30018], [-123.13574, 49.30097] ] }, "properties": { "color": "#000000", "width": "20m", "outline-color": "#a8b9cc", "outline-width": "2px" } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [-123.11813, 49.28246] }, "properties": { "label": "Pacific Centre", "icon": "bubble", "size": "large", "color": "#34B3A4", "outline-color": "#006400", "text-color": "#FFFFFF" } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [-123.13574, 49.30097] }, "properties": { "label": "Stanley Park", "icon": "bubble", "size": "large", "color": "#B3346D", "outline-color": "#FF0000", "text-color": "#FFFFFF" } } ] } ``` ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=200&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22LineString%22,%22coordinates%22%3A%5B%5B-123.11813,49.28246%5D,%5B-123.11967,49.28347%5D,%5B-123.12108,49.28439%5D,%5B-123.12216,49.28507%5D,%5B-123.12688,49.28812%5D,%5B-123.1292,49.28964%5D,%5B-123.13216,49.2916%5D,%5B-123.13424,49.29291%5D,%5B-123.13649,49.2944%5D,%5B-123.13678,49.29477%5D,%5B-123.13649,49.29569%5D,%5B-123.13657,49.29649%5D,%5B-123.13701,49.29715%5D,%5B-123.13584,49.29847%5D,%5B-123.13579,49.29935%5D,%5B-123.13576,49.30018%5D,%5B-123.13574,49.30097%5D%5D%7D,%22properties%22%3A%7B%22color%22%3A%22%23000000%22,%22width%22%3A%2220m%22,%22outline-color%22%3A%22%23a8b9cc%22,%22outline-width%22%3A%222px%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%22Point%22,%22coordinates%22%3A%5B-123.11813,49.28246%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Pacific%20Centre%22,%22icon%22%3A%22bubble%22,%22size%22%3A%22large%22,%22color%22%3A%22%2334B3A4%22,%22outline-color%22%3A%22%23006400%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%22Point%22,%22coordinates%22%3A%5B-123.13574,49.30097%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Stanley%20park%22,%22icon%22%3A%22bubble%22,%22size%22%3A%22large%22,%22color%22%3A%22%23B3346D%22,%22outline-color%22%3A%22%23FF0000%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D%5D%7D&key=API_KEY ``` ------ #### [ Response image ] ![\[Aerial view of Vancouver with Stanley Park and Pacific Centre marked, showing urban layout and coastline.\]](http://docs.aws.amazon.com/pt_br/location/latest/developerguide/images/static-add-route-compact.png) ------ # Como adicionar um polígono a um mapa estático Edifícios e locais podem ser destacados em um mapa com a designação de um polígono ao redor deles, por exemplo, o Pentágono (localizado em Washington, D.C.). ## Adicionar um único polígono Neste exemplo, você adiciona um polígono (um pentágono) para o prédio do Pentágono no mapa. ------ #### [ Geo JSON ] ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "coordinates": [ [ [ -77.0579282196337, 38.87264268371487 ], [ -77.05868880963534, 38.87003145971428 ], [ -77.05560979468949, 38.86876862025221 ], [ -77.05305311263672, 38.87059509268525 ], [ -77.0546384387842, 38.872985132206225 ], [ -77.0579282196337, 38.87264268371487 ] ] ], "type": "Polygon" } } ] } ``` ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=600&height=1024&padding=200&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22coordinates%22%3A%5B%5B%5B-77.0579282196337,38.87264268371487%5D,%5B-77.05868880963534,38.87003145971428%5D,%5B-77.05560979468949,38.86876862025221%5D,%5B-77.05305311263672,38.87059509268525%5D,%5B-77.0546384387842,38.872985132206225%5D,%5B-77.0579282196337,38.87264268371487%5D%5D%5D,%22type%22%3A%22Polygon%22%7D%7D%5D%7D&key=your_API_Key ``` ------ #### [ Response image ] ![\[Exemplo de mapa mostrando um polígono ao redor do Pentágono.\]](http://docs.aws.amazon.com/pt_br/location/latest/developerguide/images/mapsV2/addPolygonStaticMap.png) ------ ## Adicionar um polígono como estilo Neste exemplo, vamos refazer o estilo do polígono mostrado no exemplo anterior. Desenhamos o polígono com outra cor (**\$1E3F70550**). Os componentes de cores são os seguintes. + **E3** representa o componente vermelho. + **F7** representa o componente verde. + **05** representa o componente azul. + **50** representa o componente alfa (opacidade). ------ #### [ Geo JSON ] ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "coordinates": [ [ [ -77.0579282196337, 38.87264268371487 ], [ -77.05868880963534, 38.87003145971428 ], [ -77.05560979468949, 38.86876862025221 ], [ -77.05305311263672, 38.87059509268525 ], [ -77.0546384387842, 38.872985132206225 ], [ -77.0579282196337, 38.87264268371487 ] ] ], "type": "Polygon" }, "properties": { "color": "#E3F70550" } } ] } ``` ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=100&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22coordinates%22%3A%5B%5B%5B-77.0579282196337,38.87264268371487%5D,%5B-77.05868880963534,38.87003145971428%5D,%5B-77.05560979468949,38.86876862025221%5D,%5B-77.05305311263672,38.87059509268525%5D,%5B-77.0546384387842,38.872985132206225%5D,%5B-77.0579282196337,38.87264268371487%5D%5D%5D,%22type%22%3A%22Polygon%22%7D,%22properties%22%3A%7B%22color%22%3A%22%23E3F70550%22%7D%7D%5D%7D&key=your_API_Key ``` ------ #### [ Response image ] ![\[Exemplo de mapa mostrando um polígono colorido diferente ao redor do Pentágono.\]](http://docs.aws.amazon.com/pt_br/location/latest/developerguide/images/mapsV2/addPolygonStaticMap-color.png) ------ ## Adicionar vários polígonos Neste exemplo, adicionamos vários polígonos para destacar parques na cidade de Nova York. ------ #### [ Geo JSON ] ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "color": "#00800050" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -73.95824708489555, 40.80055774655358 ], [ -73.9818875523859, 40.76810261850716 ], [ -73.9729556303776, 40.7642422333698 ], [ -73.94916953372382, 40.79699323614054 ], [ -73.95824708489555, 40.80055774655358 ] ] ] } }, { "type": "Feature", "properties": { "color": "#FF000050" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -73.94432602794981, 40.80634757577718 ], [ -73.94607200977896, 40.803869579741644 ], [ -73.94301654157768, 40.80263972513214 ], [ -73.94127055974795, 40.805099411561145 ], [ -73.94432602794981, 40.80634757577718 ] ] ] } }, { "type": "Feature", "properties": { "color": "#0000FF50" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -73.9947948382843, 40.7691390468232 ], [ -73.99564708262241, 40.76802192177411 ], [ -73.99372953286147, 40.76723992306512 ], [ -73.99289367783732, 40.76835706126087 ], [ -73.9947948382843, 40.7691390468232 ] ] ] } } ] } ``` ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=100&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22properties%22%3A%7B%22color%22%3A%22%2300800050%22%7D,%22geometry%22%3A%7B%22type%22%3A%22Polygon%22,%22coordinates%22%3A%5B%5B%5B-73.95824708489555,40.80055774655358%5D,%5B-73.9818875523859,40.76810261850716%5D,%5B-73.9729556303776,40.7642422333698%5D,%5B-73.94916953372382,40.79699323614054%5D,%5B-73.95824708489555,40.80055774655358%5D%5D%5D%7D%7D,%7B%22type%22%3A%22Feature%22,%22properties%22%3A%7B%22color%22%3A%22%23FF000050%22%7D,%22geometry%22%3A%7B%22type%22%3A%22Polygon%22,%22coordinates%22%3A%5B%5B%5B-73.94432602794981,40.80634757577718%5D,%5B-73.94607200977896,40.803869579741644%5D,%5B-73.94301654157768,40.80263972513214%5D,%5B-73.94127055974795,40.805099411561145%5D,%5B-73.94432602794981,40.80634757577718%5D%5D%5D%7D%7D,%7B%22type%22%3A%22Feature%22,%22properties%22%3A%7B%22color%22%3A%22%230000FF50%22%7D,%22geometry%22%3A%7B%22type%22%3A%22Polygon%22,%22coordinates%22%3A%5B%5B%5B-73.9947948382843,40.7691390468232%5D,%5B-73.99564708262241,40.76802192177411%5D,%5B-73.99372953286147,40.76723992306512%5D,%5B-73.99289367783732,40.76835706126087%5D,%5B-73.9947948382843,40.7691390468232%5D%5D%5D%7D%7D%5D%7D&key=your_API_Key ``` ------ #### [ Response image ] ![\[Exemplo de mapa mostrando vários polígonos ao redor de parques em Nova York.\]](http://docs.aws.amazon.com/pt_br/location/latest/developerguide/images/mapsV2/addPolygonStaticMap-multiple.png) ------ # Como definir o idioma para mapas estáticos Você poderá definir o idioma de um mapa estático, caso não queira usar o idioma padrão. Nesse exemplo, uma localização em Tóquio que geralmente usaria texto em japonês como padrão é solicitada em inglês, substituindo o padrão regional. O exemplo mostra a imagem de resposta para uma solicitação em que o idioma é fornecido e outra em que o idioma não é fornecido. Os rótulos correspondentes refletem a diferença entre um mapa mostrando o idioma solicitado e um mapa que mostra o idioma padrão. ------ #### [ Request URL - English set as the language ] ``` https://maps.geo.us-east-1.amazonaws.com/v2/static/map?center=139.4575,35.539&style=Standard&lang=en&height=700&width=700&zoom=14 ``` ------ #### [ Response image ] ![\[Exemplo de mapa mostrando um polígono ao redor do Pentágono.\]](http://docs.aws.amazon.com/pt_br/location/latest/developerguide/images/mapsV2/setLanguageEnglishStaticMap.png) ------ ------ #### [ Request URL - default language ] ``` https://maps.geo.us-east-1.amazonaws.com/v2/static/map?center=139.4575,35.539&style=Standard&height=700&width=700&zoom=14 ``` ------ #### [ Response image ] ![\[Exemplo de mapa mostrando um polígono ao redor do Pentágono.\]](http://docs.aws.amazon.com/pt_br/location/latest/developerguide/images/mapsV2/setLanguageDefaultStaticMap.png) ------ # Como adicionar um círculo de proximidade a um mapa estático Os círculos de proximidade contêm informações importantes sobre a precisão de um dispositivo ou localização do usuário relatada ou estimada. Ao mostrar um círculo ao redor do ponto relatado, os usuários recebem a informação de que a posição real pode estar em qualquer lugar dentro do círculo, devido a vários fatores que afetam a precisão do posicionamento. Essa clareza adicional ajuda na tomada de decisões e aumenta a segurança da navegação. Neste exemplo, você adiciona um círculo de proximidade de 500 metros perto da Torre Eiffel em Paris. ------ #### [ Request ] ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 2.298151, 48.855921 ] }, "properties": { "style": "circle", "color": "#007BFF50", "width": "500m" } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 2.298151, 48.855921 ] }, "properties": { "icon": "cp", "color": "#007BFF", "text-color":"#DC3545", "text-outline-color":"#007BFF", "outline-width":"20px", "label": "You are here", "size": "large" } } ] } ``` ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map@2x?style=Satellite&width=700&height=700&zoom=17¢er=2.2958,48.8570&geojson-overlay=%7B%20%20%22type%22%3A%20%22FeatureCollection%22,%20%20%22features%22%3A%20%5B%20%20%20%20%7B%20%20%20%20%20%20%22type%22%3A%20%22Feature%22,%20%20%20%20%20%20%22geometry%22%3A%20%7B%20%20%20%20%20%20%20%20%22type%22%3A%20%22Point%22,%20%20%20%20%20%20%20%20%22coordinates%22%3A%20%5B%20%20%20%20%20%20%20%20%20%202.298151,%20%20%20%20%20%20%20%20%20%2048.855921%20%20%20%20%20%20%20%20%5D%20%20%20%20%20%20%7D,%20%20%20%20%20%20%22properties%22%3A%20%7B%20%20%20%20%20%20%20%20%22style%22%3A%20%22circle%22,%20%20%20%20%20%20%20%20%22color%22%3A%20%22%23007BFF50%22,%20%20%20%20%20%20%20%20%22width%22%3A%20%22500m%22%20%20%20%20%20%20%7D%20%20%20%20%7D,%20%20%20%20%7B%20%20%20%20%20%20%22type%22%3A%20%22Feature%22,%20%20%20%20%20%20%22geometry%22%3A%20%7B%20%20%20%20%20%20%20%20%22type%22%3A%20%22Point%22,%20%20%20%20%20%20%20%20%22coordinates%22%3A%20%5B%20%20%20%20%20%20%20%20%20%202.298151,%20%20%20%20%20%20%20%20%20%2048.855921%20%20%20%20%20%20%20%20%5D%20%20%20%20%20%20%7D,%20%20%20%20%20%20%22properties%22%3A%20%7B%20%20%20%20%20%20%20%20%22icon%22%3A%20%22cp%22,%20%20%20%20%20%20%20%20%22color%22%3A%20%22%23007BFF%22,%20%20%20%20%20%20%20%20%22text-color%22%3A%22%23DC3545%22,%20%20%20%20%20%20%20%20%22text-outline-color%22%3A%22%23007BFF%22,%20%20%20%20%20%20%20%20%22outline-width%22%3A%2220px%22,%20%20%20%20%20%20%20%20%22label%22%3A%20%22You%20are%20here%22,%20%20%20%20%20%20%20%20%22size%22%3A%20%22large%22%20%20%20%20%20%20%7D%20%20%20%20%7D%20%20%5D%7D&key=your_API_Key ``` ------ #### [ Response image ] ![\[Exemplo de mapa mostrando um círculo de proximidade ao redor da Torre Eiffel.\]](http://docs.aws.amazon.com/pt_br/location/latest/developerguide/images/mapsV2/addPproximityCircleStaticMap.png) ------ # Gerenciar custos e uso À medida que você continua aprendendo sobre os mapas do Amazon Location, é importante entender como gerenciar a capacidade do serviço, garantir que você siga os limites de uso e obter os melhores resultados por meio de otimizações de cotas e APIs. Quando aplica as práticas recomendadas de desempenho e precisão, você pode personalizar o aplicativo para lidar com consultas relacionadas ao local de forma eficiente e maximizar as solicitações de API. **Topics** + [Práticas recomendadas do Amazon Location Service](maps-best-practices.md) + [Preços dos mapas](maps-pricing.md) + [Mapear cotas e uso](map-quota-and-usage.md) # Práticas recomendadas do Amazon Location Service Ao trabalhar com o Amazon Location Service, seguir as práticas recomendadas garante que os mapas sejam otimizados para desempenho, precisão e experiência do usuário. Esta seção descreve as principais considerações para trabalhar com mapas estáticos, limites geográficos e dados GeoJSON para aprimorar a funcionalidade e a visualização do mapa. ## Mapas dinâmicos A seguir estão algumas das práticas recomendadas para se trabalhar com mapas dinâmicos no Amazon Location Service. ### Otimização de renderização com MapLibre A seguir estão alguns recursos MapLibre que ajudam a otimizar a renderização para estilos de AWS mapa. Para obter mais informações, consulte [AWS estilos e recursos do mapa](map-styles.md). #### Ignorar a validação do estilo Se você estiver usando o estilo de AWS mapa, `validateStyle` defina como`false`. Essa ação desativará a validação do estilo de tempo de carregamento, acelerando o carregamento inicial do mapa. A validação de estilo não é necessária com estilos de mapa da AWS , porque eles são pré-validados. ------ #### [ Example ] ``` const map = new maplibregl.Map({ container: 'map', // ID of the div where the map will render style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`, // Map style URL center: [0, 0], // Starting position [lng, lat] zoom: 2, // Starting zoom validateStyle: false, // Disable style validation for faster map load }); ``` ------ #### [ Explanation ] + `validateStyle: true`: Isso permite a validação do estilo do mapa em relação à especificação do estilo MapLibre GL. Se houver algum problema no estilo, eles serão registrados no console. + Se você definir isso como `false`, o mapa ignorará o processo de validação de estilo, o que pode resultar em um carregamento mais rápido, mas sem verificação de erros. ------ #### Pré-aquecimento do mapa Para aplicativos de página única (SPAs) que podem criar e destruir o mapa várias vezes enquanto o usuário navega pelo aplicativo, a função de pré-aquecimento pode reduzir os atrasos na recriação do mapa após sua destruição. Esse recurso só é recomendado para SPAs. ## Mapas estáticos ### Limites, caixa delimitadora (caixa) Ao trabalhar com mapas e dados geográficos, é essencial definir os parâmetros de caixa delimitadora (`bbox`) e de limites (bounds) com precisão, pois eles definem a área geográfica de interesse. Qualquer imprecisão pode levar a resultados indesejáveis. **Garantir limites precisos** Confira se os limites especificados representam com precisão a região que você deseja exibir. Mesmo pequenas imprecisões podem cortar ou excluir partes da área desejada, anulando o propósito da visualização. **Verificar o nível de zoom apropriado** O nível de zoom do mapa é calculado automaticamente com base nos parâmetros bbox ou bounds especificados. Verifique se o nível de zoom resultante fornece detalhes e visibilidade adequados para toda a área de interesse. Se o zoom for muito alto ou baixo, o mapa pode falhar em transmitir as informações desejadas de forma eficaz. **Verificar a visibilidade personalizada da sobreposição** Quando for usar bbox ou bounds com sobreposições personalizadas, como atributos GeoJSON, confira se a extensão dos atributos está dentro da imagem resultante do mapa. Os atributos que se estendem além dos limites podem ser recortados ou omitidos, resultando em visualizações incompletas ou enganosas. **Usar preenchimento com bbox** Use bbox junto com o parâmetro padding para garantir que os atributos do mapa próximos às bordas estejam totalmente visíveis e não sejam cortados. Quando define com precisão os parâmetros bbox e bounds, você pode garantir que os mapas representem corretamente a área geográfica desejada, forneçam um nível apropriado de detalhes e incorporem efetivamente sobreposições personalizadas ou camadas de dados. ## GeoJSON Quando se usa dados GeoJSON, otimizar a string de consulta reduzindo o recurso GeoJSON pode ajudar a permanecer dentro dos limites da string de consulta, especialmente para grandes conjuntos de dados. # Preços dos mapas O Amazon Location Service oferece preços competitivos para sua API de mapas com base no tipo de solicitação de mapa e no número de chamadas de API feitas. Esta seção fornece uma visão geral da estrutura de definição de preço dos mapas dinâmicos e estáticos. Para obter mais informações, consulte os [preços do Amazon Location Service](https://aws.amazon.com/location/pricing/). ## Mapas dinâmicos O preço da API dos mapas é baseado no número de blocos recuperados pela API `GetTiles` Outras APIs relacionadas a mapas, como`GetGlyphs`, `GetStyleDescriptor` e `GetSprites` são gratuitas. ## Imagens estáticas dos mapas O preço das imagens dos mapas estáticos é baseado no número de solicitações feitas na API `GetStaticMap`. Cada solicitação de uma imagem estática do mapa é contabilizada no cálculo do preço. # Mapear cotas e uso O Amazon Location Service impõe cotas de serviço e limites de uso específicos para mapas dinâmicos e estáticos. Esses limites são estabelecidos para garantir o uso justo e a eficiência do desempenho para todos os usuários. Abaixo estão as cotas de serviço e os limites ajustáveis para cada serviço. ## Cotas de serviço O Amazon Location Service define cotas padrão APIs para ajudar a gerenciar a capacidade do serviço, que podem ser visualizadas no console de [gerenciamento AWS de cotas de serviço](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas). Você pode solicitar um aumento das cotas em até duas vezes o limite padrão para cada API por meio do [console de autoatendimento](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas). Para limites de cota que excedam o dobro do limite padrão, solicite por meio do console de autoatendimento e ele enviará automaticamente um tíquete de suporte. Você também pode conectar sua equipe de suporte premium. Não há cobranças diretas para solicitações de aumento de cota, mas níveis mais altos de uso podem levar ao aumento dos custos de serviço com base nos recursos adicionais consumidos. Para obter mais informações, consulte [Gerenciar cotas com o Service Quotas](manage-quotas.md). ### Mapa dinâmico | Nome da API | Padrão | Limite máximo ajustável | Mais do que o Limite máximo ajustável | | --- | --- | --- | --- | | `GetTiles` | 2000 | 4000 | Solicitar no [console de cota de serviço](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas) ou entrar em contato com a equipe de suporte | ### Mapa estático | Nome da API | Padrão | Limite máximo ajustável | Mais do que o Limite máximo ajustável | | --- | --- | --- | --- | | `GetStaticMap` | 50 | 100 | Solicitar no [console de cota de serviço](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas) ou entre em contato com a equipe de suporte | ## Limites de uso | Nome da API | Limite | Valor | | --- | --- | --- | | `GetStyleDescriptor` | Número máximo de solicitações, por segundo, por endereço IP. | 5000 | | `GetGlyphys` | Número máximo de solicitações, por segundo, por endereço IP. | 5000 | | `GetSprites` | Número máximo de solicitações, por segundo, por endereço IP. | 5000 | | `GetStaticMap` | Tamanho da carga útil de resposta após a compactação. | 6 MB | | `GetTiles` | Tamanho da carga útil de resposta após a compactação. | 6 MB | ## Termos Para obter mais informações, consulte [Termos de uso e atribuição de dados](data-attribution.md).