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'] ]; }; ``` ------ ## Tetapkan bahasa pilihan berdasarkan bahasa browser pengguna akhir Dalam contoh ini, Anda akan mengatur gaya pembaruan untuk menampilkan label peta dalam bahasa perangkat pengguna. ### Tetapkan bahasa pilihan berdasarkan contoh bahasa 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'] ]; }; ``` ------ # Cara mengatur tampilan politik peta Amazon Location Service memungkinkan Anda mengatur tampilan politik untuk memastikan aplikasi Anda mematuhi hukum setempat. Anda dapat mengatur pandangan politik dan membandingkan peta dari perspektif politik yang berbeda. **catatan** Untuk informasi selengkapnya, lihat [Lokalisasi dan internasionalisasi](maps-localization-internationalization.md). ## Tetapkan pandangan politik dan bandingkan dengan perspektif internasional Dalam contoh ini, Anda akan membuat dan membandingkan peta dari dua pandangan politik yang berbeda: perspektif internasional dan pandangan Turki tentang Siprus. ### Contoh perbandingan pandangan politik ------ #### [ 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%; } ``` ------ # Cara memfilter POI di peta Amazon Location Service memungkinkan Anda memilih kategori POI (point-of-interest) yang relevan dengan kasus penggunaan Anda. Pelajari lebih lanjut tentang gaya peta standar, [Rich POI](https://docs.aws.amazon.com/location/latest/developerguide/standard-map-style.html#rich-poi) ## Filter POI Dalam contoh ini, Anda menampilkan peta interaktif yang memungkinkan pengguna untuk memfilter pada kategori 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; } ``` ------ # Cara membuat peta topografi Amazon Location Service memungkinkan Anda membuat peta topografi menggunakan fitur kepadatan Terrain dan Contour untuk memvisualisasikan perubahan elevasi dan karakteristik geografis. ## Tampilkan Hillshade Fitur Terrain memungkinkan Anda memvisualisasikan Hillshade, perubahan ketinggian, dan fitur geografis terkait. ### Contoh Hillshade ------ #### [ index.html ] ``` Terrain Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } html, body, #map { height: 100%; } ``` ------ ## Tampilkan elevasi dengan garis Kepadatan Kontur Amazon Location Service memungkinkan Anda menambahkan fitur Contour Density ke peta Anda. Ini memberikan visualisasi kecuraman geografis dan perubahan ketinggian. ### Contoh Kepadatan Kontur ------ #### [ index.html ] ``` Contour Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } html, body, #map { height: 100%; } ``` ------ ## Tampilkan garis Hillshade dan Contour Density Dengan Amazon Location Service, Anda dapat menggabungkan fitur Hillshade dan Contour Density di peta Anda untuk visualisasi medan yang komprehensif. Ini memberikan persepsi kedalaman yang ditingkatkan dan pemahaman lengkap tentang variasi topografi dan karakteristik medan. ### Contoh Hillshade dengan Contour Density ------ #### [ index.html ] ``` Hillshade and Contour Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } html, body, #map { height: 100%; } ``` ------ # Cara menampilkan lalu lintas waktu nyata di peta Menggunakan Amazon Location Service, Anda dapat menambahkan fitur lalu lintas ke peta Anda. Ini menyediakan data lalu lintas real-time untuk menunjukkan kondisi lalu lintas saat ini seperti kemacetan jalan saat ini, konstruksi, dan insiden, membantu Anda membuat pilihan perutean. ## Buat peta dengan lalu lintas waktu nyata Contoh ini menunjukkan cara membuat peta dengan data lalu lintas real-time. ### Contoh Lalu Lintas Waktu Nyata ------ #### [ index.html ] ``` Traffic Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # Cara membuat peta logistik TravelModes Fitur ini memungkinkan Anda membuat peta logistik menggunakan Amazon Location Service. TravelModes menampilkan informasi perutean yang relevan untuk navigasi Truk dengan pembatasan jalan terkait. Gunakan [Transit TravelMode](https://docs.aws.amazon.com/location/latest/developerguide/how-to-show-transit-details-map.html) untuk menunjukkan detail transportasi umum. ## Buat peta dengan Truk TravelMode Contoh ini menunjukkan cara membuat peta dengan `Truck` `TravelMode` untuk perutean logistik. ### Contoh truk ------ #### [ index.html ] ``` Truck Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # Cara menampilkan detail transit di peta Amazon Location Service memungkinkan Anda menambahkan fitur transit ke peta. Ini `Transit` `TravelMode` menampilkan informasi perutean untuk angkutan umum, seperti jalur kereta berkode warna. Periksa juga cara mengatur [logistik TravelMode](https://docs.aws.amazon.com/location/latest/developerguide/how-to-create-logistic-map.html) untuk opsi tambahan. ## Buat peta dengan detail transit Contoh ini menunjukkan cara membuat peta dengan detail transit dengan Transit TravelMode untuk transportasi umum. ### Contoh transit ------ #### [ index.html ] ``` Transit Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # Cara membuat peta 3D Amazon Location Service memungkinkan Anda menambahkan fitur tiga dimensi ke peta, seperti `Terrain3D` menampilkan data elevasi sebagai permukaan tiga dimensi, atau `Buildings3D` menampilkan struktur perkotaan dengan tinggi dan volume. ## Buat peta dengan detail medan tiga dimensi Contoh ini menunjukkan cara membuat peta dengan `Terrain3D` parameter. ### Contoh Terrain3D ------ #### [ index.html ] ``` 3D Terrain

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ ## Buat peta dengan detail bangunan tiga dimensi Contoh ini menunjukkan cara membuat peta dengan `Buildings3D` parameter. ### Contoh Buildings3D ------ #### [ index.html ] ``` 3D Buildings

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ ## Aktifkan/nonaktifkan tampilan Globe Contoh ini menunjukkan cara mengaktifkan atau menonaktifkan proyeksi tampilan Globe. Secara default, tampilan Globe diaktifkan. ### Contoh tampilan globe ------ #### [ index.html ] ``` Globe View

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # Cara menggunakan peta statis Topik how-to ini menawarkan step-by-step panduan untuk menyesuaikan peta statis dengan overlay dan elemen visual, memanfaatkan kemampuan pemetaan Amazon Location Service. Setiap panduan memandu Anda melalui tugas-tugas utama, seperti menyesuaikan dimensi peta, memilih antara zoom atau radius, dan menambahkan berbagai elemen geo-spasial seperti spidol, poligon, garis, dan lingkaran kedekatan. Panduan ini menggunakan format ringkas dan GeoJSON untuk memastikan fleksibilitas dalam gaya dan konfigurasi. Baik Anda mengoptimalkan peta untuk aplikasi yang dihadapi pelanggan atau melakukan analisis geospasial, topik ini memberikan instruksi yang jelas tentang menyesuaikan peta statis Anda agar sesuai dengan persyaratan tertentu. Dengan mengikuti contoh terperinci, Anda akan belajar cara meningkatkan presentasi peta dan mengelola data geografis secara efisien untuk berbagai kebutuhan bisnis. **Topics** + [Cara mendapatkan peta statis dari posisi tertentu](get-static-map-specific-position.md) + [Cara mendapatkan peta statis dari dimensi tertentu](get-static-map-specific-dimension.md) + [Cara memutuskan antara radius dan zoom untuk peta statis](choose-radius-vs-zoom.md) + [Cara menambahkan skala untuk peta statis](add-scale-static-map.md) + [Cara menambahkan penanda ke peta statis](add-marker-static-map.md) + [Cara menambahkan garis ke peta statis](how-to-add-line-static.md) + [Cara menambahkan rute ke peta statis](how-to-add-route.md) + [Cara menambahkan poligon ke peta statis](how-to-add-polygon-static.md) + [Cara mengatur bahasa untuk peta statis](set-language-static-map.md) + [Cara menambahkan lingkaran kedekatan ke peta statis](how-to-add-proximity-circle.md) # Cara mendapatkan peta statis dari posisi tertentu Dalam topik ini, Anda akan belajar cara mengambil peta statis dari Amazon Location Service berdasarkan parameter tertentu. Anda akan belajar cara membuat peta statis untuk posisi tengah, kotak pembatas, dan satu set posisi terbatas. Contoh yang diberikan akan membantu Anda menyesuaikan lebar, tinggi, dan gaya peta. **catatan** Anda harus melewati salah satu `map` atau `map@2x` saat membuat peta statis. ## Dapatkan gambar peta untuk posisi tengah Dalam contoh ini, Anda akan membuat gambar peta dengan lebar `1024` dan tinggi `1024` dengan koordinat tengah ditetapkan pada`-123.1143,49.2763`, di mana `longitude=-123.1143` dan`latitude=49.2763`, dan tingkat `15` zoom. ------ #### [ 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/id_id/location/latest/developerguide/images/static-center.png) ------ ## Dapatkan gambar peta untuk kotak pembatas Dalam contoh ini, Anda akan menghasilkan gambar peta Asia Tenggara dengan menetapkan kotak pembatas untuk area tersebut. `bbox`Formatnya adalah`{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/id_id/location/latest/developerguide/images/static-bounding-box.png) ------ ## Dapatkan gambar peta untuk posisi terbatas Dalam contoh ini, Anda akan menghasilkan peta yang mencakup beberapa tempat yang harus dilihat di Paris, masing-masing ditentukan oleh koordinatnya (bujur, garis lintang). Posisi terbatas meliputi: Menara Eiffel, Museum Louvre, Katedral Notre-Dame, Champs-Élysées, Arc de Triomphe, Basilika Sacré-Cœur, Taman Luksemburg, Musée d'Orsay, Place de la Concorde, dan Palais Garnier. Format untuk posisi pembatas adalah`{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/id_id/location/latest/developerguide/images/static-bounding-position.png) ------ # Cara mendapatkan peta statis dari dimensi tertentu Dalam topik ini, Anda akan belajar cara mengatur dimensi (tinggi dan lebar) untuk peta statis menggunakan Amazon Location Service. Menyesuaikan dimensi gambar peta memungkinkan Anda menyeimbangkan kinerja, kualitas visual, dan kegunaan. Nilai maksimum untuk `height` keduanya `width` dan 1400 piksel, sedangkan nilai minimum adalah 64 piksel. Ukuran hasil maksimal adalah 6 MB. Selain itu, Anda dapat menggunakan `bounds` parameter `bbox` dan bersama `padding` untuk memastikan bahwa fitur peta penting di dekat tepi sepenuhnya terlihat dan tidak terputus. ## Dapatkan gambar peta dengan tinggi dan lebar tertentu Dalam contoh ini, Anda akan membuat gambar peta resolusi rendah dan resolusi menengah 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/id_id/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/id_id/location/latest/developerguide/images/static-specific-dimension-mid.png) ------ ## Dapatkan gambar peta dengan padding di semua sisi Dalam contoh ini, Anda akan membuat peta menggunakan beberapa tempat yang harus dilihat di Helsinki, Finlandia, dengan koordinatnya (bujur, garis lintang), baik dengan maupun tanpa bantalan. ------ #### [ 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/id_id/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/id_id/location/latest/developerguide/images/static-specific-dimension-no-padding.png) ------ # Cara memutuskan antara radius dan zoom untuk peta statis Dalam topik ini, Anda akan belajar cara memilih antara menggunakan `radius` atau `zoom` saat membuat peta statis dengan Amazon Location Service. `radius`Parameter ini memberikan kontrol yang lebih tepat atas area cakupan, sehingga ideal untuk aplikasi yang menghadap pelanggan di mana Anda mengetahui area cakupan yang tepat. `zoom`Parameter ini lebih cocok untuk analisis geospasial ketika Anda ingin menyesuaikan tingkat detail yang ditampilkan. ## Dengan radius Dalam contoh ini, Anda akan membuat gambar peta Sri Lanka menggunakan `radius` parameter dengan lokasi pusat. ------ #### [ 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/id_id/location/latest/developerguide/images/static-radius.png) ------ ## Dengan zoom Dalam contoh ini, Anda akan membuat gambar peta Sri Lanka menggunakan `zoom` parameter dengan lokasi pusat. ------ #### [ 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/id_id/location/latest/developerguide/images/static-zoom.png) ------ # Cara menambahkan skala untuk peta statis Dalam topik ini, Anda akan mempelajari cara menampilkan skala di sudut kanan bawah peta statis yang dihasilkan dengan Amazon Location Service. Skala dapat menunjukkan satu unit, seperti `Miles` atau`Kilometers`, atau kedua unit, seperti `KilometersMiles` atau`MilesKilometers`, dengan satu unit ditampilkan di bagian atas dan yang lainnya di bagian bawah. ## Tambahkan skala dengan satu unit Dalam contoh ini, Anda akan menampilkan peta Helsinki, Finlandia dengan skala diatur ke `Kilometers` di sudut kanan bawah. ------ #### [ 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/id_id/location/latest/developerguide/images/static-scale-single.png) ------ ## Tambahkan skala dengan kedua unit Dalam contoh ini, Anda akan menampilkan peta Helsinki, Finlandia dengan keduanya `Kilometers` dan `Miles` ditampilkan pada skala di sudut kanan bawah, dengan satu unit ditampilkan di atas yang lain. ------ #### [ 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/id_id/location/latest/developerguide/images/static-scale-both.png) ------ # Cara menambahkan penanda ke peta statis Dalam topik ini, Anda akan belajar cara menambahkan penanda ke peta statis yang dihasilkan dengan Amazon Location Service. Anda dapat menyesuaikan ikon penanda, label, ukuran, warna, dan opsi gaya lainnya. Ini memungkinkan Anda untuk menyorot lokasi tertentu dengan isyarat visual yang selaras dengan tujuan peta Anda. ## Penataan penanda | Nama | Tipe | Default | Deskripsi | | --- | --- | --- | --- | | `style` | String | `marker` | Gaya geometri Titik. Untuk membuat penanda, atur nilai ke `marker` atau tidak menyertakan `style` atribut dalam objek properti GeoJSON. | | `icon` | String | `pin` | Jenis ikon penanda. Nilai yang tersedia meliputi: `cp` (lingkaran kedekatan)`diamond`,`pin`,,`poi`,`square`,`triangle`,`bubble`. | | `label` | String | `` | Teks untuk ditampilkan pada koordinat. Untuk mengatur label otomatis, gunakan nilai berikut: `$alpha` (alfabet Latin) atau `$num` (angka Arab). | | `color` | Warna | Tergantung gaya | Warna ikon. | | `outline-color` | Warna | Tergantung gaya | Warna garis besar ikon. | | `text-color` | Warna | Tergantung gaya | Warna teks label. | | `text-outline-color` | Warna | Tergantung gaya | Warna garis besar teks. | | `outline-width` | Bilangan Bulat | `0`(dimatikan) | Lebar garis besar teks. | | `size` | String | `medium` | Ukuran label dan ikon. Nilai yang tersedia:`small`,`medium`,`large`. | ## Menambahkan Marker ke Gambar Peta Dalam contoh ini, Anda akan menempatkan penanda dengan label pada gambar peta 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 ] Dengan 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/id_id/location/latest/developerguide/images/static-add-marker.png) ------ ## Tambahkan beberapa penanda ke gambar peta Dalam contoh ini, Anda akan menambahkan spidol untuk tempat-tempat yang harus dilihat di Helsinki, Finlandia menggunakan koordinatnya (bujur, garis lintang). Anda juga dapat menerapkan padding untuk memastikan peta mengakomodasi semua spidol dengan benar. **catatan** Jenis ikon penanda yang tersedia meliputi: `cp` untuk lingkaran kedekatan,`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/id_id/location/latest/developerguide/images/static-add-multi-markers.png) ------ ## Ubah warna penanda pada gambar peta Dalam contoh ini, Anda akan menggunakan penanda gelembung dengan warna berbeda untuk mewakili kota di seluruh dunia. Anda dapat menyesuaikan warna penanda, label, dan properti lainnya agar sesuai dengan konteks peta Anda. `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/id_id/location/latest/developerguide/images/static-change-marker-color.png) ------ # Cara menambahkan garis ke peta statis Dalam topik ini, Anda akan mempelajari cara menambahkan baris ke peta statis menggunakan Amazon Location Service. Kami akan membahas opsi styling yang didukung, cara menentukan garis menggunakan GeoJSON, dan cara menerapkan gaya kustom seperti warna, lebar, dan garis besar. Kami juga akan mengeksplorasi cara menggunakan unit pengukuran yang berbeda untuk properti seperti lebar garis. ## Gaya yang didukung | Nama | Tipe | Default | Deskripsi | | --- | --- | --- | --- | | `color` | Warna | tergantung gaya | Warna garis. | | `width` | Integer/String | 2 | Lebar garis. Untuk informasi selengkapnya, lihat [Cara menambahkan garis ke peta statis](#how-to-add-line-static). | | `outline-color` | Warna | tergantung gaya | Warna garis garis besar. | | `outline-width` | Integer/String | 0 (dimatikan) | Lebar garis besar. Untuk informasi selengkapnya, lihat [Cara menambahkan garis ke peta statis](#how-to-add-line-static). | ## Unit yang didukung | Unit | Deskripsi | | --- | --- | | Integer, misalnya, `5` | Piksel | | String tanpa unit, misalnya `"5"` | Piksel | | `"px"` | Piksel | | `"m"` | Meter | | `"km"` | Kilometer | | `"mi"` | Miles | | `"ft"` | Kaki | | `"yd"` | Pekarangan | | `"%"` | Persentase nilai default untuk properti tertentu, dalam piksel. Misalnya, jika nilai default untuk `width` adalah `2` piksel, maka `200%` adalah `4` piksel. `%`adalah karakter sensitif yang harus dikodekan dalam URL permintaan sebagai. `%25` | ## Tambahkan baris Dalam contoh ini, Anda akan menambahkan garis dari tempat di Vancouver ke Stanley Park. Baris dibuat menggunakan format GeoJSON dengan koordinat yang ditentukan. ------ #### [ 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/id_id/location/latest/developerguide/images/static-add-line.png) ------ ## Tambahkan gaya ke garis Dalam contoh ini, Anda akan menata garis yang ditambahkan pada contoh sebelumnya. Ini termasuk mendefinisikan warna garis, lebar, warna garis besar, dan lebar garis untuk menyesuaikan tampilan visual garis pada peta. ------ #### [ 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/id_id/location/latest/developerguide/images/static-add-line-styling.png) ------ # Cara menambahkan rute ke peta statis Dalam topik ini, Anda akan mempelajari cara menambahkan rute ke peta statis menggunakan Amazon Location Service. Anda akan melalui langkah-langkah untuk mendapatkan rute menggunakan CalculateRoutes API dan kemudian memvisualisasikannya pada peta statis menggunakan GeoJSON dan styling khusus untuk titik dan garis. ## Langkah-langkah untuk menambahkan rute 1. Dapatkan rute dari `CalculateRoutes` API. Hapus koordinat yang jatuh pada garis lurus yang sama untuk mengoptimalkan LineString, mencegah string kueri mencapai batasnya. 1. Buat objek GeoJSON berdasarkan set koordinat yang dioptimalkan. 1. Ambil poin pertama dan terakhir dari LineString dan tambahkan geometri Titik untuk menandai lokasi awal dan akhir. 1. Gaya poin dan LineString sesuai dengan kebutuhan bisnis Anda, sesuaikan properti seperti warna, ukuran, dan label. ## Tambahkan rute menggunakan gaya kompak Dalam contoh ini, Anda akan menambahkan rute dengan titik awal dan akhir ke garis yang dibuat[Cara menambahkan garis ke peta statis](how-to-add-line-static.md). Rute akan ditentukan dengan gaya khusus, termasuk warna, ukuran, dan label untuk titik awal dan akhir. ``` { "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/id_id/location/latest/developerguide/images/static-add-route-compact.png) ------ # Cara menambahkan poligon ke peta statis Bangunan dan lokasi dapat disorot pada peta dengan menunjuk poligon di sekitarnya, misalnya, Pentagon (terletak di Washington, D.C.). ## Tambahkan satu poligon Dalam contoh ini, Anda menambahkan poligon (pentagon) untuk bangunan Pentagon di peta. ------ #### [ 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 ] ![\[Contoh peta yang menunjukkan poligon di sekitar Pentagon.\]](http://docs.aws.amazon.com/id_id/location/latest/developerguide/images/mapsV2/addPolygonStaticMap.png) ------ ## Tambahkan poligon gaya Dalam contoh ini, kita menata ulang poligon yang ditunjukkan pada contoh sebelumnya. Kami menggambar poligon dalam warna yang berbeda (**\$1E3F70550**). Komponen warna adalah sebagai berikut. + **E3** mewakili komponen merah. + **F7** mewakili komponen hijau. + **05** mewakili komponen biru. + **50** mewakili komponen alpha (opacity). ------ #### [ 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 ] ![\[Contoh peta yang menunjukkan poligon berwarna berbeda di sekitar Pentagon.\]](http://docs.aws.amazon.com/id_id/location/latest/developerguide/images/mapsV2/addPolygonStaticMap-color.png) ------ ## Tambahkan beberapa poligon Dalam contoh ini, kami menambahkan beberapa poligon, untuk menyoroti beberapa taman 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 ] ![\[Contoh peta yang menunjukkan beberapa poligon di sekitar taman di NYC.\]](http://docs.aws.amazon.com/id_id/location/latest/developerguide/images/mapsV2/addPolygonStaticMap-multiple.png) ------ # Cara mengatur bahasa untuk peta statis Anda dapat mengatur bahasa untuk peta statis, jika Anda tidak ingin menggunakan bahasa default. Dalam contoh ini, lokasi di Tokyo yang umumnya default ke teks Jepang diminta dalam bahasa Inggris, menimpa default regional. Contoh menunjukkan gambar respons untuk permintaan di mana bahasa disediakan, dan gambar di mana bahasa tidak disediakan. Label yang sesuai mencerminkan perbedaan antara peta yang menunjukkan bahasa yang diminta dan peta yang menunjukkan bahasa default. ------ #### [ 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 ] ![\[Contoh peta yang menunjukkan poligon di sekitar Pentagon.\]](http://docs.aws.amazon.com/id_id/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 ] ![\[Contoh peta yang menunjukkan poligon di sekitar Pentagon.\]](http://docs.aws.amazon.com/id_id/location/latest/developerguide/images/mapsV2/setLanguageDefaultStaticMap.png) ------ # Cara menambahkan lingkaran kedekatan ke peta statis Lingkaran jarak menawarkan wawasan penting tentang keakuratan perangkat atau lokasi pengguna yang dilaporkan atau diperkirakan. Dengan menunjukkan lingkaran di sekitar titik yang dilaporkan, pengguna diberitahu bahwa posisi sebenarnya bisa jatuh di mana saja di dalam lingkaran, karena berbagai faktor yang mempengaruhi presisi posisi. Kejelasan tambahan ini membantu pengambilan keputusan dan meningkatkan keamanan navigasi. Dalam contoh ini, Anda menambahkan lingkaran kedekatan 500 meter di dekat Menara Eiffel di 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 ] ![\[Contoh peta yang menunjukkan lingkaran kedekatan di sekitar Menara Eiffel.\]](http://docs.aws.amazon.com/id_id/location/latest/developerguide/images/mapsV2/addPproximityCircleStaticMap.png) ------ # Mengelola biaya dan penggunaan Saat Anda terus belajar tentang peta Lokasi Amazon, penting untuk memahami cara mengelola kapasitas layanan, memastikan Anda mengikuti batas penggunaan, dan mendapatkan hasil terbaik melalui pengoptimalan kuota dan API. Dengan menerapkan praktik terbaik untuk kinerja dan akurasi, Anda dapat menyesuaikan aplikasi Anda untuk menangani kueri terkait tempat secara efisien dan memaksimalkan permintaan API Anda. **Topics** + [Praktik terbaik untuk Amazon Location Service](maps-best-practices.md) + [Harga peta](maps-pricing.md) + [Kuota peta dan penggunaan](map-quota-and-usage.md) # Praktik terbaik untuk Amazon Location Service Saat bekerja dengan Amazon Location Service, mengikuti praktik terbaik memastikan peta Anda dioptimalkan untuk kinerja, akurasi, dan pengalaman pengguna. Bagian ini menguraikan pertimbangan utama untuk bekerja dengan peta statis, batas geografis, dan data GeoJSON untuk meningkatkan fungsionalitas dan visualisasi peta. ## Peta dinamis Berikut ini adalah beberapa praktik terbaik untuk bekerja dengan peta dinamis di Amazon Location Service. ### Rendering optimasi dengan MapLibre Berikut ini adalah beberapa fitur MapLibre yang membantu mengoptimalkan rendering untuk gaya AWS peta. Untuk informasi selengkapnya, lihat [AWS gaya peta dan fitur](map-styles.md). #### Lewati validasi gaya Jika Anda menggunakan gaya AWS peta, atur `validateStyle` ke`false`. Ini akan mematikan validasi gaya load-time, mempercepat pemuatan peta awal. Validasi gaya tidak diperlukan dengan gaya AWS peta, karena sudah divalidasi sebelumnya. ------ #### [ 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`: Ini memungkinkan validasi gaya peta terhadap spesifikasi gaya MapLibre GL. Jika ada masalah dalam gaya, mereka akan masuk ke konsol. + Jika Anda menyetelnya`false`, peta akan melewati proses validasi gaya, yang mungkin menghasilkan pemuatan lebih cepat, tetapi tanpa pemeriksaan kesalahan. ------ #### Pra-hangatkan peta Untuk aplikasi satu halaman (SPAs) yang dapat membuat dan menghancurkan peta berkali-kali saat pengguna menavigasi melalui aplikasi, fungsi pra-hangat dapat mengurangi penundaan dalam membuat ulang peta setelah dihancurkan. Fitur ini hanya disarankan untuk SPAs. ## Peta statis ### Batas, kotak pembatas (kotak) Saat bekerja dengan peta dan data geografis, menentukan parameter bounding box (`bbox`) dan batas secara akurat sangat penting, karena menentukan wilayah geografis yang diminati. Ketidakakuratan apa pun dapat menyebabkan hasil yang tidak diinginkan. **Pastikan batas yang tepat** Pastikan batas yang ditentukan secara tepat mewakili wilayah yang ingin Anda tampilkan. Bahkan sedikit ketidakakuratan dapat memotong atau mengecualikan bagian dari area yang diinginkan, mengalahkan tujuan visualisasi. **Verifikasi tingkat zoom yang sesuai** Tingkat zoom peta secara otomatis dihitung berdasarkan batas atau bbox yang ditentukan. Verifikasi bahwa tingkat zoom yang dihasilkan memberikan detail dan visibilitas yang sesuai untuk seluruh area yang diminati. Jika zoom terlalu tinggi atau rendah, peta mungkin gagal menyampaikan informasi yang diinginkan secara efektif. **Periksa visibilitas overlay khusus** Saat menggunakan bbox atau batas dengan overlay khusus seperti fitur GeoJSON, pastikan luas fitur berada dalam gambar peta yang dihasilkan. Fitur yang melampaui batas dapat dipotong atau dihilangkan, yang mengarah ke visualisasi yang tidak lengkap atau menyesatkan. **Gunakan padding dengan bbox** Gunakan bbox bersama dengan parameter padding untuk memastikan fitur peta di dekat tepi sepenuhnya terlihat dan tidak terputus. Dengan mendefinisikan parameter bbox dan batas secara akurat, Anda dapat memastikan peta Anda mewakili area geografis yang diinginkan dengan benar, memberikan tingkat detail yang sesuai, dan secara efektif menggabungkan overlay khusus atau lapisan data. ## GeoJSON Saat menggunakan data GeoJSON, mengoptimalkan string kueri dengan memperkecil GeoJSON dapat membantu Anda tetap berada dalam batas string kueri, terutama untuk kumpulan data besar. # Harga peta Amazon Location Service menawarkan harga yang kompetitif untuk Maps API berdasarkan jenis permintaan peta dan jumlah panggilan API yang dilakukan. Bagian ini memberikan gambaran umum tentang struktur harga untuk peta dinamis dan statis. Untuk informasi harga terperinci, lihat [harga Amazon Location Service](https://aws.amazon.com/location/pricing/). ## Peta dinamis Harga untuk Maps API didasarkan pada jumlah ubin yang diambil oleh API `GetTiles` Terkait peta lainnya APIs, seperti, `GetGlyphs``GetStyleDescriptor`, dan `GetSprites` tidak dikenai biaya. ## Gambar peta statis Harga untuk gambar peta statis didasarkan pada jumlah permintaan yang dibuat ke `GetStaticMap` API. Setiap permintaan untuk gambar peta statis dihitung dalam perhitungan harga. # Kuota peta dan penggunaan Amazon Location Service memberlakukan kuota layanan dan batas penggunaan khusus untuk peta dinamis dan statis. Batasan ini diberlakukan untuk memastikan penggunaan yang adil dan efisiensi kinerja di semua pengguna. Di bawah ini adalah kuota layanan dan batas yang dapat disesuaikan untuk setiap layanan. ## Kuota layanan Amazon Location Service menetapkan kuota default APIs untuk membantu mengelola kapasitas layanan, yang dapat dilihat di konsol [manajemen kuota AWS layanan](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas). Anda dapat meminta peningkatan kuota melalui [konsol swalayan](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas), hingga dua kali batas default untuk setiap API. Untuk batas kuota melebihi dua kali batas default, minta melalui konsol layanan mandiri dan secara otomatis akan mengirimkan tiket dukungan. Bergantian, terhubung dengan tim dukungan premium Anda. Tidak ada biaya langsung untuk permintaan peningkatan kuota, tetapi tingkat penggunaan yang lebih tinggi dapat menyebabkan peningkatan biaya layanan berdasarkan sumber daya tambahan yang dikonsumsi. Untuk informasi selengkapnya, lihat [Kelola kuota dengan Service Quotas](manage-quotas.md). ### Peta dinamis | Nama API | Default | Batas maksimum yang dapat disesuaikan | Lebih dari batas Maks yang Dapat Disesuaikan | | --- | --- | --- | --- | | `GetTiles` | 2000 | 4000 | Permintaan pada [konsol kuota layanan](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas) atau hubungi tim dukungan | ### Peta statis | Nama API | Default | Batas maksimum yang dapat disesuaikan | Lebih dari batas Maks yang Dapat Disesuaikan | | --- | --- | --- | --- | | `GetStaticMap` | 50 | 100 | Permintaan pada [konsol kuota layanan](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas) atau hubungi tim dukungan | ## Batas penggunaan | Nama API | Kuota | Nilai | | --- | --- | --- | | `GetStyleDescriptor` | Permintaan maksimum, per detik, per alamat IP. | 5000 | | `GetGlyphys` | Permintaan maksimum, per detik, per alamat IP. | 5000 | | `GetSprites` | Permintaan maksimum, per detik, per alamat IP. | 5000 | | `GetStaticMap` | Ukuran muatan respons setelah kompresi. | 6MB | | `GetTiles` | Ukuran muatan respons setelah kompresi. | 6MB | ## Ketentuan Lihat informasi yang lebih lengkap di [Ketentuan penggunaan dan atribusi data](data-attribution.md).