In the following tutorial we will create a map of USA with Texas state working as a clickable link redirecting a user to Google.
Go to MapSVG, click on
Choose SVG file... and type in "usa.svg". You'll see suggestions with file names containing "usa.svg" string. Choose
Menu > Regions. This section contains all clickable objects from SVG file
(called "Regions" in MapSVG) - which are US
states in case of USA map. Let's type "US-TX" into the search box to find Texas state.
Let's change Texas color to make it easier to find it on the map. Click on the
button and set any color with color picker.
Now we need to add a custom field into our Regions to store URLs for links.
Edit fields icon in the toolbar.
What you see now is a Form Builder. Click on a
Text button at the bottom of Form Builder to add a new field.
Change field title to "Link" and click
Save fields button. Then switch back to the list of Regions
- click on
List button in the toolbar.
Click on the row with US-TX state. A form with "Link" field you've just created appears.
Enter URL "http://google.com" into it and click
Now that we have a link stored in a custom field of a Region we need to do a final step:
tell MapSVG that click on a Region should work as click on a link. Go to "Actions" tab,
Region click > Go to link stored in checkbox and choose your custom field from
Please note that links are disabled in the live preview - so we need to add our map to a WordPress page
to see how the link works. Save your map and go to
Pages > Add new.
Click on the marker icon in WordPress text editor toolbar. Marker icon is visible only when
editor is switched to "Visual" mode.
You will see a pop-up window with all maps you have created in MapSVG. Click on USA map we've just created.
MapSVG shortcode will be inserted into the page. Click on
Publish button and see your page.
Click on the Texas state to see if link is working.
Next tutorial: 4. Directory