Seleccione sus preferencias de cookies

Usamos cookies esenciales y herramientas similares que son necesarias para proporcionar nuestro sitio y nuestros servicios. Usamos cookies de rendimiento para recopilar estadísticas anónimas para que podamos entender cómo los clientes usan nuestro sitio y hacer mejoras. Las cookies esenciales no se pueden desactivar, pero puede hacer clic en “Personalizar” o “Rechazar” para rechazar las cookies de rendimiento.

Si está de acuerdo, AWS y los terceros aprobados también utilizarán cookies para proporcionar características útiles del sitio, recordar sus preferencias y mostrar contenido relevante, incluida publicidad relevante. Para aceptar o rechazar todas las cookies no esenciales, haga clic en “Aceptar” o “Rechazar”. Para elegir opciones más detalladas, haga clic en “Personalizar”.

How to add an icon on the map

Modo de enfoque

En esta página

How to add an icon on the map - Amazon Location Service
Esta página no se ha traducido a su idioma. Solicitar traducción

Amazon Location Service enables you to add icons, preferably in PNG format, to the map. You can add icons to specific geolocations and style them as needed.

Add a static icon

In this example, you will use an external URL to add an icon to the map using a symbol layer.

index.html
<!DOCTYPE html> <html lang="en"> <head> <title>Static icon on map</title> <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." /> <meta charset='utf-8'> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.css' /> <link rel='stylesheet' href='style.css' /> <script src='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.js'></script> </head> <body> <!-- Map container --> <div id="map"></div> <script> const apiKey = "<API_KEY>"; const mapStyle = "Standard"; // e.g., Standard, Monochrome, Hybrid, Satellite const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc. const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`; const map = new maplibregl.Map({ container: 'map', // container id style: styleUrl, // style URL center: [-123.1144289, 49.2806672], // starting position [lng, lat] (e.g., Vancouver) zoom: 12, // starting zoom }); map.on('load', async () => { image = await map.loadImage('https://upload.wikimedia.org/wikipedia/commons/1/1e/Biking_other.png'); map.addImage('biking', image.data); map.addSource('point', { 'type': 'geojson', 'data': { 'type': 'FeatureCollection', 'features': [ { 'type': 'Feature', 'geometry': { 'type': 'Point', 'coordinates': [-123.1144289, 49.2806672] } } ] } }); map.addLayer({ 'id': 'points', 'type': 'symbol', 'source': 'point', 'layout': { 'icon-image': 'biking', 'icon-size': 0.25 } }); }); </script> </body> </html>
style.css
body { margin: 0; padding: 0; } html, body, #map { height: 100%; }

index.html
<!DOCTYPE html> <html lang="en"> <head> <title>Static icon on map</title> <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." /> <meta charset='utf-8'> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.css' /> <link rel='stylesheet' href='style.css' /> <script src='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.js'></script> </head> <body> <!-- Map container --> <div id="map"></div> <script> const apiKey = "<API_KEY>"; const mapStyle = "Standard"; // e.g., Standard, Monochrome, Hybrid, Satellite const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc. const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`; const map = new maplibregl.Map({ container: 'map', // container id style: styleUrl, // style URL center: [-123.1144289, 49.2806672], // starting position [lng, lat] (e.g., Vancouver) zoom: 12, // starting zoom }); map.on('load', async () => { image = await map.loadImage('https://upload.wikimedia.org/wikipedia/commons/1/1e/Biking_other.png'); map.addImage('biking', image.data); map.addSource('point', { 'type': 'geojson', 'data': { 'type': 'FeatureCollection', 'features': [ { 'type': 'Feature', 'geometry': { 'type': 'Point', 'coordinates': [-123.1144289, 49.2806672] } } ] } }); map.addLayer({ 'id': 'points', 'type': 'symbol', 'source': 'point', 'layout': { 'icon-image': 'biking', 'icon-size': 0.25 } }); }); </script> </body> </html>
style.css
body { margin: 0; padding: 0; } html, body, #map { height: 100%; }
<!DOCTYPE html> <html lang="en"> <head> <title>Static icon on map</title> <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." /> <meta charset='utf-8'> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.css' /> <link rel='stylesheet' href='style.css' /> <script src='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.js'></script> </head> <body> <!-- Map container --> <div id="map"></div> <script> const apiKey = "<API_KEY>"; const mapStyle = "Standard"; // e.g., Standard, Monochrome, Hybrid, Satellite const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc. const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`; const map = new maplibregl.Map({ container: 'map', // container id style: styleUrl, // style URL center: [-123.1144289, 49.2806672], // starting position [lng, lat] (e.g., Vancouver) zoom: 12, // starting zoom }); map.on('load', async () => { image = await map.loadImage('https://upload.wikimedia.org/wikipedia/commons/1/1e/Biking_other.png'); map.addImage('biking', image.data); map.addSource('point', { 'type': 'geojson', 'data': { 'type': 'FeatureCollection', 'features': [ { 'type': 'Feature', 'geometry': { 'type': 'Point', 'coordinates': [-123.1144289, 49.2806672] } } ] } }); map.addLayer({ 'id': 'points', 'type': 'symbol', 'source': 'point', 'layout': { 'icon-image': 'biking', 'icon-size': 0.25 } }); }); </script> </body> </html>
PrivacidadTérminos del sitioPreferencias de cookies
© 2025, Amazon Web Services, Inc o sus afiliados. Todos los derechos reservados.