As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.
# 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)
------