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 Websites 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. 🏠💨