# How to use static maps
These how-to topics offer step-by-step guidance for customizing static maps with overlays and visual elements, utilizing the mapping capabilities of Amazon Location Service. Each guide walks you through key tasks, such as adjusting map dimensions, choosing between zoom or radius, and adding various geo-spatial elements like markers, polygons, lines, and proximity circles. These guides use both compact and GeoJSON formats to ensure flexibility in styling and configuration.
Whether you're optimizing maps for customer-facing applications or performing geospatial analysis, these topics provide clear instructions on tailoring your static maps to fit specific requirements. By following the detailed examples, you’ll learn how to enhance map presentations and efficiently manage geographical data for a variety of business needs.
**Topics**
+ [How to get a static map of a specific position](get-static-map-specific-position.md)
+ [How to get a static map of a specific dimension](get-static-map-specific-dimension.md)
+ [How to decide between radius and zoom for a static map](choose-radius-vs-zoom.md)
+ [How to add scale for a static map](add-scale-static-map.md)
+ [How to add a marker to a static map](add-marker-static-map.md)
+ [How to add a line to a static map](how-to-add-line-static.md)
+ [How to add a route to a static map](how-to-add-route.md)
+ [How to add a polygon to a static map](how-to-add-polygon-static.md)
+ [How to set language for static maps](set-language-static-map.md)
+ [How to add a proximity circle to a static map](how-to-add-proximity-circle.md)
# How to get a static map of a specific position
In this topic, you will learn how to retrieve static maps from Amazon Location Service based on specific parameters. You will learn how to generate a static map for a center position, a bounding box, and a set of bounded positions. The examples provided will help you customize the width, height, and style of the map.
**Note**
You must pass either `map` or `map@2x` when generating a static map.
## Get map image for a center position
In this example, you will create a map image with a width of `1024` and a height of `1024` with the center coordinates set at `-123.1143,49.2763`, where `longitude=-123.1143` and `latitude=49.2763`, and a zoom level of `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/location/latest/developerguide/images/static-center.png)
------
## Get map image for bounding box
In this example, you'll generate a map image of Southeast Asia by setting the bounding box for the area.
The `bbox` format is `{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/location/latest/developerguide/images/static-bounding-box.png)
------
## Get map image for bounded positions
In this example, you will generate a map that covers several must-see places in Paris, each specified by its coordinates (longitude, latitude). The bounded positions include: Eiffel Tower, Louvre Museum, Notre-Dame Cathedral, Champs-Élysées, Arc de Triomphe, Sacré-Cœur Basilica, Luxembourg Gardens, Musée d'Orsay, Place de la Concorde, and Palais Garnier.
The format for bounding positions is `{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/location/latest/developerguide/images/static-bounding-position.png)
------
# How to get a static map of a specific dimension
In this topic, you will learn how to set the dimensions (height and width) for static maps using Amazon Location Service. Customizing the dimensions of a map image allows you to balance performance, visual quality, and usability. The maximum values for both `width` and `height` are 1400 pixels, while the minimum values are 64 pixels. The maximum result size is 6 MB.
Additionally, you can use the `bbox` and `bounds` parameters along with `padding` to ensure that important map features near the edges are fully visible and not cut off.
## Get map image with specific height and width
In this example, you will create a low-resolution and mid-resolution map image of Helsinki, Finland.
------
#### [ 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/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/location/latest/developerguide/images/static-specific-dimension-mid.png)
------
## Get map image with padding on all sides
In this example, you will generate a map using several must-see places in Helsinki, Finland, with their coordinates (longitude, latitude), both with and without padding.
------
#### [ 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/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/location/latest/developerguide/images/static-specific-dimension-no-padding.png)
------
# How to decide between radius and zoom for a static map
In this topic, you will learn how to choose between using `radius` or `zoom` when generating static maps with Amazon Location Service. The `radius` parameter provides more precise control over the area of coverage, making it ideal for customer-facing applications where you know the exact coverage area. The `zoom` parameter is better suited for geospatial analysis when you want to adjust the level of detail displayed.
## With radius
In this example, you will create a map image of Sri Lanka using the `radius` parameter with a center location.
------
#### [ 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/location/latest/developerguide/images/static-radius.png)
------
## With zoom
In this example, you will create a map image of Sri Lanka using the `zoom` parameter with a center location.
------
#### [ 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/location/latest/developerguide/images/static-zoom.png)
------
# How to add scale for a static map
In this topic, you will learn how to display a scale on the bottom-right corner of a static map generated with Amazon Location Service. The scale can show a single unit, such as `Miles` or `Kilometers`, or both units, such as `KilometersMiles` or `MilesKilometers`, with one unit displayed at the top and the other at the bottom.
## Add scale with single unit
In this example, you will display a map of Helsinki, Finland with the scale set to `Kilometers` in the bottom-right corner.
------
#### [ 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/location/latest/developerguide/images/static-scale-single.png)
------
## Add scale with both units
In this example, you will display a map of Helsinki, Finland with both `Kilometers` and `Miles` shown on the scale in the bottom-right corner, with one unit displayed above the other.
------
#### [ 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/location/latest/developerguide/images/static-scale-both.png)
------
# How to add a marker to a static map
In this topic, you will learn how to add markers to static maps generated with Amazon Location Service. You can customize the marker's icon, label, size, color, and other styling options. This allows you to highlight specific locations with visual cues that align with your map's purpose.
## Marker styling
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `style` | String | `marker` | The style of the Point geometry. To create a marker, set the value to `marker` or do not include the `style` attribute in the properties object of the GeoJSON. |
| `icon` | String | `pin` | The marker icon type. Available values include: `cp` (proximity circle), `diamond`, `pin`, `poi`, `square`, `triangle`, `bubble`. |
| `label` | String | `` | The text to display at the coordinates. To set automatic labels, use the following values: `$alpha` (Latin alphabet) or `$num` (Arabic numerals). |
| `color` | Color | Style-dependent | The icon color. |
| `outline-color` | Color | Style-dependent | The icon outline color. |
| `text-color` | Color | Style-dependent | The label text color. |
| `text-outline-color` | Color | Style-dependent | The text outline color. |
| `outline-width` | Integer | `0` (turned off) | The text outline width. |
| `size` | String | `medium` | The label and icon size. Available values: `small`, `medium`, `large`. |
## Add a Marker to a Map Image
In this example, you will place a marker with a label on the map image of 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 ]
With the GeoJSON overlay
```
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/location/latest/developerguide/images/static-add-marker.png)
------
## Add multiple markers to a map image
In this example, you will add markers for must-see places in Helsinki, Finland using their coordinates (longitude, latitude). You can also apply padding to ensure the map accommodates all markers properly.
**Note**
The available marker icon type include: `cp` for proximity circle, `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/location/latest/developerguide/images/static-add-multi-markers.png)
------
## Change color of marker in a map image
In this example, you will use bubble markers of different colors to represent cities across the world. You can customize the marker’s color, label, and other properties to suit the context of your map.
`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/location/latest/developerguide/images/static-change-marker-color.png)
------
# How to add a line to a static map
In this topic, you'll learn how to add a line to a static map using Amazon Location Service. We'll cover the supported styling options, how to define a line using GeoJSON, and how to apply custom styles such as color, width, and outline. We'll also explore how to use different measurement units for properties like line width.
## Supported styling
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | Color | style-dependent | The line color. |
| `width` | Integer/String | 2 | The line width. For more information, see [How to add a line to a static map](#how-to-add-line-static). |
| `outline-color` | Color | style-dependent | The line outline color. |
| `outline-width` | Integer/String | 0 (turned off) | The width of the outline. For more information, see [How to add a line to a static map](#how-to-add-line-static). |
## Supported unit
| Unit | Description |
| --- | --- |
| Integer, for example, `5` | Pixels |
| String with no unit, for example `"5"` | Pixels |
| `"px"` | Pixels |
| `"m"` | Meters |
| `"km"` | Kilometers |
| `"mi"` | Miles |
| `"ft"` | Feet |
| `"yd"` | Yards |
| `"%"` | The percentage of the default value for a specific property, in pixels. For example, if the default value for `width` is `2` pixels, then `200%` is `4` pixels. `%` is a sensitive character that must be encoded in the request URL as `%25`. |
## Add a line
In this example, you will add a line from a place in Vancouver to Stanley Park. The line is created using a GeoJSON format with defined coordinates.
------
#### [ 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/location/latest/developerguide/images/static-add-line.png)
------
## Add styling to the line
In this example, you will style the line added in the previous example. This includes defining the line's color, width, outline color, and outline width to customize the visual appearance of the line on the map.
------
#### [ 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/location/latest/developerguide/images/static-add-line-styling.png)
------
# How to add a route to a static map
In this topic, you'll learn how to add a route to a static map using Amazon Location Service. You'll go through the steps to obtain a route using the CalculateRoutes API and then visualize it on a static map using GeoJSON and custom styling for points and lines.
## Steps to add a route
1. Get routes from the `CalculateRoutes` API. Remove coordinates that fall on the same straight line to optimize the LineString, preventing the query string from reaching its limit.
1. Create a GeoJSON object based on the optimized set of coordinates.
1. Take the first and last points of the LineString and add Point geometries to mark the start and end locations.
1. Style the points and the LineString according to your business needs, adjusting properties like color, size, and labels.
## Add a route using compact style
In this example, you will add a route with start and end points to the line created in [How to add a line to a static map](how-to-add-line-static.md). The route will be defined with custom styling, including color, size, and labels for the start and end points.
```
{
"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/location/latest/developerguide/images/static-add-route-compact.png)
------
# How to add a polygon to a static map
Buildings and locations can be highlighted on a map by designating a polygon around them, for example, the Pentagon (located in Washington, D.C.).
## Add a single polygon
In this example, you add a polygon (a pentagon) for the Pentagon building on the map.
------
#### [ 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 ]
![\[Example map showing a polygon around the Pentagon.\]](http://docs.aws.amazon.com/location/latest/developerguide/images/mapsV2/addPolygonStaticMap.png)
------
## Add a style polygon
In this example, we restyle the polygon shown in the previous example. We draw the polygon in a different color (**\$1E3F70550**). The color components are as follows.
+ **E3** represents the red component.
+ **F7** represents the green component.
+ **05** represents the blue component.
+ **50** represents the alpha (opacity) component.
------
#### [ 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 ]
![\[Example map showing a different colored polygon around the Pentagon.\]](http://docs.aws.amazon.com/location/latest/developerguide/images/mapsV2/addPolygonStaticMap-color.png)
------
## Add multiple polygons
In this example, we add multiple polygons, to highlight multiple parks in New York City.
------
#### [ 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 ]
![\[Example map showing multiple polygons around parks in NYC.\]](http://docs.aws.amazon.com/location/latest/developerguide/images/mapsV2/addPolygonStaticMap-multiple.png)
------
# How to set language for static maps
You can set the language for a static map, in case you don't want to use the default language.
In this example, a location in Tokyo which would generally default to Japanese text is requested in English, overwriting the regional default.
The example shows the response image for a request where language is provided, and one where the language is not provided. The corresponding labels reflect the difference between a map showing the requested language and a map that shows the default language.
------
#### [ 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 ]
![\[Example map showing a polygon around the Pentagon.\]](http://docs.aws.amazon.com/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 ]
![\[Example map showing a polygon around the Pentagon.\]](http://docs.aws.amazon.com/location/latest/developerguide/images/mapsV2/setLanguageDefaultStaticMap.png)
------
# How to add a proximity circle to a static map
Proximity circles offer important insights into the accuracy of a reported or estimated device or user location. By showing a circle around the reported point, users are informed that the actual position could fall anywhere within the circle, due to various factors affecting positioning precision. This added clarity helps with decision-making and enhances navigation safety.
In this example, you add a proximity circle of 500 meters near the Eiffel Tower in 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 ]
![\[Example map showing a proximity circle around the Eiffel Tower.\]](http://docs.aws.amazon.com/location/latest/developerguide/images/mapsV2/addPproximityCircleStaticMap.png)
------