Skip to main content

How can I add an interactive map of the US to my nation?


Official response from

For some of our US customers, it may be helpful to place an interactive map that can link to local chapters or other important information organized by state. We've modified a map to work specifically with your nation to help you do just that. Before you can start making changes to your theme, you will need to first create a custom theme if you don't already have one.

  • Upload the map javascript files to your custom theme files area, under Websites > Theme > Files. You can download a .zip file of all of them here.
  • The us-map-urls.js file is where you can change which URLs the states point to. Currently they point to slugs with the same name as the state.
  • Include all these javascript files to the top of the template of the page where you want the map to appear. 

Here is what the links should look like:

    <script type="text/javascript" src="{{ theme['cufon-yui.js'] }}"></script>

    <script type="text/javascript" src="{{ theme['raphael-min.js'] }}"></script>

    <script type="text/javascript" src="{{ theme['scale.raphael.js'] }}"></script>

    <script type="text/javascript" src="{{ theme['us-map-names.js'] }}"></script>

    <script type="text/javascript" src="{{ theme['us-map-svg.js'] }}"></script>

    <script type="text/javascript" src="{{ theme['us-map-urls.js'] }}"></script>

Then beneath that, add the following code. If you scan the code, you'll see where you can alter the colors of the map. state hover color and state name:

<div id="container" class="padtopmore" align="center" style="height: 396px;">


  window.onload = function () {

//  Cufon.registerFont(Raphael.registerFont({}));

  //was 1000,900

  var scale = 0.66;

    var R = ScaleRaphael("container", 1000, 600),

      attr = {

      "fill": "#5d82a0",

      "stroke": "#fff",

      "stroke-opacity": "1",

      "stroke-linejoin": "round",

      "stroke-miterlimit": "4",

      "stroke-width": "0.75",

      "stroke-dasharray": "none"


    usRaphael = {}, usLabelRaphael = {};


    //Draw Map and store Raphael paths

    for (var state in usMap) {


    var stateSet = R.set();


      //translate too

    var bbox = stateSet[0].getBBox();

    var x = bbox.x + 10;

    var y = bbox.y - 20;

    if(y < 10) {

      y = bbox.y + bbox.height + 20;


    if(x > 800) {

      x -= 100;


      var width = bbox.width;

     var height = bbox.height;


//      var labelSet = R.set();

  var label = R.print(x, y, usMapNames[state], R.getFont("Myriad Pro Semibold"), 30).attr({'text-anchor': 'start', opacity: 0, fill: '#000'});


     usRaphael[state] = stateSet; 


    //Do Work on Map

    for (var state in usRaphael) {

      usRaphael[state].color = Raphael.getColor();

      var name = usMapNames[state]; 

      (function (st, state) {


//    var labelSet = st[1];

    var label = st[1];

//    var labelBox = labelSet[0];

    var poly = st[0][0];    = "pointer";

    var showLabelFunction = function (e) {

          //st[0].animate({fill: st.color}, 500);

      st[0].attr({fill: '#005079'});



//          st.toFront();

//      label.toFront();



         st[0][0].onmouseover = showLabelFunction;

    label.onmouseover = function(e) {




//    label.onmouseover = showLabelFunction;

      //poly.onmouseover = showLabelFunction;

        var hideLabelFunction = function () {

          //st[0].animate({fill: "#5d82a0"}, 500);

        st[0].attr({fill: '#5d82a0'});



//          st.toFront();



     st[0][0].onmouseout = hideLabelFunction;


    var setUrlFunction = function(e) {

      window.location.href = usMapUrls[state];



    poly.onclick = setUrlFunction;

    label.onclick = setUrlFunction;


      })(usRaphael[state], state);





function showPopup(text, x, y, popup, popupText) {

  popupText.opacity = 0;

  popup.animate({opacity: 1, x: x-100, y: y-50 }, 500);

  popupText.x = x+10;

  popupText.y = y+10;

  popupText.animate({opacity: 1}, 500);





...and that's it. Once you make these changes you should have a spiffy map of the US. You will have to manually build out each state page, but this will help you along with the HTML/JS portion of it.

Share this post

Showing 5 reactions

How would you tag this suggestion?
Please check your e-mail for a link to activate your account.