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