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'] ]; }; ``` ------ ## Stellen Sie die bevorzugte Sprache basierend auf der Browsersprache des Endbenutzers ein In diesem Beispiel legen Sie den Aktualisierungsstil so fest, dass Kartenbeschriftungen in der Gerätesprache des Benutzers angezeigt werden. ### Legen Sie die bevorzugte Sprache anhand des Beispiels für die Browsersprache fest ------ #### [ 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'] ]; }; ``` ------ # So legen Sie die politische Ansicht einer Karte fest Mit Amazon Location Service können Sie die politische Sichtweise festlegen, um sicherzustellen, dass Ihre Bewerbung den lokalen Gesetzen entspricht. Sie können eine politische Sichtweise festlegen und Karten aus verschiedenen politischen Perspektiven vergleichen. **Anmerkung** Weitere Informationen finden Sie unter [Lokalisierung und Internationalisierung](maps-localization-internationalization.md). ## Legen Sie die politische Sichtweise fest und vergleichen Sie sie mit der internationalen Perspektive In diesem Beispiel werden Sie Karten aus zwei verschiedenen politischen Ansichten erstellen und vergleichen: aus internationaler Sicht und aus Sicht der Türkei auf Zypern. ### Beispiel für einen Vergleich politischer Ansichten ------ #### [ 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%; } ``` ------ # So filtern Sie POI auf der Karte Mit Amazon Location Service können Sie die POI (point-of-interest) -Kategorien auswählen, die für Ihren Anwendungsfall relevant sind. Erfahren Sie mehr über den Standard-Kartenstil [Rich POI](https://docs.aws.amazon.com/location/latest/developerguide/standard-map-style.html#rich-poi) ## POI filtern In diesem Beispiel zeigen Sie eine interaktive Karte an, auf der Benutzer nach POI-Kategorien filtern können. ------ #### [ 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; } ``` ------ # So erstellen Sie topografische Karten Mit Amazon Location Service können Sie topografische Karten mithilfe von Terrain- und Höhendichtefunktionen erstellen, um Höhenunterschiede und geografische Merkmale zu visualisieren. ## Hillshade anzeigen Mit der Funktion Terrain können Sie Hügelschatten, Höhenunterschiede und zugehörige geografische Merkmale visualisieren. ### Beispiel Hillshade ------ #### [ index.html ] ``` Terrain Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } html, body, #map { height: 100%; } ``` ------ ## Zeigen Sie die Höhe mit Konturdichte-Linien an Mit Amazon Location Service können Sie Ihrer Karte Contour Density-Funktionen hinzufügen. Auf diese Weise können geografische Steilheit und Höhenunterschiede visualisiert werden. ### Beispiel für Konturdichte ------ #### [ index.html ] ``` Contour Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } html, body, #map { height: 100%; } ``` ------ ## Zeigt sowohl Hillshade- als auch Contour Density-Linien an Mit Amazon Location Service können Sie die Funktionen Hillshade und Contour Density auf Ihrer Karte kombinieren, um eine umfassende Geländevisualisierung zu erhalten. Dies ermöglicht eine verbesserte Tiefenwahrnehmung und ein vollständiges Verständnis der topografischen Variationen und Geländeeigenschaften. ### Beispiel für Hügelschatten mit Konturdichte ------ #### [ index.html ] ``` Hillshade and Contour Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } html, body, #map { height: 100%; } ``` ------ # So zeigen Sie den Verkehr in Echtzeit auf einer Karte an Mit Amazon Location Service können Sie Ihrer Karte Verkehrsfunktionen hinzufügen. Auf diese Weise werden Verkehrsdaten in Echtzeit bereitgestellt, die aktuelle Verkehrslage wie aktuelle Verkehrsstaus, Bauarbeiten und Zwischenfälle anzeigen und Ihnen so bei der Routenwahl helfen. ## Erstellen Sie eine Karte mit Verkehrsdaten in Echtzeit Dieses Beispiel zeigt, wie eine Karte mit Verkehrsdaten in Echtzeit erstellt wird. ### Beispiel für Verkehr in Echtzeit ------ #### [ index.html ] ``` Traffic Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # So erstellen Sie eine Logistikkarte Mit TravelModes dieser Funktion können Sie mithilfe von Amazon Location Service Logistikkarten erstellen. TravelModes zeigt relevante Routeninformationen für die LKW-Navigation mit den entsprechenden Straßenbeschränkungen an. Verwenden Sie [Transit TravelMode](https://docs.aws.amazon.com/location/latest/developerguide/how-to-show-transit-details-map.html), um Informationen zu öffentlichen Verkehrsmitteln anzuzeigen. ## Erstellen Sie eine Karte mit Truck TravelMode Dieses Beispiel zeigt, wie eine Karte `Truck` `TravelMode` für logistisches Routing erstellt wird. ### Beispiel für einen LKW ------ #### [ index.html ] ``` Truck Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # So zeigen Sie Transitdetails auf einer Karte an Mit Amazon Location Service können Sie Nahverkehrsfunktionen zu Karten hinzufügen. `Transit``TravelMode`Zeigt Routeninformationen für öffentliche Verkehrsmittel an, z. B. farblich markierte Bahnlinien. Lesen Sie auch, wie Sie die [Logistik TravelMode](https://docs.aws.amazon.com/location/latest/developerguide/how-to-create-logistic-map.html) für zusätzliche Optionen einrichten. ## Erstellen Sie eine Karte mit Transitdetails Dieses Beispiel zeigt, wie Sie mit Transit TravelMode für öffentliche Verkehrsmittel eine Karte mit Nahverkehrsdetails erstellen. ### Beispiel für einen öffentlichen Verkehr ------ #### [ index.html ] ``` Transit Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # So erstellen Sie eine 3D-Karte Mit Amazon Location Service können Sie Karten dreidimensionale Funktionen hinzufügen, z. B. `Terrain3D` um Höhendaten als dreidimensionale Oberfläche anzuzeigen oder `Buildings3D` um Stadtstrukturen mit Höhe und Volumen darzustellen. ## Erstellen Sie eine Karte mit dreidimensionalen Geländedetails Dieses Beispiel zeigt, wie eine Karte mit einem `Terrain3D` Parameter erstellt wird. ### Terrain3D-Beispiel ------ #### [ index.html ] ``` 3D Terrain

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ ## Erstellen Sie eine Karte mit dreidimensionalen Gebäudedetails Dieses Beispiel zeigt, wie eine Karte mit `Buildings3D` Parametern erstellt wird. ### Beispiel für Buildings3D ------ #### [ index.html ] ``` 3D Buildings

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ ## Aktivieren/deaktivieren Sie die Globusansicht Dieses Beispiel zeigt, wie die Globusansichtsprojektion aktiviert oder deaktiviert wird. Standardmäßig ist die Globusansicht aktiviert. ### Beispiel für eine Globusansicht ------ #### [ index.html ] ``` Globe View

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------