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'] ]; }; ``` ------ ## Définissez la langue préférée en fonction de la langue du navigateur de l'utilisateur final Dans cet exemple, vous allez définir le style de mise à jour pour afficher les étiquettes des cartes dans la langue de l'appareil de l'utilisateur. ### Définir la langue préférée en fonction de l'exemple de langue du navigateur ------ #### [ 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'] ]; }; ``` ------ # Comment définir le point de vue politique d'une carte Amazon Location Service vous permet de définir le point de vue politique afin de garantir que votre demande est conforme aux lois locales. Vous pouvez définir un point de vue politique et comparer des cartes selon différents points de vue politiques. **Note** Pour de plus amples informations, veuillez consulter [Localisation et internationalisation](maps-localization-internationalization.md). ## Définir un point de vue politique et comparer avec le point de vue international Dans cet exemple, vous allez créer et comparer des cartes selon deux points de vue politiques différents : une perspective internationale et le point de vue de la Turquie sur Chypre. ### Exemple de comparaison d'opinions politiques ------ #### [ 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%; } ``` ------ # Comment filtrer les POI sur la carte Amazon Location Service vous permet de sélectionner les catégories de POI (point-of-interest) correspondant à votre cas d'utilisation. En savoir plus sur le style de carte standard, [Rich POI](https://docs.aws.amazon.com/location/latest/developerguide/standard-map-style.html#rich-poi) ## Filtre POI Dans cet exemple, vous affichez une carte interactive qui permet aux utilisateurs de filtrer selon les catégories 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; } ``` ------ # Comment créer des cartes topographiques Amazon Location Service vous permet de créer des cartes topographiques à l'aide des fonctionnalités de densité du terrain et des contours pour visualiser les changements d'altitude et les caractéristiques géographiques. ## Afficher Hillshade La fonction Terrain vous permet de visualiser l'ombre des collines, les changements d'altitude et les caractéristiques géographiques associées. ### Exemple Hillshade ------ #### [ index.html ] ``` Terrain Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } html, body, #map { height: 100%; } ``` ------ ## Afficher l'altitude à l'aide des lignes de densité de contour Amazon Location Service vous permet d'ajouter des fonctionnalités de densité de contour à votre carte. Cela permet de visualiser l'inclinaison géographique et les changements d'altitude. ### Exemple de densité de contour ------ #### [ index.html ] ``` Contour Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } html, body, #map { height: 100%; } ``` ------ ## Afficher à la fois les lignes de densité Hillshade et Contour Avec Amazon Location Service, vous pouvez combiner les fonctionnalités Hillshade et Contour Density sur votre carte pour une visualisation complète du terrain. Cela permet une meilleure perception de la profondeur et une compréhension complète des variations topographiques et des caractéristiques du terrain. ### Exemple d'ombrage avec densité de contour ------ #### [ index.html ] ``` Hillshade and Contour Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } html, body, #map { height: 100%; } ``` ------ # Comment afficher le trafic en temps réel sur une carte À l'aide d'Amazon Location Service, vous pouvez ajouter des fonctionnalités relatives au trafic sur votre carte. Cela fournit des données de trafic en temps réel pour montrer les conditions de circulation actuelles, telles que les embouteillages actuels, les travaux de construction et les incidents, vous aidant ainsi à choisir votre itinéraire. ## Créez une carte avec le trafic en temps réel Cet exemple montre comment créer une carte avec des données de trafic en temps réel. ### Exemple de trafic en temps réel ------ #### [ index.html ] ``` Traffic Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # Comment créer une carte logistique TravelModes Cette fonctionnalité vous permet de créer des cartes logistiques à l'aide d'Amazon Location Service. TravelModes affiche les informations d'itinéraire pertinentes pour la navigation des camions avec les restrictions routières associées. Utilisez [Transit TravelMode](https://docs.aws.amazon.com/location/latest/developerguide/how-to-show-transit-details-map.html) pour afficher les détails des transports en commun. ## Créez une carte avec Truck TravelMode Cet exemple montre comment créer une carte `Truck` `TravelMode` pour le routage logistique. ### Exemple de camion ------ #### [ index.html ] ``` Truck Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # Comment afficher les détails du transport en commun sur une carte Amazon Location Service vous permet d'ajouter des fonctionnalités de transport en commun aux cartes. `Transit``TravelMode`Affiche les informations d'itinéraire pour le transport en commun, telles que les lignes de train codées par couleur. Vérifiez également comment configurer la [logistique TravelMode](https://docs.aws.amazon.com/location/latest/developerguide/how-to-create-logistic-map.html) pour des options supplémentaires. ## Créez une carte avec les détails du transport en commun Cet exemple montre comment créer une carte avec les détails du transport en commun avec Transit TravelMode pour les transports en commun. ### Exemple de transit ------ #### [ index.html ] ``` Transit Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # Comment créer une carte 3D Amazon Location Service vous permet d'ajouter des fonctionnalités tridimensionnelles aux cartes, par exemple `Terrain3D` pour afficher les données altimétriques sous forme de surface tridimensionnelle ou `Buildings3D` pour afficher des structures urbaines en hauteur et en volume. ## Créez une carte avec des détails de terrain en trois dimensions Cet exemple montre comment créer une carte avec un `Terrain3D` paramètre. ### Exemple de Terrain3D ------ #### [ index.html ] ``` 3D Terrain

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ ## Créez une carte avec les détails des bâtiments en trois dimensions Cet exemple montre comment créer une carte avec un `Buildings3D` paramètre. ### Exemple de bâtiments 3D ------ #### [ index.html ] ``` 3D Buildings

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ ## Activer/désactiver l'affichage du globe Cet exemple montre comment activer ou désactiver la projection en vue du globe. Par défaut, la vue Globe est activée. ### Exemple de vue du globe ------ #### [ index.html ] ``` Globe View

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # Comment utiliser des cartes statiques Ces rubriques pratiques fournissent des step-by-step conseils pour personnaliser des cartes statiques avec des superpositions et des éléments visuels, en utilisant les fonctionnalités cartographiques d'Amazon Location Service. Chaque guide vous explique les tâches clés, telles que le réglage des dimensions de la carte, le choix entre le zoom ou le rayon et l'ajout de divers éléments géospatiaux tels que des marqueurs, des polygones, des lignes et des cercles de proximité. Ces guides utilisent à la fois le format compact et le format GeoJSON pour garantir la flexibilité du style et de la configuration. Que vous optiez des cartes pour des applications destinées aux clients ou que vous réalisiez des analyses géospatiales, ces rubriques fournissent des instructions claires pour adapter vos cartes statiques à des exigences spécifiques. En suivant les exemples détaillés, vous apprendrez à améliorer les présentations cartographiques et à gérer efficacement les données géographiques pour répondre à divers besoins commerciaux. **Topics** + [Comment obtenir une carte statique d'une position spécifique](get-static-map-specific-position.md) + [Comment obtenir une carte statique d'une dimension spécifique](get-static-map-specific-dimension.md) + [Comment choisir entre le rayon et le zoom pour une carte statique](choose-radius-vs-zoom.md) + [Comment ajouter de l'échelle à une carte statique](add-scale-static-map.md) + [Comment ajouter un marqueur sur une carte statique](add-marker-static-map.md) + [Comment ajouter une ligne à une carte statique](how-to-add-line-static.md) + [Comment ajouter un itinéraire à une carte statique](how-to-add-route.md) + [Comment ajouter un polygone à une carte statique](how-to-add-polygon-static.md) + [Comment définir la langue pour les cartes statiques](set-language-static-map.md) + [Comment ajouter un cercle de proximité à une carte statique](how-to-add-proximity-circle.md) # Comment obtenir une carte statique d'une position spécifique Dans cette rubrique, vous allez apprendre à récupérer des cartes statiques depuis Amazon Location Service en fonction de paramètres spécifiques. Vous allez apprendre à générer une carte statique pour une position centrale, un cadre de délimitation et un ensemble de positions délimitées. Les exemples fournis vous aideront à personnaliser la largeur, la hauteur et le style de la carte. **Note** Vous devez réussir l'une `map` ou l'autre ou `map@2x` lors de la génération d'une carte statique. ## Obtenir une image cartographique pour une position centrale Dans cet exemple, vous allez créer une image de carte avec une largeur `1024` et une hauteur de`1024`, les coordonnées centrales étant définies à`-123.1143,49.2763`, où `longitude=-123.1143` et`latitude=49.2763`, et un niveau 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/fr_fr/location/latest/developerguide/images/static-center.png) ------ ## Obtenir une image cartographique pour le cadre de délimitation Dans cet exemple, vous allez générer une image cartographique de l'Asie du Sud-Est en définissant le cadre de délimitation de la zone. Le `bbox` format est`{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/fr_fr/location/latest/developerguide/images/static-bounding-box.png) ------ ## Obtenir une image cartographique pour les positions délimitées Dans cet exemple, vous allez générer une carte qui couvre plusieurs lieux incontournables de Paris, chacun étant précisé par ses coordonnées (longitude, latitude). Les positions délimitées incluent : la tour Eiffel, le musée du Louvre, la cathédrale Notre-Dame, les Champs-Élysées, l'Arc de Triomphe, la basilique du Sacré-Cœur, les jardins du Luxembourg, le musée d'Orsay, la place de la Concorde et le Palais Garnier. Le format des positions de délimitation est`{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/fr_fr/location/latest/developerguide/images/static-bounding-position.png) ------ # Comment obtenir une carte statique d'une dimension spécifique Dans cette rubrique, vous allez apprendre à définir les dimensions (hauteur et largeur) des cartes statiques à l'aide d'Amazon Location Service. La personnalisation des dimensions d'une image de carte vous permet d'équilibrer les performances, la qualité visuelle et la facilité d'utilisation. Les valeurs maximales pour les deux `height` sont `width` de 1 400 pixels, tandis que les valeurs minimales sont de 64 pixels. La taille maximale des résultats est de 6 Mo. En outre, vous pouvez utiliser les `bounds` paramètres `bbox` et pour vous `padding` assurer que les entités cartographiques importantes situées à proximité des bords sont entièrement visibles et ne sont pas coupées. ## Obtenir une image de carte avec une hauteur et une largeur spécifiques Dans cet exemple, vous allez créer une image cartographique en basse et moyenne résolution d'Helsinki, en Finlande. ------ #### [ 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/fr_fr/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/fr_fr/location/latest/developerguide/images/static-specific-dimension-mid.png) ------ ## Obtenez une image de carte avec un rembourrage sur tous les côtés Dans cet exemple, vous allez générer une carte utilisant plusieurs lieux incontournables d'Helsinki, en Finlande, avec leurs coordonnées (longitude, latitude), avec ou sans rembourrage. ------ #### [ 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/fr_fr/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/fr_fr/location/latest/developerguide/images/static-specific-dimension-no-padding.png) ------ # Comment choisir entre le rayon et le zoom pour une carte statique Dans cette rubrique, vous allez apprendre à choisir entre utiliser `radius` ou `zoom` générer des cartes statiques avec Amazon Location Service. `radius`Ce paramètre permet un contrôle plus précis de la zone de couverture, ce qui le rend idéal pour les applications destinées aux clients où vous connaissez la zone de couverture exacte. Le `zoom` paramètre convient mieux à l'analyse géospatiale lorsque vous souhaitez ajuster le niveau de détail affiché. ## Avec rayon Dans cet exemple, vous allez créer une image cartographique du Sri Lanka à l'aide du `radius` paramètre avec un emplacement 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/fr_fr/location/latest/developerguide/images/static-radius.png) ------ ## Avec zoom Dans cet exemple, vous allez créer une image cartographique du Sri Lanka à l'aide du `zoom` paramètre avec un emplacement 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/fr_fr/location/latest/developerguide/images/static-zoom.png) ------ # Comment ajouter de l'échelle à une carte statique Dans cette rubrique, vous allez apprendre à afficher une échelle dans le coin inférieur droit d'une carte statique générée avec Amazon Location Service. L'échelle peut afficher une seule unité, telle que `Miles` ou`Kilometers`, ou les deux unités, telles que `KilometersMiles` ou`MilesKilometers`, une unité étant affichée en haut et l'autre en bas. ## Ajouter une échelle avec une seule unité Dans cet exemple, vous allez afficher une carte d'Helsinki, en Finlande, dont l'échelle est définie sur `Kilometers` le coin inférieur droit. ------ #### [ 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/fr_fr/location/latest/developerguide/images/static-scale-single.png) ------ ## Ajouter une échelle avec les deux unités Dans cet exemple, vous allez afficher une carte d'Helsinki, en Finlande, avec `Kilometers` `Miles` les deux, sur l'échelle située dans le coin inférieur droit, une unité étant affichée au-dessus de l'autre. ------ #### [ 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/fr_fr/location/latest/developerguide/images/static-scale-both.png) ------ # Comment ajouter un marqueur sur une carte statique Dans cette rubrique, vous allez apprendre à ajouter des marqueurs aux cartes statiques générées avec Amazon Location Service. Vous pouvez personnaliser l'icône, l'étiquette, la taille, la couleur et les autres options de style du marqueur. Cela vous permet de mettre en évidence des emplacements spécifiques à l'aide de repères visuels correspondant à l'objectif de votre carte. ## Style du marqueur | Nom | Type | Par défaut | Description | | --- | --- | --- | --- | | `style` | Chaîne | `marker` | Style de la géométrie des points. Pour créer un marqueur, définissez la valeur sur `marker` ou n'incluez pas l'`style`attribut dans l'objet properties du GeoJSON. | | `icon` | Chaîne | `pin` | Type d'icône du marqueur. Les valeurs disponibles incluent : `cp` (cercle de proximité)`diamond`,`pin`,`poi`,`square`,`triangle`,`bubble`. | | `label` | Chaîne | `` | Le texte à afficher aux coordonnées. Pour définir des libellés automatiques, utilisez les valeurs suivantes : `$alpha` (alphabet latin) ou `$num` (chiffres arabes). | | `color` | Couleur | Dépend du style | La couleur de l'icône. | | `outline-color` | Couleur | Dépend du style | Couleur du contour de l'icône. | | `text-color` | Couleur | Dépend du style | Couleur du texte de l'étiquette. | | `text-outline-color` | Couleur | Dépend du style | Couleur du contour du texte. | | `outline-width` | Entier | `0`(désactivé) | Largeur du contour du texte. | | `size` | Chaîne | `medium` | Taille de l'étiquette et de l'icône. Valeurs disponibles :`small`,`medium`,`large`. | ## Ajouter un marqueur à une image de carte Dans cet exemple, vous allez placer un marqueur avec une étiquette sur l'image cartographique 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 ] Avec la superposition 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/fr_fr/location/latest/developerguide/images/static-add-marker.png) ------ ## Ajouter plusieurs marqueurs à une image de carte Dans cet exemple, vous allez ajouter des marqueurs pour les lieux incontournables d'Helsinki, en Finlande, en utilisant leurs coordonnées (longitude, latitude). Vous pouvez également appliquer un rembourrage pour vous assurer que la carte intègre correctement tous les marqueurs. **Note** Le type d'icône de marqueur disponible inclut : `cp` pour le cercle de proximité,`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/fr_fr/location/latest/developerguide/images/static-add-multi-markers.png) ------ ## Modifier la couleur du marqueur dans une image de carte Dans cet exemple, vous allez utiliser des marqueurs à bulles de différentes couleurs pour représenter des villes du monde entier. Vous pouvez personnaliser la couleur, l'étiquette et les autres propriétés du marqueur en fonction du contexte de votre carte. `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/fr_fr/location/latest/developerguide/images/static-change-marker-color.png) ------ # Comment ajouter une ligne à une carte statique Dans cette rubrique, vous allez apprendre à ajouter une ligne à une carte statique à l'aide d'Amazon Location Service. Nous aborderons les options de style prises en charge, comment définir une ligne à l'aide de GeoJSON et comment appliquer des styles personnalisés tels que la couleur, la largeur et le contour. Nous verrons également comment utiliser différentes unités de mesure pour des propriétés telles que la largeur de ligne. ## Style pris en charge | Nom | Type | Par défaut | Description | | --- | --- | --- | --- | | `color` | Couleur | dépend du style | La couleur de la ligne. | | `width` | Entier/Chaîne | 2 | La largeur de la ligne. Pour de plus amples informations, veuillez consulter [Comment ajouter une ligne à une carte statique](#how-to-add-line-static). | | `outline-color` | Couleur | dépend du style | Couleur du contour de la ligne. | | `outline-width` | Entier/Chaîne | 0 (désactivé) | Largeur du contour. Pour de plus amples informations, veuillez consulter [Comment ajouter une ligne à une carte statique](#how-to-add-line-static). | ## Unité prise en charge | Unit | Description | | --- | --- | | Nombre entier, par exemple, `5` | Pixels | | Chaîne sans unité, par exemple `"5"` | Pixels | | `"px"` | Pixels | | `"m"` | Compteurs | | `"km"` | Kilomètres | | `"mi"` | Miles | | `"ft"` | Pieds | | `"yd"` | Yards | | `"%"` | Pourcentage de la valeur par défaut pour une propriété spécifique, en pixels. Par exemple, si la valeur par défaut de `width` est `2` pixels, elle `200%` est `4` pixels. `%`est un caractère sensible qui doit être encodé dans l'URL de demande sous la forme`%25`. | ## Ajouter une ligne Dans cet exemple, vous allez ajouter une ligne entre un lieu de Vancouver et le parc Stanley. La ligne est créée à l'aide d'un format GeoJSON avec des coordonnées définies. ------ #### [ 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/fr_fr/location/latest/developerguide/images/static-add-line.png) ------ ## Ajoutez du style à la ligne Dans cet exemple, vous allez styliser la ligne ajoutée dans l'exemple précédent. Cela inclut la définition de la couleur, de la largeur, de la couleur du contour et de la largeur du contour pour personnaliser l'apparence visuelle de la ligne sur la carte. ------ #### [ 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/fr_fr/location/latest/developerguide/images/static-add-line-styling.png) ------ # Comment ajouter un itinéraire à une carte statique Dans cette rubrique, vous allez apprendre à ajouter un itinéraire à une carte statique à l'aide d'Amazon Location Service. Vous allez suivre les étapes pour obtenir un itinéraire à l'aide de l' CalculateRoutes API, puis le visualiser sur une carte statique à l'aide de GeoJSON et d'un style personnalisé pour les points et les lignes. ## Étapes pour ajouter un itinéraire 1. Obtenez des itinéraires à partir de l'`CalculateRoutes`API. Supprimez les coordonnées situées sur la même ligne droite pour les optimiser LineString, afin d'empêcher la chaîne de requête d'atteindre sa limite. 1. Créez un objet GeoJSON en fonction de l'ensemble de coordonnées optimisé. 1. Prenez le premier et le dernier point LineString et ajoutez-y des géométries de points pour marquer les emplacements de départ et de fin. 1. Personnalisez les points en LineString fonction des besoins de votre entreprise, en ajustant les propriétés telles que la couleur, la taille et les étiquettes. ## Ajouter un itinéraire en utilisant un style compact Dans cet exemple, vous allez ajouter un itinéraire avec des points de départ et d'arrivée à la ligne créée dans[Comment ajouter une ligne à une carte statique](how-to-add-line-static.md). L'itinéraire sera défini avec un style personnalisé, notamment en termes de couleur, de taille et d'étiquettes pour les points de départ et d'arrivée. ``` { "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/fr_fr/location/latest/developerguide/images/static-add-route-compact.png) ------ # Comment ajouter un polygone à une carte statique Les bâtiments et les emplacements peuvent être mis en évidence sur une carte en désignant un polygone autour d'eux, par exemple le Pentagone (situé à Washington, D.C.). ## Ajouter un seul polygone Dans cet exemple, vous ajoutez un polygone (un pentagone) pour le bâtiment du Pentagone sur la carte. ------ #### [ 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 ] ![\[Exemple de carte montrant un polygone autour du Pentagone.\]](http://docs.aws.amazon.com/fr_fr/location/latest/developerguide/images/mapsV2/addPolygonStaticMap.png) ------ ## Ajouter un polygone de style Dans cet exemple, nous restylons le polygone illustré dans l'exemple précédent. Nous dessinons le polygone dans une couleur différente (**\$1E3F70550**). Les composantes de couleur sont les suivantes. + **E3** représente la composante rouge. + **F7** représente la composante verte. + **05** représente la composante bleue. + **50** représente le composant alpha (opacité). ------ #### [ 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 ] ![\[Exemple de carte montrant un polygone de couleur différente autour du Pentagone.\]](http://docs.aws.amazon.com/fr_fr/location/latest/developerguide/images/mapsV2/addPolygonStaticMap-color.png) ------ ## Ajouter plusieurs polygones Dans cet exemple, nous ajoutons plusieurs polygones pour mettre en évidence plusieurs parcs de New 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 ] ![\[Exemple de carte montrant plusieurs polygones autour des parcs de New York.\]](http://docs.aws.amazon.com/fr_fr/location/latest/developerguide/images/mapsV2/addPolygonStaticMap-multiple.png) ------ # Comment définir la langue pour les cartes statiques Vous pouvez définir la langue d'une carte statique, au cas où vous ne souhaiteriez pas utiliser la langue par défaut. Dans cet exemple, un emplacement à Tokyo qui utilise généralement le texte japonais par défaut est demandé en anglais, remplaçant ainsi le texte régional par défaut. L'exemple montre l'image de réponse pour une demande où la langue est fournie et une autre où la langue n'est pas fournie. Les étiquettes correspondantes reflètent la différence entre une carte indiquant la langue demandée et une carte indiquant la langue par défaut. ------ #### [ 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 ] ![\[Exemple de carte montrant un polygone autour du Pentagone.\]](http://docs.aws.amazon.com/fr_fr/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 ] ![\[Exemple de carte montrant un polygone autour du Pentagone.\]](http://docs.aws.amazon.com/fr_fr/location/latest/developerguide/images/mapsV2/setLanguageDefaultStaticMap.png) ------ # Comment ajouter un cercle de proximité à une carte statique Les cercles de proximité fournissent des informations importantes sur la précision d'un appareil ou d'une estimation de la position d'un utilisateur ou d'un appareil indiqué. En montrant un cercle autour du point signalé, les utilisateurs sont informés que la position réelle peut se situer n'importe où dans le cercle, en raison de divers facteurs affectant la précision du positionnement. Cette clarté accrue facilite la prise de décisions et améliore la sécurité de la navigation. Dans cet exemple, vous ajoutez un cercle de proximité de 500 mètres près de la tour Eiffel à Paris. ------ #### [ 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 ] ![\[Exemple de carte montrant un cercle de proximité autour de la tour Eiffel.\]](http://docs.aws.amazon.com/fr_fr/location/latest/developerguide/images/mapsV2/addPproximityCircleStaticMap.png) ------ # Gérez les coûts et l'utilisation Au fur et à mesure que vous découvrez les cartes de localisation Amazon, il est important de comprendre comment gérer la capacité des services, vous assurer de respecter les limites d'utilisation et obtenir les meilleurs résultats grâce à l'optimisation des quotas et des API. En appliquant les meilleures pratiques en matière de performances et de précision, vous pouvez adapter votre application pour gérer efficacement les requêtes liées au lieu et optimiser vos demandes d'API. **Topics** + [Bonnes pratiques pour Amazon Location Service](maps-best-practices.md) + [Tarifs des cartes](maps-pricing.md) + [Quotas et utilisation de la carte](map-quota-and-usage.md) # Bonnes pratiques pour Amazon Location Service Lorsque vous travaillez avec Amazon Location Service, le respect des meilleures pratiques garantit l'optimisation des performances, de la précision et de l'expérience utilisateur de vos cartes. Cette section décrit les principales considérations relatives à l'utilisation de cartes statiques, de limites géographiques et de données GeoJSON afin d'améliorer les fonctionnalités et la visualisation des cartes. ## Cartes dynamiques Voici quelques bonnes pratiques relatives à l'utilisation de cartes dynamiques dans Amazon Location Service. ### Optimisation du rendu avec MapLibre Voici quelques fonctionnalités MapLibre qui permettent d'optimiser le rendu pour les styles de AWS carte. Pour de plus amples informations, veuillez consulter [AWS styles et fonctionnalités de carte](map-styles.md). #### Ignorer la validation du style Si vous utilisez le style de AWS carte, définissez `validateStyle` sur`false`. Cela désactivera la validation du style au moment du chargement, accélérant ainsi le chargement initial de la carte. La validation de style n'est pas nécessaire avec les styles de AWS carte, car ils sont prévalidés. ------ #### [ 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`: Cela permet de valider le style de carte par rapport à la spécification de style MapLibre GL. En cas de problème de style, ils seront enregistrés dans la console. + Si vous définissez ce paramètre sur`false`, la carte ignorera le processus de validation du style, ce qui peut accélérer le chargement, mais sans vérification des erreurs. ------ #### Préchauffez la carte Pour les applications d'une seule page (SPAs) susceptibles de créer et de détruire la carte plusieurs fois lorsque l'utilisateur navigue dans l'application, la fonction de préchauffage permet de réduire les délais de recréation de la carte après sa destruction. Cette fonctionnalité n'est recommandée que pour SPAs. ## Cartes statiques ### Limites, cadre de délimitation (boîte) Lorsque vous travaillez avec des cartes et des données géographiques, il est crucial de définir avec précision le cadre de délimitation (`bbox`) et les paramètres des limites, car ils déterminent la zone géographique d'intérêt. Toute inexactitude peut entraîner des résultats indésirables. **Garantir des limites précises** Assurez-vous que les limites spécifiées représentent précisément la région que vous souhaitez afficher. Même de légères inexactitudes peuvent recadrer ou exclure des parties de la zone souhaitée, ce qui va à l'encontre de l'objectif de la visualisation. **Vérifiez le niveau de zoom approprié** Le niveau de zoom de la carte est automatiquement calculé en fonction des limites ou de la case spécifiées. Vérifiez que le niveau de zoom obtenu fournit des détails et une visibilité appropriés pour l'ensemble de la zone d'intérêt. Si le zoom est trop élevé ou trop faible, la carte risque de ne pas transmettre efficacement les informations souhaitées. **Vérifiez la visibilité personnalisée de la superposition** Lorsque vous utilisez bbox ou bounds avec des superpositions personnalisées telles que des entités GeoJSON, assurez-vous que l'étendue des entités correspond à l'image cartographique obtenue. Les fonctionnalités s'étendant au-delà des limites peuvent être supprimées ou omises, ce qui entraîne des visualisations incomplètes ou trompeuses. **Utiliser un rembourrage avec bbox** Utilisez la bbox avec le paramètre de remplissage pour vous assurer que les entités cartographiques situées à proximité des bords sont entièrement visibles et ne sont pas coupées. En définissant avec précision les paramètres bbox et bounds, vous pouvez vous assurer que vos cartes représentent correctement la zone géographique souhaitée, fournissent un niveau de détail approprié et incorporent efficacement des superpositions ou des couches de données personnalisées. ## GeoJSON Lorsque vous utilisez des données GeoJSON, l'optimisation de la chaîne de requête en réduisant le GeoJSON peut vous aider à respecter les limites des chaînes de requête, en particulier pour les grands ensembles de données. # Tarifs des cartes Amazon Location Service propose des tarifs compétitifs pour son API Maps en fonction du type de demande de carte et du nombre d'appels d'API effectués. Cette section fournit une vue d'ensemble de la structure tarifaire pour les cartes dynamiques et statiques. Pour obtenir des informations détaillées sur les tarifs, consultez les [tarifs d'Amazon Location Service](https://aws.amazon.com/location/pricing/). ## Cartes dynamiques Le prix de l'API Maps est basé sur le nombre de vignettes récupérées par l'`GetTiles`API D'autres informations liées à la carte APIs `GetGlyphs``GetStyleDescriptor`, telles que, et `GetSprites` sont gratuites. ## Images cartographiques statiques La tarification des images cartographiques statiques est basée sur le nombre de demandes adressées à l'`GetStaticMap`API. Chaque demande d'image cartographique statique est prise en compte dans le calcul du prix. # Quotas et utilisation de la carte Amazon Location Service impose des quotas de service et des limites d'utilisation spécifiques pour les cartes dynamiques et statiques. Ces limites sont mises en place pour garantir une utilisation équitable et une efficacité des performances pour tous les utilisateurs. Vous trouverez ci-dessous les quotas de service et les limites ajustables pour chaque service. ## Quotas de service Amazon Location Service définit des quotas par défaut APIs pour faciliter la gestion de la capacité du service, qui peuvent être consultés dans la [console de gestion des quotas de AWS service](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas). Vous pouvez demander une augmentation des quotas via la [console en libre-service](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas), jusqu'à deux fois la limite par défaut pour chaque API. Pour les limites de quota supérieures au double de la limite par défaut, faites une demande via la console de libre-service et elle soumettra automatiquement un ticket d'assistance. Vous pouvez également contacter votre équipe d'assistance premium. Les demandes d'augmentation de quota ne sont pas facturées directement, mais des niveaux d'utilisation plus élevés peuvent entraîner une augmentation des coûts de service en fonction des ressources supplémentaires consommées. Pour de plus amples informations, veuillez consulter [Gérez les quotas avec Service Quotas](manage-quotas.md). ### Carte dynamique | Nom de l’API | Par défaut | Limite maximale ajustable | Plus que la limite maximale ajustable | | --- | --- | --- | --- | | `GetTiles` | 2000 | 4000 | Demande sur la [console de quotas de service](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas) ou contactez l'équipe d'assistance | ### Carte statique | Nom de l’API | Par défaut | Limite maximale ajustable | Plus que la limite maximale ajustable | | --- | --- | --- | --- | | `GetStaticMap` | 50 | 100 | Demande sur la [console de quotas de service](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas) ou contactez l'équipe d'assistance | ## Limites d'utilisation | Nom de l’API | Limite | Value | | --- | --- | --- | | `GetStyleDescriptor` | Nombre maximum de demandes, par seconde, par adresse IP. | 5000 | | `GetGlyphys` | Nombre maximum de demandes, par seconde, par adresse IP. | 5000 | | `GetSprites` | Nombre maximum de demandes, par seconde, par adresse IP. | 5000 | | `GetStaticMap` | Taille de la charge utile de réponse après compression. | 6 Mo | | `GetTiles` | Taille de la charge utile de réponse après compression. | 6 Mo | ## Conditions Pour de plus amples informations, veuillez consulter [Conditions d'utilisation et attribution des données](data-attribution.md).