Amazon Location Service 提供九种不同的地图风格，以适应多种用例。本文将探讨如何选择适合您应用程序的最佳底图风格，以及底图选择如何影响应用程序的其余部分。我们将回顾 Amazon Location 地图提供的不同地图风格，以及如何确定哪种风格最适合您的应用程序。

🗺️ **地图渲染库：** Amazon Location 支持流行的开源地图渲染库，例如 MapLibre GL JS、Tangram 和 AWS Amplify JS，为开发者提供了灵活的选择，可以轻松迁移现有地图提供商和数据源，并根据需求选择合适的库来渲染地图。

🏙️ **矢量和栅格瓦片：** Amazon Location 提供来自数据提供商的矢量和栅格瓦片。使用矢量瓦片，可以进一步修改地图风格以适应应用程序，并通过自定义地图风格来满足特定的视觉需求。

🎨 **风格选择：** Amazon Location 提供多种地图风格，例如 Esri Vector Dark Grey Canvas、VectorEsriLightGreyCanvas、Esri Navigation、Here Explore、Esri Vector Topographic 等。这些风格在颜色、特征展示、数据更新频率等方面有所区别，例如 Esri Vector Dark Grey Canvas 适合暗色主题，VectorEsriLightGreyCanvas 适合亮色主题，Esri Navigation 注重导航信息，Here Explore 则更注重公共交通信息，Esri Vector Topographic 则更适合展示地形和自然特征。

🗺️ **风格比较：** 文章中展示了多个地图风格的比较案例，例如比较 Esri Light 和 Dark 风格，比较 Esri Navigation 和 Here Explore 风格，比较 Esri Streets 和 Esri Topographic 风格，这些案例可以帮助开发者根据实际需求选择合适的风格。

🚀 **应用示例：** 文章还提供了一个示例应用程序，该应用程序可以帮助开发者快速上手 Amazon Location，并通过实际案例体验不同的地图风格。

<p><a href="https://aws.amazon.com/location/&quot;&gt;Amazon Location Service</a> offers nine different map  styles to fit multiple use cases. How do you pick the right base map style for your application? And how does the base map you pick influence the rest of your application? In this post, we review the different map styles available with Amazon Location maps, as well as how to decide which is best for your application.</p><h2>Displaying Amazon Location Maps</h2><p>Amazon Location supports popular open-source map rendering libraries, such as MapLibre GL JS, Tangram, and <a href="https://aws.amazon.com/amplify/&quot;&gt;AWS Amplify</a> JS. Providing multiple ways to display base map tiles lets you easily migrate from existing base map providers and sources. Our <a href="https://docs.aws.amazon.com/location/latest/developerguide/display-map.html&quot;&gt;developer guide</a> includes simple getting-started guides for the libraries listed that let you get up and running in just a few minutes.</p><p>Amazon Location offers both Vector and Raster tiles from our data providers. Using vector tiles, you can further modify the style of the map to fit your application. We have <a href="https://github.com/aws-samples/amazon-location-samples/tree/main/create-custom-map-style&quot;&gt;resources </a>in our sample Github repository to help get you started with editing map styles outside of the basemap design.</p><h2>Installing our application</h2><p>Now that we’ve discussed some different ways to display Amazon Location maps, let’s look at our sample application. First, we must install it. For this post, I’ll use an <a href="https://aws.amazon.com/cloud9/&quot;&gt;AWS Cloud9</a> instance to run the installation commands.</p><h2>Prerequisites</h2><p>Make sure that you have the following prerequisites before continuing:</p><h2>Configuring the application</h2><p>First, we must clone our amazon-location-samples github repository, which contains our sample application. This repo also contains other great examples of getting started with Amazon Location.</p><p>Now we’ll navigate into our application repo.</p><p>Now we’ll install our dependencies.</p><p>Once this is complete, we’ll initialize Amplify.</p><p>Choose the following options when creating the Amplify project:</p><p>For more information about the authentication method, see <a href="https://docs.amplify.aws/cli/start/install/#option-1-watch-the-video-guide&quot;&gt;Install the Amplify CLI</a>.</p><p>Once we’ve initialized our Amplify environment, we can create our cloud resources. This may take a few minutes to fully deploy all of the resources.</p><pre class="unlimited-height-code">Select “Y” when prompted if you would like to continue.</pre><p class="unlimited-height-code">Wait for the deployment to finish.</p><p>Once the resources are created in the AWS Cloud, we can either host the app locally, or publish our frontend to AWS Amplify.</p><p>For local hosting, we run the following command:</p><p class="unlimited-height-code">The following is an example of our application running in AWS Cloud9 locally:</p><div id="attachment_8879" class="wp-caption aligncenter c4"><img aria-describedby="caption-attachment-8879" class="wp-image-8879" src="https://d2908q01vomqb2.cloudfront.net/0a57cb53ba59c46fc4b692527a38a87c78d84028/2022/09/27/mobile_1726_1.png&quot; alt="Cloud9 displaying the application running locally" width="700" height="324" /><p id="caption-attachment-8879" class="wp-caption-text">Figure 1. Cloud9 displaying the application running locally</p></div><p class="unlimited-height-code">For Amplify hosting, we just need the publish command. For more information about Amplify frontend hosting, see <a href="https://docs.amplify.aws/cli/hosting/hosting/&quot;&gt;Hosting Overview</a>.</p><pre class="unlimited-height-code">Select “Y” when prompted.</pre><p class="unlimited-height-code">When this is complete, a URL will be provided which will lead you to the application now running in Amplify.</p><div id="attachment_8880" class="wp-caption alignnone c5"><img aria-describedby="caption-attachment-8880" class="wp-image-8880" src="https://d2908q01vomqb2.cloudfront.net/0a57cb53ba59c46fc4b692527a38a87c78d84028/2022/09/27/mobile_1726_2.png&quot; alt="Amplify deployment complete" width="500" height="90" /><p id="caption-attachment-8880" class="wp-caption-text">Figure 2. Amplify deployment complete</p></div><p>Select the URL and open it in a web browser. Now you’re ready to use the application to compare map styles. This URL can also be shared within your organization for others to use the app.</p><h2>Using the application</h2><p>Now that our application is running in Amplify, we can try loading up some map styles. The application lets you change the pitch of the map, thereby allowing you to utilize 3D styles, as well as a search bar to help find points of interest that you’d like to compare. Next, let’s look at a few examples, and why you might choose one style over the other.</p><h2>Light vs Dark Map</h2><p>Starting with two Esri styles – VectorEsriDarkGreyCanvas, and VectorEsriLightGreyCanvas – in this example we can see that using both maps may be preferable, with a switch within the application to swap between light and dark mode. The information presented on the maps is the same, but the colors are different. We have a <a href="https://github.com/aws-samples/amazon-location-samples/tree/main/react-map-gl-map-styles&quot;&gt;sample application</a> that switches between map styles on our amazon-location-samples Github repository.</p><div id="attachment_8884" class="wp-caption aligncenter c4"><img aria-describedby="caption-attachment-8884" class="wp-image-8884" src="https://d2908q01vomqb2.cloudfront.net/0a57cb53ba59c46fc4b692527a38a87c78d84028/2022/09/27/mobile_1726_3.png&quot; alt="Image showing app comparing Esri Light and Dark styles" width="700" height="325" /><p id="caption-attachment-8884" class="wp-caption-text">Figure 3. Image showing app comparing Esri Light and Dark styles</p></div><h2>Map accuracy</h2><p>Another use case is which maps are more up-to-date. Because Amazon Location uses two data providers, there may be subtle differences between features. In this case, we’re comparing an Esri Navigation style with a Here Explore style. The highway interchange shown was completed in June 2022, and while Here shows the updated configuration, Esri has not updated yet. For applications with very accurate data requirements, you may find that one provider or style provides a more up-to-date or accurate representation in certain areas.</p><div id="attachment_8885" class="wp-caption aligncenter c4"><img aria-describedby="caption-attachment-8885" class="wp-image-8885" src="https://d2908q01vomqb2.cloudfront.net/0a57cb53ba59c46fc4b692527a38a87c78d84028/2022/09/27/mobile_1726_4.png&quot; alt="Image showing app displaying Esri Navigation and Here Explore" width="700" height="326" /><p id="caption-attachment-8885" class="wp-caption-text">Figure 4. Image showing app displaying Esri Navigation and Here Explore</p></div><h2>Natural features</h2><p>Map styles will differ regarding what type of natural features they provide. One style that Amazon Location offers – Esri Vector Topographic – is particularly suited for this use-case. In the following example, looking at Yellowstone National Park, we can see feature names for mountains, as well as elevations. The Esri Navigation maps don’t contain this information. For an application designed around outdoor recreation, the Esri topographic vector map may be the better option.</p><div id="attachment_8886" class="wp-caption aligncenter c4"><img aria-describedby="caption-attachment-8886" class="wp-image-8886" src="https://d2908q01vomqb2.cloudfront.net/0a57cb53ba59c46fc4b692527a38a87c78d84028/2022/09/27/mobile_1726_5.png&quot; alt="Image showing app displaying Esri Streets and Esri Topographic" width="700" height="325" /><p id="caption-attachment-8886" class="wp-caption-text">Figure 5. Image showing app displaying Esri Streets and Esri Topographic</p></div><h2>Public transit</h2><p>For a use-case that may focus on public transit or other navigational aids, certain styles may prove to be a better fit. In this example, we’re looking at Downtown Tokyo, and comparing an Esri Navigation style with the Here Explore style. In this case, Here has more public transit information, including more obvious train lines and train stations.</p><div id="attachment_8887" class="wp-caption aligncenter c4"><img aria-describedby="caption-attachment-8887" class="wp-image-8887" src="https://d2908q01vomqb2.cloudfront.net/0a57cb53ba59c46fc4b692527a38a87c78d84028/2022/09/27/mobile_1726_6.png&quot; alt="image showing app displaying Esri Navigation compared to Here Explore" width="700" height="324" /><p id="caption-attachment-8887" class="wp-caption-text">Figure 6. Image showing app displaying Esri Navigation compared to Here Explore</p></div><h2>Trucking and hazardous material</h2><p>When driving a large vehicle, bridge heights and travel restrictions are incredibly important. When building an application for these use-cases, the Here Explore Truck map is designed specifically for this task. Displaying bridge heights as well as haz-mat restricted roads, the Here Explore Truck maps make sure that you have all of the information that you need for safe travels in a larger vehicle.</p><div id="attachment_8917" class="wp-caption aligncenter c4"><img aria-describedby="caption-attachment-8917" class="wp-image-8917" src="https://d2908q01vomqb2.cloudfront.net/0a57cb53ba59c46fc4b692527a38a87c78d84028/2022/09/27/mobile_1726_7-1.png&quot; alt="Image showing app displaying Here Explore vs Here Explore Truck" width="700" height="325" /><p id="caption-attachment-8917" class="wp-caption-text">Figure 7. Image showing app displaying Here Explore vs Here Explore Truck</p></div><h2>Satellite vs Street maps</h2><p>The final use-case is satellite (or aerial) views compared to a street map. By using the Raster Esri Imagery tiles, we can see aerial views of our locations. This can be useful in precision locating apps, where it must be very obvious where something may be located. One example may be locating a rental scooter that is in a parking lot that isn’t clear on a street map, but is obvious on aerial views.</p><div id="attachment_8918" class="wp-caption aligncenter c4"><img aria-describedby="caption-attachment-8918" class="wp-image-8918" src="https://d2908q01vomqb2.cloudfront.net/0a57cb53ba59c46fc4b692527a38a87c78d84028/2022/09/27/mobile_1726_8-1.png&quot; alt="Image showing app displaying Esri Raster imagery next to Here Explore" width="700" height="325" /><p id="caption-attachment-8918" class="wp-caption-text">Figure 8. Image showing app displaying Esri Raster imagery next to Here Explore</p></div><h2>Cleanup</h2><p>To delete the application, navigate to the application directory:</p><p>then run:</p><p>Select “y” when prompted:</p><h2>Summary and next steps</h2><p>In this post, we discussed how you can use an open-source application to compare Amazon Location map styles side-by-side in AWS Amplify. Using this tool, you can decide which map is the best for your use case, and look at specific points of interest in different styles. Because this is an open-source tool, you can modify the code and add markers, polygons, and other features to compare even farther exactly how your application might look using different map styles.</p><p><strong>About the Authors:</strong></p>