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 |
|---|---|---|---|
|
String |
|
The style of the Point geometry. To create a marker, set the value to |
|
String |
|
The marker icon type. Available values include: |
|
String |
|
The text to display at the coordinates. To set automatic labels, use the following values: |
|
Color |
Style-dependent |
The icon color. |
|
Color |
Style-dependent |
The icon outline color. |
|
Color |
Style-dependent |
The label text color. |
|
Color |
Style-dependent |
The text outline color. |
|
Integer |
|
The text outline width. |
|
String |
|
The label and icon size. Available values: |
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
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 } } ] }
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" } } ] }
