Creating a Clickable Map

Creating a Clickable Map

You’ll need to find an SVG file of the map you’d like to add to your site. These are widely available online from sites like WikiMedia. This must to be an SVG file in order for the map to be clickable.
  1. Example of an SVG file that would work: https://commons.wikimedia.org/wiki/File:H1N1_Texas_map.svg
  2. Make sure you download the original SVG file, not a PNG or a JPG, as the map will not be clickable otherwise.
Open the SVG file with Notepad or another text editor.
You should see a bunch of code. Adjust the height/width as you please.


Go to your sitesBAY site, log into the editor, and make sure you have the template 01 selected.
Choose Design > template 01 > use this design
Select Edit page > edit the Hero image (where the search bar is). “Would you like to display custom HTML?” should be set to “Yes”.
You should now see a text box appear. In the top left corner of this text box, there should be an option to add source code (looks like two brackets). Click that button.
Copy and paste the entire code from the SVG file into the source code box. Hit OK.
Save your changes. Your SVG should now be appearing on your site.

Now, you need to make it clickable. Go back into your source code for your SVG. Find the first line (starts with <svg ) and add these attributes after the word “svg”:
  1. data-clickable="true" data-click="county/zip_code/city"
  2. Make sure to change data-click to match what the map displays, whether that’s cities, zip codes, or counties. In the example above, this map is displaying the counties of Texas, so i would use: data-click=”county”
Save your changes.
Your SVG map should now be fully rendered on your site, all counties/cities/zip codes should have a hover effect, and clicking on each item should then redirect to a property search for that area.
    • Related Articles

    • ADMIN: Creating Customized Lead Sources

      One of the amazing benefits of Lead Routing within ClientBAY is that you have the ability to create and customize lead sources, and promote those lead sources on your brokerage website with a form that you have control over. Creating Custom Lead ...
    • Creating Content

      You can create print or email content within your new Back At You Office account! You will want to create your content BEFORE you begin creating campaigns or action plans. To begin, go to the Marketing on the left-hand side of your screen and then ...
    • ADMIN: Creating Company Calendars

      Creating Company Calendars You can create calendars for the company in the ClientBAY platform. This is a great tool to use to remind agents of upcoming events in the office, like Sales Meetings, CE Classes, etc. Select your Settings icon in the upper ...
    • Creating An Action Plan

      In your ClientBAY platform, you can create Action Plans that you can attach to your contacts/leads and listings. Action Plans are a series of events, automated emails, follow-up requests, etc., that will help you keep track of everything you need to ...
    • Creating Agent Fee Plans

      Agent Fee Plans are used to create fees that are billed to agents on a recurring basis. Multiple Fees can be set up within a Plan that can be scheduled to automatically bill to Agents. The fees can be assessed monthly, bi-monthly, quarterly, ...