MapSVG 3.2.x tutorial

3. Regions as links

Watch a video

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 /geo-calibrated/usa.svg file.

Switch to 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. Click on 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 OK.

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, select Region click > Go to link stored in checkbox and choose your custom field from drop-down list.

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