Comment ajouter une icône sur la carte - Amazon Location Service
Ajouter une icône statique

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Comment ajouter une icône sur la carte

Amazon Location Service vous permet d'ajouter des icônes, de préférence au format PNG, à la carte. Vous pouvez ajouter des icônes à des géolocalisations spécifiques et les personnaliser selon vos besoins.

Ajouter une icône statique

Dans cet exemple, vous allez utiliser une URL externe pour ajouter une icône à la carte à l'aide d'une couche de symboles.

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%; }