How to Create a Real Estate Listings Map

Here’s a step-by-step guide to create a Real Estate Listings Map using Atlas.co.

Step 1: Prepare and Upload Your Property Data

1. Log in to Atlas.co and open a new project.

2. Upload your property dataset, ensuring it includes information such as:

   • Location (latitude/longitude)
   • Property title and description
   • Price
   • Amenities (e.g. Number of bedrooms and bathrooms)
3. Confirm that all location data is mapped correctly, so properties appear in the right places on the map.

Step 2: Style the Data

Atlas.co offers a variety of styling options to make your data visually engaging.

To display property prices on the map, select Marker Layer as your Visualization type. This option allows you to choose which text and image fields are shown.

Here, I’ll select a text field to display the price of each property. You can also customize the marker color—though for this setup, I’ll keep it simple and leave the markers white.

Step 3: Add a Popup

By default, Atlas.co adds a popup that displays all fields of the feature when clicked. However, to make it more customized and focused on the key details, head into the popup settings.

First, switch the popup style to Cursor instead of Fixed.

Then, remove the layer title and the existing field list to clean up the display.

Next, add an image component to show the property image, a text field for the property name and description, and a button to redirect users to a detailed page for more information.

Step 4: Set Up Your Basemap

Choose a base map style that suits your real estate application, like a street map for an urban setting or a terrain map for a more rural area. You can also add a custom basemap that are styled to suit your brand visuals.

Choose a basemap to make sure your property markers are clearly visible.

Step 5: Build your Interface

Once you’ve finished styling your data, it’s time to design the map application interface you’ll eventually share.

Activate Builder Mode and select a pre-defined layout template with a widget arrangement that suits your needs. Or you can start from a blank canvas.

Add Map Title and Description:

• Adjust the text widget to display the map title (e.g., “Find Your Perfect Home”) and a brief description of what the map shows.

Add the Price Range Filter:

• Drag in a Filter widget and configure it to filter properties based on price (range).

Add a Bedrooms Filter:

• Drag in a Filter widget and select Checkboxes layout to let users filter properties by the number of bedrooms.

Add a Bathrooms Filter:

• Similarly, add another Filter widget with Checkboxes layout for the number of bathrooms.

Next, click on each widget, link your dataset, and map each property field appropriately. For example, in the feature list, connect the image field to display property photos.

Step 6: Create the Right Section for the Property List

Add a new section on the right hand side. Drag and drop a Feature List Widget to the section.

Configure the list to display key details for each property, such as:

• Property title
• Address
• Thumbnail image (if available)
• Price
• Number of bedrooms and bathrooms

Ensure the list updates dynamically based on the filters applied from the left section.

Step 7: Preview and Test Your Map

Use the preview function to test the map and ensure everything works as expected.

Try out the filters to make sure they accurately update the properties shown on the map and in the list.

Check the pop-ups on the property markers to confirm all details are displayed correctly.

Step 8: Publish and Share

Once everything looks great, publish your map.

Copy the shareable link or embed code to include the map on your website or share it directly with users.

Bonus: Customize Further

• Add sorting options to the property list (e.g., sort by price, newest listings, etc.).
• Include additional filters like property type or amenities to make the map even more helpful.

By following these steps, you’ll create a functional and visually appealing Property Listings Map with Atlas, giving users an easy way to explore and filter properties based on their preferences.