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'] ]; }; ``` ------ ## Establecimiento del idioma preferido en función del idioma del navegador del usuario final En este ejemplo, configurará el estilo de actualización para mostrar las etiquetas de los mapas en el idioma del dispositivo del usuario. ### Establecimiento del idioma preferido en función del ejemplo de idioma del 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'] ]; }; ``` ------ # Cómo configurar la vista política de un mapa Amazon Location Service le permite establecer una visión política para garantizar que la solicitud cumpla con las leyes locales. Puede establecer una visión política y comparar mapas desde diferentes perspectivas políticas. **nota** Para obtener más información, consulte [Localización e internacionalización](maps-localization-internationalization.md). ## Establecimiento de una visión política y comparación con una perspectiva internacional En este ejemplo, creará y comparará mapas desde dos puntos de vista políticos diferentes: una perspectiva internacional y la visión de Turquía sobre Chipre. ### Ejemplo de comparación de puntos de vista políticos ------ #### [ 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%; } ``` ------ # Cómo filtrar POI en el mapa Amazon Location Service le permite seleccionar las categorías de point-of-interest POI correspondientes a su caso de uso. Obtención de más información sobre el estilo de mapa estándar, [numerosos POI](https://docs.aws.amazon.com/location/latest/developerguide/standard-map-style.html#rich-poi) ## Filtro de POI En este ejemplo, se muestra un mapa interactivo que permite a los usuarios filtrar por categorías 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; } ``` ------ # Cómo crear mapas topográficos Amazon Location Service le permite crear mapas topográficos con las características de densidad de terreno y contorno para visualizar los cambios de elevación y las características geográficas. ## Mostrar Hillshade La función Terreno le permite visualizar la sombra de las colinas, los cambios de elevación y las características geográficas relacionadas. ### Ejemplo de Hillshade ------ #### [ index.html ] ``` Terrain Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } html, body, #map { height: 100%; } ``` ------ ## Muestra la elevación con líneas de densidad de contorno Amazon Location Service te permite añadir características de densidad de contorno a tu mapa. Esto proporciona una visualización de la inclinación geográfica y los cambios de elevación. ### Ejemplo de densidad de contorno ------ #### [ index.html ] ``` Contour Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } html, body, #map { height: 100%; } ``` ------ ## Muestra las líneas Hillshade y Contour Density Con Amazon Location Service, puede combinar las funciones Hillshade y Contour Density en su mapa para una visualización completa del terreno. Esto proporciona una mejor percepción de la profundidad y una comprensión completa de las variaciones topográficas y las características del terreno. ### Ejemplo de Hillshade con densidad de contorno ------ #### [ index.html ] ``` Hillshade and Contour Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } html, body, #map { height: 100%; } ``` ------ # Cómo mostrar el tráfico en tiempo real en un mapa Con Amazon Location Service puedes añadir características de tráfico a tu mapa. Esto proporciona datos de tráfico en tiempo real para mostrar las condiciones actuales del tráfico, como la congestión vial actual, las obras y los incidentes, lo que le ayuda a elegir las rutas. ## Crea un mapa con el tráfico en tiempo real En este ejemplo se muestra cómo crear un mapa con datos de tráfico en tiempo real. ### Ejemplo de tráfico en tiempo real ------ #### [ index.html ] ``` Traffic Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # Cómo crear un mapa logístico La TravelModes función te permite crear mapas logísticos con Amazon Location Service. TravelModes muestra la información de ruta relevante para la navegación de camiones con las restricciones de tráfico relacionadas. Usa [Transit TravelMode](https://docs.aws.amazon.com/location/latest/developerguide/how-to-show-transit-details-map.html) para mostrar los detalles del transporte público. ## Crea un mapa con Truck TravelMode En este ejemplo se muestra cómo crear un mapa con `Truck` `TravelMode` una ruta logística. ### Ejemplo de camión ------ #### [ index.html ] ``` Truck Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # Cómo mostrar los detalles del transporte público en un mapa Amazon Location Service te permite añadir funciones de transporte público a los mapas. `Transit``TravelMode`Muestra información sobre las rutas del transporte público, como las líneas de tren codificadas por colores. Consulta también cómo configurar la [logística TravelMode](https://docs.aws.amazon.com/location/latest/developerguide/how-to-create-logistic-map.html) para ver opciones adicionales. ## Crea un mapa con detalles de tránsito En este ejemplo, se muestra cómo crear un mapa con detalles de transporte público con Transit TravelMode para transporte público. ### Ejemplo de transporte ------ #### [ index.html ] ``` Transit Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # Cómo crear un mapa 3D Amazon Location Service le permite añadir elementos tridimensionales a los mapas, por ejemplo, `Terrain3D` para mostrar los datos de elevación como una superficie tridimensional o `Buildings3D` para mostrar estructuras urbanas con altura y volumen. ## Cree un mapa con detalles tridimensionales del terreno En este ejemplo se muestra cómo crear un mapa con `Terrain3D` parámetros. ### Ejemplo de Terrain3D ------ #### [ index.html ] ``` 3D Terrain

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ ## Crea un mapa con detalles de edificios tridimensionales En este ejemplo se muestra cómo crear un mapa con `Buildings3D` parámetros. ### Ejemplo de Buildings3D ------ #### [ index.html ] ``` 3D Buildings

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ ## Activar/desactivar la vista de globo En este ejemplo se muestra cómo activar o desactivar la proyección de vista de globo. De forma predeterminada, la vista de globo está habilitada. ### Ejemplo de vista de globo ------ #### [ index.html ] ``` Globe View

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # Cómo usar mapas estáticos Estos temas de aprendizaje ofrecen una guía paso a paso para personalizar mapas estáticos con superposiciones y elementos visuales, mediante las capacidades cartográficas de Amazon Location Service. Cada guía explica las tareas clave, como ajustar las dimensiones del mapa, elegir entre el zoom o el radio y agregar varios elementos geoespaciales, como marcadores, polígonos, líneas y círculos de proximidad. Estas guías utilizan formatos compactos y GeoJSON para garantizar la flexibilidad en el estilo y la configuración. Si está optimizando mapas para aplicaciones orientadas al cliente o realizando análisis geoespaciales, estos temas proporcionan instrucciones claras sobre cómo personalizar los mapas estáticos para adaptarlos a requisitos específicos. Si sigue los ejemplos detallados, obtendrá información sobre cómo mejorar las presentaciones de los mapas y a gestionar de forma eficiente los datos geográficos para satisfacer diversas necesidades empresariales. **Topics** + [Cómo obtener un mapa estático de una posición específica](get-static-map-specific-position.md) + [Cómo obtener un mapa estático de una dimensión específica](get-static-map-specific-dimension.md) + [Cómo decidir entre el radio y el zoom para un mapa estático](choose-radius-vs-zoom.md) + [Cómo agregar una escala a un mapa estático](add-scale-static-map.md) + [Cómo agregar un marcador a un mapa estático](add-marker-static-map.md) + [Cómo agregar una línea a un mapa estático](how-to-add-line-static.md) + [Cómo agregar una ruta a un mapa estático](how-to-add-route.md) + [Cómo agregar un polígono a un mapa estático](how-to-add-polygon-static.md) + [Cómo configurar el idioma de los mapas estáticos](set-language-static-map.md) + [Cómo agregar un círculo de proximidad a un mapa estático](how-to-add-proximity-circle.md) # Cómo obtener un mapa estático de una posición específica En este tema, obtendrá información sobre cómo recuperar mapas estáticos de Amazon Location Service en función de parámetros específicos. Obtendrá información sobre cómo generar un mapa estático para una posición central, un cuadro delimitador y un conjunto de posiciones delimitadas. Los ejemplos proporcionados le ayudarán a personalizar la anchura, la altura y el estilo del mapa. **nota** Debe aprobar `map` o `map@2x` al generar un mapa estático. ## Obtención de una imagen de mapa para una posición central En este ejemplo, creará una imagen de mapa con una anchura de `1024` y una altura de `1024` con las coordenadas centrales definidas en `-123.1143,49.2763`, dónde `longitude=-123.1143` y `latitude=49.2763`, y un nivel 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/es_es/location/latest/developerguide/images/static-center.png) ------ ## Obtención de la imagen del mapa para el cuadro delimitador En este ejemplo, generará una imagen de mapa del sureste asiático configurando el cuadro delimitador del área. El formato de `bbox` es `{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/es_es/location/latest/developerguide/images/static-bounding-box.png) ------ ## Obtención de una imagen de mapa para las posiciones delimitadas En este ejemplo, generará un mapa que cubre varios lugares imperdibles en París, cada uno especificado por sus coordenadas (longitud, latitud). Las posiciones delimitadas incluyen: la Torre Eiffel, el Museo del Louvre, la Catedral de Notre-Dame, los Campos Elíseos, el Arco del Triunfo, la Basílica del Sagrado Corazón, los Jardines de Luxemburgo, el Museo de Orsay, la Place de la Concordia y la Ópera Garnier. El formato de las posiciones delimitadoras es `{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/es_es/location/latest/developerguide/images/static-bounding-position.png) ------ # Cómo obtener un mapa estático de una dimensión específica En este tema, aprenderá a configurar las dimensiones (altura y anchura) de los mapas estáticos mediante Amazon Location Service. La personalización de las dimensiones de una imagen de mapa le permite equilibrar el rendimiento, la calidad visual y el uso. Los valores máximos para `width` y `height` son 1400 píxeles, mientras que los valores mínimos son 64 píxeles. El tamaño máximo del resultado es 6 MB. Además, puede usar los parámetros `bbox` y `bounds` junto con `padding` para asegurarse de que las características importantes del mapa cercanas a los bordes estén completamente visibles y no estén cortadas. ## Obtención de una imagen de mapa con una altura y un ancho específicos En este ejemplo, creará una imagen de mapa de baja y media resolución de Helsinki, Finlandia. ------ #### [ 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/es_es/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/es_es/location/latest/developerguide/images/static-specific-dimension-mid.png) ------ ## Obtención de una imagen de mapa con relleno en todos los lados En este ejemplo, generará un mapa con varios lugares imperdibles en Helsinki (Finlandia), con sus coordenadas (longitud, latitud), con y sin relleno. ------ #### [ 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/es_es/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/es_es/location/latest/developerguide/images/static-specific-dimension-no-padding.png) ------ # Cómo decidir entre el radio y el zoom para un mapa estático En este tema, aprenderá a elegir entre usar `radius` o `zoom` al generar mapas estáticos con Amazon Location Service. El parámetro `radius` proporciona un control más preciso sobre el área de cobertura, lo que lo hace ideal para aplicaciones orientadas al cliente en las que se conoce el área de cobertura exacta. El parámetro `zoom` es más adecuado para el análisis geoespacial cuando se desea ajustar el nivel de detalle que se muestra. ## Con radio En este ejemplo, creará una imagen de mapa de Sri Lanka con el parámetro `radius` con una ubicación 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/es_es/location/latest/developerguide/images/static-radius.png) ------ ## Con zoom En este ejemplo, creará una imagen de mapa de Sri Lanka con el parámetro `zoom` con una ubicación 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/es_es/location/latest/developerguide/images/static-zoom.png) ------ # Cómo agregar una escala a un mapa estático En este tema, aprenderá a mostrar una escala en la esquina inferior derecha de un mapa estático generado con Amazon Location Service. La escala puede mostrar una sola unidad, como `Miles` o `Kilometers`, o ambas unidades, como `KilometersMiles` o `MilesKilometers`, con una unidad en la parte superior y la otra en la inferior. ## Agregación de la escala con una sola unidad En este ejemplo, mostrará un mapa de Helsinki (Finlandia) con la escala establecida en `Kilometers` en la esquina inferior derecha. ------ #### [ 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/es_es/location/latest/developerguide/images/static-scale-single.png) ------ ## Agregación de la escala con ambas unidades En este ejemplo, mostrará un mapa de Helsinki (Finlandia) con `Kilometers` y `Miles` mostrados en la escala de la esquina inferior derecha, con una unidad encima de la otra. ------ #### [ 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/es_es/location/latest/developerguide/images/static-scale-both.png) ------ # 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) ------ # Cómo agregar una línea a un mapa estático En este tema, obtendrá información sobre cómo agregar una línea a un mapa estático con Amazon Location Service. Abordaremos las opciones de estilo compatibles, cómo definir una línea con GeoJSON y cómo aplicar estilos personalizados como el color, el ancho y el contorno. También exploraremos cómo usar diferentes unidades de medida para propiedades como el ancho de línea. ## Estilos compatibles | Nombre | Tipo | Predeterminado/a | Descripción | | --- | --- | --- | --- | | `color` | Color | dependiente del estilo | El color de la línea. | | `width` | Entero/cadena | 2 | El ancho de la línea. Para obtener más información, consulte [Cómo agregar una línea a un mapa estático](#how-to-add-line-static). | | `outline-color` | Color | dependiente del estilo | El color del esquema de la línea. | | `outline-width` | Entero/cadena | 0 (desactivado) | El ancho del esquema. Para obtener más información, consulte [Cómo agregar una línea a un mapa estático](#how-to-add-line-static). | ## Unidad compatible | Unidad | Descripción | | --- | --- | | Entero, por ejemplo, `5` | Píxeles | | Cadena sin unidad, por ejemplo `"5"` | Píxeles | | `"px"` | Píxeles | | `"m"` | Metros | | `"km"` | Kilómetros | | `"mi"` | Millas | | `"ft"` | Pies | | `"yd"` | Yardas | | `"%"` | El porcentaje del valor predeterminado de una propiedad específica, en píxeles. Por ejemplo, si el valor predeterminado para `width` son `2` píxeles, entonces `200%` son `4` píxeles. `%` es un carácter confidencial que se debe codificar en la URL de la solicitud como `%25`. | ## Agregación de una línea En este ejemplo, agregará una línea desde un lugar de Vancouver hasta Stanley Park. La línea se crea con un formato GeoJSON con 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/es_es/location/latest/developerguide/images/static-add-line.png) ------ ## Agregación de estilo a la línea En este ejemplo, aplicará estilo a la línea que se ha agregado en el ejemplo anterior. Esto incluye definir el color y el ancho de la línea, y el color y el ancho del contorno para personalizar el aspecto visual de la línea en el 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/es_es/location/latest/developerguide/images/static-add-line-styling.png) ------ # Cómo agregar una ruta a un mapa estático En este tema, obtendrá información sobre cómo agregar una ruta a un mapa estático con Amazon Location Service. Repasará los pasos para obtener una ruta mediante la API de CalculateRoutes y, a continuación, la visualizará en un mapa estático mediante GeoJSON y un estilo personalizado para puntos y líneas. ## Pasos para agregar una ruta 1. Obtenga rutas desde la API de `CalculateRoutes`. Elimine las coordenadas que estén en la misma línea recta para optimizar LineString y evitar que la cadena de consulta alcance su límite. 1. Cree un objeto GeoJSON basado en el conjunto de coordenadas optimizado. 1. Tome el primer y el último punto del LineString y agregue geometrías de puntos para marcar las ubicaciones inicial y final. 1. Diseñe los puntos y el LineString de acuerdo con las necesidades de la empresa, ajustando propiedades como el color, el tamaño y las etiquetas. ## Agregación de una ruta con un estilo compacto En este ejemplo, agregará una ruta con puntos de inicio y final a la línea creada en [Cómo agregar una línea a un mapa estático](how-to-add-line-static.md). La ruta se definirá con un estilo personalizado, que incluirá el color, el tamaño y las etiquetas de los puntos inicial y final. ``` { "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/es_es/location/latest/developerguide/images/static-add-route-compact.png) ------ # Cómo agregar un polígono a un mapa estático Los edificios y las ubicaciones se pueden resaltar en un mapa designando un polígono a su alrededor, por ejemplo, el Pentágono (ubicado en Washington, D.C.). ## Agregación de un único polígono En este ejemplo, se agrega un polígono (un pentágono) para el edificio del Pentágono en el 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 ] ![\[Mapa de ejemplo que muestra un polígono alrededor del Pentágono.\]](http://docs.aws.amazon.com/es_es/location/latest/developerguide/images/mapsV2/addPolygonStaticMap.png) ------ ## Agregación de un polígono de estilo En este ejemplo, rediseñamos el polígono que se muestra en el ejemplo anterior. Dibujamos el polígono en un color diferente (**n.º E3F70550**). A continuación, explicamos los componentes del color. + **E3** representa el componente rojo. + **F7** representa el componente verde. + **05** representa el componente azul. + **50** representa el componente alfa (opacidad). ------ #### [ 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 ] ![\[Mapa de ejemplo que muestra un polígono de color diferente alrededor del Pentágono.\]](http://docs.aws.amazon.com/es_es/location/latest/developerguide/images/mapsV2/addPolygonStaticMap-color.png) ------ ## Agregación de varios polígonos En este ejemplo, agregamos varios polígonos para resaltar varios parques de la ciudad de Nueva 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 ] ![\[Mapa de ejemplo que muestra varios polígonos alrededor de los parques de Nueva York.\]](http://docs.aws.amazon.com/es_es/location/latest/developerguide/images/mapsV2/addPolygonStaticMap-multiple.png) ------ # Cómo configurar el idioma de los mapas estáticos Puede configurar el idioma de un mapa estático, en caso de que no desee utilizar el idioma predeterminado. En este ejemplo, se solicita en inglés una ubicación de Tokio que normalmente utiliza texto en japonés de forma predeterminada, lo que sobrescribe el valor predeterminado regional. El ejemplo muestra la imagen de respuesta de una solicitud en la que se proporciona el idioma y otra en la que no se proporciona el idioma. Las etiquetas correspondientes reflejan la diferencia entre un mapa que muestra el idioma solicitado y un mapa que muestra el idioma predeterminado. ------ #### [ 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 ] ![\[Mapa de ejemplo que muestra un polígono alrededor del Pentágono.\]](http://docs.aws.amazon.com/es_es/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 ] ![\[Mapa de ejemplo que muestra un polígono alrededor del Pentágono.\]](http://docs.aws.amazon.com/es_es/location/latest/developerguide/images/mapsV2/setLanguageDefaultStaticMap.png) ------ # Cómo agregar un círculo de proximidad a un mapa estático Los círculos de proximidad ofrecen información importante sobre la precisión de la ubicación de un dispositivo o usuario notificada o estimada. Al mostrar un círculo alrededor del punto indicado, se informa a los usuarios de que la posición real podría situarse en cualquier punto del círculo, debido a diversos factores que afectan a la precisión del posicionamiento. Esta mayor claridad ayuda a la toma de decisiones y mejora la seguridad de la navegación. En este ejemplo, se agrega un círculo de proximidad de 500 metros cerca de la Torre Eiffel de París. ------ #### [ 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 ] ![\[Mapa de ejemplo que muestra un círculo de proximidad alrededor de la Torre Eiffel.\]](http://docs.aws.amazon.com/es_es/location/latest/developerguide/images/mapsV2/addPproximityCircleStaticMap.png) ------ # Administración de costos y uso A medida que siga obteniendo información sobre los mapas de Amazon Location, es importante que sepa cómo administrar la capacidad del servicio, asegurarse de cumplir con los límites de uso y obtener los mejores resultados mediante las optimizaciones de cuotas y API. Al aplicar las prácticas recomendadas para garantizar el rendimiento y la precisión, puede personalizar la aplicación para gestionar las consultas relacionadas con el lugar de forma eficiente y maximizar las solicitudes de la API. **Topics** + [Prácticas recomendadas para Amazon Location Service](maps-best-practices.md) + [Precios de los mapas](maps-pricing.md) + [Quotas y uso de mapas](map-quota-and-usage.md) # Prácticas recomendadas para Amazon Location Service Al trabajar con Amazon Location Service, seguir las prácticas recomendadas garantiza que los mapas estén optimizados para mejorar el rendimiento, la precisión y la experiencia del usuario. En esta sección se describen las consideraciones clave para trabajar con mapas estáticos, límites geográficos y datos de GeoJSON para mejorar la funcionalidad y la visualización de los mapas. ## Mapas dinámicos A continuación, se muestran algunas prácticas recomendadas para trabajar con mapas dinámicos en Amazon Location Service. ### Optimización del renderizado con MapLibre Las siguientes son algunas de las funciones MapLibre que ayudan a optimizar la representación de los estilos de AWS mapa. Para obtener más información, consulte [AWS estilos y características del mapa](map-styles.md). #### Omisión de la validación del estilo Si utiliza el estilo de AWS mapa, `validateStyle` configúrelo en`false`. Esto desactivará la validación del estilo durante el tiempo de carga, lo que acelerará la carga inicial del mapa. La validación de estilos no es necesaria con los estilos de mapa de AWS , ya que están validados previamente. ------ #### [ 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`: Esto permite validar el estilo del mapa con respecto a la especificación de estilo MapLibre GL. Si hay algún problema con el estilo, se registrará en la consola. + Si lo establece en `false`, el mapa omitirá el proceso de validación del estilo, lo que podría provocar una carga más rápida, pero sin comprobar los errores. ------ #### Precalentamiento del mapa En el caso de las aplicaciones de una sola página (SPAs) que pueden crear y destruir el mapa varias veces a medida que el usuario navega por la aplicación, la función de precalentamiento puede reducir los retrasos en la recreación del mapa una vez destruido. Esta función solo se recomienda para. SPAs ## Mapas estáticos ### Límites, cuadro delimitador (cuadro) Cuando se trabaja con mapas y datos geográficos, es fundamental definir con precisión el cuadro delimitador (`bbox`) y los parámetros de límites, ya que determinan el área geográfica de interés. Cualquier imprecisión puede provocar resultados no deseados. **Garantía de unos límites precisos** Asegúrese de que los límites especificados representen con precisión la región que desea mostrar. Incluso las más pequeñas imprecisiones pueden recortar o excluir partes del área deseada, lo que iría en contra del propósito de la visualización. **Verificación del nivel de zoom adecuado** El nivel de zoom del mapa se calcula automáticamente en función de los límites o bbox especificados. Compruebe que el nivel de zoom resultante proporciona los detalles y la visibilidad adecuados para toda el área de interés. Si el zoom es demasiado alto o demasiado bajo, es posible que el mapa no transmita la información deseada de forma eficaz. **Comprobación de la visibilidad de la superposición personalizada** Cuando utilice bbox o límites con superposiciones personalizadas, como las características de GeoJSON, asegúrese de que la extensión de las características se encuentre dentro de la imagen del mapa resultante. Es posible que las características que se extiendan más allá de los límites se recorten u omitan, lo que provocará visualizaciones incompletas o engañosas. **Uso de relleno con bbox** Use bbox junto con el parámetro de rellenado para asegurarse de que las características del mapa cercanas a los bordes estén completamente visibles y no estén cortadas. Al definir con precisión los parámetros de bbox y límites, puede asegurarse de que los mapas representan correctamente el área geográfica deseada, proporcionan un nivel de detalle adecuado e incorporan capas de datos o superposiciones personalizadas de forma eficaz. ## GeoJSON Al utilizar datos de GeoJSON, la optimización de la cadena de consulta mediante la minimización del GeoJSON puede ayudarle a mantenerse dentro de los límites de las cadenas de consulta, especialmente en el caso de conjuntos de datos grandes. # Precios de los mapas Amazon Location Service ofrece precios competitivos para su API de mapas en función del tipo de solicitud de mapa y del número de llamadas a la API realizadas. En esta sección, se brinda una descripción general de la estructura de precios de los mapas dinámicos y estáticos. Para obtener información de precios detallada, consulte los [precios de Amazon Location Service](https://aws.amazon.com/location/pricing/). ## Mapas dinámicos El precio de la API de mapas se basa en la cantidad de mosaicos recuperados por la API de `GetTiles`. Otras API relacionadas con mapas, como `GetGlyphs`, `GetStyleDescriptor` y `GetSprites` son gratuitas. ## Imágenes de mapas estáticos El precio de las imágenes de mapas estáticos se basa en la cantidad de solicitudes realizadas en la API de `GetStaticMap`. Cada solicitud de una imagen de mapa estática se tiene en cuenta para el cálculo del precio. # Quotas y uso de mapas Amazon Location Service impone cuotas de servicio y límites de uso específicos para los mapas dinámicos y estáticos. Estos límites se establecen para garantizar un uso justo y la eficiencia del rendimiento para todos los usuarios. A continuación, se muestran las cuotas de servicio y los límites ajustables para cada servicio. ## Cuotas de servicio Amazon Location Service establece cuotas predeterminadas para ayudar APIs a gestionar la capacidad del servicio, que se pueden consultar en la [consola de administración de cuotas de AWS servicio](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas). Puede solicitar un aumento de las cuotas a través de la [consola de autoservicio](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas), para hasta el doble del límite predeterminado para cada API. Si los límites de cuota superan el doble del límite predeterminado, solicítelo en la consola de autoservicio y se le enviará automáticamente un ticket de soporte. Otra opción, contacte con el equipo de soporte prémium No se cobran cargos directos por las solicitudes de aumento de cuota, pero los niveles de uso más altos pueden conllevar un aumento de los costos del servicio en función de los recursos adicionales consumidos. Para obtener más información, consulte [Administración de cuotas con Service Quotas](manage-quotas.md). ### Mapa dinámico | Nombre de API | Predeterminado | Límite ajustable máximo | Más que el límite máximo ajustable | | --- | --- | --- | --- | | `GetTiles` | 2000 | 4000 | Solicitud en la [consola de cuotas de servicio](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas) o contacto con el equipo de soporte | ### Mapa estático | Nombre de API | Predeterminado | Límite ajustable máximo | Más que el límite máximo ajustable | | --- | --- | --- | --- | | `GetStaticMap` | 50 | 100 | Solicitud en la [consola de cuotas de servicio](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas) o contacto con el equipo de soporte | ## Límites de uso | Nombre de API | Límite | Valor | | --- | --- | --- | | `GetStyleDescriptor` | Número máximo de solicitudes, por segundo y por dirección IP. | 5000 | | `GetGlyphys` | Número máximo de solicitudes, por segundo y por dirección IP. | 5000 | | `GetSprites` | Número máximo de solicitudes, por segundo y por dirección IP. | 5000 | | `GetStaticMap` | Tamaño de la carga útil de respuesta después de la compresión. | 6 MB | | `GetTiles` | Tamaño de la carga útil de respuesta después de la compresión. | 6 MB | ## Términos Para obtener más información, consulte [Condiciones de uso y atribución de datos](data-attribution.md).