Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.
# Cómo agregar un marcador a un mapa estático
En este tema, obtendrá información sobre cómo agregar marcadores a los mapas estáticos generados con Amazon Location Service. Puede personalizar el icono, la etiqueta, el tamaño, el color y otras opciones de estilo del marcador. Esto le permite resaltar ubicaciones específicas con señales visuales que se alinean con el propósito del mapa.
## Estilos de marcador
| Nombre | Tipo | Predeterminado/a | Descripción |
| --- | --- | --- | --- |
| `style` | Cadena | `marker` | El estilo de la geometría de puntos. Para crear un marcador, defina el valor en `marker` o no incluya el atributo `style` en el objeto de propiedades del GeoJSON. |
| `icon` | Cadena | `pin` | El tipo de icono del marcador. Los valores disponibles incluyen: `cp` (círculo de proximidad), `diamond`, `pin`, `poi`, `square`, `triangle`, `bubble`. |
| `label` | Cadena | `` | El texto para mostrar en las coordenadas. Para configurar etiquetas automáticas, utilice los siguientes valores: `$alpha` (alfabeto latino) o `$num` (números arábigos). |
| `color` | Color | Dependiente del estilo | El color del icono. |
| `outline-color` | Color | Dependiente del estilo | El color del esquema del icono. |
| `text-color` | Color | Dependiente del estilo | El color del texto de la etiqueta. |
| `text-outline-color` | Color | Dependiente del estilo | El color del esquema del texto. |
| `outline-width` | Entero | `0` (desactivado) | El ancho del esquema del texto. |
| `size` | Cadena | `medium` | El tamaño de la etiqueta y el icono. Valores disponibles: `small`, `medium`, `large`. |
## Agregación de un marcador a una imagen de mapa
En este ejemplo, colocará un marcador con una etiqueta en la imagen del 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 ]
Con la superposición de 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/es_es/location/latest/developerguide/images/static-add-marker.png)
------
## Agregación de varios marcadores a una imagen de mapa
En este ejemplo, agregará marcadores para los lugares imperdibles de Helsinki (Finlandia) mediante sus coordenadas (longitud, latitud). También puede aplicar un relleno para garantizar que el mapa contenga todos los marcadores correctamente.
**nota**
El tipo de icono de marcador disponible incluye: `cp` para círculo de proximidad, `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/es_es/location/latest/developerguide/images/static-add-multi-markers.png)
------
## Cambio del color del marcador en una imagen de mapa
En este ejemplo, utilizará marcadores de burbujas de diferentes colores para representar ciudades de todo el mundo. Puede personalizar el color, la etiqueta y otras propiedades del marcador para adaptarlos al contexto del 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/es_es/location/latest/developerguide/images/static-change-marker-color.png)
------