SVG Maps in HTML

A work colleague approached me the other day with a requirement to build a flashy world map interface, minus the flash.

I thought about the requirements for a while before I turned to my Green Men with the same question.

They came back with SVG Vector images.

What are SVG Maps in HTML?

SVG is a way of visually displaying an image, without actually having the image available as a file. 

Instead the image is drawn by the browser through a series of coordinates that are fed into, or loaded along with, the page.  This allows an image, like vector images, to scaled depending on the media rather then the predefined limits otherwise imposed by the short sighted creator.

How do I create SVG Maps in HTML with Mysource Matrix?

It's not to difficult at all to get an image of Australia into your browser, and a scalable image at that.

First of all, take a look at the example SVG file on its own.....

SVG Image using Mysource Matrix

To get that image you will need the following assets

• Folder (titled with country name)
• Data source assets (created under the folder)
• Metadata Schema (will hold the vector points and should be cascaded from the folder, inherited by the data source assets  )
• Asset Listing (listing data source assets with the folder as the rootnode, this needs a URL so must be created within the site)
• Blank Design (to correct the MIME type of the SVG file)
• Blank Paint Layout (to avoid any unwanted HTML)
• Standard Page  (to hold the Vector Image object)

Step 1 - preparation

• Create the folder outside of the site asset (you don't need it to have a url). I've created a folder called Australia.
• Create the Metadata Schema with only one value called coordinates.  This should be a text value with multiple lines.
• Create a datasource asset for each of the Australian states and territories.  In the MediaWiki example I used for this it also include Bathurst Island, Fraser Island etc etc, but I decided to just keep to the mainland (and Tassy ;) Remember to name them with their initials and no spaces as the title will be later used for the SVG group IDs.
  
• Create an Asset Listing, listing data source assets, direct links, and use the Australia folder as the root node.
• Create a Blank Design called........ blank design.

Step 2 - set up the assets

Folder & Data source Assets

Apply the Metadata Schema to the Australia Folder and cascade across all of the assets.  Next, visit this site http://upload.wikimedia.org/wikipedia/commons/b/bf/Australia_map_States.svg and view the source of the svg image. 

You want to copy the contents of the

<path id="collect-all-the-content-here" />

for each of the states, and enter it into the corresponding state coordinate metadata value.

Asset Listing

Open the Asset listing you have created and go into the default type format.  **Note that you should define your display formats when using the asset listing asset, but for the sake of this example it's not required**

Include the following HTML into the type format 

Web Paths" and update the web path to name-of-file.svg

Design File

Right click on the Blank Design file that you created earlier, select edit parse file and paste in the following items

<MySource_PRINT id_name="__global__" var="content_type" content_type="image/svg+xml" />

<MySource_AREA id_name="page_body" design_area="body" />

The first line sets the mime headers to image/svg+xml instead of text/html on any matrix asset that has this design applied.  The second line simple prints the assets contents, nothing more and nothing less.... and hence the name "blank".

Now that you've created the design, remember to go back to your Asset Listing and set the override design (right click settings) to this this blank design.

That's just about it.  If you've followed these steps correctly you should be able to preview your SVG Country image using the URL set on the asset listing like this SVG Australia Map example.

**Please note that if you're getting any unwanted HTML in the SVG image check that you haven't got a Paint Layout cascading and causing you issues.  If so, apply the blank paint layout you created earlier and remember that everything should be set to RAW HTML for type formats and page contents.**

Show SVG Image with HTML

The final step is to include your SVG within the page you require.

For this you only need one line added to any standard page.

<object data="./?a=assetid-of-svg-asset-listing" type="image/svg+xml" height="700" width="700">

Is there anything else I can do with SVG?

Does a bear shit in the woods?

There is an ever ending number of cool things that can be done with SVG.  We have only covered a basic example here for a proof of concept.

We are going to be taking this a lot further and pushing the realms of flash interactivity, and with the native support of SVG within the new HTML5 specification you won't even need to include the <object> tags to display within the browser.

Check back here for more updates, and enjoy below the SVG image with Mysource Matrix.