<article typeof="TechArticle" vocab="https://schema.org/"> 
      <meta content="en-US" property="inLanguage"></meta> 
      <meta content="https://d2908q01vomqb2.cloudfront.net/b6692ea5df920cad691c20319a6fffd7a4a766b8/2023/10/24/multi-layer-maps-opensearch.jpg" property="image"></meta> 
       
       
      <section property="articleBody"> 
       <p>With the release of <a href="https://aws.amazon.com/opensearch-service/" rel="noopener" target="_blank">Amazon OpenSearch Service</a> 2.5, you can create maps with multiple layers to visualize your geographical data. You can build each layer from a different index pattern to separate data sources. Organizing the map in layers makes it more straightforward to visualize, view, and analyze geographical data. The layering also helps fetch data from various sources, view different data at different zoom levels, and continuously refresh data for a real-time dataset. Additionally, in OpenSearch 2.6, you can add <a href="https://opensearch.org/docs/latest/dashboards/visualize/maps/" rel="noopener" target="_blank">multi-layer maps</a> to dashboard panes within OpenSearch Dashboards, which makes it more straightforward to analyze your geospatial data in the context of other visualizations. OpenSearch Service provisions all the resources for your OpenSearch cluster so you can focus on building the business value through maps and other features of OpenSearch rather than spending time managing your deployment.</p> 
       <p>In this post, we show how to use multi-layer maps in OpenSearch Service.</p> 
       <h2>Solution overview</h2> 
       <p>The multi-layer map helps users visualize data and gain insights using specific layers and zoom levels to help emphasize key messages. For our use case, we use multi-layer maps to support an example real-estate application. Your index will have fields such as location, address, availability, number of bedrooms, price, and more. Initially, we develop a map with state boundaries with aggregated data for an overview. As the user zooms in, they’ll see city boundaries and postal codes. As the user continues to zoom, they’ll see each house with information like the price, number of bedrooms, and so on. You will build various data layers from different data sources to accomplish this task. You can also add filter queries; for example, to only show properties that are available.</p> 
       <h2>Prerequisites</h2> 
       <p>Complete the following prerequisite steps to configure the sample data:</p> 
       <ol> 
        <li><a href="https://docs.aws.amazon.com/opensearch-service/latest/developerguide/gsgcreate-domain.html" rel="noopener" target="_blank">Create an OpenSearch Service domain</a> (version 2.7 or higher).</li> 
        <li>Download the file <a href="https://quip-amazon.com/-/blob/IaE9AA1XN5O/gZjDlDTLpljDGUQkLc86qg?name=bulk_request_realestate.txt" rel="noopener" target="_blank">bulk_request_realestate.txt</a>.</li> 
        <li>Copy and paste the entire contents of the downloaded file into the OpenSearch Dashboards console.</li> 
        <li>Run the commands.</li> 
       </ol> 
       <p><img alt="" height="1388" src="https://d2908q01vomqb2.cloudfront.net/b6692ea5df920cad691c20319a6fffd7a4a766b8/2023/10/16/bdb-3829-img1.png" width="2834"></img></p> 
       <p>These commands create the <code>realestate</code> index and upload records into the catalog.</p> 
       <p>Now let’s visualize this data in a multi-layer map.</p> 
       <h2>Add layers</h2> 
       <p>To create your map and add layers, complete the following steps:</p> 
       <ol> 
        <li>On OpenSearch Dashboards, in the navigation pane, under <strong>OpenSearch plugins</strong>, choose <strong>Maps</strong>.</li> 
        <li>Choose <strong>Create map</strong>.</li> 
       </ol> 
       <p>You will see a default map (or basemap) loaded on the page with a <strong>Layers</strong> pane on the left. This serves as a canvas for the data. The OpenSearch basemap utilizes vector tiles, resulting in quicker loading speeds and seamless zooming compared to raster tile maps. It effectively accommodates zoom levels ranging from 0–22. 0 is the most zoomed out with the global view, and zoom level 22 is roughly a half-inch per pixel resolution. Any additional layers you add will appear in this pane.</p> 
       <p><img alt="" height="1080" loading="lazy" src="https://d2908q01vomqb2.cloudfront.net/b6692ea5df920cad691c20319a6fffd7a4a766b8/2023/10/16/bdb-3829-img2.gif" width="1728"></img></p> 
       <ol start="3"> 
        <li>Choose <strong>Add layer</strong>.</li> 
        <li>In the prompt, choose the option to add documents for the data layer.</li> 
        <li>Under <strong>Documents</strong>, choose the index you created (<code>realestate</code>) as the data source.</li> 
        <li>For the <strong>geospatial </strong>field, choose the field containing geopoints (such as <code>location</code> in this example).</li> 
        <li>Keep the remaining settings at their default values, then choose <strong>Update</strong>.</li> 
       </ol> 
       <p>In the <strong>Layers</strong> pane, a newly generated layer named <strong>New Layer 2</strong> will be visible. Additionally, you will observe the presence of all geopoints on the map (green dots in the following screenshot).</p> 
       <p><img alt="" height="1080" loading="lazy" src="https://d2908q01vomqb2.cloudfront.net/b6692ea5df920cad691c20319a6fffd7a4a766b8/2023/10/16/bdb-3829-img3.gif" width="1728"></img></p> 
       <h2>Update the layer name and enable tooltips</h2> 
       <p>For an overview of the various configuration choices accessible for the layers, choose <strong>New Layer 2</strong>. This action opens another pane containing three tabs: <strong>Data</strong>, <strong>Style</strong>, and <strong>Settings</strong>. Let’s modify the layer’s name to something more relevant and enable tooltips. Complete the following steps:</p> 
       <ol> 
        <li>On the <strong>Settings </strong>tab, replace <code>New Layer 2</code> with <code>realestate-data</code> in the <strong>Name</strong> field.</li> 
        <li>On the <strong>Data</strong> tab, scroll down to <strong>Tool tips</strong>, and select <strong>Tool tips</strong>.</li> 
        <li>Enter <code>region</code> as the tooltip.</li> 
        <li>Choose <strong>Update</strong>.</li> 
       </ol> 
       <p>The altered name should now be visible in the left pane. The geopoints themselves don’t convey any information. However, with tooltips enabled, you can access comprehensive information depending on the fields selected. As you hover over the geopoints, you will observe the chosen tooltip information—in this instance, <code>region CA</code>.</p> 
       <h2>Adjust zoom levels</h2> 
       <p>The essence of this functionality lies in the ability to observe your data through distinct layers at varying zoom levels. To achieve this, generate a layer using the same process as before. The following example shows a new layer (<code>locality</code>) featuring tooltips displaying locality and postal code. You can also choose the color of your geographical points on the <strong>Style </strong>tab. On the <strong>Settings</strong> tab, you’ll encounter options for zoom levels, allowing you to input minimum and maximum values—like 4 and 6, for instance. Consequently, this indicates that the layer will be visible exclusively within this range of zoom levels.</p> 
       <p><img alt="" height="1080" loading="lazy" src="https://d2908q01vomqb2.cloudfront.net/b6692ea5df920cad691c20319a6fffd7a4a766b8/2023/10/16/bdb-3829-img4.gif" width="1728"></img></p> 
       <p>In the <strong>Layers </strong>pane, you can observe three layers alongside the <code>locality</code> layer created in the previous step. A notification will indicate “Layer is hidden outside of zoom range 1-2.â€ This layer becomes visible as you zoom in.</p> 
       <p><img alt="" height="714" loading="lazy" src="https://d2908q01vomqb2.cloudfront.net/b6692ea5df920cad691c20319a6fffd7a4a766b8/2023/10/16/bdb-3829-img6.png" width="754"></img></p> 
       <p>The <code>realestate-data</code> layer is set with a default zoom range of 0–22, ensuring visibility across all levels unless manually hidden. The <code>locality</code> layer is configured to be visible exclusively within the zoom range of 1–2.</p> 
       <p>As shown in the following screenshot, the tooltip for the <code>realestate-data</code> layer remains visible even after the fourth zoom level. To access the tooltip information for the <code>locality</code> layer, choose the eye icon next to <code>realestate-data</code> to manually conceal this layer. Once completed, hovering over the geopoints will reveal the tooltip details for <code>locality</code> (postal code and locality).</p> 
       <p><img alt="" height="1080" loading="lazy" src="https://d2908q01vomqb2.cloudfront.net/b6692ea5df920cad691c20319a6fffd7a4a766b8/2023/10/16/bdb-3829-img7.gif" width="1728"></img></p> 
       <p>The following are some key points to consider:</p> 
       <ul> 
        <li>Each layer can be established with distinct colors for its geographical points. For instance, the <code>realestate-data</code> layer is depicted in green, while the <code>locality</code> layer uses orange.</li> 
        <li>It’s possible to observe geopoints in a color that wasn’t directly chosen. In the following screenshot, brown is visible due to the overlapping of two layers at the same zoom level.</li> 
        <li>You can observe the color shift to the layer’s designated color—orange—after <code>realestate-data</code> is manually hidden, because there’s no longer an overlap between the layers.</li> 
       </ul> 
       <p>You can generate an additional layer designed to display tooltip data such as the count of beds, baths, price, and square footage. This layer will be active within the zoom range of 3–4.</p> 
       <p><img alt="" height="1040" loading="lazy" src="https://d2908q01vomqb2.cloudfront.net/b6692ea5df920cad691c20319a6fffd7a4a766b8/2023/10/16/bdb-3829-img8.png" width="1596"></img></p> 
       <p>To save your project, choose <strong>Save</strong>. Enter a title, such as <code>realestate-multilayer-map</code>, then choose <strong>Save </strong>again. Your multilayer map is now successfully saved!</p> 
       <p><img alt="" height="1080" loading="lazy" src="https://d2908q01vomqb2.cloudfront.net/b6692ea5df920cad691c20319a6fffd7a4a766b8/2023/10/16/bdb-3829-img9.gif" width="1728"></img></p> 
       <h2>Exploring the multi-level map</h2> 
       <p>After you have established all the layers, take note of how the layers become visible or invisible at each zoom level. Observe the dynamic adjustments in tooltip information that correspond to these changes as you zoom.</p> 
       <p><img alt="" height="1080" loading="lazy" src="https://d2908q01vomqb2.cloudfront.net/b6692ea5df920cad691c20319a6fffd7a4a766b8/2023/10/16/bdb-3829-img10.gif" width="1728"></img></p> 
       <h2>Add a filter</h2> 
       <p>After you have generated multiple layers and successfully visualized your geopoints, you might find that you are interested in specific properties, such as within a particular price range.</p> 
       <p>To add a filter at layer level, complete the following steps:</p> 
       <ol> 
        <li>In the right pane, on the <strong>Data </strong>tab, choose <strong>Filters</strong>.</li> 
        <li>Input price as the filter criteria.</li> 
        <li>Select <strong>is between</strong> as the operator.</li> 
        <li>Enter 800000 for the start of the range and 1400000 for the end of the range.</li> 
        <li>Choose <strong>Save </strong>to update the layer.</li> 
       </ol> 
       <p>You’ll immediately observe the filter taking effect, resulting in the display of only the relevant data matching the filter.</p> 
       <p><img alt="" height="1080" loading="lazy" src="https://d2908q01vomqb2.cloudfront.net/b6692ea5df920cad691c20319a6fffd7a4a766b8/2023/10/16/bdb-3829-img11.gif" width="1728"></img></p> 
       <p>An alternative method to establish a filter involves drawing shapes on the map, such as rectangles or polygons. In this instance, you’ll be utilizing the polygon option. (For API-based filtering, refer to APIs).</p> 
       <ol> 
        <li>Choose the polygon icon on the right side of the map.</li> 
        <li>For <strong>Filter label</strong>, enter a name for the filter.</li> 
        <li>Draw the shape over the map area that you want to select.</li> 
        <li>For a polygon, select any starting point on the map (this point becomes a polygon vertex) and hover (do not drag) to each subsequent vertex and select that point.</li> 
        <li>Make sure to select the starting point again to close the polygon, as shown in the following screenshot.</li> 
       </ol> 
       <p><img alt="" height="1080" loading="lazy" src="https://d2908q01vomqb2.cloudfront.net/b6692ea5df920cad691c20319a6fffd7a4a766b8/2023/10/16/bdb-3829-img12.gif" width="1728"></img></p> 
       <h2>Add a map to a dashboard</h2> 
       <p>You can add this map to an existing or a new dashboard. Complete the following steps:</p> 
       <ol> 
        <li>On OpenSearch Dashboards, choose <strong>Create</strong> and choose <strong>Dashboard</strong>.</li> 
       </ol> 
       <p><img height="1080" loading="lazy" src="https://d2908q01vomqb2.cloudfront.net/artifacts/DBSBlogs/BDB-3829/bdb-3829-img13.gif" width="1728"></img></p> 
       <ol start="2"> 
        <li>Select <strong>Add an existing dashboard</strong>.</li> 
        <li>Choose <code>realestate-multilayer</code> from the list.</li> 
       </ol> 
       <p>You can see the new visualization on your dashboard.</p> 
       <ol start="4"> 
        <li>Choose <strong>Save </strong>and enter a title for the dashboard.</li> 
       </ol> 
       <h2>Conclusion</h2> 
       <p>In this post, you effectively established multi-layer maps for data visualization, analyzed geographic data, observed various data at varying zoom levels, added tooltips for supplementary data visualization, and added multi-layer maps to dashboard panes within OpenSearch Dashboards to easily analyze your geospatial data. Refer to <a href="https://opensearch.org/docs/latest/dashboards/visualize/maps" rel="noopener" target="_blank">Using maps</a> for an alternative use case and detailed information about map features.</p> 
       <hr></hr> 
       <h3>About the authors</h3> 
       <p><img alt="" height="96" loading="lazy" src="https://d2908q01vomqb2.cloudfront.net/b6692ea5df920cad691c20319a6fffd7a4a766b8/2023/08/03/aish.jpg" width="100"></img><strong>Aish Gunasekar</strong> is a Specialist Solutions Architect with a focus on Amazon OpenSearch Service. Her passion at AWS is to help customers design highly scalable architectures and help them in their cloud adoption journey. Outside of work, she enjoys hiking and baking.</p> 
       <p><img alt="" height="133" loading="lazy" src="https://d2908q01vomqb2.cloudfront.net/b6692ea5df920cad691c20319a6fffd7a4a766b8/2023/08/24/satnandi.jpeg" width="100"></img><strong>Satish Nandi </strong>is a Senior Technical Product Manager for Amazon OpenSearch Service.</p> 
       <p><strong><img alt="" height="100" loading="lazy" src="https://d2908q01vomqb2.cloudfront.net/b6692ea5df920cad691c20319a6fffd7a4a766b8/2023/07/21/image007-4.png" width="100"></img>Jon Handler</strong> is a Senior Principal Solutions Architect at Amazon Web Services based in Palo Alto, CA. Jon works closely with OpenSearch and Amazon OpenSearch Service, providing help and guidance to a broad range of customers who have search and log analytics workloads that they want to move to the AWS Cloud. Prior to joining AWS, Jon’s career as a software developer included 4 years of coding a large-scale, ecommerce search engine. Jon holds a Bachelor of the Arts from the University of Pennsylvania, and a Master of Science and a PhD in Computer Science and Artificial Intelligence from Northwestern University.</p> 
        
      </section> 
       
       
       
     </article>