Creating a Clickable Map

Creating a Clickable Map


πŸ—ΊοΈ How to Add an Interactive SVG Map to Your Website

By using an SVG (Scalable Vector Graphics) file, you can create a map where counties, cities, or zip codes are clickable and redirect visitors to specific property searches.

πŸ“₯ Phase 1: Prepare Your Map File

  1. Find an SVG: You must use an SVG file for the map to be interactive. Websites like Wikimedia Commons are great resources. 

    • Note: JPG or PNG files will not work for clicking!

  2. Download & Open: Download the Original SVG file.

  3. Get the Code: Right-click the file on your computer and select "Open with..." then choose Notepad (Windows) or TextEdit (Mac). 

  4. Adjust Size: You will see lines of code. You can manually adjust the height and width values in the first few lines to fit your site's layout.

πŸ—οΈ Phase 2: Embed the Map on Your Site

  1. Log In: Access your SitesBAY editor.

  2. Select Template 01: Click Design, select Template 01, and click Use This Design. (This template is optimized for this feature!) 

  3. Edit Hero Image: Click Edit Page and select the Hero Image section (where the search bar is located).

  4. Enable HTML: Find the setting "Would you like to display custom HTML?" and toggle it to Yes. 

  5. Open Source Code: A text box will appear. Click the Source Code icon in the top-left corner (it looks like two brackets: < >).

  6. Paste & Save: Copy the entire code from your Notepad/Text Editor and paste it into the box. Click OK and then Save.

⚑ Phase 3: Make it Clickable

To turn the map into a functional search tool, you need to add a small snippet of data to the code.

  1. Re-open Source Code: Go back into the < > source code box for your SVG.

  2. Find the SVG Tag: Locate the very first line that starts with <svg.

  3. Insert Attributes: Directly after the word svg, paste the following:

    data-clickable="true" data-click="county"

  4. Customize your Tag: Change the data-click value to match your map's data:

    • Use data-click="county" for county maps.

    • Use data-click="city" for city maps.

    • Use data-click="zip_code" for zip code maps.

  5. Final Save: Hit Save. πŸ’Ύ

πŸŽ‰ The Result

Your map should now be fully rendered! When users hover over an area, they will see a hover effect, and clicking will automatically redirect them to a property search for that specific location. πŸ πŸ’¨



    • Related Articles

    • ADMIN: Creating Customized Lead Sources

      One of the most powerful features of ClientBAY is the ability to create, customize, and deploy lead sources directly to your brokerage website. By controlling the lead form, you ensure that the right data is captured and routed to the right team ...

    • Creating Content

      ? Design & Deliver: Creating Marketing Content in ClientBAY Creating high-quality marketing materials is the foundation of your digital strategy. In ClientBAY, you can design everything from property flyers to holiday e-cards. ? Pro Tip: Always ...

    • Creating Mail Groups

      ? Managing Your Mail Groups To send an email to a large group of people (more than 25) within ClientBAY, you'll want to utilize Mail Groups. This allows you to categorize your contacts for quick, efficient messaging. ?️ Creating Your First Mail ...

    • ADMIN: Creating Company Calendars

      ? Creating Company Calendars You can create calendars for the company within the ClientBAY platform. This is a great tool for reminding agents of upcoming office events, such as Sales Meetings, CE Classes, and more! ? Calendar Types There are two ...

    • Creating An Action Plan

      ? Mastering Action Plans in ClientBAY Action Plans are your secret weapon for staying organized. They allow you to attach a curated series of events, automated emails, and follow-up requests to your Contacts, Leads, and Listings. Think of it as your ...