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'] ]; }; ``` ------ ## Imposta la lingua preferita in base alla lingua del browser dell'utente finale In questo esempio, imposterai lo stile di aggiornamento per mostrare le etichette delle mappe nella lingua del dispositivo dell'utente. ### Imposta la lingua preferita in base all'esempio della lingua del browser ------ #### [ 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'] ]; }; ``` ------ # Come impostare la visualizzazione politica di una mappa Amazon Location Service ti consente di impostare l'opinione politica per garantire che la tua applicazione sia conforme alle leggi locali. Puoi impostare una visione politica e confrontare mappe da diverse prospettive politiche. **Nota** Per ulteriori informazioni, consulta [Localizzazione e internazionalizzazione](maps-localization-internationalization.md). ## Stabilisci una visione politica e confrontala con la prospettiva internazionale In questo esempio, creerai e confronterai mappe con due diversi punti di vista politici: una prospettiva internazionale e la visione della Turchia su Cipro. ### Esempio di confronto tra opinioni politiche ------ #### [ 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%; } ``` ------ # Come filtrare i POI sulla mappa Amazon Location Service ti consente di selezionare le categorie di POI (point-of-interest) pertinenti al tuo caso d'uso. Scopri di più sullo stile di mappa standard, [Rich POI](https://docs.aws.amazon.com/location/latest/developerguide/standard-map-style.html#rich-poi) ## Filtra POI In questo esempio, viene visualizzata una mappa interattiva che consente agli utenti di filtrare in base alle categorie di 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; } ``` ------ # Come creare mappe topografiche Amazon Location Service ti consente di creare mappe topografiche utilizzando le funzionalità di densità del terreno e del contorno per visualizzare le variazioni di altitudine e le caratteristiche geografiche. ## Mostra Hillshade La funzione Terrain consente di visualizzare Hillshade, i cambiamenti di quota e le relative caratteristiche geografiche. ### Esempio di Hillshade ------ #### [ index.html ] ``` Terrain Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } html, body, #map { height: 100%; } ``` ------ ## Mostra l'elevazione con le linee Contour Density Amazon Location Service ti consente di aggiungere funzionalità Contour Density alla tua mappa. Ciò fornisce la visualizzazione della pendenza geografica e delle variazioni di altitudine. ### Esempio di densità del contorno ------ #### [ index.html ] ``` Contour Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } html, body, #map { height: 100%; } ``` ------ ## Mostra entrambe le linee Hillshade e Contour Density Con Amazon Location Service puoi combinare le funzionalità Hillshade e Contour Density sulla tua mappa per una visualizzazione completa del terreno. Ciò offre una migliore percezione della profondità e una comprensione completa delle variazioni topografiche e delle caratteristiche del terreno. ### Esempio di Hillshade con Contour Density ------ #### [ index.html ] ``` Hillshade and Contour Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } html, body, #map { height: 100%; } ``` ------ # Come mostrare il traffico in tempo reale su una mappa Utilizzando Amazon Location Service puoi aggiungere funzionalità di traffico alla tua mappa. Ciò fornisce dati sul traffico in tempo reale per mostrare le condizioni attuali del traffico, come la congestione stradale, i lavori in corso e gli incidenti, aiutandoti a fare scelte di percorso. ## Crea una mappa con il traffico in tempo reale Questo esempio mostra come creare una mappa con dati sul traffico in tempo reale. ### Esempio di traffico in tempo reale ------ #### [ index.html ] ``` Traffic Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # Come creare una mappa logistica La TravelModes funzionalità consente di creare mappe logistiche utilizzando Amazon Location Service. TravelModes visualizza le informazioni di percorso pertinenti per la navigazione degli autocarri con le relative restrizioni stradali. Usa [Transit TravelMode](https://docs.aws.amazon.com/location/latest/developerguide/how-to-show-transit-details-map.html) per mostrare i dettagli del trasporto pubblico. ## Crea una mappa con Truck TravelMode Questo esempio mostra come creare una mappa `Truck` `TravelMode` per il routing logistico. ### Esempio di camion ------ #### [ index.html ] ``` Truck Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # Come mostrare i dettagli del transito su una mappa Amazon Location Service ti consente di aggiungere funzionalità di transito alle mappe. `Transit``TravelMode`Visualizza informazioni sul percorso per il trasporto pubblico, come le linee ferroviarie con codice a colori. Controlla anche come impostare la [logistica TravelMode](https://docs.aws.amazon.com/location/latest/developerguide/how-to-create-logistic-map.html) per opzioni aggiuntive. ## Crea una mappa con i dettagli del transito Questo esempio mostra come creare una mappa con i dettagli del transito con Transit TravelMode for public transport. ### Esempio di transito ------ #### [ index.html ] ``` Transit Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # Come creare una mappa 3D Amazon Location Service ti consente di aggiungere funzionalità tridimensionali alle mappe, ad esempio visualizzare i dati di elevazione come una superficie tridimensionale o `Buildings3D` visualizzare strutture urbane con altezza e volume. `Terrain3D` ## Crea una mappa con dettagli tridimensionali del terreno Questo esempio mostra come creare una mappa con `Terrain3D` parametri. ### Esempio di Terrain3D ------ #### [ index.html ] ``` 3D Terrain

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ ## Crea una mappa con dettagli tridimensionali degli edifici Questo esempio mostra come creare una mappa con `Buildings3D` parametri. ### Esempio Buildings3D ------ #### [ index.html ] ``` 3D Buildings

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ ## Abilita/disabilita la visualizzazione Globe Questo esempio mostra come abilitare o disabilitare la proiezione Globe view. Per impostazione predefinita, la visualizzazione Globe è abilitata. ### Esempio di visualizzazione a globo ------ #### [ index.html ] ``` Globe View

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # Come usare le mappe statiche Questi argomenti pratici offrono step-by-step indicazioni per personalizzare mappe statiche con sovrapposizioni ed elementi visivi, utilizzando le funzionalità di mappatura di Amazon Location Service. Ogni guida illustra le attività principali, come la regolazione delle dimensioni della mappa, la scelta tra zoom o raggio e l'aggiunta di vari elementi geospaziali come indicatori, poligoni, linee e cerchi di prossimità. Queste guide utilizzano sia i formati compatti che quelli GeoJSON per garantire flessibilità nello stile e nella configurazione. Che si tratti di ottimizzare le mappe per applicazioni rivolte ai clienti o di eseguire analisi geospaziali, questi argomenti forniscono istruzioni chiare su come personalizzare le mappe statiche in base a requisiti specifici. Seguendo gli esempi dettagliati, imparerai come migliorare le presentazioni delle mappe e gestire in modo efficiente i dati geografici per una varietà di esigenze aziendali. **Topics** + [Come ottenere una mappa statica di una posizione specifica](get-static-map-specific-position.md) + [Come ottenere una mappa statica di una dimensione specifica](get-static-map-specific-dimension.md) + [Come decidere tra raggio e zoom per una mappa statica](choose-radius-vs-zoom.md) + [Come aggiungere una scala per una mappa statica](add-scale-static-map.md) + [Come aggiungere un marker a una mappa statica](add-marker-static-map.md) + [Come aggiungere una linea a una mappa statica](how-to-add-line-static.md) + [Come aggiungere un percorso a una mappa statica](how-to-add-route.md) + [Come aggiungere un poligono a una mappa statica](how-to-add-polygon-static.md) + [Come impostare la lingua per le mappe statiche](set-language-static-map.md) + [Come aggiungere un cerchio di prossimità a una mappa statica](how-to-add-proximity-circle.md) # Come ottenere una mappa statica di una posizione specifica In questo argomento, imparerai come recuperare mappe statiche da Amazon Location Service in base a parametri specifici. Imparerai come generare una mappa statica per una posizione centrale, un riquadro di delimitazione e un insieme di posizioni limitate. Gli esempi forniti ti aiuteranno a personalizzare la larghezza, l'altezza e lo stile della mappa. **Nota** È necessario passare uno dei due `map` valori o `map@2x` durante la generazione di una mappa statica. ## Ottieni l'immagine della mappa per una posizione centrale In questo esempio, creerai un'immagine della mappa con una larghezza `1024` e un'altezza di `1024` con le coordinate centrali impostate su`-123.1143,49.2763`, dove `longitude=-123.1143` e e `latitude=49.2763` un livello di zoom di`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/it_it/location/latest/developerguide/images/static-center.png) ------ ## Ottieni l'immagine della mappa per il riquadro di delimitazione In questo esempio, genererai un'immagine cartografica del Sud-est asiatico impostando il riquadro di delimitazione per l'area. Il `bbox` formato è`{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/it_it/location/latest/developerguide/images/static-bounding-box.png) ------ ## Ottieni l'immagine della mappa per le posizioni delimitate In questo esempio, genererai una mappa che copre diversi luoghi imperdibili di Parigi, ciascuno specificato dalle sue coordinate (longitudine, latitudine). Le posizioni delimitate includono: Torre Eiffel, Museo del Louvre, Cattedrale di Notre-Dame, Champs-Élysées, Arco di Trionfo, Basilica del Sacro Cuore, Giardini del Lussemburgo, Musée d'Orsay, Place de la Concorde e Palais Garnier. Il formato `{longitude1},{latitude1},{longitude2},{latitude2} ... {longitudeN},{latitudeN}` per le posizioni di delimitazione è. ------ #### [ 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/it_it/location/latest/developerguide/images/static-bounding-position.png) ------ # Come ottenere una mappa statica di una dimensione specifica In questo argomento, imparerai come impostare le dimensioni (altezza e larghezza) per le mappe statiche utilizzando Amazon Location Service. La personalizzazione delle dimensioni di un'immagine della mappa consente di bilanciare prestazioni, qualità visiva e usabilità. I valori massimi per entrambi `width` `height` sono 1400 pixel, mentre i valori minimi sono 64 pixel. La dimensione massima del risultato è 6 MB. Inoltre, puoi utilizzare i `bounds` parametri `bbox` and `padding` per assicurarti che gli elementi importanti della mappa vicino ai bordi siano completamente visibili e non tagliati. ## Ottieni un'immagine della mappa con altezza e larghezza specifiche In questo esempio, creerai un'immagine cartografica a bassa e media risoluzione di 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/it_it/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/it_it/location/latest/developerguide/images/static-specific-dimension-mid.png) ------ ## Ottieni un'immagine della mappa con imbottitura su tutti i lati In questo esempio, genererai una mappa utilizzando diversi luoghi imperdibili di Helsinki, in Finlandia, con le relative coordinate (longitudine, latitudine), con e senza padding. ------ #### [ 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/it_it/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/it_it/location/latest/developerguide/images/static-specific-dimension-no-padding.png) ------ # Come decidere tra raggio e zoom per una mappa statica In questo argomento, imparerai come scegliere `zoom` se utilizzare `radius` o generare mappe statiche con Amazon Location Service. Il `radius` parametro offre un controllo più preciso sull'area di copertura, il che lo rende ideale per le applicazioni rivolte ai clienti in cui si conosce l'area di copertura esatta. Il `zoom` parametro è più adatto per l'analisi geospaziale quando si desidera regolare il livello di dettaglio visualizzato. ## Con raggio In questo esempio, creerai un'immagine cartografica dello Sri Lanka utilizzando il `radius` parametro con una posizione centrale. ------ #### [ 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/it_it/location/latest/developerguide/images/static-radius.png) ------ ## Con zoom In questo esempio, creerai un'immagine cartografica dello Sri Lanka utilizzando il `zoom` parametro con una posizione centrale. ------ #### [ 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/it_it/location/latest/developerguide/images/static-zoom.png) ------ # Come aggiungere una scala per una mappa statica In questo argomento, imparerai come visualizzare una scala nell'angolo in basso a destra di una mappa statica generata con Amazon Location Service. La bilancia può mostrare una singola unità, ad esempio `Miles` o`Kilometers`, o entrambe le unità, ad esempio `KilometersMiles` o`MilesKilometers`, con un'unità visualizzata in alto e l'altra in basso. ## Aggiungi una scala con una singola unità In questo esempio, verrà visualizzata una mappa di Helsinki, in Finlandia, con la scala impostata nell'angolo `Kilometers` in basso a destra. ------ #### [ 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/it_it/location/latest/developerguide/images/static-scale-single.png) ------ ## Aggiungi la scala con entrambe le unità In questo esempio, visualizzerai una mappa di Helsinki, Finlandia con entrambi `Kilometers` e `Miles` mostrata sulla scala nell'angolo in basso a destra, con un'unità visualizzata sopra l'altra. ------ #### [ 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/it_it/location/latest/developerguide/images/static-scale-both.png) ------ # Come aggiungere un marker a una mappa statica In questo argomento, imparerai come aggiungere marker alle mappe statiche generate con Amazon Location Service. Puoi personalizzare l'icona, l'etichetta, la dimensione, il colore e altre opzioni di stile del marker. Ciò consente di evidenziare posizioni specifiche con segnali visivi in linea con lo scopo della mappa. ## Stile dei pennarelli | Nome | Tipo | Predefinito | Descrizione | | --- | --- | --- | --- | | `style` | Stringa | `marker` | Lo stile della geometria Point. Per creare un marker, imposta il valore su `marker` o non includi l'`style`attributo nell'oggetto properties di GeoJSON. | | `icon` | Stringa | `pin` | Il tipo di icona del marker. I valori disponibili includono: `cp` (cerchio di prossimità)`diamond`,`pin`,`poi`,, `square``triangle`,`bubble`. | | `label` | Stringa | `` | Il testo da visualizzare in corrispondenza delle coordinate. Per impostare etichette automatiche, utilizza i seguenti valori: `$alpha` (alfabeto latino) o `$num` (numeri arabi). | | `color` | Colore | Dipende dallo stile | Il colore dell'icona. | | `outline-color` | Colore | Dipende dallo stile | Il colore del contorno dell'icona. | | `text-color` | Colore | Dipende dallo stile | Il colore del testo dell'etichetta. | | `text-outline-color` | Colore | Dipende dallo stile | Il colore del contorno del testo. | | `outline-width` | Numero intero | `0`(disattivato) | La larghezza del contorno del testo. | | `size` | Stringa | `medium` | Dimensioni dell'etichetta e dell'icona. Valori disponibili:`small`,`medium`,`large`. | ## Aggiungere un marker a un'immagine della mappa In questo esempio, posizionerai un indicatore con un'etichetta sull'immagine della mappa di 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 l'overlay 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/it_it/location/latest/developerguide/images/static-add-marker.png) ------ ## Aggiungi più marker a un'immagine della mappa In questo esempio, aggiungerai degli indicatori per i luoghi imperdibili di Helsinki, in Finlandia, usando le loro coordinate (longitudine, latitudine). Puoi anche applicare il padding per assicurarti che la mappa contenga correttamente tutti i marker. **Nota** Il tipo di icona marker disponibile include: `cp` per il cerchio di prossimità,. `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/it_it/location/latest/developerguide/images/static-add-multi-markers.png) ------ ## Cambia il colore del marker in un'immagine della mappa In questo esempio, utilizzerai marcatori a bolle di diversi colori per rappresentare le città di tutto il mondo. È possibile personalizzare il colore, l'etichetta e altre proprietà del marker per adattarli al contesto della mappa. `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/it_it/location/latest/developerguide/images/static-change-marker-color.png) ------ # Come aggiungere una linea a una mappa statica In questo argomento, imparerai come aggiungere una linea a una mappa statica utilizzando Amazon Location Service. Tratteremo le opzioni di stile supportate, come definire una linea utilizzando GeoJSON e come applicare stili personalizzati come colore, larghezza e contorno. Esploreremo anche come utilizzare diverse unità di misura per proprietà come la larghezza della linea. ## Stile supportato | Nome | Tipo | Predefinito | Descrizione | | --- | --- | --- | --- | | `color` | Colore | dipende dallo stile | Il colore della linea. | | `width` | Intero/Stringa | 2 | La larghezza della linea. Per ulteriori informazioni, consulta [Come aggiungere una linea a una mappa statica](#how-to-add-line-static). | | `outline-color` | Colore | dipende dallo stile | Il colore del contorno della linea. | | `outline-width` | Intero/Stringa | 0 (disattivato) | La larghezza del contorno. Per ulteriori informazioni, consulta [Come aggiungere una linea a una mappa statica](#how-to-add-line-static). | ## Unità supportata | Unità | Descrizione | | --- | --- | | Numero intero, ad esempio `5` | Pixel | | Stringa senza unità, ad esempio `"5"` | Pixel | | `"px"` | Pixel | | `"m"` | Metri | | `"km"` | Chilometri | | `"mi"` | Chilometri | | `"ft"` | Piedi | | `"yd"` | Iarde | | `"%"` | La percentuale del valore predefinito per una proprietà specifica, in pixel. Ad esempio, se il valore predefinito per `width` è `2` pixel, allora `200%` è `4` pixel. `%`è un carattere sensibile che deve essere codificato nell'URL della richiesta come`%25`. | ## Aggiungi una riga In questo esempio, aggiungerai una linea da un luogo di Vancouver a Stanley Park. La linea viene creata utilizzando un formato GeoJSON con coordinate definite. ------ #### [ 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/it_it/location/latest/developerguide/images/static-add-line.png) ------ ## Aggiungi stile alla linea In questo esempio, applicherete uno stile alla linea aggiunta nell'esempio precedente. Ciò include la definizione del colore, della larghezza, del colore del contorno e della larghezza del contorno della linea per personalizzare l'aspetto visivo della linea sulla mappa. ------ #### [ 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/it_it/location/latest/developerguide/images/static-add-line-styling.png) ------ # Come aggiungere un percorso a una mappa statica In questo argomento, imparerai come aggiungere un percorso a una mappa statica utilizzando Amazon Location Service. Eseguirai i passaggi per ottenere un percorso utilizzando l' CalculateRoutes API e poi lo visualizzerai su una mappa statica utilizzando GeoJSON e uno stile personalizzato per punti e linee. ## Passaggi per aggiungere un percorso 1. Ottieni percorsi dall'`CalculateRoutes`API. Rimuovi le coordinate che cadono sulla stessa linea retta per ottimizzarle LineString, evitando che la stringa di query raggiunga il limite. 1. Crea un oggetto GeoJSON basato sul set di coordinate ottimizzato. 1. Prendi il primo e l'ultimo punto LineString e aggiungi le geometrie dei punti per contrassegnare le posizioni iniziale e finale. 1. Personalizza i punti e le LineString etichette in base alle tue esigenze aziendali, regolando proprietà come colore, dimensione ed etichette. ## Aggiungi un percorso utilizzando lo stile compatto In questo esempio, aggiungerai un percorso con punti di inizio e fine alla linea creata in[Come aggiungere una linea a una mappa statica](how-to-add-line-static.md). Il percorso verrà definito con uno stile personalizzato, inclusi colore, dimensione ed etichette per i punti di inizio e fine. ``` { "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/it_it/location/latest/developerguide/images/static-add-route-compact.png) ------ # Come aggiungere un poligono a una mappa statica Gli edifici e i luoghi possono essere evidenziati su una mappa designando un poligono attorno ad essi, ad esempio il Pentagono (situato a Washington, D.C.). ## Aggiungi un singolo poligono In questo esempio, aggiungi un poligono (un pentagono) per l'edificio del Pentagono sulla mappa. ------ #### [ 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 ] ![\[Mappa di esempio che mostra un poligono attorno al Pentagono.\]](http://docs.aws.amazon.com/it_it/location/latest/developerguide/images/mapsV2/addPolygonStaticMap.png) ------ ## Aggiungi un poligono di stile In questo esempio, ridisegniamo il poligono mostrato nell'esempio precedente. **Disegniamo il poligono in un colore diverso (\$1E3F70550).** I componenti del colore sono i seguenti. + **E3** rappresenta il componente rosso. + **F7** rappresenta il componente verde. + **05** rappresenta il componente blu. + **50** rappresenta il componente alfa (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 ] ![\[Mappa di esempio che mostra un poligono di colore diverso attorno al Pentagono.\]](http://docs.aws.amazon.com/it_it/location/latest/developerguide/images/mapsV2/addPolygonStaticMap-color.png) ------ ## Aggiungi più poligoni In questo esempio, aggiungiamo più poligoni, per evidenziare più parchi di New York City. ------ #### [ 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 ] ![\[Mappa di esempio che mostra più poligoni attorno ai parchi di New York.\]](http://docs.aws.amazon.com/it_it/location/latest/developerguide/images/mapsV2/addPolygonStaticMap-multiple.png) ------ # Come impostare la lingua per le mappe statiche È possibile impostare la lingua per una mappa statica, nel caso in cui non si desideri utilizzare la lingua predefinita. In questo esempio, viene richiesta in inglese una località a Tokyo, che generalmente utilizza come impostazione predefinita il testo giapponese, sovrascrivendo l'impostazione predefinita regionale. L'esempio mostra l'immagine di risposta a una richiesta in cui viene fornita la lingua e una in cui non viene fornita la lingua. Le etichette corrispondenti riflettono la differenza tra una mappa che mostra la lingua richiesta e una mappa che mostra la lingua predefinita. ------ #### [ 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 ] ![\[Mappa di esempio che mostra un poligono attorno al Pentagono.\]](http://docs.aws.amazon.com/it_it/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 ] ![\[Mappa di esempio che mostra un poligono attorno al Pentagono.\]](http://docs.aws.amazon.com/it_it/location/latest/developerguide/images/mapsV2/setLanguageDefaultStaticMap.png) ------ # Come aggiungere un cerchio di prossimità a una mappa statica I cerchi di prossimità offrono informazioni importanti sull'accuratezza di un dispositivo o della posizione dell'utente segnalati o stimati. Mostrando un cerchio attorno al punto segnalato, gli utenti vengono informati che la posizione effettiva potrebbe ricadere ovunque all'interno del cerchio, a causa di vari fattori che influiscono sulla precisione del posizionamento. Questa maggiore chiarezza aiuta a prendere decisioni e migliora la sicurezza della navigazione. In questo esempio, aggiungi un cerchio di prossimità di 500 metri vicino alla Torre Eiffel a Parigi. ------ #### [ 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 ] ![\[Mappa di esempio che mostra un cerchio di prossimità attorno alla Torre Eiffel.\]](http://docs.aws.amazon.com/it_it/location/latest/developerguide/images/mapsV2/addPproximityCircleStaticMap.png) ------ # Gestione dei costi e dell'utilizzo Man mano che continui a conoscere le mappe di localizzazione di Amazon, è importante capire come gestire la capacità del servizio, assicurarti di rispettare i limiti di utilizzo e ottenere i migliori risultati attraverso l'ottimizzazione delle quote e delle API. Applicando le migliori pratiche in termini di prestazioni e precisione, puoi personalizzare la tua applicazione per gestire in modo efficiente le query relative al luogo e massimizzare le tue richieste API. **Topics** + [Le migliori pratiche per Amazon Location Service](maps-best-practices.md) + [Prezzi delle mappe](maps-pricing.md) + [Quote e utilizzo della mappa](map-quota-and-usage.md) # Le migliori pratiche per Amazon Location Service Quando lavori con Amazon Location Service, il rispetto delle migliori pratiche garantisce che le mappe siano ottimizzate per prestazioni, precisione ed esperienza utente. Questa sezione descrive le considerazioni chiave per lavorare con mappe statiche, limiti geografici e dati GeoJSON per migliorare la funzionalità e la visualizzazione delle mappe. ## Mappe dinamiche Di seguito sono riportate alcune best practice per lavorare con mappe dinamiche in Amazon Location Service. ### Ottimizzazione del rendering con MapLibre Di seguito sono riportate alcune funzionalità MapLibre che aiutano a ottimizzare il rendering per gli stili di AWS mappa. Per ulteriori informazioni, consulta [AWS stili e caratteristiche delle mappe](map-styles.md). #### Salta la convalida dello stile Se stai usando lo stile della AWS mappa, imposta su`validateStyle`. `false` Ciò disattiverà la convalida dello stile in fase di caricamento, accelerando il caricamento iniziale della mappa. La convalida dello stile non è necessaria con gli stili di AWS mappa, poiché sono preconvalidati. ------ #### [ 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`: Ciò consente la convalida dello stile della mappa rispetto alle specifiche di stile GL. MapLibre Se ci sono problemi nello stile, verranno registrati nella console. + Se lo imposti su`false`, la mappa salterà il processo di convalida dello stile, il che potrebbe portare a un caricamento più rapido, ma senza il controllo degli errori. ------ #### Preriscalda la mappa Per le applicazioni a pagina singola (SPAs) che possono creare e distruggere la mappa più volte mentre l'utente naviga nell'app, la funzione di preriscaldamento può ridurre i ritardi nella ricreazione della mappa dopo che è stata distrutta. Questa funzionalità è consigliata solo per. SPAs ## Mappe statiche ### Limiti, riquadro di delimitazione (riquadro) Quando si lavora con mappe e dati geografici, è fondamentale definire accuratamente i parametri del bounding box (`bbox`) e dei bounds, poiché determinano l'area geografica di interesse. Eventuali imprecisioni possono portare a risultati indesiderati. **Garantire limiti precisi** Assicurati che i limiti specificati rappresentino con precisione la regione che desideri visualizzare. Anche piccole imprecisioni possono ritagliare o escludere porzioni dell'area desiderata, vanificando lo scopo della visualizzazione. **Verifica il livello di zoom appropriato** Il livello di zoom della mappa viene calcolato automaticamente in base ai limiti o al bbox specificati. Verifica che il livello di zoom risultante fornisca dettagli e visibilità appropriati per l'intera area di interesse. Se lo zoom è troppo alto o troppo basso, la mappa potrebbe non riuscire a trasmettere le informazioni desiderate in modo efficace. **Verifica la visibilità della sovrapposizione personalizzata** Quando usi bbox o bounds con sovrapposizioni personalizzate come le feature GeoJSON, assicurati che l'estensione delle feature rientri nell'immagine della mappa risultante. Le caratteristiche che si estendono oltre i limiti possono essere tagliate o omesse, portando a visualizzazioni incomplete o fuorvianti. **Usa il padding con bbox** Usa il bbox insieme al parametro padding per assicurarti che gli elementi della mappa vicino ai bordi siano completamente visibili e non tagliati. Definendo con precisione i parametri bbox e bounds, puoi assicurarti che le tue mappe rappresentino correttamente l'area geografica desiderata, forniscano un livello di dettaglio appropriato e incorporino efficacemente sovrapposizioni o livelli di dati personalizzati. ## GeoJSON Quando si utilizzano dati GeoJSON, l'ottimizzazione della stringa di query di millions GeoJSON può aiutarti a rimanere entro i limiti delle stringhe di query, specialmente per set di dati di grandi dimensioni. # Prezzi delle mappe Amazon Location Service offre prezzi competitivi per la sua API Maps in base al tipo di richiesta di mappa e al numero di chiamate API effettuate. Questa sezione fornisce una panoramica della struttura dei prezzi per le mappe dinamiche e statiche. Per informazioni dettagliate sui prezzi, consulta i [prezzi di Amazon Location Service](https://aws.amazon.com/location/pricing/). ## Mappe dinamiche I prezzi dell'API Maps si basano sul numero di riquadri recuperati dall'`GetTiles`API Altre informazioni relative alle mappe APIs, ad esempio `GetGlyphs``GetStyleDescriptor`, e `GetSprites` sono gratuite. ## Immagini statiche della mappa Il prezzo delle immagini delle mappe statiche si basa sul numero di richieste effettuate all'`GetStaticMap`API. Ogni richiesta di un'immagine cartografica statica viene conteggiata nel calcolo del prezzo. # Quote e utilizzo della mappa Amazon Location Service impone quote di servizio e limiti di utilizzo specifici per mappe dinamiche e statiche. Questi limiti vengono stabiliti per garantire un utilizzo equo e l'efficienza delle prestazioni per tutti gli utenti. Di seguito sono riportate le quote di servizio e i limiti regolabili per ciascun servizio. ## Service Quotas Amazon Location Service imposta quote predefinite per aiutare APIs a gestire la capacità del servizio, che possono essere visualizzate nella console di [gestione delle quote di AWS servizio](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas). Puoi richiedere un aumento delle quote tramite la [console self-service](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas), fino al doppio del limite predefinito per ciascuna API. Se i limiti di quota superano il doppio del limite predefinito, richiedi tramite la console self-service che invierà automaticamente un ticket di supporto. In alternativa, contatta il tuo team di supporto premium. Non sono previsti costi diretti per le richieste di aumento delle quote, ma livelli di utilizzo più elevati possono comportare un aumento dei costi di servizio in base alle risorse aggiuntive consumate. Per ulteriori informazioni, consulta [Gestisci le quote con Service Quotas](manage-quotas.md). ### Mappa dinamica | Nome API | Predefinita | Limite massimo regolabile | Più del limite massimo regolabile | | --- | --- | --- | --- | | `GetTiles` | 2000 | 4000 | Richiedi sulla [console delle quote di servizio](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas) o contatta il team di supporto | ### Mappa statica | Nome API | Predefinita | Limite massimo regolabile | Più del limite massimo regolabile | | --- | --- | --- | --- | | `GetStaticMap` | 50 | 100 | Richiedi sulla [console delle quote di servizio](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas) o contatta il team di supporto | ## Limiti di utilizzo | Nome API | Limite | Valore | | --- | --- | --- | | `GetStyleDescriptor` | Numero massimo di richieste, al secondo, per indirizzo IP. | 5000 | | `GetGlyphys` | Numero massimo di richieste, al secondo, per indirizzo IP. | 5000 | | `GetSprites` | Numero massimo di richieste, al secondo, per indirizzo IP. | 5000 | | `GetStaticMap` | Dimensione del payload di risposta dopo la compressione. | 6 MB | | `GetTiles` | Dimensione del payload di risposta dopo la compressione. | 6 MB | ## Termini Per ulteriori informazioni, consulta [Termini di utilizzo e attribuzione dei dati](data-attribution.md).