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;">
<script>
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 = {};
R.scaleAll(scale);
//Draw Map and store Raphael paths
for (var state in usMap) {
//
var stateSet = R.set();
stateSet.push(R.path(usMap[state]).attr(attr));
//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'});
stateSet.push(label);
usRaphael[state] = stateSet;
}
//Do Work on Map
for (var state in usRaphael) {
usRaphael[state].color = Raphael.getColor();
var name = usMapNames[state];
(function (st, state) {
//console.log(st);
// var labelSet = st[1];
var label = st[1];
// var labelBox = labelSet[0];
var poly = st[0][0];
poly.style.cursor = "pointer";
var showLabelFunction = function (e) {
//st[0].animate({fill: st.color}, 500);
st[0].attr({fill: '#005079'});
label.attr({opacity:1});
label.toFront();
// st.toFront();
// label.toFront();
R.safari();
};
st[0][0].onmouseover = showLabelFunction;
label.onmouseover = function(e) {
label.attr({opacity:1});
label.toFront();
}
// label.onmouseover = showLabelFunction;
//poly.onmouseover = showLabelFunction;
var hideLabelFunction = function () {
//st[0].animate({fill: "#5d82a0"}, 500);
st[0].attr({fill: '#5d82a0'});
//label.hide();
label.attr({opacity:0});
// st.toFront();
R.safari();
};
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);
popup.toFront();
}
</script>
</div>
...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.
Showing 5 reactions
Sign in with
http://jvectormap.com/